标签：数字   fixed   滚动   盒子模型   显示   参与   margin   中国   转换   

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    自动 如果超出出现滚动条 否则没有

css 03

标签：数字   fixed   滚动   盒子模型   显示   参与   margin   中国   转换   

原文地址：http://www.cnblogs.com/ygsjm/p/7271346.html