教育平台oss做视频网站,重庆建筑人员证书查询,酒店预订网站模板,单品网站模板本期是CSS基础的最后一篇~ 目录
一.border属性
二.边框属性复合写法
三.CSS修改表格标签
四.内边距属性
五.外边距属性
六.其他杂例
1.盒子元素水平居中
2.清除网页内外元素边距
3.外边距的合并与塌陷 4.padding不会撑大盒子的情况
七.综合案例——新浪导航栏仿真 … 本期是CSS基础的最后一篇~ 目录
一.border属性
二.边框属性复合写法
三.CSS修改表格标签
四.内边距属性
五.外边距属性
六.其他杂例
1.盒子元素水平居中
2.清除网页内外元素边距
3.外边距的合并与塌陷 4.padding不会撑大盒子的情况
七.综合案例——新浪导航栏仿真 一.border属性
border属性是用于指定元素边框的样式、宽度和颜色。可以通过设置一到四个值来定义上、右、下、左四个边框的样式。例如使用border-top属性可以设置上边框的样式、宽度和颜色。border属性的初始值是none表示没有边框。边框样式可以是实线、虚线、点状等等可以使用dotted、dashed、solid等值来定义不同的样式。边框的宽度可以通过设置像素值来控制例如1px代表1像素的宽度。边框的颜色可以使用颜色名称或者十六进制值来定义例如red代表红色。在border属性中还可以通过设置border-radius来定义边框的圆角效果。 .bian {border-width: 5px;border-color: brown;border-style: solid;}img {border-width: 5px;border-color: rgb(236, 202, 6);border-style: solid;}
大部分元素均可以使用边框选择器如下 二.边框属性复合写法
边框的复合写法是通过使用border属性来同时设置边框的宽度、样式和颜色。具体语法是border: 宽度 样式 颜色;。例如border: 1px solid black; 表示边框宽度为1像素样式为实线颜色为黑色。 div{width: 500px;height: 500px;background-color: lawngreen;border-style: dashed;border-color: lightcoral;border-width: 5px;border-top-color: lightseagreen;}.bian{border: 3px solid greenyellow;} 三.CSS修改表格标签
CSS同样可以用来修改表格标签table默认的样式通过对table标签抑或td标签等均可实现~ table{width: 500px;height: 249px;text-align: center;}table,td,th{border: 1px solid palevioletred;border-collapse: collapse;} 四.内边距属性
内边距padding顾名思义针对的是元素内部的样式即内部元素相对于当前元素的距离 div{width: 500px;height: 500px;background-color: plum;font-size: 30px;color: red;padding-left: 20px;padding-right: 20px;padding-top: 230px; }
如下图文本与边距的距离受到了padding属性的控制~ 五.外边距属性
与padding相反外边框属性时针对当前元素与上一级元素之间的距离等属性~ style.one{width: 200px;height: 200px;background-color: red;margin-bottom: 20px;}.two{ width: 200px;height: 200px;background-color: royalblue;margin-bottom: 20px;margin-top: 20px;margin-left: 200px;}.three{width: 200px;height: 200px;background-color: seagreen;/* margin-top: 20px; */}/* 此处已然实现了外边框的合并 *//style
效果如下 六.其他杂例
1.盒子元素水平居中 div{width: 900px;height: 200px;background-color: chartreuse;line-height: 200px;text-align: center;font-size: 40px;color: black;/* margin: 0 auto; */}
原理很简单即行高等于行间距~ 2.清除网页内外元素边距
细心的小伙伴一定会发现网页整体本身存在着一定的内外边距如下并没有顶住上左的边界 如下的通配符选择器可以实现内外边距的清零 *{margin: 0;padding: 0;} 3.外边距的合并与塌陷
margin合并是指在垂直方向上相邻的两个盒子的外边距会合并为一个外边距的现象。当一个盒子的上边距与下边距相遇时它们会合并成一个较大的外边距。
而margin塌陷是指在垂直方向上父子元素之间的外边距不是简单地相加而是取它们之间的最大值作为最终的外边距值。这样会导致子元素的外边距无法完全展示因为它们的外边距被父元素的外边距所替代。
找来截图给大家直观地看一下 如下一段代码案例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 200px;height: 200px;background-color: blue;}.one{margin-bottom: 20px;}.two{margin-top:10px;/* 因为one的下边距大与two的上边距所以会发生垂直合并即选更大的20px作为两者之间的外边距。 */}.div2{width: 400px;height: 400px;background-color: brown;border: 5px solid black;}.three{margin-top: 50px;}/style
/head
bodydiv classone/divdiv classtwo/divdiv classdiv2 twodiv classthree/div!-- 50大于父类盒子的外边距故会导致父类大盒子一起塌陷。 --!-- 为父类增加边框则父类不会随子类一起改变外边距从而避免了塌陷问题。 --!-- 这里子类盒子与父类的最外层其实是50-1040px --/div!-- 盒子的嵌套一直就是最难的部分还需要再度琢磨 --
/body
/html 4.padding不会撑大盒子的情况
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleh1{background-color: plum;height: 50px;padding: 30px;}div{height: 90px;background-color: powderblue;}p{padding: 30px;background-color: purple;}/style
/head
bodyh1我是没有撑大的盒子标签/h1divp不会将盒子撑大。/p/div
/body
/html
七.综合案例——新浪导航栏仿真
做了一个案例玩运用了大部分基础知识大家可以参考看看~
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{height: 41px;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;background-color: #fcfcfc;line-height: 41px;}div a{font-size: 12px;color: #4c4c4c;text-decoration: none;display: inline-block;height: 41px;padding: 0 20px;}a:hover{background-color:#eee;color: #ff8500;}/style
/head
bodydiv classnava href#新浪导航/aa href#手机新浪网/aa href#移动客户端/aa href#微博/aa href#PC端/a/div
/body
/html
