position
sticky(吸附效果)
absolute绝对定位的元素，在top, left, right, bottom属性未设置时，会紧随在其前面的兄弟元素之后，但在位置上不影响常规流中的任何元素。
当position的值为非static时，其层叠级别通过z-index属性定义,可以为负
Paste_Image.png
float
float在绝对定位和display为none时不生效
clear
clear: none|both|left|right： 不允许xxx 有浮动对象
visibility
visible| hidden | collapse可继承
一个例子：
<div style="visibility: hidden">
<div style="visibility: visible">
test xxx
</div>
</div>
<!--看的到吗？-->
margin
关于margin合并，一个例子：
<body>
<style>
h2{margin:10px 0;}
div{margin:20px 0;}
h3{margin: 20px 0;}
/*实际margin只有20px， 取最大值
</style>
<h2>这是一个标题</h2>
<div>
<h3>这是又一个标题</h3>
</div>
</body>
Paste_Image.png
添加div的边框后
<body>
<style>
h2{margin:10px 0;}
div{margin:20px 0;border:1px solid #aaa;}
h3{margin: 20px 0;}
/*实际margin为40px， margin = max(10, 20) + 20px
</style>
<h2>这是一个标题</h2>
<div>
<h3>这是又一个标题</h3>
</div>
</body>
Paste_Image.png
margin折叠常规认知：
- margin折叠只发生在块级元素上；
- 浮动元素的margin不与任何margin发生折叠；
- 设置了属性overflow且值不为visible的块级元素，将不与它的子元素发生margin折叠；
- 绝对定位元素的margin不与任何margin发生折叠；
- 根元素的margin不与其它任何margin发生折叠；
border
如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
.border {
border: 1px solid;
color: orange;
}
/*边框是什么颜色？
border-style: double /*双线轮廓。两条单线与其间隔的和等于指定的border-width值, 即width为1px时和solid无区别, inset|ouset|groove|ridge
border-radius: 20px/10px
分别为水平半径和垂直半径（椭圆），第二个参数省略时即为圆
box-shadow: 5px 10px 10px 1px gray inset
分别为阴影水平偏移值，阴影垂直偏移值，模糊程度（数值越大越模糊），阴影外延值（我的理解是阴影覆盖面积），阴影颜色 ，内阴影（默认为外阴影）
<body>
<style>
.border {
width:400px;
height: 400px;
border-image: url(./border.png) 27/auto round;
}
</style>
<div class="border">
</div>
</body>
border-image: 复合属性. border-image-source|border-image-slice|border-image-width|border-image-outset|border-image-repeat
Paste_Image.png
具体裁剪讲解参照张鑫旭大神的博客
border-image-width: [<length> | <percentage> | <number> | auto]{1, 4}
默认值为1px， 这里长度自动省略单位px， auto表示border-image-width和border-image-slice相同
网友评论