CSS 常用属性

盒子模型

标准盒子模型：宽度=content

低版本IE盒子模型：宽度=content+padding+border

继承属性

所有元素可继承：visibility，cursor，opacity

内联元素可继承：字体系列，除text-indent、text-align之外的文本系列属性

块级元素可继承：tent-intent、text-align

优先级

1、内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

2、就近原则

CSS3新增伪类

p:first-of-type 选择属于其父元素的首个元素

p:last-of-type 选择属于其父元素的最后元素

p:only-of-type 选择属于其父元素唯一的元素

p:only-child 选择属于其父元素的唯一子元素

p:nth-child(2) 选择属于其父元素的第二个子元素

:enabled :disabled 表单控件的禁用状态。

:checked 单选框或复选框被选中。

背景

background-image: url('www.lanan.com/ddfwfw.png');

background-size: length | percentage | cover | contain;  //cover图按比例扩大至覆盖元素，contain图按比例扩大至卡满元素。

background-position: top left | x% y% |  xpx ypx ;

background-repeat: repeat | no-repeat | repeat-x | repeat-y ;

换行

white-space: normal | nowrap;   //nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

word-wrap：normal | break-word;    //break-wrod：单词过长必换行

缩进

text-intent: px | % ;   //段落缩进50px

对齐

text-align: center | left | right ;

隐藏

1、display:none：隐藏，且不占空间

2、visiblity:hidden：隐藏，并占空间

3、overflow:hidden：隐藏超出部分

选择器

id选择器（#name）、类选择器（.name）、标签选择器（div，p）、相邻兄弟选择器（div + p）、后代选择器（div p）、子选择（div > p）、伪元素选择器（div：hover，li：first-child）、通配符选择器（*）

其中，伪类first-of-type和first-child的区别：

p:first-of-type    p:first-child

前者是在父元素中的第一个p元素；后者是父元素中的第一个（第一个不是p元素就无法选择）。

display

主要有none、block、inline、inline-block、flex。

block块元素：前后有换行符。

inline内联元素：前后无换行符。

inline-block：block块元素的基础上没有换行符。

元素居中

<div class="parent">
    <div class="children">
        children
    </div>
</div>

1、定位。前提：已知children宽高。

.parent {
        position: relative;
        width: 400px;
        height: 400px;
        background: red;
}
.children {
        position: absolute;
        width: 40px;
        height: 40px;
        background: #eee;
        left: 50%;
        margin-left: -20px;
}

2、flex布局。

.parent {
    display:flex;
    align-items:center;
    justify-content:center;
    width: 400px;
    height: 400px;
    background: red;
}