CSS基础2
1.CSS的三大特性
1)层叠性:样式相同的就近选择,样式不同的互不影响
2)继承性:子类会继承父类的样式
3)优先级:
选择器相同,按照层叠性执行
选择器相同按照选择器权重执行, 选择器权重:!important > 行内样式 style="" > ID选择器 > 类选择器,伪类选择器 > 元素选择器 > 继承或者*
2、盒模型(boder边框,content内容,padding内边距,magrin外边距)
1)border边框
border-width:边框宽度
border-style:边框样式(solid实线边框,dashed 虚线边框,dotted电线边框)
border-color:边框颜色
border:宽度 样式 颜色(复合写法,无先后顺序)
border-collapse: collapse;合并相邻的边框
2)padding 内边距 padding:20PX顺序为上右下左, padding:20px 30px 上下20px,左右30px,padding:20px 30px 10px 上30px,左右20px,下10px
3)margin 外边距
注:内边距和边框会影响盒子的大小,margin不会影响
3、元素水平居中
1)块元素水平居中:将外边距左右边距设置为auto
2)内元素和行内块元素水平居中:在父元素样式中设置 text-align:center
4、外边距垂直塌陷处理:
1)给子块元素添加边框
2)给父元素添加内边距
3)设置over-flow:hidden
5、无序排列,去掉li前面的. :list-stylw:none
6、圆角边框:border-radius:length
7、盒子阴影:box-shadow:h-shadow v-shadow blur spread color inset
1)h-shadow:水平阴影的位置,允许负值
2)v-shadow:垂直阴影的位置,允许负值
3)blur:模糊距离
4)spread:阴影的尺寸
5)color:阴影颜色
8、网页布局准则:
1)多个块级元素纵向排列找标准流
2)多个块级元素横向排列找浮动
9、浮动:float
(1)浮动注意事项:
1)浮动可以和标准量搭配使用,父盒子采用标准流,子盒子采用浮动
2)一浮全浮
(2) 清除浮动
1)额外表前阀:clear:both清除浮动:在最后一个浮动盒子后添加块级标签,并添加clear:both属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>清除浮动之额外标签法</title> <style> .box { width: 800px; border: 1px solid blue; margin: 0 auto; } .damao { float: left; width: 300px; height: 200px; background-color: purple; } .ermao { float: left; width: 200px; height: 200px; background-color: pink; } .footer { height: 200px; background-color: black; } .clear { clear: both; } </style> </head> <body> <div class="box"> <div class="damao">大毛</div> <div class="ermao">二毛</div> <div class="ermao">二毛</div> <div class="ermao">二毛</div> <div class="ermao">二毛</div> <!-- <div class="clear"></div> --> <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 --> <span class="clear"></span> </div> <div class="footer"></div> </body> </html>
2)父元素添加overflow:hidden属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>为什么需要清除浮动</title> <style> .box { /* 清除浮动 */ overflow: hidden; width: 800px; border: 1px solid blue; margin: 0 auto; } .damao { float: left; width: 300px; height: 200px; background-color: purple; } .ermao { float: left; width: 200px; height: 200px; background-color: pink; } .footer { height: 200px; background-color: black; } </style> </head> <body> <div class="box"> <div class="damao">大毛</div> <div class="ermao">二毛</div> </div> <div class="footer"></div> </body> </html>
3)伪元素清除:给父盒子添加clearfix类,同时添加
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>伪元素清除浮动</title> <style> .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7 专有 */ *zoom: 1; } .box { width: 800px; border: 1px solid blue; margin: 0 auto; } .damao { float: left; width: 300px; height: 200px; background-color: purple; } .ermao { float: left; width: 200px; height: 200px; background-color: pink; } .footer { height: 200px; background-color: black; } </style> </head> <body> <div class="box clearfix"> <div class="damao">大毛</div> <div class="ermao">二毛</div> </div> <div class="footer"></div> </body> </html>
4)双伪元素:在父元素中添加类clearfix,同时添加样式
.clearfix:before,
.clearfix:after {
content: ""; display: table;
}
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>伪元素清除浮动</title> <style> .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .box { width: 800px; border: 1px solid blue; margin: 0 auto; } .damao { float: left; width: 300px; height: 200px; background-color: purple; } .ermao { float: left; width: 200px; height: 200px; background-color: pink; } .footer { height: 200px; background-color: black; } </style> </head> <body> <div class="box clearfix"> <div class="damao">大毛</div> <div class="ermao">二毛</div> </div> <div class="footer"></div> </body> </html>
10、元素溢出:overflow
1)overflow:visible (默认值,内容不会被修剪,会呈现在元素框之外)
2)overflow:hidden (内容被修剪,其余内容不可见)
3)overflow:scroll (内容被修剪,但是显示滚动条查看其余元素)
4)overflow:auto (内容被修剪,但是显示滚动条查看其余元素)
5)overflow:inherit (规定从父盒子继承overflow属性)