css文字竖直显示_CSS入门学习笔记（三）布局小技巧

调节渐变的工具网站：

Ultimate CSS Gradient Generator from ColorZilla​www.colorzilla.com

调节边框阴影的工具网站：

Box Shadow CSS Generator​www.cssmatic.com

伪类

前面只有一个冒号，比如：hover 、：nth-child这是伪类，前面有两个冒号，比如::after,这是伪元素。

简单来讲不是真的元素，格式div::after,在网页中无法被选中

在给伪类设置CSS属性时，必须要给他一个content:' ' 属性才能显示内容，否则显示不了。

常见的两列布局：

两列自适应：将左右两列设置浮动float:left/right，宽度属性设置为百分比形式，然后给受浮动影响的元素清除浮动,给他们的父元素添加clearfix。

常见的三列左右固定宽度，中间自适应布局：

可以查看网站：

常用布局的实现（两列布局、三列适应布局，两列等高适应布局等） - nalee - 博客园​www.cnblogs.com

居中问题

对于块状元素，水平居中可以直接写margin 0 auto ;中间的0可以改变其他数值，可以调整块状元素处于竖直方向什么位置。

对于内联元素，水平居中可以写text-align:center（这里记得，想让一个内联元素居中，一定要在他父元素的样式里写text-align:center）；

很多时候可以把一个元素设置成display:inline-block,此时再用text-align:center,会很方便居中。

还有万能的flex布局可以很简单的做到水平垂直居中，有关内容看我上个博客。

水平居中

1. 行内元素设置text-align: center
2. 块级元素设置固定宽度，margin-left和margin-right设置为auto
3. 元素设置固定宽度，margin-left：设为元素宽度的一半，并设置position：absolute；left：50%；
4. 固定宽高，父元素{display:flex;flex-direction:column;}，子元素{align-self:center;}

具体实现代码可参考：

把简单做好也不简单-css水平垂直居中​xdlrt.github.io

垂直居中

1. display：inline-block；text-align: center; vertical-align:middle
2. 元素设置固定高度，margin-top：设为元素高度的一半，并设置position：absolute；top：50%；
3. 为父元素添加伪元素::before{content:'';display:inline-block;vertical-align:middle;height:100%}，子元素{width:50%;height:50%;display:inline-block;vertical-align:middle;}
4. 固定宽高，父元素{display:flex;flex-direction:row;}，子元素{align-self:center;}

状态机把简单做好也不简单-css水平垂直居中状态机

语法：<div class="#" state-1 state-2 ....>

CSS小技巧

transition: box-shadows 1s;
这个是渐变效果，调整边框阴影渐变1秒。

想做到内容是两列的布局，可以先做浮动，然后加上width:50%.

进度条：做进度条的思路就是先弄出一个进度条DIV，在里面创建一个进度DIV，然后给进度条DIV设置高度3px左右，给它设置一个背景色，再给进度div设置背景色和宽度，记得给他们都设置好圆角样式。非常easy!

box-sizing:border-box：非常好用的盒模型，当一个元素已经固定宽500px高200px的时候，此时加上padding容易出BUG，加上这个属性的意思代表padding的部分和内容部分的总和是这个宽度500px，也是这个固定的高度200px。并且border的宽也是算在500px里的。

li:nth-child(even):在左右结构中经常使用，意思是在li元素中，挑选第n个元素，even表示偶数，那就是说挑选2、4、6、8。。。。。偶数元素。

设置属性display:inline-block时，需要在写上代码vertical-align:top;

cursor: pointer 这个CSS属性可以让鼠标放上去变成手的形状，更加好看美观。

transition：过度

text-transform: uppercase：让字母大写