1 元素尺寸
（1）设置元素尺寸
div {
width: 200px;
height : 200px;
}

（2）限制元素尺寸
div {
min - width :100px;
min - height:100px;
max - width:300px;
max - heigth:300px;
}
这一组主要是应对可能动态产生元素尺寸变大变小的问题，从而限制它最大和最小值

（3）auto自适应
div {
width : auto;
height ： auto;
}
auto 是默认值，width 在auto 下是100%的值；height 在auto 下是自适应

（4）百分比模式

a {

width : 300px;
height : 300px;
}

b {

width ： 50%；
height : 50%;
}

<div id="a">
<div id="b">我是html5</div>
</div>
百分比就是相对于父元素长度来衡定的

2 元素内边距
padding
：设置元素内部边缘填充空白的大小
(1)设置四个边距
div {
padding - top: 10px;
padding - bottom: 10px;
padding - left:10px;
padding - right：10px;
}

(2)简写 形式 上 左 下 右
div {
padding : 10px 10px 10px 10px;
}

(3)简写形式 上下 左右
div {
padding : 10px 20px;
}

3 元素外边距
：设置元素外部空白的边缘区域大小

（1）设置四个外边距
div {
margin-top: 10px;
margin-bottom: 10px;
margin-left; 10px;
margin-right: 10px;
}

（2）简写形式 上 左 下 右
div {
margin : 10px 10px 10px 10px;
}

（3）简写形式 上下 左右
div {
margin : 10px 20px;
}

4 处理溢出
： 当设置了元素固定尺寸且内容过大时，就会出现溢出的问题。溢出主要朝两个方向：右
侧和底部

（1）溢出属性
overflow-x 设置水平方向的溢出
overflow-y 设置垂直方向的溢出
overflow 溢出简写形式

（2）溢出处理值
auto 浏览器自行处理溢出内容。如果有溢出内容，就显示滚动条，否
则就不显示滚动条
hidden 如果有溢出，直接减掉
scroll 不管是否溢出，都会出现滚动条。但不同平台和浏览器显示方式
不同
visible 默认值 不管是否溢出都显示内容

div {
overflow-y: auto;
}

5 元素可见性
visibility
属性
visible:默认值，元素在页面上可见
hidden:元素不可见，但会占据空间
collapse:元素不可见，隐藏表格的行与列，
如果不是表格，则和hidden 一样

div {
visiblity：hiddem
}
隐藏div元素，会占位

table > tr :first-child {
visibility: collapse;
}
隐藏表格行或列，不占位

6 元素盒类型
display属性可以改变元素的盒类型
属性
inline:盒子为行内元素
block:盒子为块级元素
inline-block:盒子为行内-块级元素
none:将元素隐藏且不占位置

（1）元素盒类型
块级元素（区块）: <dov>,<p>

能够设置尺寸
隔离其他元素
行内元素（内联）:<span>,<b>
不能够设置尺寸
自适应内容
其他元素紧跟在其后
行内块级元素（内联块）
能够设置尺寸
无法隔离其他元素: <img>

将行内元素转换为块级元素
span {
background :silver
width : 100px;
height : 200px;
display:block
}

将块级元素转换为行内元素
div {
background: red;
width : 100px;
height:200px;
display:inline;
}

将块级元素转化成行内-块元素
div {
background: silver;
width: 200px;
height: 200px;
display: inline-block;
}

将元素隐藏且不占位
div {
display: none;
}

7 元素的浮动
float ：建立浮动盒浮动的方向
属性
left:左浮动
right：右浮动
none:禁止浮动

（1）实现联排效果

a {

background: gray;
float: left;
}

b {

background: maroon;
float: left;
}

c {

background: navy;
float: left;
}
（2）实现元素右浮动

c {

background: navy;
float: right;
}

（3）取消元素的浮动

c {

background: navy;
float: none;
}

问题：当一个元素盒子被设置浮动后，其他元素会自动堆叠处理，造成部分或全部不可见

使用clear属性可以处理
属性值
left：左边不可浮动
right：右边不可浮动
boyh：两边都不可浮动
none:两边都可以浮动

c {

background:blue;
clear:both 两边都不可浮动
}