看透网页布局本质

行内元素比如文字类似牛奶，需要一个盒子把他们装起来，我们所学过的双标签都是一个盒子。有了盒子，我们就能任意的，自由的摆放位置了。

看透网页布局的本质：把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。

比如我们打开小米的官网：

显而易见，他就是由一个个大小不一功能不同的盒子组成。

盒子模型组成

上面的图片说明了盒子模型(Box Model)：
Margin(外边距) - 清除边框外的区域，外边距是透明的
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

盒子边框

border: 1px solid pink;

这是边框的综合写法，表示要一个大小1像素的实线粉色边框

圆角边框

border-radius: 10px /*一个数值表示四个角都是相同的10px的弧度*/

像素值如果取宽度和高度的一半，则会变成一个圆形，可以用百分制表示

内边距（padding）

什么是内边距？
内边距就是内容和边框之间的距离

padding-left: 10px; /*左内边距*/
padding: 20px; /*padding如果只写一个值，表示上下左右都是20像素*/
padding: 10px 30px; /*上下10像素，左右30像素*/
padding: 10px 30px 50px /*上10，左右30，下50*/
padding:10px 20px 30px 40px /*顺时针表示，上右下左*/

外边距（margin）

我们可以通过margin相关操作来实现盒子在浏览器中的移动
比如我们想让盒子向下移动20像素：

margin-top: 20px;

更重要的是，我们可以通过margin实现盒子在浏览器中居中对齐

居中对齐需要满足以下两个条件：
1.必须是块级元素
2.盒子必须指定了宽度

例如：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><style>* {margin: 0;padding: 0;}div {width: 500px;height: 200px;background-color: pink;margin: 20px auto;}</style></head><body><div>居中对齐</div></body>
</html>

在浏览器中实现效果为：

上下可以随意指定大小，但是左右一定要是auto

插入图片与背景图片在更改大小和位置时的区别

这里先插播一条知识点：
文字水平居中：

text-align: center;

背景图片更改大小时只能用background-size
背景图片更改可以在background中简写表示：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><style>* {margin: 0;padding: 0;}div {width: 800px;height: 700px;background: #000 url(curry.jpg) 50px 200px no-repeat;/*背景图片更改位置*/background-size: 300px 300px;/*背景图片更改大小*/}</style></head><body><div></div></body>
</html>

插入图片更改大小及位置：

img {width:200px;  /*插入图片更改大小用width和height*/height:220px;margin-top:30px;  /*插入图片更改位置可以用margin和padding*/margin-left:50px;

行内元素上下内外边距问题

注意：行内元素是只有左右外边距的，是没有上下内边距的
我们尽量不要给行内元素指定上下内外边距

外边距合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则它们之间的垂直距离不是二者相加，而是两者之中的最大者。这种现象被称为相邻块元素垂直外边距的合并

上述问题影响不大，尽量避免就好。但是在开发过程中遇到最多问题的是嵌套块元素垂直边距的合并问题

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并

下面我们着重讲嵌套块元素垂直边距合并的解决办法：
先给一个示例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><style>* {margin: 0;padding: 0;}.father {width: 300px;height: 300px;background-color: pink;}.son {width: 200px;height: 200px;background-color: #000;margin-top: 30px;}</style></head><body><div class="father"><div class="son"></div></div></body>
</html>

在子类中我们给子块一个 margin-top: 30px ,我们希望的是这样：

但发生了合并，实际上是这样：

小黑快并没有下来，那么我们如何解决呢？

解决方案：

1.可以为父元素定义1像素的上边框或上内边框
2.可以为父元素添加 overflow:hidden

行内元素与块级元素的切换

链接: link

CSS3盒模型

1.box-sizing: content-box 盒子大小为width+padding+border

2.box-sizing: border-box 盒子大小为width 就是说padding和border是包含在width里面的

盒子阴影

box-shadow: 水平距离 垂直距离 模糊程度 阴影大小 阴影颜色  内外阴影;

前两个是必写的，后四个是可选的。

综合案例

接下来，通过我们学习的盒子模型的知识，做一下新浪网的一个侧边栏

我们就完成这个综合趣图这部分就好：

代码示例如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><style>* {padding: 0;margin:0;}ul {list-style: none;/*取消列表自带的小点*/}.searchpic {width: 363px;height: 450px;border:1px solid #d9e0ee;border-top: 3px solid #ff8400;margin: 100px;}.searchpic h3 {height: 54px;line-height: 54px;/*让文字垂直居中*/border-bottom: 1px solid #d9e0ee;font-size: 22px;font-weight: normal;/*粗体不变粗*/padding-left: 18px;}.searchpic img {display: block;margin: 7px auto;}.searchpic ul li a {font-size: 18px;color: #666;text-decoration: none;}.searchpic ul {margin-left: 8px;}.searchpic ul li {padding-left: 10px;height: 36px;line-height: 36px;background: url(小点.png) no-repeat left center;/*背景靠左垂直居中*/}.searchpic ul li a:hover {text-decoration: underline;color: #ff8400;}</style></head><body><div class="searchpic"><h3>搜索趣图</h3><img src="捕获.PNG" height="240" width="326" alt=""><ul><li><a href="#">GIF: 猜不到结局的神仙画作</a></li><li><a href="#">《2021中国的航天》包皮书发布</a></li><li><a href="#">spaceX火箭残骸今年3月将撞上月球</a></li></ul></div></body>
</html>

最后就是这样的一个效果：

【CSS3】一文搞懂盒子模型（知识点加案例）相关推荐

【CSS3】一文搞懂盒子模型
像素值如果取宽度和高度的一半,则会变成一个圆形,可以用百分制表示 [](()内边距(padding) ================================================= ...
图文结合！一文搞懂 Redis 常用知识点！
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 来源 | rrd.me/fcM4t 常用的 SQL 数据 ...
一文搞懂敏捷估算及实践案例分享【壕叔盘敏捷】
一.前言在业务研发中估算一直是相对比较难以把握的事情,本文结合个人和团队的经验来谈谈对估算的认知和实践.先介绍一下个人的背景,以方便大家更好理解我们的出发点. 个人是研发出身,做过多年交付型项目经理 ...
一文搞懂Java中类的加载顺序+阿里面试题实战（大白话分析+总结）
执行顺序:(优先级从高到低.)静态代码块>mian方法>构造代码块>构造方法. 其中静态代码块只执行一次.构造代码块在每次创建对象是都会执行. 1 类加载从上往下执行,依次执行静态的 ...
网络知识扫盲，一文搞懂 DNS
在找工作面试的过程中,面试官非常喜欢考察基础知识,除了数据结构与算法之外,网络知识也是一个非常重要的考察对象. 而网络知识,通常是很抽象,不容易理解的,有很多同学就在这里裁了跟头.为了更好地通过面试, ...
一文搞懂HMM（隐马尔可夫模型）-Viterbi algorithm
***一文搞懂HMM(隐马尔可夫模型)*** 简单来说,熵是表示物质系统状态的一种度量,用它老表征系统的无序程度.熵越大,系统越无序,意味着系统结构和运动的不确定和无规则:反之,,熵越小,系统越有序, ...
一文搞懂如何使用ArcGIS API for Python训练深度学习模型
一文搞懂如何使用ArcGIS API for Python训练深度学习模型文章目录一文搞懂如何使用ArcGIS API for Python训练深度学习模型写在前面一.ArcGIS API f ...
一文搞懂TCP/IP四层模型
一文搞懂TCP/IP四层模型上篇介绍过了OSI七层网络模型,本文将介绍四层网络模型,七层网络模型只是理论实现,但是市面上更实际的是四层模型. 七层模型和四层模型比较将应用层,表示层,会话层这些应用 ...
一文搞懂RNN(循环神经网络）
基础篇|一文搞懂RNN(循环神经网络) https://mp.weixin.qq.com/s/va1gmavl2ZESgnM7biORQg 神经网络基础神经网络可以当做是能够拟合任意函数的黑盒子,只 ...

【CSS3】一文搞懂盒子模型（知识点加案例）