position
sticky
(吸附效果)
absolute
绝对定位的元素,在top, left, right, bottom属性未设置时,会紧随在其前面的兄弟元素之后,但在位置上不影响常规流中的任何元素。
当position的值为非static时,其层叠级别通过z-index属性定义,可以为负
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>
添加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>
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
具体裁剪讲解参照张鑫旭大神的博客
border-image-width: [<length> | <percentage> | <number> | auto]{1, 4}
默认值为1px, 这里长度自动省略单位px, auto表示border-image-width和border-image-slice相同