CSS学习8[重点]--盒子模型边框、内外边距设定和外边距合并
盒子模型
- 一、网页布局
- 二、盒子边框(box-border)
- 三、内边距(padding)
- 四、外边距(margin)
- 五、外边距合并
一、网页布局
- 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>