css学习23：使用盒模型

1、为元素应用内边距

应用内边距会在元素内容和边框之间添加空白。我们可以为内容盒的每个边界单独设置内边距，或者使用padding简写属性在一条声明中设置所有的值。

属性	说明	值
padding-top	为顶边设置内边距	长度值或百分数
padding-right	为右边设置内边距	长度值或百分数
padding-bottom	为底边设置内边距	长度值或百分数
padding-left	为左边设置内边距	长度值或百分数
padding	简写属性，在一条声明中设置所有边的内边距	1~4个长度值或百分数

2、为元素应用外边距

外边距是元素边框和页面上围绕在它周围的所有东西之间的空白区域。围绕在它周围的东西包括其他元素和它的父元素。

属性	说明
margin-top	设置元素盒子四个外边距宽度的简写属性
margin-right	设置盒子下外边距的宽度
margin-bottom	设置盒子左外边距的宽度
margin-left	设置盒子右外边距的宽度
margin	设置盒子上外边距的宽度

3、控制元素的尺寸

浏览器会基于页面上内容的流设置元素的尺寸。有几条比较恐怖的详细规则是浏览器在分配尺寸的时候必须遵循的。使用尺寸相关的属性可以覆盖这些行为。

属性	说明	值
width	设置元素的宽度和高度	auto,长度值或者百分数
height
min-width	为元素设置最小可接受宽度和高度	auto,长度值或者百分数
min-height
max-width	为元素设置最大可接受宽度和高度	auto,长度值或者百分数
max-height
box-sizing	设置尺寸调整应用到元素盒子的哪一部分	content-box,padding-box,border-box,margin-box

3.1 设置一定尺寸的盒子

两个img元素设置了相同的高度值(50%)，但两个图片的高度在屏幕上看起来不一样。这是因为我使用box-sizing属性改变了其中一个元素应用尺寸属性的区域。

默认情况下，宽度和高度是需要计算的，之后才能应用到元素的内容盒。这里说的是如果你设置了元素的高度属性是100px，那么屏幕上的真实高度就是100px，这也算上了顶边和底边的内边距、边框和外边距的值。box-sizing属性允许你指定尺寸样式应用到元素盒子的具体区域，也就是说你不需要自己计算某些值了。

#first {
    box-sizing:border-box;
    width: 50%;
}
#second {
    box-sizing: content-box;
}

3.2 设置最小和最大尺寸

可以使用最小和最大相关属性为浏览器调整元素尺寸设置一定的限制。这让浏览器对于如何应用尺寸调整属性有了一定的自主权。

box-sizing: border-box;
min-width: 100px;
max-width: 200px;

4、处理溢出内容

如果你尝试改变元素的尺寸，很快就会到达某一个点:内容太大，已经无法完全显示在元素的内容盒中。这时的默认处理方式是内容溢出，并继续显示。

我们可以使用overflow属性改变这种行为。

属性	说明	值
overflow-x	设置水平方法和垂直方向的溢出方式
overflow-y
overflow	简写属性	overflow-x,overflow-y

溢出属性的值：

值	说明
auto	浏览器自行处理溢出内容。通常，如果内容被剪掉就显示滚动条，否则就不显示（这是相较scroll值来说的,设置该值后，无论内容是否溢出都有滚动条)
hidden	多余的部分直接剪掉，只显示内容盒里面的内容。如果用户想看看剪掉的这部分内容，对不起，做不到
no-content	如果内容无法全部显示，就直接移除。主流浏览器都不支持这个值
no-display	如果内容无法全部显示，就隐藏所有内容。主流浏览器都不支持这个值
scroll	为了让用户看到所有内容，浏览器会添加滚动机制。通常是滚动条，不过这个值跟具体的平台和浏览器相关。即使内容没有溢出也能看到滚动条
visible	默认值,不管是否溢出内容盒，都显示元素内容

overflow:hidden;

5、控制元素的可见性

使用visibility属性控制元素的可见性。虽然这种做法有点奇怪，不过这个属性跟JavaScript一起使用能创建一些比较复杂的效果。

visibility属性的值：

值	说明
coolapse	元素不可见，且在页面布局中不占据空间
hidden	元素不可见，但在页面布局中占据空间
visible	默认值,元素在页面上可见

6、设置元素的盒类型

display属性提供了一种改变元素盒类型的方式，这相应会改变元素在页面上的布局方式。

display属性值：

值	说明
inline	盒子显示为文本行中的字
block	盒子显示为段落
inline-block	盒子显示为文本行
list-item	盒子显示为列表项，通常具有项目符号或者其他标记符（如索引号)
run-in	盒子类型取决于周围的元素
compact	盒子的类型为块或者标记盒（跟list-item类型产生的类似）。主流浏览器都不支持这个值
flexbox	这个值跟弹性盒布局相关
table	这些值跟表格中的元素布局相关
inline-table
table-row-group
table-header-group
table-row
table-column-group
table-column
table-cell
table-caption
ruby	这些值跟带ruby注释的文本布局相关
ruby-base
ruby-text
ruby-base-group
ruby-text-group
none	元素不可见，且在页面布局中不占空间

6.1、块级元素

独占一行，可指定宽度高度

display: block;

6.2 行内元素

不独占一行，不可指定宽度高度，都有内容决定

display:inline;

6.3 行内块元素

不独占一行，可指定宽度高度

display: inline-block;

6.4 插入元素

run-in值的盒子类型取决于周围的元素。

(1)如果插人元素包含一个display属性值为block的元素，那么插入元素就是块级元素。

(2)如果插人元素的相邻兄弟元素是块级元素，那么插入元素就是兄弟元素中的第一个行内元素。

(3)其他情况下，插人元素均作为块级元素对待。

6.5 隐藏元素

display设置为none就是告诉浏览器不要为元素创建任何类型的盒子。

7、创建浮动盒

可以使用float属性创建浮动盒，浮动盒会将元素的左边界或者右边界移动到包含块或另一个浮动盒的边界。

float值：

值	说明
left	移动元素，使其左边界挨着包含块的左边界，或者另一个浮动元素的右边界
right	移动元素，使其右边界挨着包含块的右边界，或者另一个浮动元素的左边界
none	元素位置固定

7.1 阻止浮动元素堆叠

如果设置了多个浮动元素，默认情况下，它们会一个挨着一个地堆叠在一起。使用clear属性可以阻止出现这种情况。clear属性可以指定浮动元素的一个边界或者两个边界不能挨着另一个浮动元素。

值	说明
left	元素的左边界不能挨着另一个浮动元素
right	元素的右边界不能挨着另一个浮动元素
both	元素的左右边界都不能挨着浮动元素
none	元素的左右边界都可以挨着浮动元素