一、CSS盒模型
1.标准盒模型
- top上边框;bottom下边框;left左边框;right右边框
标准盒模型 - box-sizing:content-box;
- 标准盒模型的盒子宽度= centent内容的宽度;
标准盒模型的盒子高度= centent内容的高度;
2.怪异盒模型
- 怪异盒模型(IE盒模型)
- box-sizing:border-box;
- 怪异盒模型的盒子宽度 = Padding宽度2+Border宽度2 + Content宽度;
怪异盒模型的盒子高度 = Padding高度2+Border高度2 + Content高度;
二、盒模型常用操作
1.设置盒模型居中效果
- margin: 10px auto;//在样式表中设置盒模型与上下外边距为10px,左右边距根据父元素自适应
- 隐藏块级元素:
display: none; - 显示块级元素
display: block;//需先设置隐藏 - 设置元素透明度属性
opacity://(1-0)
2.基本设置
- padding-top 属性设置元素的上内边距(空间)。
- padding-right 属性设置元素右内边距(空白)。
- padding-bottom 属性设置元素的下内边距(底部空白)。
- padding-left 属性设置元素左内边距(空白)。
- padding 属性接受长度值或百分比值,但不允许使用负值。
- padding * 同时设定四个边距
- padding ** 分别设定上下、左右边距
- padding *** 分别设定上、左右、下边距
- padding **** 分别设定上、右、下、左边距
3.鼠标样式
- hand 是手型
- pointer 也是手型,推荐使用这种。
- crosshair 是十字型
- text 是移动到文本上的那种效果
- wait 是等待的那种效果
- default 是默认效果
- e-resize 是向右的箭头
- ne-resize 是向右上的箭头
- n-resize 是向上的箭头
- nw-resize 是向左上的箭头
- w-resize 是向左的箭
- sw-resize 是左下的箭头
- s-resize 是向下的箭头
- se-resize 是向右下的箭头
- auto 是由系统自动给出效果
4.溢出的处理
- overflow 如果内容溢出了元素内容区域,是否对内容的边
缘进行裁剪。 - overflow-x 如果内容溢出了元素内容区域,是否对内容的
左/右边缘进行裁剪。 - overflow-y 如果内容溢出了元素内容区域,是否对内容的
上/下边缘进行裁剪。 - visible 不裁剪内容,可能会显示在内容框之外。
- hidden 裁剪内容-不提供滚动机制。
- scroll 裁剪内容-提供滚动机制。
- auto 如果溢出框,则应该提供滚动机制
三、浮动
1.概念
- 浮动可以让多个块级元素在一行内显示;
- float 属性用于创建浮动框,将其移动到一边,直到左边或右边遇到外边框或者另一个块元素
2.浮动方法
- 左浮动
float:left;向左边靠,从左边开始一个一个按顺序排列。
左浮动会脱离文档流,不会脱离文本流; - 右浮动
float:right;向右边靠,从右边开始一个一个按顺序排列。
右浮动会脱离文档流
3.浮动影响
- 对于自身位置会造成影响;
- 对于兄弟元素也会造成影响;
- 如果所有的元素都设置了浮
4.清除浮动
- 在浮动的元素后面加一个空元素,设置属性为 clear:
both。 在浮动元素后面的元素设置 clear:both。
缺点:成本太高,添加了一个元素,难维护
clear 属性取值:
none:默认取值,按照浮动元素的排序规则(左浮动找左浮动,
右浮动找右浮动)
left:不要找前面的左浮动元素
right:不要找前面的右浮动元素
both:清除所有浮动元素 - 通过设置父容器 css 的样式: “overflow:hidden”
通过 overflow:hidden;来清除浮动,其实 overflow 无形中对
父容器高度进行了测量, 是设置父容器高度的另一种方法 - 给前面一个父元素设置高度
缺点:元素容器不可以自适应高度 - 使用伪类元素进行清除浮动
div::after{
content: "";
display: block;
clear: both;
}