CSS 基础
横向布局
行内块横向布局的问题
- 代码换行会造成元素之间有默认间距
- 行内块是沿基线对齐(底部对齐),具体表现为当给元素设置垂直方向的内外边距时,会影响周围的元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
| <!DOCTYPE html> <head> <meta charset="utf-8"> <title>行内块横向布局的问题</title> <style type="text/css"> * { margin: 0; padding: 0; } body { margin: 300px; } .one { width: 50px; height: 50px; padding: 100px; background: red; display: inline-block; } .two { width: 100px; height: 100px; background: green; display: inline-block; } .three { width: 150px; height: 150px; background: blue; display: inline-block; } </style> </head> <body> <div class="one"></div> <div class="two"></div> <div class="three"></div> </body>
|
上述代码,在浏览器运行的效果如下:
![]()
行内元素横向布局的问题
- 代码换行会造成元素之间有默认间距
- 行内元素是沿基线对齐(底部对齐),具体表现为当给元素设置垂直方向的内外边距时,由于受基线对齐的限制,垂直方向的内外边距起不到预期的效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| <!DOCTYPE html> <head> <meta charset="utf-8"> <title>行内元素横向布局的问题:</title> <style type="text/css"> * { margin: 0; padding: 0; } body { margin: 300px; } .one { width: 100px; height: 100px; background: red; } .span1 { padding: 50px; } span { background: green; } </style> </head>
<body> <div class="one"></div> <span class="span1">我是文本</span> <span class="span2">我是文本</span> <span class="span3">我是文本</span> </body>
|
上述代码,在浏览器运行的效果如下:
![]()
float 浮动属性
CSS 的三种显示模式(块级、行内、行内块)属于标准流。浮动的属性是 float
,是一个脱离标准流的状态,也叫 “浮动流”。当元素设置浮动属性后,会按照标签的书写顺序,依次排列在包含块(父元素)内,一般称之为 浮动横向布局
。值得一提的是,float
属性可以解决行内块和行内元素横向布局的问题,浮动横向布局
没有代码换行造成的默认间距,设置自身内外(垂直)边距不会影响周围的元素。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动</title> <style type="text/css"> * { margin: 0; padding: 0; } body { margin: 300px; } .one { width: 50px; height: 50px; background: red; float: left; } .two { width: 100px; height: 100px; float: left; background: green; } .three { width: 150px; height: 150px; background: blue; } </style> </head> <body> <div class="one"></div> <div class="two"></div> <div class="three"></div> </body> </html>
|
上述代码,在浏览器运行的效果如下:
![]()
浮动横向布局
浮动横向布局之一
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动横向布局一</title> <style type="text/css"> * { margin: 0; padding: 0; } .one { width: 50px; height: 50px; background: red; } .two { width: 100px; height: 100px; float: left; background: green; } .three { width: 150px; height: 150px; float: left; background: blue; } </style> </head> <body> <div class="one"></div> <div class="two"></div> <div class="three"></div> </body> </html>
|
上述代码,在浏览器运行的效果如下:
![]()
浮动横向布局之二
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动横向布局</title> <style type="text/css"> * { margin: 0; padding: 0; } .one { width: 50px; height: 50px; background: red; float: left; } .two { width: 100px; height: 100px; float: left; background: green; } .three { width: 150px; height: 150px; float: left; background: blue; } .box { width: 400px; height: 300px; background: gray; } .main { height: 200px; background: yellow; } </style> </head> <body> <div class="box"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> <div class="main"></div> </body> </html>
|
上述代码,在浏览器运行的效果如下:
![]()
浮动布局的高度塌陷问题
当子元素是浮动,且父元素没有设置固定高度时,由于子元素是飘起来的状态,父元素会认为没有内容撑开自身的高度,此时会造成高度塌陷,即父元素的高度是零。解决方案如下:
- 第一种:给父元素设置
overflow: hidden
属性,此方案一般不适用于下拉菜单 - 第二种:额外标签法
- 第三种:父元素调用
clearFix
类名(推荐)
第一种解决方案
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动布局的高度塌陷问题</title> <style type="text/css"> * { margin: 0; padding: 0; } .one { width: 50px; height: 50px; background: red; float: left; } .two { width: 100px; height: 100px; float: left; background: green; } .three { width: 150px; height: 150px; float: left; background: blue; } .box { width: 400px; background: gray; margin: 0 auto; overflow: hidden; } .main { height: 200px; background: yellow; } </style> </head> <body> <div class="box"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> <div class="main"></div> </body> </html>
|
第二种解决方案
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动布局的高度塌陷问题</title> <style type="text/css"> * { margin: 0; padding: 0; } .one { width: 50px; height: 50px; background: red; float: left; } .two { width: 100px; height: 100px; float: left; background: green; } .three { width: 150px; height: 150px; float: left; background: blue; } .box { width: 400px; background: gray; margin: 0 auto; } .main { height: 200px; background: yellow; } .four { background: orange; clear: both; } </style> </head> <body> <div class="box"> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> </div> <div class="main"></div> </body> </html>
|
第三种解决方案
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动布局的高度塌陷问题</title> <style type="text/css"> * { margin: 0; padding: 0; } .one { width: 50px; height: 50px; background: red; float: left; } .two { width: 100px; height: 100px; float: left; background: green; } .three { width: 150px; height: 150px; float: left; background: blue; } .box { width: 400px; background: gray; margin: 0 auto; } .main { height: 200px; background: yellow; } .clearFix::after { content: ""; display: block; clear: both; } </style> </head> <body> <div class="box clearFix"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> <div class="main"></div> </body> </html>
|
最终效果图
![]()