2018-10-17

网页布局基础 DIV

可以使用ID选择器设置属性

Padding和Margin

Padding 填充，表示子元素和自己的距离
Margin 边距，自己和其他元素的距离

box 模型

2.png

重要属性：box-sizing
content-box:纯内容
border-box:含padding及border

行内元素与块元素

重要属性：display
inline:行元素不能设置宽度高度
block:块元素
block_inline:行内块元素
none:影藏

行内元素对齐

水平对齐：text-align
竖直对齐：需要设置父容器的height、lineheight一致，子元素vertical-align

定位

重要属性：position
相对位置：relative，同时指定偏移量left\top\right\bottom，原先位置不被占用。
绝对位置：absolute，同时指定偏移量left\top\right\bottom，原先位置被占用且需要设置父元素的position属性为relative。
固定位置：fixed，同时指定偏移量left\top\right\bottom，需要设置父元素的position属性为relative，需要设置z-index作为层次。常用于广告位置。

2.png

居中布局

水平占满： body 设置 margin:0px;
水平居中： width：1000px; margin：0px auto;

分栏布局

设置 display: inline-block;
布局时空间不足分行处理，应注意空白字符的宽度。

动态计算

width:calc(100% - 200px);
加号、减号前后必须增加空格；

固定布局

3.png

今天就暂时学到这了，作为上班族学习的时间实在是不富余。拜拜~