CSS盒子模型

block(块级元素)

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

inline(行内元素)

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

可变元素(根据上下文确定类型)

applet ,button ,del ,iframe , ins ,map ,object , script

块级元素与行内元素的区别

• 首先从视觉上来看多个行内元素在同一行，而块级元素独占一行
• 其次块级元素可设置width和height，而行内元素不可以
• 最后是关于margin和padding的设置，块级元素完全支持这俩个属性，而行内元素表现为横向有效，纵向无效

inline-block

• 这个东西叫行内块元素，可以通过display属性来设置。
• 该元素本质上属于块级元素，设置之后，可以使块级元素从视觉上表现为行内元素

inline-table

• 该属性可将取消table换行，将其表现设置为与行内元素一样

list-item

• 将多个元素作为列表显示，同时可在开头设置列表标记

div{
  display:list-item;
  list-style-type:circle;
  margin-left:10px
}

table的各种类型

• 这是一个MMP的类型

none

• 元素的display被指定为none之后元素将不会显示

对盒子使用阴影

• 通过box-shadow对盒子设置阴影，具体用法与text-shadow完全相同（见上一篇博客）

box-sizing

• 该属性用于指定盒模型大小是否指定范围
• 可指定为content-box，表示该盒子的长宽仅指定内容部分，为默认值
• 也可指定为border-box,表示盒子长宽包括内边距和边框的厚度