DIV+CSS盒子模型
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 自动 如果超出出现滚动条 否则没有
6.float 浮动
left
right
设置浮动 脱离普通文档流
浮动元素都会变成块级元素 如果不设置宽度 会尽可能的窄
如果你使用浮动了 请将你的元素计算精确 如果不精确会有弊端！
7.clear 清除浮动
left
right
both 只用它就好了
就是让你脱离文档流的内容(float)回到文档中
推荐: 每次看见浮动都要记得清除浮动
为什么 我只能告诉你没有为什么 就这样记 如果不清除浮动你的页面会乱的一逼 什么地方出现就在什么地方清除(同一级别清除一次) 不能说统一一次就全部清除里面的浮动 要出现就清除
再次强烈推荐 一定要写清除浮动
三、布局
浮动布局
三列浮动布局
二列浮动布局
总结：
这里要注意，盒子的大小是有
- height
- width
- padding 内边距
- margin 外边距
- border
5个组成的，排版的时候一定要注意每个位置的值，以免换行错位。
定位的使用，一般我们都是先用相对定位之后对子集进行绝对定位，很少单独使用绝对定位或相对定位。
display：none； visible ：hidden ；这两个隐藏的区别，一个隐藏不占原来的位置，一个隐藏占原来的位置
