div+css页面布局实战

视频学习地址：
程序员学院-优快云 https://edu.youkuaiyun.com/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像素