盒子模型
一、网页布局
- CSS三大模块：盒子，浮动，定位。
- 盒子模型是把html中每个元素看成一个矩形的盒子。
- 每个矩形由元素内容、边距、边框组成。
二、盒子边框(box-border)
-
常用盒子边框设置
border: border-width || border-style || boder-color
设置border-style
- none 无
- solid 单实线，最为常用
- dashed 虚线
- dotted 点线
- double 双实线
<html> <head> <style> div { width: 100px; height: 200px; border-width: 1px; /*边框宽度*/ border-color: pink; /*边框颜色*/ border-style: solid; /*边框样式*/ border-style: dashed; border-style: dotted; } </style> </head> <body> <div>我是一个盒子</div> </body> </html><html> <head> <style> .user { border-width: 1px; /*边框宽度*/ border-color: pink; /*边框颜色*/ border-style: solid; /*边框样式*/ } .nc { border-top-width: 1px; /*上边框宽度*/ border-top-color: pink; /*上边框颜色*/ border-top-style: solid; /*上边框样式*/ border-bottom-width: 1px; /*下边框宽度*/ border-bottom-color: pink; /*下边框颜色*/ border-bottom-style: solid; /*下边框样式*/ } .email { border-top: 1px solid red; border-bottom: 1px solid green; } .ph { border: 1px solid skyblue; } </style> </head> <body> 用户名：<input type="text" class="user"/><br/><br/> 昵 称：<input type="text" class="nc"/><br/><br/> 邮 箱：<input type="text" class="email"/><br/><br/> 手 机：<input type="text" class="ph"/><br/><br/> </body> </html> -
表格边框美化
table {border-collapse: collapse} 合并相邻边框
<html> <head> <style> table { width: 100px; height: 200px; border: 1px solid pink; border-collapse: collapse; } td { border: 1px solid pink; } </style> </head> <body> <table> <tr> <td>123</td> <td>345</td> <td>234</td> </tr> </table> </body> </html> -
圆角边框
<html> <head> <style> div { width: 200px; height: 200px; border: 1px solid pink; } div:first-child { border-radius: 10px; /*设置角度，越大越圆*/ } div:nth-child(2) { border-radius: 100px; /*取值取高宽的一半会变成圆⚪*/ border-radius: 50%; } div:nth-child(3) { border-radius: 10px 40px; /*左上和右下是10px，令两个是40*/ } div:nth-child(4) { border-radius: 10px 40px 80px; /*左上是10px，右上左下是40px 右下80px*/ } div:nth-child(5) { border-radius: 10px 40px 80px 100px; /*左上是10px，右上是40px 右下80px 左下是100px*/ } div:nth-child(6) { border-radius: 50%; height: 100px; } </style> </head> <body> <div>10px</div> <div>50%或者100px</div> <div>10px 40px</div> <div>10px 40px 80px</div> <div>10px 40px 80px 100px</div> <div>胶囊</div> </body> </html>
三、内边距(padding)
-
内边距：内容距离边框的距离
padding: 值；
- 一个值，上下左右 - 两个值，上下是1，左右是2； - 三个值，上是1，左右是2，下是3； - 四个值，上右下左，顺时针<html> <head> <style> div { width: 200px; height: 200px; padding-left: 10px; padding: 10px; /*只写一个值表示上下左右都是10px*/ } </style> </head> <body> <div>内容</div> </body> </html> -
新浪导航栏
<html> <head> <style> nav { height: 41px; background-color: #FCFCFC; border-top: 3px solid orange; border-dottom: 1px solid #EDEEF0; } nav a { font-size: 14px; color: #4C4C4C; text-decoration: none; /*width: 100px;*/ height: 41px; background-color: pink; /*链接是行内元素没有大小，需要转换*/ padding: 0 15px; display: inline-block; } nav a:hover { ibackground-color: #eee; } </style> </head> <body> <nav> <a href="#">首页</a> <a href="#">手机新浪网</a> <a href="#">网页导航</a> </nav> </body> </html>
四、外边距(margin)
- 外边距：盒子外边距离
- 外边距可以实现盒子居中对齐，给左右设置auto。
- 必须是块级元素
- 盒子必须指定宽度（width）
.header { width: 900px; margin: 0 auto;}
<html> <head> <style> div { width: 100px; height: 100px; margin: 30px auto; padding: 4px; } </style> </head> <body> <div></div> </body> </html> - 居中和图片
<html> <head> <style> div { width: 100px; height: 100px; margin: 30px auto;/*盒子*/ text-align: center;/*文字*/ } section img { width: 200px; height: 100px; margin-top: 30px; margin-left: 50px; /*插入图片也是盒子*/ } aside { width: 200px; height: 100px; border: 1px solid purple; background: #fff url(#.png) 0 0 no-repeat; background-size: 200px 100px; } </style> </head> <body> 1. 文字水平居中 和盒子水平居中 <div>文字</div> 2. 插入图片和背景图片大小 <section> <img src="#.png" height="689" width="123" alt=""> </section> <aside> 123 </aside> 3. 一般情况下，背景图片适合做小图标 </body> </html> - 清除元素内外边距
注意：行内元素只有左右内外边距，没有上下内外边距。尽量不给行内元素指定上下的内外边距。<html> <head> <style> * { padding: 0; /*清除内边距*/ margin: 0; /*清除外边距*/ } </style> </head> <body> </body> </html>
五、外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
-
相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是两个之和，而是二者之中的较大者。
尽量避开即可。<html> <head> <style> div:first-child { width: 300px; height: 300px; background-color: pink; margin-bottom: 50px; } div:last-child { width: 300px; height: 300px; background-color: pink; margin-bottom: 30px; } </style> </head> <div></div> <!--上下两个盒子的距离为50px--> <div></div> <body> </body> </html> -
嵌套块元素垂直外边距的合并
对于嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为二者中较大的值，即使父元素的上外边距为0，也会发生合并。
解决方案：- 为父元素定义1像素的上边框或者上内边距。
- 为父元素添加overflow: hidden。
<html> <head> <style> .father { width: 300px; height: 300px; background-color: pink; /*border: 1px solid red; /*解决外边距合并问题*/ /*padding: 1px;*/ /*overflow: hidden; BFC*/ } .son { width: 300px; height: 300px; background-color: pink; margin-top: 30px; /*只有这一行时，两个盒子一起距离30px，两个盒子top重叠*/ } </style> </head> <div class="father"> <div class="son"></div> </div> <body> </body> </html>