CSS核心~盒子的学习总结

盒子模型是CSS中一个非常重要的核心。一个网站就是一个个盒子堆起来的。一个盒子模型有如下几个部分组成：盒子中内容区域、盒子的内填充区域、盒子的边框区域、盒子的外填充区域、盒子的背景区域
学习盒子模型，主要就是研究盒子模型设置6大属性：width height padding border margin background

width 表示内容区域的宽度
height 表示内容区域的高度
margin 表示盒子的外边距
padding 表示合资的内填充
border 盒子的边框
background 盒子的背景

一：width 和 height

这两个属性表示盒子内容的宽度和高度，并不是指盒子的宽度和高度。
一个盒子在网页上占据的宽度：
width+左右padding+左右border+左右的margin
一个盒子在网页上占据的高度：
height+上下padding+上下border+上下的margin
在PC端一般都设置单位为px。

     width: 100px;
     height: 100px;

对于块级元素来说，width 和 height表示内容区域
对于行内元素来说，width 和 height无效

1）width 有默认值 是auto 不同性别的元素 auto指定的含义是不一样 块级元素auto是贪婪性 占父元素的100% 对于行内元素是懒惰性 宽度由内容撑起来
2）对于行内元素来说，它的高度由font-size决定。
3）width 和 height 也可以设置百分比，是相对于父元素的width 和 height来说的。
4）设置百分比，在移动端开发时会用到，PC端很少用到，当然PC端的咋响应式开发也会用到。

二：border

盒子的边框。通常在CSS中，设置盒子的边框需要设置边框的粗细，边框样式，边框颜色。
一个盒子的边框由border-widht, border-style, border-color组成。
边框是有四个方向：
border-top, border-right, border-bottom, border-left。
用的最多的就是直接border:1px solid red;其中： 样式solid：实线，dashed：虚线，dotted：点线
如果一个盒子仅仅有一个边框，那么我们也会设置这一边框。

边框：
边框的粗细 border-width
边框的样式 border-style
边框的颜色 border-color

要让让边框显示出来，至少要设置边框的粗细和边框的样式，边框的颜色有默认值，是黑色。

还可以使用边框制作网页上的小三角：如

			border-top: 20px solid red;
            border-right: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 20px solid transparent;

三：padding

内边距，也叫补白，表示盒子内容区域到边框的距离。
padding也是有四个方向：
padding-top
padding-right
padding-bottom
padding-left

padding后面的跟的值可以是：
1个值： padding:10px 表示这个盒子的上右下左的内边距都是10px。
2个值： 第1个值表示上下，第2个值表示左右。
3个值： 第1个值表示上，第2个值表示左右，第3个值表示下。
4个值： 顺序是上，右，下，左
对于块级元素来说，padding在四个方向都可以设置。
对于行内元素来说，padding在垂直方向上是不影响网页空间的，水平方向还是影响网页的空间。

四： margin

外边距，使用margin表示盒子与盒子之间的距离。
margin也是有四个方向：
margin-top
margin-right
margin-bottom
margin-left
margin后面的跟的值可以是：
1个值： margin:10px 表示这个盒子的上右下左的外边距都是10px。
2个值： 第1个值表示上下，第2个值表示左右。
3个值： 第1个值表示上，第2个值表示左右，第3个值表示下。
4个值： 顺序是上，右，下，左
margin的应用：
1）可以让块级元素水平居中。 margin: 0 auto;
2）让一个网页的版心居中。

对于行内元素来说，margin在水平方向上有效，在垂直方向上是无效的。
对于块级元素来说，margin会发生塌陷（重叠）。margin的塌陷的条件：
1）必须是块级元素
2）垂直方向塌陷， 水平方向不可能塌陷

对于margin的塌陷来说，分两类：
1）兄弟元素之间的margin塌陷
2）父子元素之间的margin塌陷

兄弟元素之间的margin塌陷：

上面的盒子设置margin-bottom，下面的盒子设置margin-top。
取大优先
解决：
1）子元素浮动起来 父元素的宽度和子元素的宽度一样
2）设置为inline-block
写页面是最好避免同时设置上下两个盒子的margin。

父子元素之间的margin塌陷:

1）父元素的margin-top与它的第一个子元素的margin-top塌陷
最终的margin也是取大优先。
解决：可以给father加上border 加上边框就可以解决这种塌陷问题
2）父元素的margin-bottom与它的最后一个子元素的margin-bottom塌陷：
最终的margin也是取大优先。
解决：1）可以给father加上border 加上边框就可以解决这种塌陷问题

margin可以设置成负值，如margin-left:正值 表示远离left方向 如果margin-left：负值 表示靠近left方向
解决1px边框问题：
1）可以给son设置一个方向的边框，如就设置border-right，给最后一个盒子设置border-right是0
2）可以使用margin为负值 margin-left:-1px 可以让两条边框重叠到一起
解决几个DIV在同一行并排显示，有间隙的问题：
1）margin可以为负值，来增加一个容器的宽度。

很多标签都有默认的margin和padding，不方便写CSS，所以都会直接把默认margin和padding去掉。

五：background

用来设置盒子的背景：
1）背景颜色
2）背景图片

背景颜色： background-color
背景颜色会填充一个盒子的内容区域和padding区域，以及边框。

背景图片: background-image
url()函数，表示用来指定一个背景图片的路径的，()里面可以加"",也可以不加。
默认情况下，一个盒子的背景图片，会平铺一个盒子，在水平和垂直方向上都会平铺。
可以通过一个属性，来指定是否平铺，叫backgroud-repeat
默认情况下，背景图片的左上角和盒子的padding的左上角是对齐。
可以通过一个属性，来指定背景图片的位置，叫background-position

盒子的应用

说到应用就不得不注意在HTML中，元素是进行分类的，分三类的话：块级元素，行内元素，行内块元素。

1）块级元素（ 男标签）有

表格标签
div
h1, h2, h3, h4, h5, h6
p
ul li ol li dl dt dd
form

2）行级元素（女标签）有

span, a, em, strong, label, button, i…

3）行内块元素 （人妖标签）

img input

4）其中display可以改变一个标签的性别。

display:block 变成块级
display:inline 变成行级
display:inline-block 变成行块级
display:none 可以把一个标签隐藏掉，并且在网站上不占空间 （ ps：visibility:hidden 也可以让标签隐藏掉，但是它是占据网页空间的）

盒子模型上的6大属性，对不性别的标签的作用是不一样的：
1） 对于块级标签来说，盒子模型上的6大属性都是生效。
2） 对于行内元素来说，width和height是不起作用，设置了也是白设置。margin和padding在水平方向上有效，在垂直方向上是没有效果。
3）对于行内块元素来说，它可以并排显示，除了不独占一行外，其它的和块级标签一样。也就是盒子模型上的6大属性都是生效。

网页中有很多并排显示模块，但是块级标签默认情况下，是不能并排显示。有以下方法可以实现块级标签的并排显示：浮动，行内块，flex布局，以下说说浮动和行内块

1）浮动：

可以让块级标签浮动起来，浮动起来就可以并排显示。
两个div，如果上面的div浮动了，下面的div就会钻上去，但是如果下面的div中有文字，这文字是没有办法钻上去。这是浮动的特性：字围效果。
但是如果一个盒子中的子元素浮动了，父元素高度就塌陷（高度变成0），也就是说造成了影响，为了清除这种影响可以用overflow:hidden 清除浮动所造成的影响。

2）inline-block

display:inline-block天生就可以让元素并排显示，使用浮动实现的，大多数情况下，也可以使用inline-block来实现。
但是使用inline-block进行布局时，有如下问题：
1）盒子中有文本时并没有对齐
解决：vertical-align:top
vertical-align:
用来设置一个元素的垂直对齐方式。
vertical-align的属性值非常多：
px 正值 负值
top 顶端对齐
middle xxx
baseline 默认值 基线对齐
bottom

vertical-align作用于一个元素，不是元素中的文本。
使用场景：
1）使用checkbox对齐
2）解决img标签的下边距
3）使用inline-block进行布局时，也会使用到vertical-align
2）盒子与盒子之间有间隙
思考：换行可能造成间隙
解决：
A 可以去掉换行
B 给最外层外一个DIV 并设置它font-size是0 此时就去掉了间隙
接着，给里面的div再设置font-size 16px