css速记之属性(-)

2016-06-27 本文已影响177人 mochase

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相同

css速记之属性(-)

猜你喜欢

热点阅读