1>display
display属性主要是用来 控制HTML元素的显示和隐藏 与 块级元素与行内元素的转换的。
display的值,如下
--> block(块级元素 )
block元素通常被现实为独立的一块,独占一行,多个block元素会各自新起一行,默认block
元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性;
常见的块级元素有 div、form、table、p、pre、h1~h5、dl、ol、ul 等。
--> inline(行内元素)
inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,
才会新换一行,其宽度随元素的内容而变化。inline元素设置width、height属性无效。
常见的行内元素有:heda、meat、title、lable、span、br 、a、style、em、b、i、strong等。
--> inline-block(行内块元素)
同时具有行内元素和块级元素的特点,可同行显示亦可设置大小。
常见的行内块元素有:img input td
--> none
HTML文档中元素存在,但是在浏览器中不显示
display使用比较多的时候就是 块级元素和行内元素之间的转换。
例子
2>浮动
2.1>引子
网页本身的格式就是如果是如同div一样的块标签,一排不管占用多少,后面的内容都会隔行接在后
面及从上到下,元素在文档中的排列位置,在元素排版布局过程中,元素会自动从左往右,从上
往下的流式排列,这就是文档流的概念,而如果用了浮动就可以改变这种格局
2.2>浮动是什么
浮动可以使元素按指定方向排列,直到遇到父元素的边界或另一个浮动元素停止。浮动能使元素脱离
文档流,提升层级,可以使块元素在一行展示,可以使行内元素支持宽高。
2.3>浮动的值
-->left:左浮动 左侧为起始,从左向右排列
-->right:右浮动 右侧为起始,从右向左排列
-->none :不浮动,默认不浮动
2.4>浮动效果示例
如上,给前两个div加上左浮动后,第3个div就上移了,因浮动的模块是不占位置的,很明显,这种
‘遮挡’效果并不是我们所预期的,要让它们正常显示,则要 清除浮动;
3>清除浮动的方法
还有一个场景:其实实际当中进行项目布局的时候,一般是不会设置父级元素的height属性,因为这个属性
不设置会根据子元素的height值自行调整,当子元素设置浮动,不占位置了,就不能“撑”开父级元素的
高度了,解决之法也是 清除浮动。
子元素增加浮动之后
常用方法1(官方推荐)
在父元素的内容后增加这一堆属性 ,专“治”各种浮动。
#daohang:after{ clear: both; content: ""; height: 0; visibility: hidden; display: block; }
常用方法2(简洁些,就超出隐藏)
实际当中,这两种方法用的都很多,在很多大型网站都使用第一种,虽然代码多一点,但是确实能
解决各种情况的浮动问题。
4>浮动总结