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,表示盒子长宽包括内边距和边框的厚度