Web前端学习第十天·fighting_盒子模型
什么是盒子模型
一个页面元素由:元素、边框、内边距、外边距构成。
width和height通常指元素的高度和宽度。元素的实际高度和宽度的计算如下图所示:(元素的宽度和高度是不加外边距margin的,展位的宽度和高度需要加上margin)
技巧:margin-left=margin-right=auto时,元素可以水平居中。
一般在网页设计过程中,body元素根据浏览器的不同会有不同的margin的默认值,一般要手动设置为0px。
示例代码:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>盒子模型的概念</title> 6 <meta charset="utf-8" /> 7 </head> 8 <body style="border:1px solid blue;margin:0px;"> 9 <div style="border:1px solid;width:200px;height:150px;padding:25px;margin:auto;"> 10 盒子模型的结构图 11 </div> 12 </body> 13 </html>
盒子模型的尺寸样式
width 元素的宽度。使用频率极高(网页实际设计过程中绝大多数情况都使用px作为宽度设置的单位)。
块级标签的特点:
1.默认填充整个父容器,等效于width:100%。
2.可以使用width:length的方式指定宽度。
行级标签的特点:
1.行级元素的宽度不是认为指定的,是由元素内容本身的宽度来决定的。如果要设置width则必须使用display:block将行级标签变成块级标签。
示例代码如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>盒子模型的尺寸样式</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div { 9 border:1px solid red; 10 } 11 </style> 12 </head> 13 <body> 14 <ul> 15 <li> 16 <h3>width元素宽度(块级标签:div,li,ol,ul等)</h3> 17 <div style="width:300px;"> 18 这是一个块级标签 19 </div> 20 <dl> 21 <dt>块级标签的特点:</dt> 22 <dd> 23 1.默认填充整个父容器,等效于width:100% 24 </dd> 25 <dd> 26 2.可以使用width:length的方式指定宽度 27 </dd> 28 </dl> 29 </li> 30 <li> 31 <h3>width元素宽度(行级标签:a,span,input,i,em标签等)</h3> 32 <span> 33 这是一个行级标签 34 </span> 35 <p><strong>1.行级元素的宽度不是认为指定的,是由元素内容本身的宽度来决定的。如果要设置width则必须使用display:block将行级标签变成块级标签。</strong> </p> 36 </li> 37 <li> 38 <h3>width元素宽度(行级标签:a,span,input,i,em标签等)</h3> 39 <span> 40 这是一个行级标签 41 </span> 42 <p><strong>将行级标签变成块级标签后如下所示:</strong> </p> 43 <span style="display:block;"> 44 这是一个行级标签转变成块级标签后的样式 45 </span> 46 </li> 47 </ul> 48 </body> 49 </html>
min-width(只适用于块级标签)
元素的最小宽度,一般用于网页整体布局的美观性,使用频率一般。
与width同时使用,应用两者中比较大的那个。
语法:min-width:length | percentage(父容器的百分比)| none
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>盒子模型的尺寸样式</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div { 9 border:1px solid red; 10 } 11 </style> 12 </head> 13 <body> 14 <ul> 15 <li> 16 <h3>min-width最小宽度的设置</h3> 17 <div style="min-width:500px;height:100px;width:350px;"> 18 <b>min-width:500px;width:350px;</b> 19 </div> 20 <div style="min-width:300px;height:100px;"> 21 22 </div> 23 <div style="min-width:300px;height:100px;"> 24 25 </div> 26 </li> 27 </ul> 28 </body> 29 </html>
当网页在进行缩放时通常会出现网页内容混乱和错位的情况,可以设置min-width来解决这类问题。
max-width 元素的最大宽度,使用频率较低。
语法:max-width:none | <percentage>(父容器的百分比) | length
与width一起使用时取最小值来应用。
示例代码如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>盒子模型的尺寸样式</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div { 9 border:1px solid red; 10 } 11 </style> 12 </head> 13 <body> 14 <ul> 15 <li> 16 <h3>max-width最大宽度的设置</h3> 17 <div style="max-width:500px;height:100px;width:200px;"> 18 <b>max-width:500px;width:200px;</b> 19 </div> 20 <div style="max-width:500px;height:100px;width:900px;"> 21 <b>max-width:500px;width:900px;</b> 22 </div> 23 </li> 24 </ul> 25 </body> 26 </html>
height 元素的高度,使用的频率非常高,绝大部分情况下使用px作为单位。
语法:height:length(按照指定高度来呈现内容) | percentage(父元素的百分比) | auto(默认为auto,根据内容进行调整)
对于图片对象来说,设定了此属性后,它的宽度将按照原图的比例进行缩放。
当内容高度大于设置的高度时,内容将会跑出容器外面去,通常情况下需要使用overflow:hidden把超出容器范围的内容进行隐藏。
注意:<body>是块级标签,与<div>类似,高度根据内容的变化而变化。
网页的设计思想:在布局思想中使用顶级父元素控制整体的高度。
如果body没有设置高度且其中没有内容而想要设置内部div的高度时,可以给div设置position:absolute(绝对定位),在设置它的width属性,而后可以设定它的height属性值(百分比)改变高度。(根据可视区域的百分比来进行显示)
示例代码如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>加深对height的理解</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div { 9 border:1px solid red; 10 } 11 </style> 12 </head> 13 <body> 14 <div style="height:50%;position:absolute;width:300px;"> 15 设置子元素为相对位置,指定它的宽度,而后可以根据body的可视区域的大小设置高度(百分比) 16 </div> 17 </body> 18 </html>
min-height与max-height 最小和最大的高度,一般用于整体布局的美观性,常用px作为单位,使用频率较小。
与min-width和max-width属性类似。
min-height和height同时使用时,取较大值进行应用。
max-height和height同时使用时,取较小值进行应用。
示例代码如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>最小和最大高度的示例</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div { 9 border:1px solid red; 10 } 11 </style> 12 </head> 13 <body> 14 15 <div style="min-height:200px;height:100px;"> 16 min-height和height同时使用时,取较大值进行应用。 17 </div> 18 <div style="max-height:200px;height:100px;"> 19 max-height和height同时使用时,去较小值进行应用。 20 </div> 21 </body> 22 </html>
min-height和max-height同时设置时,高度选min-height的值进行显示。
代码示例如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>最小和最大高度的示例</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div { 9 border:1px solid red; 10 } 11 </style> 12 </head> 13 <body> 14 15 <div style="min-height:20px;max-height:40px;"> 16 min-height和max-height同时存在,且前者小于后者,height设置为min-height的值进行显示 17 </div> 18 <div style="height:40px;background-color:pink;"> 19 40px; 20 </div> 21 <div style="min-height:60px;max-height:40px;"> 22 min-height和max-height同时存在,且前者大于后者,height设置为min-height的值进行显示 23 </div> 24 </body> 25 </html>
运行结果为:
边框样式
boder 元素的边框的复合属性的设置(包括border-width,border-style,border-color),使用频率较高。
语法:border:[ border-width ](边框的厚度,多以px为单位,可以分上、右、下、左的顺序给四个边框不同的值) || [ border-style ](边框的样式,none表示没有边框,hidden表示隐藏边框,dotted点状轮廓,dashed虚线轮廓,solid实线边框,最常用,double双线轮廓,groove3D凹槽轮廓,ridge3D凸槽轮廓,inset3D凹边轮廓,outset3D凸边轮廓。如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。) || [ border-color ]
注意:border只能设置四条边的统一样式,想要给四条边设置不同样式时,需要分别设置border-width、border-style、border-color的属性值。
示例代码如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>边框样式的设置</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 9 </style> 10 </head> 11 <body> 12 <div style="width:300px;height:100px;border-width:2px 3px 3px 5px; border-style:solid solid dashed double;border-color:red pink gray blue;"> 13 针对边框的四条边分别进行设置 14 </div> 15 <br/> 16 <div style="width:400px;height:200px;border:2px double red;"> 17 对边框的四条边整体进行设置 18 </div> 19 </body> 20 </html>
运行结果如下:
border-radius 圆角的设置(重要!!!!!)
设置或检索对象使用圆角边框。提供2个参数,2个参数以“/”分隔,每个参数允许设置1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数。
水平半径:如果提供全部四个参数值,将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
如果只提供一个,将用于全部的于四个角。
如果提供两个,第一个用于上左(top-left)、下右(bottom-right),第二个用于上右(top-right)、下左(bottom-left)。
如果提供三个,第一个用于上左(top-left),第二个用于上右(top-right)、下左(bottom-left),第三个用于下右(bottom-right)。
垂直半径也遵循以上4点。
示例代码如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>边框样式的设置</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 9 </style> 10 </head> 11 <body> 12 <h3>boder-radius 4个圆角的设置:如京东购物车右上角显示的0件物品的图标可以用此属性来实现</h3> 13 <p> 14 <b>line-height:14px;text-align:center;用来设置文本(0)的竖直和水平方向的居中显示</b> 15 </p> 16 <div style="width:16px;height:14px;border-radius:7px 7px 7px 0;border:1px solid red;background-color:red;color:white;line-height:14px;text-align:center;"> 17 0 18 </div> 19 20 <hr/> 21 <p> 22 <b>给一个值,用到四个角上,下图还可以通过圆角修饰变成一个圆</b> 23 </p> 24 <div style="width:45px;height:45px;background-color:orange;border-radius:5px;"> 25 26 </div> 27 <hr/> 28 <p><b>给四个角不同的值</b></p> 29 <div style="width:60px;height:50px;background-color:pink;border-radius:5px 10px 25px 45px;"> 30 31 </div> 32 <hr /> 33 <p><b>给两个值:第一个用于上左、下右;第二个用于上右,下左</b></p> 34 <div style="width:60px;height:50px;background-color:gray;border-radius:10px 45px;"> 35 36 </div> 37 <hr /> 38 <p><b>给三个值:第一个用于上左;第二个用于上右,下左;第三个用于下右</b></p> 39 <div style="width:60px;height:50px;background-color:rebeccapurple;border-radius:10px 20px 45px;"> 40 41 </div> 42 <hr /> 43 <p><b>给一个值:给定水平和垂直半径</b></p> 44 <div style="width:60px;height:50px;background-color:green;border-radius:10px/20px;"> 45 46 </div> 47 <hr /> 48 <p><b>给两个值:分别给定水平和垂直半径</b></p> 49 <div style="width:60px;height:50px;background-color:green;border-radius:10px 35px/20px 30px;"> 50 51 </div> 52 </body> 53 </html>
运行结果如下:
padding内边距
内填充的复合属性设置(复合属性有:padding-top、padding-right、padding-bottom、padding-left),使用频率较高。
语法:padding:[ <length> | <percentage> ]{1,4}
如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。
如果只提供一个,将用于全部的四边。
如果提供两个,第一个用于上、下,第二个用于左、右。
如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。
padding-left比较常用。
示例代码如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>内边距的设置</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div,span { 9 border:2px solid red; 10 } 11 </style> 12 </head> 13 <body> 14 <ul> 15 <li> 16 <h3>padding提供一个值</h3> 17 <div style="width:200px;text-align:center;padding:5px;"> 18 (块级标签)提供一个值 19 </div> 20 <hr /> 21 <span style="width:200px;text-align:center;padding:5px;"> 22 (行级标签)提供一个值 23 </span> 24 </li> 25 <li> 26 <h3>padding提供两个值:第一个给上下,第二个给左右</h3> 27 <div style="width:200px;text-align:center;padding:5px 15px;"> 28 块级标签 提供两个值 29 </div> 30 <hr /> 31 <span style="width:200px;text-align:center;padding:5px 15px;"> 32 行级标签 提供两个值 33 </span> 34 </li> 35 <li> 36 <h3>padding提供三个值:第一个给上,第二个给左右,第三个给下</h3> 37 <div style="width:200px;text-align:center;padding:5px 15px 30px;"> 38 块级标签 提供三个值 39 </div> 40 <hr /> 41 <span style="width:200px;text-align:center;padding:5px 15px 30px;"> 42 行级标签 提供三个值 43 </span> 44 </li> 45 <li style="list-style:none;"> 46 <br/><br /> 47 </li> 48 <li> 49 <h3>padding提供四个值:第一个给上,第二个给右,第三个给下,第四个给左</h3> 50 <div style="width:200px;text-align:center;padding:5px 15px 30px 10px;"> 51 块级标签 提供四个值 52 </div> 53 <hr /> 54 <span style="width:200px;text-align:center;padding:5px 15px 30px 10px;"> 55 行级标签 提供四个值 56 </span> 57 </li> 58 </ul> 59 </body> 60 </html>
margin外边距(与padding的学习类似)
外边距综合属性设置,使用频率较高。
语法:margin:[ <length> | <percentage> | auto(值被设定为相对边的值,可以设置元素的居中) ]{1,4}
如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。
如果只提供一个,将用于全部的四边。
如果提供两个,第一个用于上、下,第二个用于左、右。
如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。
内联对象(即行级标签)可以使用该属性设置左、右两边的外补丁;若要设置上、下两边的外补丁,必须先使该对象表现为块级或内联块级(应用很少)。
外延边距始终透明。
示例代码如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>外边距的设置</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div,span { 9 border:1px solid red; 10 } 11 </style> 12 </head> 13 <body> 14 <ul> 15 <li> 16 <h3> 17 行级元素的外边距 18 </h3> 19 <span>第一个元素</span> 20 <span style="margin-left:15px;">第二个元素</span> 21 <span>第三个元素</span> 22 </li> 23 <li> 24 <h3> 25 行级元素的外边距的一个特点:观察第二个元素和第三个元素之间的距离 26 </h3> 27 <span>第一个元素</span> 28 <span style="margin-left:15px;">第二个元素</span><span>第三个元素</span> 29 </li> 30 <li> 31 <h3> 32 行级元素的外边距的一个特点:观察第二个元素和第三个元素之间的距离 33 </h3> 34 <span>第一个元素</span> 35 <span style="margin-left:15px;margin-right:10px;">第二个元素</span><span>第三个元素</span> 36 </li> 37 <li> 38 <h3> 39 若要设置上、下两边的外补丁,必须先使该对象表现为块级或内联块级。 40 </h3> 41 <span>第一个元素</span> 42 <span style="margin-left:15px;margin-top:30px;display:inline-block;margin-bottom:50px;">第二个元素</span><span>第三个元素</span> 43 <div>底层元素</div> 44 </li> 45 </ul> 46 </body> 47 </html>
运行效果如下:
顶部外边距和底部外边距的取舍问题:取较大的值为最后的外边距显示两元素之间的距离。
示例代码如下:
1 <li> 2 <h3>顶部外边距和底部外边距的取舍问题</h3> 3 <div style="margin-bottom:10px;"> 4 第一层 5 </div> 6 <div style="margin-top:20px;"> 7 第二层 8 </div> 9 </li>
运行结果:
属性的综合使用
示例代码如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>外边距的设置</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div,span { 9 border:1px solid red; 10 } 11 </style> 12 </head> 13 <body> 14 <h3>属性的综合使用</h3> 15 <ul style="list-style:none;"> 16 <li style="border:1px solid red;display:inline-block;">首页</li> 17 <li style="border:1px solid red;display:inline-block;margin-left:15px;">登录</li> 18 <li style="border:1px solid red;display:inline-block;margin-left:15px;">注册</li> 19 <li style="border:1px solid red;display:inline-block;margin-left:15px;">我的订单</li> 20 </ul> 21 </body> 22 </html>
运行效果:
啊太晚了,小例子明天补上
补上我的小例子
京东顶部导航条的实现
代码如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>京东顶部导航条</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 body,ul,div{ 9 margin:0px; 10 padding:0px; 11 } 12 ul,li { 13 padding:0px; 14 display:inline-block; 15 list-style:none; 16 } 17 a { 18 text-decoration:none; 19 color:#C81623; 20 } 21 .diCeng { 22 width:100%; 23 height:30px; 24 line-height:30px; 25 background-color:#F1F1F1; 26 } 27 .content { 28 margin:auto 100px; 29 } 30 .right { 31 float:right; 32 } 33 .right-content { 34 float:left; 35 } 36 .i1 { 37 top: 12px; 38 right: 8px; 39 height: 7px; 40 overflow: hidden; 41 font: 400 15px/15px consolas; 42 color: #6A6A6A; 43 } 44 .i2 { 45 font:900 30px/30px 宋体; 46 } 47 .jiange { 48 width: 1px; 49 height: 12px; 50 margin-top: 9px; 51 padding: 0; 52 background: #ddd; 53 overflow: hidden; 54 } 55 </style> 56 </head> 57 <body> 58 <div class="diCeng"> 59 <div class="content"> 60 <ul class="left"> 61 <li> 62 <i class="i1">送至:</i> 63 <select> 64 <option>北京</option> 65 <option selected="selected">上海</option> 66 </select> 67 </li> 68 </ul> 69 <ul class="right"> 70 <li> 71 <ul class="right-content"> 72 <li> 73 <i class="i1">你好,请登录 <a href="#">免费注册</a></i> 74 </li> 75 <li class="jiange"></li> 76 <li> 77 <i class="i1">我的订单</i> 78 </li> 79 <li class="jiange"></li> 80 <li> 81 <i class="i1">我的京东</i> 82 </li> 83 <li class="jiange"></li> 84 <li> 85 <i class="i1">京东会员</i> 86 </li> 87 <li class="jiange"></li> 88 <li> 89 <i class="i1">企业采购</i> 90 </li> 91 <li class="jiange"></li> 92 <li> 93 <i class="i1">手机京东</i> 94 </li> 95 <li class="jiange"></li> 96 <li> 97 <i class="i1">关注京东</i> 98 </li> 99 <li class="jiange"></li> 100 <li> 101 <i class="i1">客户服务</i> 102 </li> 103 <li class="jiange"></li> 104 <li> 105 <i class="i1">网站导航</i> 106 </li> 107 </ul> 108 </li> 109 </ul> 110 </div> 111 </div> 112 <div style="background-color:pink;text-align:center;height:600px;line-height:600px;"> 113 <h1>Try my best doing this!O(∩_∩)O~</h1> 114 </div> 115 </body> 116 </html>
运行结果:
我遇到一个问题,就是粉红色区域上边的那一条白边怎么都去不掉,用谷歌浏览器的工具发现是因为<h1>标签的margin-top,于是我把它设置为0后,白色条消失,但是!!!!!but!!!!!我耍流氓的那段文字就!!!不!居!!!中!!!了!!!(同样的情况在下面的例子中不会出现这样的问题)
求大神指点/(ㄒoㄒ)/~~
新浪顶部导航条的实现
代码如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>新浪顶部导航条</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 body, div,h1 { 9 margin:0px; 10 padding:0px; 11 } 12 i { 13 font-style:normal; 14 font-weight:normal; 15 font-size:12px; 16 display: inline-block; 17 height: 17px; 18 padding: 12px 9px 12px 16px; 19 line-height:16px; 20 color:#4c4c4c; 21 font-family:Microsoft YaHei,微软雅黑,SimSun,宋体; 22 } 23 .diceng { 24 width:100%; 25 height:46px; 26 } 27 .diceng-content { 28 width:100%; 29 height:41px; 30 border-top:3px solid #FF8500; 31 border-bottom:1px solid #edeef0; 32 background-color:#fcfcfc; 33 } 34 .content { 35 height:41px; 36 margin:0 174.5px; 37 } 38 .content-left { 39 width:271.56px; 40 height:43px; 41 /*background-color:gray;*/ 42 display:inline-block; 43 line-height:43px; 44 /*float:left;*/ 45 } 46 .content-content { 47 height:41px; 48 line-height:41px; 49 display:inline-block; 50 } 51 .content-right { 52 display:inline-block; 53 float:right; 54 } 55 </style> 56 </head> 57 <body> 58 <div class="diceng"> 59 <div class="diceng-content"> 60 <div class="content"> 61 <div class="content-left"> 62 <div class="content-content"> 63 <i>设为首页</i> 64 </div> 65 <div class="content-content"> 66 <i>手机新浪网</i> 67 </div> 68 <div class="content-content"> 69 <i>移动客户端</i> 70 </div> 71 </div> 72 <div class="content-right"> 73 <div class="content-content"> 74 <i>登录</i> 75 </div> 76 <div class="content-content"> 77 <i>微博</i> 78 </div> 79 <div class="content-content"> 80 <i>博客</i> 81 </div> 82 <div class="content-content"> 83 <i>邮箱</i> 84 </div> 85 <div class="content-content"> 86 <i>网站导航</i> 87 </div> 88 </div> 89 </div> 90 </div> 91 </div> 92 <div style="background-color:pink;text-align:center;height:600px;line-height:600px;list-style:none;"> 93 <h1>Try my best doing this!O(∩_∩)O~</h1> 94 </div> 95 </body> 96 </html>
运行结果: