CSS盒模型

~~

CSS盒模型

1.块级元素（区块）： div 、p等文档元素（能够设置元素大小，隔离（换行）其他元素功能的元素）
2.行内元素（内联）：span、b等文本元素（不能设置元素尺寸，只能自适应内容，无法隔离其他元素，其他元素只能紧跟其后）
3.行内 - 块级元素（内联块）：img等（可以设置元素尺寸，但无法隔离其他元素的元素）
4.隐藏元素（盒子不可见，不占据空间）

四种元素的相互转化

display：block；（转为块级元素)
display：inline；（转为行内元素）
display：inline-block；（转为行内-块级元素）
display：none；（转为隐藏元素）

元素浮动

常见问题：一个元素盒子被浮动后下面的元素会自动堆叠处理，导致元素不可见或部分不可见（大小一样则不可见，大小不一样则部分不可见）。（此时，我们需要用clear属性来清理<即不会再被干扰>）

float:left;(浮动元素靠左)
float:right;(浮动元素靠右)
float:none;(禁止浮动)

clear:left;(左边界不得浮动)
clear:right;(右边界不得浮动)
clear:both;(两边不得浮动)最常用

内边距

padding-top:10px;
padding-bottom: 15px;
padding-left: 10px;
padding-right: 15px;
padding: 10px 20px 30px;
上10px 左20px 右20px 下30px（很少用） 
padding: 10px 20px 30px 40px;
上10px 右20px 下3-px 左40px（较常用顺时针） 

外边距

margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px; 
margin: 10px 10px 10px;(同上)
margin:10px 20px 30px 40px;(同上)

设置背景： background:silver;

设置宽度：

width: 200px; 
width: 50%; 
min-width: 500px;（最小宽度）
max-width: 600px;（最大宽度 ）
这一组（最小最大宽度）主要是应对可能动态产生元素尺寸变大变小的问题,例如以后的JavaScript要用的拖拽 
width: auto;（恢复默认）

设置高度：

 height: 200px;(body没有高度，所以没有参照物，所以高度不能有百分之多少。)
其他同上

溢出值

溢出值（你本身设置的只有100px大小的位置，但你的文字确有很多，就溢出来了）
overflow-x: hidden;
overflow-y: hidden;多出来的隐藏掉
overflow: hidden;如果有溢出内容直接剪掉 
overflow: scroll;不管是否溢出都会出现滚动条 
overflow: visible;无论是否溢出都显示内容
（overflow是既有行又有列  overflow-x只是行  overflow-y只是列 ）