使用盒模型

为元素应用内边距

应用内边距会在元素内容和边框之间添加空白 padding-top , padding-bottom , padding-right , padding-left或者简写属性padding

为元素应用外边距

外边距是元素边框和页面上围绕在它周围的所有东西之间的空白区域 margin-top , margin-right , margin-bottom , margin-left或者简写属性margin

控制元素的尺寸

1. 元素的宽度width 和高度height 可以设置为具体尺寸或百分数
2. 设置元素尺寸调整应用范围 box-sizing 可选值有 content-box , padding-box , border-box , margin-box
3. 设置最小和最大尺寸 min-width 和 max-width，高度也一样

处理溢出内容

当内容太大无法在元素的内容盒中全部显示时，默认就会内容溢出并继续显示，可以使用overflow改变默认行为，hidden不显示溢出内容；scroll添加滚动条；visible默认

控制元素可见性

使用visibility属性控制元素的可见性，collapse元素不可见，页面中不占据空间；hidden元素不可见，但在页面中占据空间；visible默认，可见

设置元素的盒类型

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

1. 块级元素 block 会在垂直方向与周围元素有所区别
2. inline值创建一个行内元素。使用inline值时，浏览器会忽略某些属性，如width，height，margin
3. 行内-块级元素 inline-block 整体作为行内元素显示，盒子内部作为块级元素显示
4. none值不为元素创建任何类型的盒子，不显示元素，也不占据空间

创建浮动盒

使用float属性创建浮动盒，浮动盒会将元素的左边界或者右边界移动到包含块或另一浮动盒的边界 值有 left，right，none

如果设置了多个浮动元素，默认会一个个挨着堆叠在一起，使用clear属性可以阻止这种情况。left指定元素左边界不能挨着另一个浮动元素；right，both，none