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;
二、参与布局的常用属性
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 自动 如果超出出现滚动条 否则没有