网页布局要学习三大核心,盒子模型,浮动和定位。学习好盒子模型能非常好的帮助我们布局页面
网页布局过程:
网页布局的核心本质:就是利用CSS摆盒子
border-style中常用的三种边框样式:
<style> div { width: 300px; height: 200px; border-width: 5px; /* border-width 边框的粗细 一般用px */ border-color: pink; border-style: solid; /* border-style: solid 实现边框 dashed虚线边框 dotted点线边框 */ } </style> <body> <div> </div> </body>
边框的复合写法:
课堂小案例:设置一个200*200的盒子,设置上边框为红色,其余边框为蓝色(提示:一定要注意边框的层叠性)
/* 正确写法1: */ div { width: 200px; height: 200px; border-width: 5px; border-style: solid; border-top-color: red; border-left-color: blue; border-bottom-color: blue; border-right-color: blue; } /* 太复杂 */ /* 正确写法2 */ div { width: 200px; height: 200px; border-width: 5px; border-style: solid; border-color: blue; border-top-color: red; } /* 此时border-color在上,border-top-color在下 */ /* 错误写法 */ div { width: 200px; height: 200px; border-width: 5px; border-style: solid; border-top-color: red; border-color: blue; } /* 此时border-color在下,border-top与border同属一种选择器,boeder-top被层叠,上边框也为蓝色,错误 */
边框会额外增加盒子的大小。因此我们有两种解决方案:
padding属性(简写属性)可以有一到四个值
注意:
当我们给盒子指定padding值之后,发生了两件事情:
也就是说,如果盒子已经有了高度和宽度,此时再指定内边框,会撑大盒子。
解决方案:
如果保证了盒子跟效果图大小保持一致,则让width/height减去多出来的内边距大小即可。
padding影响盒子大小的好处:
一定情况下保证了文字与文字之间间距相等.(如下例)
参考代码:
<style> .nav { height: 41px; border-top: 3px solid #ff8500; border-bottom: 1px solid #edeef0; background-color: #fcfcfc; } .nav a { text-decoration: none; display: inline-block; height: 41px; font-size: 12px; line-height: 41px; color: #4c4c4c; padding: 0 20px; } .nav a:hover { background-color: #eee; color: #ff8500; } </style> <body> <div class="nav"> <a href="#">新浪微博</a> <a href="#">手机新浪网</a> <a href="#">移动客户端</a> <a href="#">微博</a> <a href="#">关注我</a> </div> </body>
如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小.
例1:
<style> div { width: 300px; height: 100px; background-color: purple; } div p { padding: 30px; background-color: skyblue; } </style> <body> <div> <p></p> </div> </body>
此时,p标签(块元素,默认宽度撑满了整个div)未指定宽度和高度,p盒子的padding没有撑开div盒子 。
例2:
<style> div { width: 300px; height: 100px; background-color: purple; } div p { width: 100%; padding: 30px; background-color: skyblue; } </style> <body> <div> <p></p> </div> </body>
此时,p标签指定了宽度100%,撑大了div盒子。