gzl的博客

  • 首页

  • 关于

  • 标签

  • 分类

  • 归档

CSS居中

发表于 2019-07-19 分类于 CSS

公共html代码

1
2
3
4
5
<div class="parent">
<div class="child">
This is child
</div>
</div>

水平居中

通用-元素宽高未知

transform absolute

1
2
3
4
5
6
7
8
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}

flex

利用 flex 布局的 justify-content 属性,适用于子元素为浮动,绝对定位,内联元素,均可水平居中。

1
2
3
4
.parent {
display: flex;
justify-content: center;
}

内联元素

常见的内联元素有:span, a, img, input, label 等等,此方法同样适用于 display: inline-block 的元素。

1
2
3
.element {
text-align: center;
}

块级元素

常见的块元素:div, h1~h6, table, p, ul, li 等等

设置 margin

此方法只能进行水平的居中,且对 浮动元素 或 绝对定位 元素无效。

1
2
3
4
5
6
7
8
9
.parent {
width: 100%;
}
.child {
width: 600px;
height: 50px;
margin: 0 auto;
background: #999;
}

修改为 inline-block 属性

1
2
3
4
5
6
.parent {
text-align: center;
}
.child {
display: inline-block;
}

浮动元素

这里注意 relative 不能改为 absolute,因为 relative 是相对于自己原来的位置进行定位

1
2
3
4
5
6
7
.child {
width: 100px;
float: left;
position: relative;
left: 50%;
margin-left: -50px;
}

绝对定位元素

left 负margin-left

1
2
3
4
5
6
7
8
9
.parent {
position: relative;
}
.child {
position: absolute;
width: 100px;
left: 50%;
margin-left: -50px;
}

left right margin

1
2
3
4
5
6
7
8
9
10
.parent {
position: relative;
}
.child {
position: absolute;
width: 100px;
left: 0;
right: 0;
margin: 0 auto;
}

垂直居中

通用-元素宽高未知

transform absolute

1
2
3
4
5
6
7
8
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

flex

利用 flex 布局的 align-items 属性,适用于子元素为浮动,绝对定位,内联元素,均可垂直居中。

1
2
3
4
.parent {
display: flex;
align-items: center;
}

单行文本

利用 line-height = height

1
2
3
4
.text {
line-height: 200px;
height: 200px;
}

绝对定位元素

top 负margin-top

1
2
3
4
5
6
7
8
9
.parent {
position: relative;
}
.child{
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}

top bottom margin

1
2
3
4
5
6
7
8
9
10
.parent {
position: relative;
}
.child{
position: absolute;
top: 0;
bottom: 0;
height: 100px;
margin: auto 0;
}

水平+垂直居中

文本内容

1
2
3
4
5
text {
height: 100px;
line-height: 100px;
text-align: center;
}

Flexbox

1
2
3
4
5
.parent {
display: flex;
justify-content: center;
align-items: center;
}

absolute 负margin

灵活性差,不能自适应,宽高不支持百分比尺寸和 min-/max- 属性 ,需要知道子元素的宽高

1
2
3
4
5
6
7
8
9
10
11
12
.parent {
position: relative;
}
.child {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}

transform absolute

  1. 内容可自适应,可以封装为一个公共类,可做弹出层
  2. 可能干扰其他 transform 效果
1
2
3
4
5
6
7
8
9
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

absolute margin:auto

要求居中元素的宽高必须固定

  1. 不仅可以实现在正中间,还可以在正左方,正右方
  2. 元素的宽高支持百分比 % 属性值和 min-/max- 属性
  3. 可以封装为一个公共类,可做弹出层
  4. 浏览器支持性好
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.parent{
position: relative;
}
div {
width: 100px;
height: 100px;
margin: auto;
position: absolute;
//fixed 也可以,适用于没有.parent
top: 0;
right: 0;
bottom: 0;
left: 0;
}

absolute calc

这种方式也要求居中元素的宽高必须固定,css3带来了计算属性,既然top的百分比是基于元素的左上角,那么在减去宽度的一半就好了

1
2
3
4
5
6
7
8
9
10
.parent {
position: relative;
}
.child {
width: 100px;
height: 100px;
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
}

table-cell

适用于子元素 display 为 inline-block, inline 类型的元素,需要已知父元素的宽高,且父元素的宽高不能设为百分比数。

1
2
3
4
5
6
7
8
9
10
11
12
.parent {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 200px;
height: 200px;
border: 1px solid red;
}
.child {
display: inline-block;
background-color: #03f;
}

grid

兼容性不如flex,不推荐使用

1
2
3
4
5
6
7
.parent {
display: grid;
}
.child {
align-self: center;
justify-self: center;
}

总结

推荐

  • PC端有兼容性要求,宽高固定,推荐absolute + 负margin
  • PC端有兼容要求,宽高不固定,推荐table-cell
  • PC端无兼容性要求,推荐flex
  • 移动端推荐使用flex

比较

水平垂直居中方法 注意事项
flex 通用:不需要知道居中元素的宽高
transform + absolute 通用:不需要知道居中元素的宽高
table-cell 适用于子元素 display 为 inline-block, inline 类型的元素,需要已知父元素的宽高,且父元素的宽高不能设为百分比数。
absolute + margin:auto 要求居中元素的宽高必须固定
absolute + 负margin 需要知道子元素的宽高,宽高不支持百分比尺寸和 min-/max- 属性
absolute + calc 要求居中元素的宽高必须固定,依赖calc的兼容性
grid 兼容性不如flex

hexo博客

发表于 2019-07-19 更新于 2019-07-23 分类于 hexo

hexo 写博客

这是一般地写一篇博客的基本操作

1
2
3
4
5
6
7
E:\>cd hexo               进入 hexo 文件夹

E:\Hexo>hexo new "thenew" 新建一篇文章

E:\Hexo>hexo s -g 启动本地服务器预览

E:\Hexo>hexo d -g 上传到 https://xunzhanggzl.github.io/

hexo 的相关配置

今天更换了一下博客的主题,下面是相关的 github 链接和 这个主题配置链接

hexo-theme-next 使用文档

为文章添加标签

如下所示,添加了 Testing 和 Another Tag 两个标签,标签可以多个

1
2
3
4
title: 标签测试文章
tags:
- Testing
- Another Tag

为文章添加分类

分类尽量一个

1
2
title: 分类测试文章
categories: Testing

参考

hexo文档

hexo-theme-next主题配置

LC-只出现一次的数字

发表于 2019-07-19 更新于 2020-03-14 分类于 LeetCode

题目描述

只出现一次的数字

给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次。找出那个只出现了一次的元素。

1
2
输入: [2,2,1]
输出: 1
1
2
输入: [4,1,2,1,2]
输出: 4

代码实现

根据位操作符异或可以很轻松的解决这道题

1
2
3
4
5
6
7
8
9
10
11
/**
* @param {number[]} nums
* @return {number}
*/
var singleNumber = function(nums) {
let result = 0;
for (let num of nums) {
result ^= num;
}
return result;
};
1…272829…32

gzl

96 日志
14 分类
37 标签
© 2020 gzl
由 Hexo 强力驱动 v3.7.1
|
主题 – NexT.Pisces v7.2.0