CSS基础-02

display属性

</body>

1、布局
display(none、inline-block、block、inline)
none : 将一个div隐藏起来，其位置不存在了
作用：可以将块变成行内或者行内块，可以将行内变成块或者行内块
visibility(visible、hidden)
和display none不一样，这个隐藏起来位置依然存在，none隐藏起来位置就不在了
overflow(visible、hidden、scroll、auto)
hidden: 隐藏超过边界内容
scroll: 显示滚动条
auto: 滚动条自动显示
2、定位
position(relative、absolute、static、fixed)
static: 默认的
fixed: 脱离文档流，相对于窗口定位，可以通过left\top\right\bottom来进行设置其位置
relative: 相对定位,相对于自己原来的位置进行定位,left\top\right\bottom,相对于自己原来的位置
absolute: 绝对定位，如果一个子元素要想相对于父元素进行绝对定位，你的步骤是将父元素定位设置为relative,将自己的定位设置为absolute,然后再根据位置定制 left\top\right\bottom

z-index
    控制的是脱离文档流的元素的显示顺序,z-index大的在上面，小的在下面，值就是个数值

3、边框
border
border-width
border-style
solid : 实心
dotted : 点
dashed : 虚线
border-color
border: 2px solid blue; 一步写
border-radius ： 边框圆角
box-shadow : 边框阴影
4、盒子模型
margin: 外边距
margin-top
margin-right
margin-left
margin-bottom

margin: 上 右 下 左
padding: 上 右 下 左
margin: 值1 值2
    值1就是上下   值2就是左右
padding: 值1 值2

padding：内边距
padding-top
padding-right
padding-bottom
padding-left

【注】很多标签都有自己的默认的margin和padding，所以在布局页面的时候，第一步就是将所有的margin和padding全部清0
一般都会写
    table, ul, li, div, form, h1, h2, h3{margin: 0; padding: 0}