CSS:层叠样式表(Cascading Style Sheets)
1.css的特征
2.css的引入
3.选择器
4.伪类选择器
5.伪元素选择器
6.字体样式 文本样式 背景属性
7.盒模型 border margin padding
8.display visibility 属性
9.float 属性
10.position z-index 属性
11.网页布局
一、css的特征：
1.css解决了两个问题：
1.将HTML页面的内容与样式分离。
2.提高web开发的工作效率。
2.css的优势:
1.内容与表现分离
2.网页的表现统一，容易修改
3.丰富的样式，使页面布局更加灵活
4.减少网页的代码量，增加网页浏览器速度，节省网络带宽
5.运用独立页面的css,有利于网页被搜索引擎收录
3.css语法：
1.选择器；2.声明=属性+值；
/*这是注释*/
注：
简写
body {
background-color: red;
backgraound-image: url(xx.png);
background-size: 300px 300px;
background-repeat: no-repeat;
background-position: center
}
body {
background: red url(xx.png) no-repeat fixed center/300px 300px;
}
七、盒模型 border margin padding
HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒子模型。
1.border
border-top-width: 5px;
border-bottom-width: 10px;
border-left-width: 15px;
border-right-width: 20px;
border-top-color: red;
border-bottom-color: yellowgreen;
border-left-color: yellow;
border-right-color: blue;
border-top-style: solid; 实线
border-bottom-style: dashed; 矩形虚线边框
border-left-style: dotted; 点状虚线边框
border-right-style: double; 两条实线
四个值 上 右 下 左
border-style: dotted dashed double solid;
border-width: 5px 10px 15px 20px;
border-color: blue red yellow slateblue;
三个值 上 左右 下
border-style: dotted double solid;
border-width: 5px 10px 20px;
border-color: blue yellow slateblue;
两个值 上下 左右
border-style: dotted solid;
border-width: 5px 20px;
border-color: blue yellow;
一个值 上下左右
border-style: dotted;
border-width: 20px;
border-color: blue;
简写：
border: none 无边框
border: 10px solid yellow;
2.margin
外边距: 控制元素与元素之间的距离
注意：margin会改变实际大小，背景色不会渲染到margin区域 这个区域会以空白显示，但是也属于盒子的一部分。
margin-top: 20px;
margin-left: 40px;
margin-bottom: 20px;
margin-right: 40px;
上 右 下 左
margin: 20px 30px 40px 50px;
上 左右 下
margin: 20px 30px 40px;
上下 左右
margin: 20px 40px;
上下左右
margin-bottom: 50px;
水平居中 盒子元素
margin: 0 auto;
特殊性：
水平方向没有这种特性；垂直方向的特殊性；
当两个垂直外边距相遇时，会形成一个外边距，称为 外边距合并，已大的为基准！！
解释：
所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之（以最大的为基准）。
注意：父子级盒子 嵌套 设置外边距 会形成外边距合并，影响页面布局。
解决办法：
(子债父还）
1.父级或子元素使用浮动或者绝对定位absolute,浮动或绝对定位不参与margin的折叠。
2.父级overflow:hidden
3.父级设置padding(破坏非空白的折叠条件)
4.父级设置border
3.padding
内边距：控制内容到边框的距离,内边距会扩大元素所在的区域,width+padding;
注意：为元素设置内边距，只能影响自己，不会影响其他的元素，padding不支持负值。
padding-left: 20px;
padding-top: 30px;
padding-right: 40px;
padding-bottom: 40px;
padding: 10px 20px 30px 40px;
padding: 10px 30px 50px;
padding: 10px 20px;
padding: 10px;
十一、网页布局
网页布局：
上下 结构
上中下 结构
上左右下 结构： 1-2-1 结构
上左中右下 结构： 1-3-1 结构
一般：
首先：
*{padding:0;margin:0;}
ul>li{list-style:none;}
a{text-decoration:none;}
.wrap{width:100%;background-color:gray;}
.header{}
.content{}
.footer{}
...
...
资源：https://www.processon.com/view/link/5ad1c2d0e4b0b74a6dd64f3c