css 03

DIV+CSS盒子模型

一、盒子模型css

1. height
2. width
3. padding 内边距
4. margin  外边距
5. 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    自动 如果超出出现滚动条 否则没有