css中盒子的概念和特点（CSS进阶内容——盒子和阴影详解）
导读：CSS进阶内容 在学习了CSS基本知识之后，我们需要进一步了解CSS，因此写下了这篇文章...
CSS进阶内容
在学习了CSS基本知识之后 ，我们需要进一步了解CSS ，因此写下了这篇文章
当然如果没有学习之前的知识 ，可以到我的主页中查看之前的文章：秋落雨微凉 - 博客园
CSS三大特性
首先我们先来了解CSS的三大特点 ，以便于我们下面知识点的讲解
CSS三大特性包括： 层叠性 继承性 优先级层叠性
当相同的选择器设置相同的样式 ，却含有不同的样式值时 ，此时一个样式就会覆盖掉另一个冲突的样式 ，层叠性就是为了解决这个问题
层叠性原理：
样式冲突 ，遵循的原则是就近原则 ，哪个样式离结构近 ，就执行哪个样式 当样式不冲突时 ，不发生层叠性下面给出代码示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>层叠性</title> <!-- 对于下方div我们给出两个div的css设置 --> <style> /* 下面这种情况 ，颜色就出现了层叠性 ，因就近原则 ，这里div呈blue色 */ /* 同时 ，font-size因未发生冲突 ，不产生层叠性 */ div{ color: black; } div{ color: blue; font-size: 12px; } </style> </head> <body> <div>123</div> </body> </html>继承性
CSS中的继承：
当子类未设置对应属性时 ，子类继承成父类的某些样式（例如：字体颜色 ，字体大小等） 恰当使用可以简化代码 ，降低css复杂性 子元素只能够继承父类的某些样式（text- ，font- ，line-这些元素开头的 ，以及color属性）下面给出代码示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>继承性</title> <!-- 当我们不设置p属性仅设置div属性时 ，p会继承div的属性 --> <style> div{ color: pink; } </style> </head> <body> <div> <p>123321</p> </div> </body> </html>继承中的特殊属性-行高：
当继承行高时 ，可以采用font：字体大小/字体行高 这里的行高可以不带像素px ，而直接写2或1.5表示是字体大小的2倍或1.5倍 这样我们就可以根据自己的字体大小来调整行高下面给出代码示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>继承性</title> <!-- 我们可以直接设置行高为字体大小的倍数 ，以便于后来的开发 --> <style> div{ color: pink; font: 12px/1.5; } </style> </head> <body> <div> <p>123321</p> <p>123321</p> </div> </body> </html>优先级
当一个元素指向多种选择器时 ，会产生优先级
每种选择器都具有一定的权重：
选择器 选择器权重 继承或* 0.0.0.0 元素选择器 0.0.0.1 类选择器 ，伪类选择器 0.0.1.0 ID选择器 0.1.0.0 行内样式 1.0.0.0 ！important 重要的 无穷大注意：
权重由四组数决定 ，无法进位 从前往后比较 a链接默认制定样式 ，若修改需要对a改变权重叠加：
当采用复合选择器时 ，把所有选择器权重相加 ！！！注意：不可进位盒子模型
盒子模型是我们网络布局的最基础元素
网络布局过程：
先准备相关网页元素 ，网页元素基本都是盒子Box 利用css设计好盒子样式 ，并摆放到相应位置 往盒子里装内容盒子模型组成部分
盒子模型由四部分组成：
边框 border 内容 content 内边距 padding 外边距 margin 边框（border）边框border可以设置元素的边框 ，边框由三部分组成：边框宽度 ，边框样式 ，边框颜色
语法：
border-color：边框颜色 border-width：边框宽度 border-style：边框款式（solid实线 ，dashed虚线） border：颜色 宽度 款式（可以简化一起设置）边框是可以分别设置的：
border-top：上边框 border-bottom：下边框 border-left：左边框 border-right：右边框当我们只希望改变一条边框时 ，可以先定义全边框 ，再定义特别边框 ，这样css就会利用层叠性实现效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子边框</title> <style> div { height: 30px; width: 50px; /* 我们先定义全边框 */ border: 1px black dashed; /* 随后定义特殊边框 ，采用层叠性覆盖所需边框的原本边框设计 */ border-top: 2px red solid; } </style> </head> <body> <div></div> </body> </html>注意：当两侧都具有边框时 ，边框会汇聚在一起导致边框效果大打折扣
所以css提供了border-collapse：collapse来合并边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小说排名案例</title> <!-- 接下来我们对表格进行边框设计 --> <style> table{ /* 对table设置一个范围大小 */ height: 240px; width: 500px; } table,th,td { /* 对全部设置一个边框以及字体设置 */ border: 1px solid black; /* 合并相邻的边框 当两侧都具有边框时 ，中间边框会变成两侧边框之和（边框相聚） 我们需要采用border-collapse: collapse来合并边框 */ border-collapse: collapse; /* 我们稍微设置一下字体以及对齐 */ font-size: 12px; text-align: center; } </style> </head> <body> <table> <thead> <th>排名</th> <th>关键词</th> <th>趋势</th> <th>进入搜索</th> <th>最近七日</th> <th>相关链接</th> </thead> <tbody> <tr> <td>1</td> <td>鬼吹灯</td> <td>上升</td> <td>456</td> <td>123</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td>上升</td> <td>456</td> <td>123</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td>上升</td> <td>456</td> <td>123</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td>上升</td> <td>456</td> <td>123</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr> </tbody> </table> </body> </html>注意：边框会影响盒子实际大小
所以我们在设计盒子时需要保留边框粗细大小
例如：
当我们需要一个总体积为20*20的盒子 ，且需要边框2px 那么我们div的height和width只需设计到18px ，然后我们再加上border-width：2px即可 内边距（padding）padding属性用来设计内边距 ，即边框与内容之间的距离
主要分为四个内边距：
padding-top 上内边距 padding-bottom 下内边距 padding-left 左内边距 padding-right 右内边距内边距也存在简写方法：
/* 全部内边距 */ padding： 5px /* 上下和左右 */ padding： 5px 10px /* 上和左右和下 */ padding： 5px 10px 15px /* 上和右和下和左 */ padding： 5px 10px 15px 20px注意：padding也会影响盒子的大小
当存在padding时 ，盒子大小也会相应增加相对大小
所以我们在设计盒子时 ，同样也需要留下padding距离的大小
案例：巧妙利用padding设计导航栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>padding应用于导航栏</title> <style> .nav { /* 首先给大导航栏设计好高度和边框和底板颜色 ，设置line-height使文字始终居中 */ height: 41px; border-top: 3px orange solid; border-bottom: 1px #edeefe solid; background-color: #edeefea2; line-height: 41px; } a{ /* 需要先变成行内块元素才可以具有高度 ，我们需要高度来形成一个框架 ，使整个框架都是超链接 */ display: inline-block; height: 41px; font-size: 12px; text-decoration: none; color:#4c4c4c; /* 我们采用padding方法控制超链接之间的距离 ，使其相隔一段距离且不受字体长短影响 */ padding: 0 20px; } a:hover{ /* 我们希望在鼠标滑动在链接上时有明显显示 */ background-color: bisque; color:red; } </style> </head> <body> <div class="nav"> <a href="#">设为首页</a> <a href="#">新浪客户端</a> <a href="#">微博</a> <a href="#">关注我</a> </div> </body> </html>特定情况：当盒子没有设置height或者width时 ，padding不会撑开盒子
外边距（margin）margin用来设置外边距 ，即控制盒子与盒子之间的距离
主要分为四个外边距：
margin-top 上外边距 margin-bottom 下外边距 margin-left 左外边距 margin-right 右外边距外边距和内边距的简写方法也与padding完全相同:
/* 全部内边距 */ margin： 5px /* 上下和左右 */ margin： 5px 10px /* 上和左右和下 */ margin： 5px 10px 15px /* 上和右和下和左 */ margin： 5px 10px 15px 20px外边距典型应用：使块级盒子水平居中
要求：
盒子具有宽度width,高度height 盒子内设置margin： 0 auto；（只要保证左右margin是auto就确保居中）下面给出代码示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>块级元素居中</title> <!-- 给盒子设置宽度且盒子的左右margin为auto --> <style> .nav{ background-color: pink; height: 200px; width: 500px; margin: 0 auto; } </style> </head> <body> <div class="nav"></div> </body> </html>接下来我们也稍微介绍一下对于行内块/行内元素居中的方法：
使其对应的父类元素加上text-align：center即可 因为对于父类来说 ，行内块/行内元素属于父类的内部元素 ，所以将父类的内部元素居中即可实现行内块/行内元素居中下面给出代码示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>块级元素居中</title> <!-- 给盒子设置宽度且盒子的左右margin为auto --> <style> .nav{ background-color: pink; height: 200px; width: 500px; margin: 0 auto; /* 在这里设置text-align即可使内部元素居中 */ text-align: center; } </style> </head> <body> <div class="nav"> <span>123</span> </div> </body> </html>嵌套块元素垂直外边距塌陷问题：
当出现嵌套关系（父子关系）时 ，父元素和子元素同时有外边距时 ，此时父元素会塌陷较大的外边距值解决方案：
为父元素定义一个上边框:border：1px solid transparent 为父元素定义一个内边距：padding：1px 为父亲添加overflow：hidden <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>外边距塌陷问题</title> <!-- 当父类和子类都具有外边距时 ，父类会以较大的外边距为主进行移动 --> <!-- 如下所示 ，父亲的外边距为100px ，儿子仍旧紧贴父亲 --> <style> .father { width: 400px; height: 400px; background-color: purple; margin-top: 50px; } .son { width: 200px; height: 200px; background-color: red; margin-top: 100px; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>注意：因为网页很多元素都带有内外边距 ，且在各浏览器中标准不同 ，所以我们通常清除内外边距
我们常常把这行代码作为css内容的第一行
* { padding： 0； margin： 0； }稍微提一句：行内元素尽量只设置左右内外边距
案例：BOX模块案例让我们通过HTML和CSS还原下面这个网页排版
图片：
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>案例</title> <!-- 正常情况来说 ，我们分HTML和CSS两部分书写 ，但为了讲解简单 ，我们放在同一HTML中书写 --> <style> /* 第一步 ，去除内外边距 */ * { padding: 0; margin: 0; } /* 第二步 ，设置框架大盒子 */ .box { /* 数据都是采用PS测量 ，以后你们做项目时也会给出相应值或自己测量 */ height: 415px; width: 298px; background-color: rgba(255, 255, 255, 0); /* 我们希望把盒子居中显示 */ margin: 100px auto; } /* 第三步：我们设置图片和盒子一样宽 */ .box img { width: 100%; } /* 第四步：设置第一行小字 */ .review { font-family: 微软雅黑; font-size: 14px; /* 注意：设置整体高度 ，使无论多少文字 ，底部都是对齐的 */ height: 70px; padding: 0 28px; margin-top: 30px; } /* 第五步：设置第二行小字 */ .appraise { font-family: 微软雅黑; font-size: 12px; color: #b0b0b0; padding: 0 28px; margin-top: 28px; } /* 第六步：设置最后一行小字 ，我们分几部分设置 */ .info { font-size: 14px; padding: 0 28px; margin-top: 15px; } .info em { font-style: normal; color: #ebe4e0; margin: 0 6px 0 15px; } .info .price { color: #ff6700; } </style> </head> <body> <div class="box"> <!-- 首先我们放入照片 --> <img src="https://www.cnblogs.com/qiuluoyuweiliang/p/%E6%A1%88%E4%BE%8B%E7%85%A7%E7%89%87/1.png" alt="图片"> <!-- 放入第一行文字 --> <p class="review">快递牛 ，整体不错 ，蓝牙都可以秒连</p> <!-- 放入第二行文字 --> <p class="appraise">来自1923134的评价</p> <!-- 最后一行文字 --> <p class="info"><span class="name">Redmi AirDots真无线蓝...</span><em>|</em><span class="price">99.9元</span></p> </div> </body> </html>在这里插上一句：（因为我自己第一次做时出现了问题所以想向你们提醒一下）
有几个特殊的块级元素只能包含内嵌元素 ，不能再包含块级元素 ，这几个特殊的标签是：h1 、h2 、h3 、h4 、h5 、h6 、p 、dt 这里例如最后一行p ，我们不能插入h标题元素平面布局改善
除了正常的布局改善 ，我们也可以通过其他方法获得好看的图形样式
例如圆角边框和阴影 ，就会为我们的Web页面起到美化的作用
圆角边框border-radius就是用来控制图形四角的曲度
div { /* border-radius：length;里面设置的边角圆的半径 ，也可也设置百分比 如果你想获得一个圆形 ，需要把高度宽度设置一致且length设置成图形直径的一半即可（）； 如果你想获得一个圆角矩形 ，只需把length设置为高度的一半即可 注意：这里的角仍旧可以单独设置 当两个值时顺序分别是左上和右下 ，右上和左下 当四个值时顺序分别是左上 ，右上 ，右下 ，左下 */ border-radius：length; } 盒子阴影box-shadow用来设置盒子阴影
box-shadow通常有六个内部设置 ，一般直接简写：
box-shadow: 水平阴影（px） 垂直阴影（px） 模糊距离（px） 阴影尺寸（px） 颜色（color） 内部/外部（insert/outset） 我们一般常用设置为box-shadow: 10px 10px 10px -4px rbga(0,0,0,0.3) 注意：不可以写outset ，outset是默认的 ，如果写了会导致阴影失效 注意：阴影不占用盒子大小下面我们给出代码示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子阴影</title> <style> /* 可以直接设置框架 */ div { height: 200px; width: 200px; box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3); margin: 100px auto; } /* 也可以设置在当移动上才可显示 div:hover { height: 200px; width: 200px; box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3); margin: 100px auto; } */ </style> </head> <body> <div></div> </body> </html> 文字阴影text-shadow用来设置盒子阴影
box-shadow通常有四个内部设置 ，一般直接简写：
box-shadow: 水平阴影（px） 垂直阴影（px） 模糊距离（px） 颜色（color） 使用不多 ，了解即可结束语
好的 ，CSS进阶内容—盒子和阴影我们就讲到这里 ，你是否全部了解了呢？
下面我会介绍浮动定位 ，敬请期待哦~
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！