- 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 |
transform-origin：[<percentage> | <length> | left | center | right | top | bottom] | [<percentage> | <length> | left | center | right] | [[<percentage> | <length> | left | center | right] && [<percentage> | <length> | top | center | bottom]] <length> ?
参照demo-13.html
image.png
网友评论