总结之CSS篇 - HelloWorld开发者社区

1，盒模型

页面渲染时，dom元素所采用的 布局模型，可以通过 box-sizing 进行设置，根据计算高度的区域可分为：

content-box （W3C 标准盒模型）
border-box （IE盒模型）

1，content-box中，元素的宽，高包含元素的 padding，border

// div大小为 140 * 140，内容盒大小为 100 * 100
div {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: solid 10px black;
}

总结之CSS篇
2，border-box中，元素的宽，高不包含元素的padding，border，margin

// div大小为 100 * 100，内容盒大小为 60 * 60
div {
    width: 100px;
    height: 100px;
    padding: 10px;
    box-sizing: border-box;
    border: solid 10px black;
}

总结之CSS篇

2，选择器优先级

!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
选择器 从右往左 解析

3，属性继承

所有元素可继承：visibility cursor
内联元素可继承：letter-spacing word-spacing white-space line-height color font font-family font-size font-style font-variant font-weight text-decoration text-transform direction
块元素可继承：text-align text-indent

4，居中布局

1，水平居中

// 行内元素，在父元素上设置 text-align 即可
div {
    text-align: center;
}

// 块级元素，设置 margin
div {
    margin: 0 auto;
}

// absolute + transform 结合使用
div {
    position: relative;
    div {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
    }
}

// flex + justify-content: center
div {
    display: flex;
    justify-content: center;
}

2，垂直居中

// 行内元素：line-height
div {
    height: 20px;
    line-height: 20px;
}

// absolute + transform
div {
    position: relative;
    div {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
    }
}

// flex + align-items: center
div {
    display: flex;
    align-items: center;
}

// table
div {
    display: table-cell;
    vertical-align: center;
}

3，水平垂直居中

// absolute + transform
div {
    position: relative;
    div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

// flex + justify-content + align-items 
div {
    display: flex;
    align-items: center;
    justify-content: center;
}