DIV+CSS盒子模型

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

6.float 浮动

left

right

设置浮动  脱离普通文档流

浮动元素都会变成块级元素  如果不设置宽度 会尽可能的窄

如果你使用浮动了 请将你的元素计算精确 如果不精确会有弊端！

7.clear 清除浮动

left

right

both 只用它就好了

就是让你脱离文档流的内容(float)回到文档中

推荐: 每次看见浮动都要记得清除浮动

   为什么  我只能告诉你没有为什么 就这样记 如果不清除浮动你的页面会乱的一逼 什么地方出现就在什么地方清除(同一级别清除一次) 不能说统一一次就全部清除里面的浮动 要出现就清除

再次强烈推荐 一定要写清除浮动

三、布局

浮动布局

三列浮动布局

二列浮动布局

总结：

这里要注意，盒子的大小是有

1. height
2. width
3. padding 内边距
4. margin  外边距
5. border

5个组成的，排版的时候一定要注意每个位置的值，以免换行错位。

定位的使用，一般我们都是先用相对定位之后对子集进行绝对定位，很少单独使用绝对定位或相对定位。

display：none；  visible ：hidden ；这两个隐藏的区别，一个隐藏不占原来的位置，一个隐藏占原来的位置