1.CSS的三大特性
1）层叠性：样式相同的就近选择，样式不同的互不影响
2）继承性：子类会继承父类的样式
3）优先级：
选择器相同，按照层叠性执行
选择器相同按照选择器权重执行， 选择器权重：！important > 行内样式 style="" > ID选择器 > 类选择器，伪类选择器 > 元素选择器 > 继承或者*
2、盒模型（boder边框，content内容，padding内边距，magrin外边距）
1）border边框
border-边框宽度
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;
800px;
border: 1px solid blue;
margin: 0 auto;
}
.damao {
float: left;
300px;
height: 200px;
background-color: purple;
}
.ermao {
float: left;
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属性）