使用display: table\table-cell属性让容器水平或垂直居中

使用display: table\table-cell属性让容器水平或垂直居中

居中页面元素有很多种方式

利用flex、grid、绝对定位+负边距或者transform、text-align等等方式,他们适用于不同的场景,比如text-align就只能对inline元素起作用,vertical-align在默认情况下只是对行框内容进行对齐

下面介绍两种块级元素的居中方式 display: table\table-cell

了解css中的block formatting context(块级上下文) 以及 display: flow-root

了解css中的block formatting context(块级上下文) 以及 display: flow-root

块级上下文挺起来很抽象,W3C 中是这样解释的:


  1. floats, absolute定位, 不是块级元素的块级容器(列如inline-block, table-cells, table-captions),以及display为overflow等不是visible属性的元素,会为它们包含的内容建立新的block formatting context
  2. 在block formatting context中,以容器的顶端为开始,Box一个接一个的垂直排列,两个相邻box之间的距离由margin决定,在相同的block formatting context中,两个相邻的块级Box会产生外边距合并 (这是重点)
  3. 在block formatting context中,每一个Box的左边界紧挨着容器左边界(如果是从右到左的布局,那么触碰到右边界)。 在floats元素依然满足此要求(但是Box内的行框由于float可能会变窄),除非建立了新的block formatting context(这种情况下box会由于float元素而变窄)

上面的话可以总结为:

block formatting context就是页面上的一个隔离的独立容器,容器内的子元素不会影响到外面的元素。反之如此

看了这么多,是不是感觉很抽象,没关系,我们与其去研究这些抽象的文字,不如来看看block formatting context能做什么。


清除浮动解决方案,使用.clearfix类选择器

清除浮动解决方案,使用.clearfix类选择器

这个东西其实很简单

使用css

1
2
3
4
5
.clearfix::after {
display: block;
content: "";
clear: both;
}
CSS动画-auto属性的过渡

CSS动画-auto属性的过渡

通常,你想要通过css transition来过渡属性,然后使用了下面代码transition: height 0.5s linear

然后又使用了 height: auto来自适应高度height: 0 -> height: auto

然后发现动画就像没发生一样,直接就在0和auto两个状态之间直接切换

你可能会认为出现了什么bug,或者代码写错了,其实不然

使用gulp优化hexo博客,对资源进行压缩

使用gulp优化hexo博客,对资源进行压缩

hexo生成出来的资源文件很大,全是没有压缩的,为了节约网络带宽,可以对其public目录下的js,html,css文件进行压缩。那么这里使用的工具就是强大的gulp

Html+css+js布局设计第一弹

Html+css+js布局设计第一弹

8 Horizontal Menu

2019/6/23

水平菜单栏

有一些简单的动画,在别的地方看见的,就照着做了下

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×