目录

1. CSS盒模型

元素的尺寸

1.1 元素的尺寸

属性	值	说明
width	auto、长度值或百分比	元素的宽度
height	auto、长度值或百分比	元素的高度
min-width	auto、长度值或百分比	元素的最小宽度
min-height	auto、长度值或百分比	元素的最小高度
max-width	auto、长度值或百分比	元素的最大宽度
max-height	auto、长度值或百分比	元素的最大高度

用于可能动态产生元素尺寸变大变小的问题，来限制最大最小值

div{  background: silver;  width: 200px;  height: 200px;    min-width: 100px;  min-height: 100px;}

    
     HTML5
    

1.2. 元素内边距 padding

div{  padding-top: 10px;  padding-bottom: 10px;  padding-right: 10px;  /*上下各空出10,20px*/  padding: 10px 20px;  /*上,右，下，左*/  padding: 10px, 20px,10px,10px;}

1.3. 元素外边距 margin

1.4. 处理溢出overflow

溢出的参数值

值	说明
auto	浏览器自动处理溢出内容，用滚动条
hidden	有溢出，直接剪掉
scroll	不管是否溢出，都有滚动条
visible	默认值，不管是否溢出，都显示

div{  overflow-y: auto;}

1.5. 元素的可见性Visibility

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

div{  background: silver;  width: 200px;  height: 200px;  visibility: visible;}

2. CSS元素的盒类型

CSS盒模型中的display属性，可以更改元素本身盒类型，那么有哪些盒类型呢？

2.1. 块级元素(区块)

• 能够设置元素尺寸，隔离其他元素功能（有换行功能）的元素<div>, <p>

2.2. 行内元素

• 不能设置元素尺寸，它只能自适应内容、无法隔离其他元素，其他元素会紧跟其后:<span>, <d>

2.3. 行内-块元素

• 可以设置元素尺寸，但是无法隔离其他元素<img>

2.4. 盒类型元素转换dispaly

值	说明
block	盒为块级元素
inline	盒为行内元素
inline-block	盒为行内-块元素
none	盒子不可见，不占位

div{  background: silver;  width: 200px;  height: 200px;  /*转成了行内元素*/  display: inline;  /*转成了行内-块元素*/  display: inline-block}

3. CSS盒元素的浮动float

值	说明
left	浮动元素靠左
right	浮动元素靠右
none	禁止浮动

#a{  background: maroon;  float: left;}#b{  background: green;  float: right;}#c{  background: blue;  float: left;}