CSS盒模型注意点

块级元素水平居中
.div{width:100px; margin: 0 auto;
行内元素或者行内块元素水平居中给其父元素添加 text-align:center即可

使用margin时嵌套块元素垂直外边距的塌陷
可以为其父元素加overflow:hidden;
浮动元素不塌陷

注意:行内元素为了照顾兼容性,尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了.

边框复合写法

        /* 复合写法 */
        /* border: 1px solid pink;
           没有顺序要求 */

合并相邻边框

/* border-collapse: collapse;
           合并相邻的边框 */

圆角边框

border-radius: 50%;
        /* 半径为50px的一个圆 */
        /* 如果是矩形设置成圆角矩形  设置成高度的一半 */
/* border-radius: 10px 20px 30px 40px;
        左上 右上 右下 左下 */

盒子和文字阴影

        box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.3);
        /* 水平阴影  垂直阴影  模糊距离  阴影尺寸  阴影颜色  外部阴影 默认outset  inset内部阴影
        盒子阴影不占空间 */
        text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
        /* 水平阴影 垂直阴影 模糊距离 阴影颜色 */