第三天 网页布局、
2018-10-17 本文已影响0人
学Java的小姑凉
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
