CSS HTML元素布局及Display属性.docVIP

CSS HTML元素布局及Display属性 HTML元素分类 HTML元素大体可分为内联(inline)元素和块(block)元素。 内联元素(inline) inline元素显示方式：文本方式，1个挨着1个，不独自占有1行； 内嵌的元素也必须是内联元素：如a/a，尽量不要在里面嵌入div/div等块级元素； 包含的标签有：a、label、span、strong、em等等； inline元素的宽高是不能定义, 即宽高度是由inline元素inline内容的元素决定的,(ie6,ie7下高度会受inline-block元素的影响)； 宽高完全是自适应而得出的, 因此也不存在overflow的问题, min|max-width|height也没有影响； margin四个属性, left|right 与 top|bottom 有不同的待遇 margin-top, margin-bottom, 可以用line-height模拟, 但有很大不同, 与inline-block也不兼容,? 另 margin:0 auto的居中效果, 也没有作用? 块元素(block) 元素显示方式：每个元素独自占有1行，相当于前后都带有换行符； 内嵌的元素可以是内联或块级元素； 包含的元素有：h1~h6、div、hr、p、ul等等。 HTML 元素布局展示 默认展示(未添加width和height属性) HTML元素在浏览器展示的方式是：从上到下，从左到右。 内联元素，是根据浏览器的宽度及自身的width宽度来填充。若当前行剩余空白区域不够，就会换至下一行。 块级元素，根据内联元素的展示方式展示大概区域；当浏览器的宽度减少时，会自动扩充块级元素的height属性的值，以容纳内嵌元素的展示。 展示页面 增加了width属性的展示 块级元素(div)增加了width属性 结论 当块级元素没设置width属性时，浏览器宽度的变更，会压缩块元素内嵌元素的排版。 设置块级元素的width属性时，浏览器的width属性值变更，不会影响到块级元素里的内嵌元素的布局，他们(内嵌元素)受父级块级元素的影响。适用范围：导航条(导航条里有多个a标签，可放在一个div里，并给div附加width属性；以免浏览器缩小，造成导航排版乱掉)。 CSS display属性 主要的值 none ：此元素不被显示； block ：此元素按块级元素显示：前后带换行符，自己占一行。 inline ：此元素按内联元素显示：1个挨着1个。 其他常见diplay值类型 还有一些特殊显示的效果的元素，列举如下： list-item，此元素会作为列表显示。（参考li,但要注意不能单独使用，一般这样理解：为元素内容生成一个块型盒，随后再生成一个列表型的行内盒 table，此元素会作为块级表格来显示（类似 table），表格前后带有换行符。 inline-block，将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格(准确地说，应用此特性的元素呈现为内联对象inline-level，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)。常见标签button,input, img, textarea等。 并不是所有浏览器都支持inline-block，有两种方法保证不同浏览器的支持： 1、先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回inline或block，layout不会消失）。代码如下（...为省略的其他属性内容）： div {display:inline-block;...} div {display:inline;} 切记不是 div { display:inline-block; display:inline; ... } inline-table，此元素会作为内联表格来显示（类似 table），表格前后没有换行符。 切换 3.3.1需要切换的情况 让一个inline元素从新行开始； 让块元素和其他元素保持在一行上； 控制inline元素的宽度（对导航条特别有用）； 控制inline元素的高度； 无须设定宽度即可为一个块元素设定与文字同宽的背景色。 3.3.2切换效果演示 input3 设为了display:block div 设为了display:inline