# block

block 独占一行，元素宽度自动填满其父元素宽度，可以设置width，height，margin，padding属性

常见元素有：p,div,h1~h6,ol,ul,dl,table,address,blockquote,form,article,canvas,header,footer,section 等

# inline

inline 元素不会独占一行，多个相邻的行内元素会排在同一行内，直到排不下才回换行，其宽度随元素内容变化而变化；inline 元素设置width和height属性无效；水平方向的padding和margin有效，竖直方向的padding和margin不会产生效果。

常见元素有：a,span,br,i,em,strong,label,q,var,cite,code 等

margin/padding 的百分比均相对于包含元素的宽度

# inline-block

将对象呈现为inline对象，但是对象的内容作为block对象呈现

常见元素有：img,input

# 解决inline-block元素间间距

• 去除标签之前的换行符和空格
• 父元素font-size为 0
• 负 margin

# list-item

该元素生成一个容纳内容和单独的列表行内元素盒的块状盒

# 表格模型值

• table：同 <table>
• inline-table
• table-caption：同 <caption>
• table-cell：同 <td>
• table-column：同 <col>
• table-column-group：同 <colgroup>
• table-footer-group：同 <tfoot>
• table-header-group：同 <thead>
• table-row：同 <tr>
• table-row-group：同 <tbody>

# Flexbox 模型值

• flex
• inline-flex

# 栅格盒模型值

• grid
• inline-grid

Last Update: 2019-12-06 12:55:54 Source File