position
sticky
(吸附效果)
absolute
絕對定位的元素阳欲,在top, left, right, bottom屬性未設(shè)置時,會緊隨在其前面的兄弟元素之后屏鳍,但在位置上不影響常規(guī)流中的任何元素特石。
當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
關(guān)于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折疊常規(guī)認知:
- margin折疊只發(fā)生在塊級元素上巩掺;
- 浮動元素的margin不與任何margin發(fā)生折疊偏序;
- 設(shè)置了屬性overflow且值不為visible的塊級元素,將不與它的子元素發(fā)生margin折疊胖替;
- 絕對定位元素的margin不與任何margin發(fā)生折疊研儒;
- 根元素的margin不與其它任何margin發(fā)生折疊;
border
如使用該復合屬性定義其單個參數(shù)独令,則其他參數(shù)的默認值將無條件覆蓋各自對應的單個屬性設(shè)置端朵。
.border {
border: 1px solid;
color: orange;
}
/*邊框是什么顏色?
border-style: double /*雙線輪廓燃箭。兩條單線與其間隔的和等于指定的border-width值, 即width為1px時和solid無區(qū)別, inset|ouset|groove|ridge
border-radius: 20px/10px
分別為水平半徑和垂直半徑(橢圓)冲呢,第二個參數(shù)省略時即為圓
box-shadow: 5px 10px 10px 1px gray inset
分別為陰影水平偏移值,陰影垂直偏移值招狸,模糊程度(數(shù)值越大越模糊)敬拓,陰影外延值(我的理解是陰影覆蓋面積),陰影顏色 裙戏,內(nèi)陰影(默認為外陰影)
<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相同