盒子

盒子居中显示

margin: 0 auto

行内元素和行内块元素居中显示

给父元素添加text-align: center

父元素塌陷问题

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

此时父元素是正常的上边距20px，但如果是这样👇👇

父元素会塌陷50px

解决办法：

给父元素添加上边框
给父元素添加上内边距
给父元素添加overflow: hidden

清除内外边距

一般我们在开发的时候通常会配合通配符选择器来清除整个页面的内外边距，其方法👇

*{
    padding: 0;
    margin: 0;
}

ps:行内元素尽量只设置左右边距

清除无序列表小圆点

list-style: none

阴影

盒子阴影：

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset（默认是outset,但是不能直接写outset）	可选，将外部阴影（outset）改为内部阴影

语法：

box-shadow: h-shadow v-shadow blur spread color inset

文字阴影：（和盒子阴影的h-shadow,v-shadow,blur,color及语法相同）

清除浮动

清除浮动（让子盒子自动撑开父盒子）三种方法：

clear: both（在指定的标签后面添加一个标签并清除浮动）
给父元素添加overflow属性：overflow: hidden
after伪元素（给父元素添加）

.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix{
    *zoom: 1;
    //兼容低版本浏览器
}

属性书写顺序

在开发中我们通常会规定一些属性的书写顺序，虽然这看似徒劳无功，但是按照规定的属性书写会显得你很专业👼👼

布局定位属性：display/position/float/clear/visibility/overflow(建议display第一个写)
自身属性：width/height/margin/padding/border/background
文本属性：color/font/text-decoration/text-align/white-space/break-word
其他属性(css3)：content/cursor/border-radius/box-shadow/text-shadow/background

ps:实际开发导航栏中不会用一大堆a标签，而是用li+a的形式

总结：今天讲的这些，盒子的使用方法和如何清除浮动都很重要，盒子阴影的使用相对较少，但是也不能忽略它的重要性。

好啦，今天就讲到这里！👦👦 辛苦掘金的运营小同学了🎈🎈

HTML初学笔记（四）

盒子