css笔记 8.4

盒模型

CSS 盒模型规定了处理元素内容、内边距、边框 和 外边距 的方式。

最内部分是元素内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距

盒模型属性：

属性	作用
heigh	设置元素的高度
width	设置元素的宽度属性值
max-height	设置元素的最大高度
max-width	设置元素的最大宽度
min-height	设置元素的最小高度
min-width	设置元素的最小宽度

• 当属性值用百分比时是相对于父元素的尺寸来说的
• 最大最小宽高主要用于动态控制缩放等情况下，这里暂做了解

padding 内边距

属性	作用
padding-top	属性设置元素的上内边距
padding-right	属性设置元素右内边距
padding-bottom	属性设置元素的下内边距
padding-left	属性设置元素左内边距
padding	简写可以同时定义四个上面属性

margin 外边距

属性	作用
margin-top	属性设置元素的上外边距
margin-right	属性设置元素外内边距
margin-bottom	属性设置元素的下外边距
margin-left	属性设置元素左外边距
margin	简写可以同时定义四个上面属性

盒子模型一共有两种：

• 普通盒 盒子的宽度等于内容的宽内外边距是额外的大小
• box-sizing： border-box怪异盒模型 宽等于内容的宽画上边框加上内边距

css其他属性

opacity：透明度设定

opacity 与通过 rgba()设定透明度的区别：前者同时作用于元素的标签内容，后者只是作用于元素本身。

opacity的取值范围是0——1

鼠标样式

通过cursor属性加上不同值改变鼠标的样式

值	作用
hand	手型
pointer	也是手型，推荐使用这种
text	输入光标
wait	等待效果
default	默认效果
e-resize	向右的箭头
ne-resize	向右上的箭头
n-resize	向上的箭头
nw-resize	向左上的箭头
w-resize	向左的箭
sw-resize	左下的箭头
s-resize	是向下的箭头
se-resize	向右下的箭头
auto	系统自动给出效果

溢出处理

• overflow 如果内容溢出了元素内容区域，是否对内容的边缘进行裁剪。
• overflow-x 如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪
• overflow-y 如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。

visible	不裁剪内容，可能会显示在内容框之外
hidden	裁剪内容-不提供滚动机制。
scroll	裁剪内容-提供滚动机制
auto	如果溢出框，则应该提供滚动机制

浮动

使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以
左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边
缘。浮动属性：用 float 属性， 它的属性值有两个，为 right
和 left 两个属性值

使用浮动回出现的问题；

1. 对附近的元素布局造成改变，使得布局混乱（覆盖）
2. 因为元素脱离了文档流，会造成一种坍塌的现象。简单的说就是原来的父元容器是被元素撑开的，当浮动之后，父容器的高度就会坍塌

解决方法就是在浮动后清楚浮动：

• 方式一：给前面一个父元素设置高度；缺点：元素容器不可以自适应高度
• 方式二：在浮动的元素后面加一个空元素，设置属性为 clear：both。 在浮动元素后面的元素设置 clear：both。缺点：成本太高，添加了一个元素，难维护
• 方式三：通过设置父容器 css 的样式“overflow：hidden”通过 overflow:hidden;来清除浮动，其实 overflow 无形中对父容器高度进行了测量， 是设置父容器高度的另一种方法。
• 方式四：after 伪类：对父元素的 after 伪类进行设置。用伪元素选择器和内墙法结合使用来给元素清除浮动