From cfed62f990ec0bf0056e1f48defd44a9b84417a8 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Mon, 25 Jul 2022 22:28:46 +0800 Subject: [PATCH] =?UTF-8?q?update:=20=E5=85=83=E7=B4=A0=E6=B0=B4=E5=B9=B3?= =?UTF-8?q?=E5=9E=82=E7=9B=B4=E5=B1=85=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 02-CSS基础/06-CSS盒模型详解.md | 8 ++------ 03-CSS进阶/04-如何让一个元素水平垂直居中？.md | 15 +++++++++++---- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/02-CSS基础/06-CSS盒模型详解.md b/02-CSS基础/06-CSS盒模型详解.md index c0a6c5b..3aa8d0a 100644 --- a/02-CSS基础/06-CSS盒模型详解.md +++ b/02-CSS基础/06-CSS盒模型详解.md @@ -63,7 +63,7 @@ CSS盒模型和IE盒模型的区别： - **IE盒子模型**中，**width 和 height 指的是内容区域+border+padding**的宽度和高度。 -注：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。区别在于，Android中没有border这个东西，而且在Android中，margin并不是控件的一部分，我觉得这样做更合理一些，呵呵。 +注：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。区别在于，Android中没有border这个东西，而且在Android中，margin并不是控件的一部分。 ### ``标签也有margin @@ -146,8 +146,7 @@ CSS盒模型和IE盒模型的区别： 上面这两个盒子的盒模型图如下： -![](http://img.smyhvae.com/20170728_0925.png) - +![](https://img.smyhvae.com/20170728_0925.png) **如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width**。因为盒子变胖了是灾难性的，这会把别的盒子挤下去。 @@ -533,8 +532,6 @@ div{ 另外，我们在上方代码的基础之上，再加一个 `border-radus: 20px;` 就能画出一个扇形。 -关于盒模型的更多内容，请查看本项目的另外一篇文章：《13-前端面试/面试必看/02-CSS盒模型及BFC.md》 - ## 我的公众号 想学习**更多技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 @@ -543,4 +540,3 @@ div{ ![](http://img.smyhvae.com/20190101.png) - diff --git a/03-CSS进阶/04-如何让一个元素水平垂直居中？.md b/03-CSS进阶/04-如何让一个元素水平垂直居中？.md index 4106c78..6732381 100644 --- a/03-CSS进阶/04-如何让一个元素水平垂直居中？.md +++ b/03-CSS进阶/04-如何让一个元素水平垂直居中？.md @@ -97,7 +97,9 @@ publish: true 那还有没有比较好的通用的做法呢？ -### 方式一：绝对定位 + margin（需要指定子元素的宽高，不推荐） +### 方式1：绝对定位 + margin + +> 需要指定子元素的宽高，不推荐。 ```html @@ -146,7 +148,9 @@ publish: true 但是，在通常情况下，对那些需要居中的元素来说，其宽高往往是由其内容来决定的，不建议固定宽高。 -### 方式二：绝对定位 + translate（无需指定子元素的宽高，推荐） +### 方式2：绝对定位 + translate + +> 无需指定子元素的宽高，推荐。 ```html @@ -185,8 +189,11 @@ publish: true 这种写法，在没有指定子元素宽高的情况下，也能让其在父容器中垂直居中。因为 translate() 函数中使用百分比值时，是以这个元素自身的宽度和高度为基准进行换算和移动的（**动态计算宽高**）。 +### 方式3：绝对定位 + top,left,bottom,right = 0 + margin: auto -### 方式3：flex 布局（待改进） +> 无需指定子元素的宽高，推荐。 + +### 方式4：flex 布局（待改进） 将父容器设置为 Flex 布局，再给父容器加个属性`justify-content: center`，这样的话，子元素就能水平居中了；再给父容器加个属性 `align-items: center`，这样的话，子元素就能垂直居中了。 @@ -228,7 +235,7 @@ publish: true 上面这种写法，不足之处在于：给父容器设置属性`justify-content: center`和`align-items: center`之后，导致父容器里的所有子元素们都垂直居中了（如果父容器里有多个子元素的话）。可我明明想让指定的**某个子元素**居中，要怎么改进呢？ -### 方式4： flex 布局 + margin: auto（推荐） +### 方式5： flex 布局 + margin: auto（推荐） 我们只需写两行声明即可：先给父容器设置 `display: flex`，再给指定的子元素设置我们再熟悉不过的 `margin: auto`，即可让这个指定的子元素在**剩余空间**里，水平垂直居中。大功告成。