DIV+CSS

一、盒子模型css

• height
• width
• padding 内边距
• margin  外边距
• border

1.margin 外边距

　　margin-top:15px;

       margin-right:50px;

       margin-bottom:100px;

       margin-left:150px;

　　或者：margin:10px 50px 100px 200px;

　　一个值代表四个边

　　二个值代表 上下  左右

　　三个值代表 上 左右  下

　　四个值代表 上 右  下  左  （每个数值之间需要使用空格隔开）

2. padding 内边距

　　padding-top:10px;

　　padding-right:50px;

　　padding-bottom:100px;

　　padding-left:200px;

或者：padding：10px 50px  100px  200px;

　　一个值代表四个边

　　二个值代表 上下  左右

　　三个值代表 上 左右 下

　　四个值代表 上 右 下 左  （每个值之间都需要使用空格隔开）

3.通用选择器

　　* 选择的是所有元素

　　*{margin:0px;padding:0px}

最常用的属性作用：是去除div和浏览器之间的小缝隙。

4.div或者table居中显示

　　margin:0px auto;

5.字体居中

　　需要使用text-align 和line-height 配合将文本垂直居中显示

                text-align:center; （水平）

                line-height:50px; （垂直）    注：height=设置的高度  两行：设置一半

二、参与布局的常用属性

1.position 定位

       a）absolute  绝对定位

　　absolute 绝对定位 如果只使用position:absolute没有任何意义的 只是脱离文档流 绝对定位是相对于浏览器的0,0点进行定位 需要使用 left top right bottom这几个方向属性来配置

　　如果你有父级元素 会根据父级元素的左上角定位

　　b)  relative   相对定位

 　　是相对于当前位置进行定位   

　　c)       fixed       固定定位 需要使用top left 配合

　　d)      static       默认值

2. z-index  设置显示层级

　　auto 自动

　　number 数字

　　数字越大就会在最上面显示

3. display 显示属性 还有块级和行内级元素互换功能

　　none 隐藏 ，文档不保留位置 不占位隐藏

　　block 转换为块级

　　inline  转换为行内级

　　inline-block 转换为行块级

4. visibility  是否可见

　　visible 可见

　　hidden 隐藏 占位隐藏

5. overflow 超出部分处理

　　visible 总是可见(默认值)

　　hidden  超出部分隐藏处理

　　scroll   滚动条 声明时候都有滚动条

　　auto    自动 如果超出出现滚动条 否则没有

 参考资料：https://www.w3cschool.cn/css/

CSS（三）