css----行内元素&&块状元素

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，
元素的大小被文字或者图片撑开，就是里面文字或图片的大小;

内联块状元素(特殊的内联元素)

同时具备 块状元素 和 内联元素的 特性
1.和 其他元素都在同一行显示

2.元素的宽度，高度，内边距，行高都可以改变

img 　　input　　textarea

块级元素主要有：

 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

内联元素主要有：

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

可变元素(根据上下文关系确定该元素是块元素还是内联元素)：

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

CSS中块级、内联元素的应用：

利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。

主要用的CSS样式有以下三个：

display:block  -- 显示为块级元素
display:inline  -- 显示为内联元素
display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

我们常将<ul>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

　块状元素与内联（行内）元素的嵌套规则

　1、块状元素可包含内联元素或某些块元素，但内联元素不可包含块元素，只能包含内联元素。

　　　　<div><h1></h1><p></p></div>     正确

　　　　<a href="#"><span></span></a>    正确

　　　　<span><div></div></span>     错误

　　2、块级元素不能放在<p>里面

　　　　<p><ol><li></li></ol></p>    错误

　　　　<p><div></div></p>　　错误

　　3、有几个特殊块级元素只能包含内联元素，不能包含块级元素。这几个特殊标签是 h1~h6、p、dt

　　4、li 内可包含 div 标签

　　　　<li><div></div></li>

　　5、块级元素与块级元素并列、内联元素与内联元素并列

　　　　<div><h2></h2><p></p></div>　　正确

　　　　<div><a href="#"></a><span></span></div>　　正确

　　　　<div><h2></h2><span></span></div>　　错误

css----行内元素&&块状元素

猜你喜欢