css 技巧

margin/padding的top、bottom使用百分比作单位

元素的margin的top、bottom及padding的top、bottom使用百分比作为单位时，其是相对父元素的宽度width的而不是我们想象的高度height；

<percentage>
The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

参照demo-1.html

Paste_Image.png

定位属性元素的top、bottom使用百分比作单位

含有定位属性的元素，其top、bottom单位为百分比时，该百分比是相对于父元素的高度的。同理，left、right则是相对于父元素的宽度的。

参照demo-2.html

Paste_Image.png

width:100%

当父容器里有绝对定位的子元素时，子元素设置width:100%实际上指的是相对于父容器的padding+content的宽度。当子元素是非绝对定位的元素时width:100%才是指子元素的 content ，其等于父元素的 content宽度。

参照demo-3.html

image.png

line-height

line-height有单位时，子元素是继承父元素的line-height的，无单位时，其line-height等于无单位的数值乘以子元素本身的字体大小。

参照demo-4.html

image.png

margin越界

第一个子元素的margin-top和最后一个子元素的margin-bottom的越界问题

当父元素没有边框border时，设置第一个子元素的margin-top值的时候，会出现margin-top值加在父元素上的现象，解决方法有四个：

给父元素加边框border （副作用）

给父元素设置padding值（副作用）

父元素添加 overflow：hidden （副作用）

父元素加前置内容生成。（推荐）

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。

参照demo-5.html

image.png

三角形

使用css的border属性实现三角形

参照demo-6.html

Paste_Image.png

使用calc时运算符之间要有空格，否则可能无效

calc(100% - 500px)

参照demo-7.html

Paste_Image.png

cursor属性

网页鼠标不见了*{ cursor: none!important;}

参照demo-8.html

Paste_Image.png

inline-block

问题：多个inline-block的元素，无法对齐。
原因：行内元素和替换元素的基线位于文本框的底端，无文本的块状行内元素、图片和非替换元素的基线就是元素的最底端。大家横向对齐的参照物默认就是这个基线（baseline）。
解决办法：既然页面的混乱是因为“基线对齐”导致的，那只需要设置元素的垂直对齐不参照基线即可，引入vertical-align属性，设置元素的垂直对齐方式。

参照demo-9.html

Paste_Image.png

实时编辑CSS

<!DOCTYPE html>
<html>
    <body>
        <style style="display:block" contentEditable>
            body { color: blue }
        </style>
    </body>
</html>

参照demo-10.html

Paste_Image.png

border-radius

基本一点用法
.div { border-radius: 4px; }
高端一点用法
.div { border-radius: 4px 6px 6px 4px; }
终极用法
.div { border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px; }

border-radius 它可以赋8个值：
斜线前面的影响的是水平方向，斜线后面影响的是垂直方向，
各个数字就分别代表四个不一样的方向。

参照demo-11.html

Paste_Image.png

outline-offset

在input下写CSS的时候对下面的语句会很熟悉：

input {
    outline : none;
}
input:focus {
    outline : none;
}

这就是将input输入框去掉默认的蓝线框的方法。
CSS中还有一个outline-offset属性，在这个属性中，你可以设置默认线框的距离：
input { outline-offset: 4px ; }
调节该属性值的大小你就可以看到outline的距离变化了。

参照demo-12.html

Paste_Image.png

transform-origin

属性	描述	CSS
transform	向元素应用 2D 或 3D 转换	3
transform-origin	允许你改变被转换元素的位置	3

参照demo-13.html

image.png

css 技巧

推荐阅读更多精彩内容