html+css之行元素与块元素

html-css016

html+css之行元素与块元素,第1张

html中的标签有行元素(inline)、块元素(block)、行块元素（inline-block），三种，以下就简单整理一下。(本文只整理常见的，想要完整版的小伙伴可以自行查看手册哦)。

1、常见块元素：div h1 h2 h3 h4 h5 h6 p ul li ol form tr th 。

特点：块元素display：block   独占一行   默认宽度父级宽度的100%，默认垂直显示，可设置宽高、padding、margin。

2、常见行内元素：span  a i br。

特点：行元素display：inline  宽度自适应，靠内容撑开（以内容的大小为大小），水平显示，在一行之内。不能写宽高，可改变display:block不支持垂直方向的margin和padding,但左右方向的margin和padding是可以设置的。

3、常见行块元素：img。

特点：display：inline-block 对外表现为行级，对内表现为块级支持宽高，支持垂直方向的margin和padding。

若想要使行元素块元素之间相互转换可设置display属性。

1、块状元素：

块级元素是指本身属性为display:block的元素。因为它自身的特点，我们通常使用块级元素来进行大布局（大结构）的搭建。  

布局上：独占一行，可以容纳内联元素和其他块元素

 样式上：设置width、height有效，可以设置盒子模型的相关css属性，

 在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度

 在不设置高度的情况下，块级元素的高度是它本身内容的高度

2、 行内元素：

内联元素是指本身属性为display:inline的元素。因为它自身的特点，我们通常使用块级元素来进行文字、小图标（小结构）的应用。     

布局上：和其他元素从左到右在一行排列，只能容纳文本或者其他内联元素（不要在内联元素中嵌套块级元素）

样式上：不能直接控制width、height，只能使用盒模型部分属性，如padding、line_height、margin-left、margin-right。

内联元素的宽高是由本身内容的大小决定（文字、图标等）

 3、  行内块状元素：尽可能少的占用横向空间，和其他元素都在一行上；可以设置width、height、margin、padding等盒模型相关属性。

         *常用：img、input、td。

               display:block；(将元素变为块级元素)

               display:inline；  (将元素变为行级元素)

               display：inline-block；（将元素变为行级块元素）

       a. 块元素特立独行；内联元素随波逐流。

       b.块元素通常用作网页的主要构建模块，而内联元素常用来标记小段内容（修饰文本）

       c.设计一个页面时，一般从较大的块开始 ，然后完善页面的时候再加入内联元素。      

       d. 对标签能够清晰的分类，掌握标签的特性，在选择标签时避免犹豫不决，提高布局效率。

HTML5新结构标签

HTML5-新的属性语法

HTML5图形

HTML5音视频标签

对本地离线存储的更好的支持

新的表单控件，比如 calendar、date、time、email、url、search

移除的元素：

纯表现的元素：basefont，big，center，font, s，strike，tt，u

 对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签 ： IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

1.下表列出了内联元素和块级元素的主要区别

块元素：不管内容多少，块元素都会在浏览器中独占一行。可设置宽高，如果不设置宽高那么它的宽度是100%（占满父级元素一整行）

缺点：1.相邻元素垂直。相邻外边距会重叠。margin-bottom和margin-top重叠（重叠之后的值是两个值中的最大值）

第一种解决方案：原理bfc相关

2.父子的相邻，父元素的margin-top和子元素的margin-top发生重叠 （重叠之后的值是两个值中的最大值）

关于父子相邻的解决方案：

第一种解决方案.取消相邻，给父元素设置border或者padding-top 让相邻之间有间隔。

第二种解决方案，父元素加overflow:hidden属性 -- 原理bfc相关

块元素包括：div， h1-h6 ， p ，ul，li，ol， dl，dt, hr，form,table ，tr，td

行内元素：内容决定所占空间的多少，内容多少就占多少空间。不能设置宽高（默认宽高是0）。margin垂直方向无效（margin-top,margin-bottom）,如果设置垂直方向用line-height属性。

多个行内元素排列在一起，他们之间会出席空格。

行内元素包括：font , span, b , i , u, sub, sup, a ,

标红为常见的块元素和行内元素。

行内块：共享一行，可设置宽高,多个行内元素排列在一起，他们之间会出席空格。可设置margin,padding属性。集合了块和行内的所有优点。

行内块元素包括：img,input

注意：设置两个并排的div.一个width:20%,一个width:80%.用display:inline-block 让两个div并排，会使右侧的div向下排列

效果图：

产生该问题的原因是：div1+div2的宽度：100%.但是display:inline-block 的设置会使两个div之间有空格。width就为100%再加上空格 大于 父级的宽度，所以会折行。

处理方式：将div1和div2之间的空格去掉

text-align这个属性在水平方向上对行内（inline），行内块(inline-block)以及文字都起作用（行内元素或行内块元素设置水平居中用text-align属性）

行内元素：垂直居中用line-height属性

行内块：设置垂直居中，不能line-height会出问题，应该用vertical-align.多个行内块元素并排，同时设置居中

同级中找设置一个最高的行内块元素(这个行内块元素内容为空，仅仅用来做对齐的标尺)，让其他元素向它对齐。

块元素：

块元素水平居中：用margin-left和margin-right设置为auto的方式 类似：margin:0 auto

块元素水平垂直居中：

情况1子级元素定宽定高(宽高各为100px)：

情况2：子级元素宽高不定：

第一种：

第二种：

块元素：display:block

行内：display:inline

行内块：display:inline-block

让块消失：display:none（元素结构还在，但是在页面不显示，也不占位置）

vertical-align属性：垂直方向的对齐方式，对齐依据找到同级别最高的元素，以该元素为参照进行vertical-align的设置。

值：top,middle,bottom