目录
一、标准盒模型
1、概念
盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。
2、盒模型的组成
内容区域(width和height)、内边距(padding)、边框(border)、外间距(margin)
内容 盒子的宽高
padding 内边距,位于盒子之外,边框之内,盒子大小会变
margin 外边距,位于边框之外,盒子大小不变
3、实际体积大小
内容区域+内边距+边框(width+padding+border)
4、实际所占空间
内容区域+内边距+边框+外间距(width+padding+border+margin)
5、清除默认间距
*{
margin: 0;
padding: 0;
}
6、padding
1)单一方向填充
padding-top 上
padding-right 右
padding-bottom 下
padding-left 左
2)多参数应用
一个值:上下左右
两个值:上下、 左右
三个值:上、 左右、下
四个值:上、右、下、左
3)用途
1>用来控制元素内部内容和边界之间的距离
2>也可以用来控制父元素和子元素之间的距离
注意:padding要加在父元素身上
3>如果要保持元素大小不变,添加padding后要在宽高上减去添加的值
7、margin
1)单一方向
2)多参数应用
3)特点
1>margin左右方向上支持auto,元素水平居中 margin:0 auto;
2>未浮动状态下,上下重叠且取较大值,左右不重叠
3>浮动状态下,上下,左右都不重叠,正常相加
4>bug:父元素下的第一个子元素添加margin-top会作用在父元素身上
解决:(适用所有触发BFC的bug)
a、overflow: hidden;
b、float: left;
c、万能清除浮动法
d、给父元素添加padding替代第一个子元素的margin-top
4)用途
用来调整元素自身的位置
二、文本溢出
1、overflow 溢出属性
visible(默认值) 溢出内容可见,没变化
scroll 滚动条
*hidden
隐藏溢出内容,一刀切,会出现文字上下分身
解决高度塌陷
*auto 自适应,内充超出显示滚动条,没超出则没有
2、overflow-x (x轴溢出)
3、overflow-y (y轴溢出)
4、white-space (空余空间)
normal(默认值) 只识别一个空格,不识别换行,会自动换行
*nowrap 只识别一个空格,不识别换行,也不会自动换行
pre 识别空格和换行,不会自动换行
*pre-wrap 识别空格,识别换行,会自动换行
pre-line 只识别一个空格,识别换行,也会自动换行
5、溢出省略号
clip(默认值)
ellipsis 单行溢出显示省略号
注意:
单用无效,4步缺一不可
1)width 确认边界,到哪截止
2)white-space: nowrap; 强制文本单行显示不换行
3)overflow: hidden; 溢出内容隐藏
4)text-overflow: ellipsis; 溢出内容省略号显示
三、补充
1、快捷写法
{} 标签内的内容
例:div.box>div.box$*4{第$块}
对应:</div>
<div class="box1">第1块</div>
<div class="box2">第2块</div>
<div class="box3">第3块</div>
<div class="box4">第4块</div>
</div>
2、一键替换:Ctrl+H再Ctrl Alt+Enter