mirror of https://github.com/qianguyihao/Web.git
update: 元素水平垂直居中
This commit is contained in:
qianguyihao
parent
ed181717e8
commit
cfed62f990
|
|
@ -63,7 +63,7 @@ CSS盒模型和IE盒模型的区别：
|
|||
- <font color="#0000FF">**IE盒子模型**</font>中，<font color="#0000FF">**width 和 height 指的是内容区域+border+padding**</font>的宽度和高度。
|
||||
|
||||
|
||||
注：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。区别在于，Android中没有border这个东西，而且在Android中，margin并不是控件的一部分，我觉得这样做更合理一些，呵呵。
|
||||
注：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。区别在于，Android中没有border这个东西，而且在Android中，margin并不是控件的一部分。
|
||||
|
||||
### `<body>`标签也有margin
|
||||
|
||||
|
|
@ -146,8 +146,7 @@ CSS盒模型和IE盒模型的区别：
|
|||
|
||||
上面这两个盒子的盒模型图如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
**如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width**。因为盒子变胖了是灾难性的，这会把别的盒子挤下去。
|
||||
|
||||
|
|
@ -533,8 +532,6 @@ div{
|
|||
|
||||
另外，我们在上方代码的基础之上，再加一个 `border-radus: 20px;` 就能画出一个扇形。
|
||||
|
||||
关于盒模型的更多内容，请查看本项目的另外一篇文章：《13-前端面试/面试必看/02-CSS盒模型及BFC.md》
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习**更多技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
|
@ -543,4 +540,3 @@ div{
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -97,7 +97,9 @@ publish: true
|
|||
|
||||
那还有没有比较好的通用的做法呢？
|
||||
|
||||
### 方式一：绝对定位 + margin（需要指定子元素的宽高，不推荐）
|
||||
### 方式1：绝对定位 + margin
|
||||
|
||||
> 需要指定子元素的宽高，不推荐。
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
|
|
@ -146,7 +148,9 @@ publish: true
|
|||
但是，在通常情况下，对那些需要居中的元素来说，其宽高往往是由其内容来决定的，不建议固定宽高。
|
||||
|
||||
|
||||
### 方式二：绝对定位 + translate（无需指定子元素的宽高，推荐）
|
||||
### 方式2：绝对定位 + translate
|
||||
|
||||
> 无需指定子元素的宽高，推荐。
|
||||
|
||||
```html
|
||||
<!DOCTYPE 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`，即可让这个指定的子元素在**剩余空间**里，水平垂直居中。大功告成。
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue