css盒模型 浮动

css盒模型

border：边框
margin：外边距
padding：内边距
height：高度
weight：宽度
element：元素
最内部分是元素内容，直接包围内容的是内边距。内边距呈现
了元素的背景。内边距的边缘是边框。边框以外是外边距。

css属性

一元素的尺寸
height 设置元素的高度。属性值：auto：默认。/px、cm 等
单位定义高度。/百分比
width 设置元素的宽度属性值：auto：默认。/px、cm 等单
位定义高度。/百分比
max-height 设置元素的最大高度。属性值：auto：默认。/px、
cm 等单位定义高度。/百分比
max-width 设置元素的最大宽度。属性值：auto：默认。/px、
cm 等单位定义高度。/百分比
min-height 设置元素的最小高度。属性值：auto：默认。/px、
cm 等单位定义高度。/百分比
min-width 设置元素的最小宽度。属性值：auto：默认。/px、
cm 等单位定义高度。/百分比
当属性值用百分比时是相对于父元素的尺寸来说的
最大最小宽高主要用于动态控制缩放的等情况下。
二padding属性：元素的内边距
padding-top 属性设置元素的上内边距（空间）。
padding-right 属性设置元素右内边距（空白）。
padding-bottom 属性设置元素的下内边距（底部空白）。
padding-left 属性设置元素左内边距（空白）。
padding 属性接受长度值或百分比值，但不允许使用负值。
（1）padding * 同时设定四个边距
（2）padding ** 分别设定上下、左右边距
（3）padding *** 分别设定上、左右、下边距
（4）padding **** 分别设定上、右、下、左边距
三border属性：元素的边框，是围绕元素内容和内边距的一条或多条线
border属性：
可以按顺序设置如下属性：
border-width
border-style
solid 定义实现 /dotted定义点状边框/double定义双线
border-color
四margin属性：元素的外边距：
围绕在元素边框的空白区域是外边距。设置外边距会在元素外
创建额外的“空白”。
margin-top 属性设置元素的上外边距（空间）。
margin-right 属性设置元素外内边距（空白）。
margin-bottom 属性设置元素的下外边距（底部空白）。
margin-left 属性设置元素左外边距（空白）。
margin 属性接受长度值或百分比值，允许使用负值。

margin * 同时设定四个外边距
margin ** 分别设定上下、左右外边距
margin *** 分别设定上、左右、下外边距
margin **** 分别设定上、右、下、左外边距
五外边距的合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一
个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的
较大者。
六两种盒子模型
一种是W3C的标准盒子模型
一种是IE的盒子模型
怪异盒模型（ie盒模型）
box-sizing 属性可以为三个值：content-box（default），
border-box，padding-box。
content-box，border 和 padding 不计算入 width 之内
border-box，border 和 padding 计算入 width 之内，其实就是怪
异模式了
inherit 使元素继承父元素的盒模型模式

css其他属性

1.opacity 透明度设定
opacity 与通过 rgba()设定透明度的区别：前者同时作用于元
素的标签内容，后者只是作用于元素本身。
2.鼠标的样式 cursor：
(1） hand 是手型
(2) pointer 也是手型，推荐使用这种。
(3) crosshair 是十字型
(4) text 是移动到文本上的那种效果
(5)wait 是等待的那种效果
(6) default 是默认效果
(7) e-resize 是向右的箭头
(8) ne-resize 是向右上的箭头
(9) n-resize 是向上的箭头
(10) nw-resize 是向左上的箭头
(11) w-resize 是向左的箭
(12) sw-resize 是左下的箭头
(13) s-resize 是向下的箭头
(14) se-resize 是向右下的箭头
(15) auto 是由系统自动给出效果
3.溢出的处理
overflow 如果内容溢出了元素内容区域，是否对内容的边
缘进行裁剪。
overflow-x 如果内容溢出了元素内容区域，是否对内容的
左/右边缘进行裁剪。
overflow-y 如果内容溢出了元素内容区域，是否对内容的
上/下边缘进行裁剪。

visible 不裁剪内容，可能会显示在内容框之外。
hidden 裁剪内容-不提供滚动机制。
scroll 裁剪内容-提供滚动机制。
auto 如果溢出框，则应该提供滚动机制。
4.rem：根元素字体的大小
浏览器默认字体大小为 16px
em 是以父元素字体为基准的
rem 是以根元素字体大小为基准的
5.轮廓（outline）
轮廓是绘制于元素周围的一条线，位于边框边缘的外围，
可起到突出元素的作用。
outline 在一个声明中设置所有的轮廓属性：
outline-color 设置轮廓的颜色。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。
outline-offset 设置轮廓到边框的距离。注：css 新增属性, 不可以写到符合属性里。
6.display属性常用属性值：
none 此元素不会被显示。
block 此元素将显示为块级元素。特征：换行，可设置宽
高尺寸。
inline 行内元素，默认。特征:大小自适应；不换行。
inline-block 行内块元素。特征:可以设置大小，但是不可
以换行。
其他：
list-item/table/inline-table/table-cell/table-caption…

css浮动

1.了解css浮动的概念
使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以
左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边
缘。浮动属性：用 float 属性， 它的属性值有两个，为 right
和 left 两个属性值。
2浮动示例
3.使用浮动常出现的问题
对附近的元素布局造成改变，使得布局混乱（覆盖）
因为元素脱离了文档流，会造成一种坍塌的现象。简单的说就
是原来的父元容器是被元素撑开的，当浮动之后，父容器的高
度就会坍塌。
4.清除浮动
.方式一：给前面一个父元素设置高度
缺点：元素容器不可以自适应高度
.方式二：在浮动的元素后面加一个空元素，设置属性为 clear：
both。 在浮动元素后面的元素设置 clear：both。
缺点：成本太高，添加了一个元素，难维护
clear 属性取值：
none:默认取值，按照浮动元素的排序规则（左浮动找左浮动，
右浮动找右浮动）
left：不要找前面的左浮动元素
right：不要找前面的右浮动元素
both：清除所有浮动元素
.方式三：通过设置父容器 css 的样式： “overflow：hidden”
通过 overflow:hidden;来清除浮动，其实 overflow 无形中对
父容器高度进行了测量， 是设置父容器高度的另一种方法。
.方式四：after 伪类：对父元素的 after 伪类进行设置。
用伪元素选择器和内墙法结合使用来给元素清除浮动