视频学习地址：
程序员学院-CSDN https://edu.csdn.net/learn/26531?spm=1002.2001.3001.4157

Div+Css页面布局实战

style样式设置元素属性

如果标签与页边有间隔，应先将格式全部设成0
例如:
body,img,ul,li,｛
padding:0px;
margin:0px;
｝
#box｛｝id为box的元素
.box｛｝class为box的元素
#box>div{} id为box下的div元素
.box>div{} class为box下的div元素
#box>div:first-child{} box下的第一个div元素或 #box>div:nth-child(1)
#box>div:nth-child(2){} box下的第二个div元素
#box>div:last-child{} box下的最后一个div元素

利用css布局

定位属性：position：relative、absolute、fixed、static

relative相对定位，利用top、left等定位，根据现在的位置进行偏移，占据现在的位置，显示在偏移后的位置。
absolute绝对定位，利用top、left等定位，根据页面的位置进行定位，不受父类位置影响，不占据父类位置。
例外，如果父类定义了非static的position，则根据父类位置进行定位。
如果父类没定义，则继续往上级查找是否定位。参照定位的位置进行定位。
用绝对定位不能用margin:0px auto;居中，可以用left:calc(50% - 1200px / 2); 50%代表宽度的一半，减去元素宽度(1200px)的一半，就是距离左侧的宽度。
fixed固定定位，不会随着滚动条滚动而移动。
static没有定位，默认。
z-index：堆叠顺序，定位元素的显示顺序，只支持定位的元素。
z-index：1 往上提一层，其他元素不设置时此元素在最上面，如果同样设置1，按页面加载顺序布局

布局属性：display：none、inline、block、inline-block、table-cell、flex

none：隐藏对象，隐藏元素内容和位置，原有位置空出来，用display：inline或block显示。
visibility：hidden也可以隐藏，但只隐藏内容，原有位置依然占有。visibility：visible显示。
opacity：0 ，透明度为0，同visibility一样只隐藏内容，原有位置依然占有。
inline：指定对象为内联元素，span默认
block：指定对象为块元素，div默认
inline-block：指定对象为内联块元素，具有宽高属性且不独占一行。用的较少，还是利用浮动调整较多。
table-cell：指定对象作为表格单元格
flex：弹性盒

浮动属性：float（none、left、right）、clear ----浮动后display属性失效

让父类盒子感知高度，overflow：hidden；或float：left/right

clear：both 清除浮动
盒子模型：border、margin、padding
content：内容
padding：内边距
margin：外边距 margin-top/bottom/left/right
              margin:10px 10px 10px 10px（上、右、下、左）、margin:10px 10px 10px（上、左右、下）
              margin:10px 10px （上下、左右）、margin:10px （四个方向都是10）
              margin:10px auto 让块状元素居中显示。如果浮动就失去display属性则无效。
              上下元素都用margin则显示最大的值，实际两个外间距都生效了，重叠了。
              父元素没设置margin也会随子元素与上元素空出外间距，定义边框就可以了。
border：边框 border:3px solid yellow 四面（1像素实线黄色）
border-top、border-right、border-bottom、border-left，分别定义4个方向
border-top-color定义上边框颜色
border-top-width定义上边框宽度
border-top-style定义上边框线样式（点状：dotted、实线：solid、双线：double（最少3像素，不然显示不开）、虚线：dashed、无边框：none）
可以缩写为 border-top:1px solid yellow 上边框（1像素实线黄色）
设置边框和内边距会使div的大小扩大相应的像素，因此设置padding和border时要把div的宽高减去相应的数值，但是margin不算div大小。
box-sizing属性允许设置标准盒子和怪异盒子（默认标准盒子
content-box标准盒子，padding和border会影响盒子大小
border-box怪异盒子，padding和border不会影响盒子大小

圆角边框：border-radius

border-radius:10px 0px 0px 10px;（左上、右上、右下、左下）左上和左下有10像素圆角

阴影：text-shadow、box-shadow

text-indent:2em; 首字缩进2格
text-align:center;内容居中
line-height:38px; 行高38像素