盒模型

• 为元素应用内边距

padding-top / padding-right / padding-bottom / padding-left
padding: 上 右 下 左;

• 为元素应用外边距

margin-top / margin-right / margin-bottom / margin-left
margin: 上 右 下 左;

• 设置元素的尺寸

width: 宽
height: 高
min-width: 最小可接受的宽
min-height: 最小可接受的高
max-width: 最大可接受的宽
max-height: 最小可接受的高
box-sizing: 设置尺寸调整应用到元素盒子的哪一部分
1.content-box 2.padding-box 3.border-box 4.margin-box

• 处理溢出
  image

img{
        box-sizing: border-box;
        min-width: 100px;
        max-width: 200px;
        width: 50%;
}

text

overflow-x
overflow-y  水平方向和垂直方向的溢出方式
overflow 简写属性 溢出
auto 浏览器自定处理溢出内容。通常内容被裁减掉就显示滚动条，否则不显示。
hidden多余部分直接裁减掉，只显示盒内内容。
no-content 如果内容无法全部显示，就直接移除。
no-display 如果内容无法全部显示就隐藏所有内容。
scroll 为了让用户看到所有内容，浏览器会添加滚动机制，通常是滚动条，滚浏览器有关。
visible 默认值，不管是否溢出盒内容，全部显示内容。

• 控制元素的可见性
  visibility 设置元素的可见性

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

• 设置元素的盒模型

inline 盒子显示为文本中的文字
block 盒子显示为段落
inline-block 盒子显示为文本行
run-in 盒子类型取决于周围元素
compact 盒子的类型为块或者标记盒
flexbox 这个值跟弹性盒布局相关
table 跟表格中的元素布局有关
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
ruby
ruby-base
ruby-text
ruby-base-group
ruby-text-group
none 元素不可见，且在页面不占据空间。

• 创建浮动盒
  float 设置元素的浮动样式

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

• 阻止浮动元素堆叠
  clear 设置元素的左边界、右边界或左右边界不允许出现浮动元素。

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