本文共 3469 字，大约阅读时间需要 11 分钟。

---

本人是个新手，写下博客用于自我复习、自我总结。

如有错误之处，请各位大佬指出。

学习资料来源于：尚硅谷

---

盒子 ※

• CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。

• 为什么要想象成盒子呢？因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于是摆放盒子。 • 我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。

• 一个盒子我们会分成几个部分：

– 内容区(content) – 内边距(padding) – 边框(border) – 外边距(margin)

内容区

• 内容区指的是盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。

• 如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的。 • 通过width和height两个属性可以设置内容区的大小。 • width和height属性只适用于块元素。

内边距

• 顾名思义，内边距指的就是元素内容区与边框以内的空间。

• 默认情况下width和height不包含padding的大小。 • 使用padding属性来设置元素的内边距。 • 例如： padding:10px 20px 30px 40px – 这样会设置元素的上、右、下、左四个方向的内边距 padding:10px 20px 30px; – 分别指定上、左右、下四个方向的内边距 padding:10px 20px; – 分别指定上下、左右四个方向的内边距 padding:10px; – 同时指定上左右下四个方向的内边距

同时在css中还提供了padding-top、padding-right、paddingright、padding-bottom分别用来指定四个方向的内边距。

边框

• 可以在元素周围创建边框，边框是元素可见框的最外部。边框里边属于盒子内部，出了边框都是盒子的外部。

• 使用border属性来设置盒子的边框： border:1px red solid; – 上边的样式分别指定了边框的宽度、颜色和样式。 还可以使用下列方法设置： 边框的宽度 border-width 边框的颜色 border-color 边框的样式 border-style

• 也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框。

• 和padding一样，默认width和height不包括边框的宽度。 • 边框的大小会影响到整个盒子的大小。

• 边框可以设置多种样式：

– none（没有边框） – dotted（点线） – dashed（虚线） – solid（实线） – double（双线） – groove（槽线） – ridge（脊线） – inset（凹边） – outset（凸边）

外边距

• 外边距是元素边框与周围元素相距的空间。

• 使用margin属性可以设置外边距。 • 用法和padding类似，同样也提供了四个方向margin-top/right/bottom/left • 当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等， 所以margin-right: auto; 和 margin-left: auto;可以使元素居中。

例：

效果图：

---

盒子的水平布局 ※

元素的水平方向的布局：

元素在其父元素中水平方向的位置由以下几个属性共同决定

margin-left border-left padding-left width padding-right border-right margin-right

一个元素在其父元素中，水平布局必须要满足以下的等式

margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度 （必须满足）

如果相加结果使等式不成立，则称为过度约束，则等式会自动调整

- 调整的情况： 如果这七个值中没有为 auto 的情况，则浏览器会自动调整margin-right值以使等式满足

如果某个值为auto，则会自动调整为auto的那个值以使等式成立

如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0

如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值

所以我们经常利用这个特点来使一个元素在其父元素中水平居中

例：

---

盒子的垂直布局 ※

当相关标签里面的内容超出了样式的宽度和高度时，就会发生一些奇怪的事情，浏览器会让内容溢出盒子。这时可以通过overflow来控制内容溢出的情况。

• 可选值： – visible：默认值 子元素会从父元素中溢出，在父元素外部的位置显示 – scroll：添加滚动条，通过滚动条来查看完整的内容 – auto：根据需要添加滚动条 – hidden：隐藏超出盒子的内容

    
       
       
               
   
        
    
        
    
    
   
     
   
                在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。    
   

---

外边距的重叠

例：

---

行内元素的盒模型 ※

display

• 我们不能为行内元素设置width、height、margin-top和margin-bottom。 • 我们可以通过修改display来修改元素的性质。 • 可选值： – block：设置元素为块元素 – inline：设置元素为行内元素 – inline-block：设置元素为行内块元素 – none：隐藏元素（元素将在页面中完全消失）

visibility

• visibility属性主要用于元素是否可见。 • 和display不同，使用visibility隐藏一个元素，隐藏后其在文档中所占的位置会依然保持，不会被其他元素覆盖。 • 可选值： – visible：可见的 – hidden：隐藏的

例：

    
       
       
               超链接    超链接    我是span    我是span        
   

---

默认样式 ※

例：

    
       
       
           
       
           	
   
	
我是一个段落
	
我是一个段落
	
我是一个段落
	
   
    	
    
列表项1
    	
    
列表项2
    	
    
列表项3
	
   

---

盒子的尺寸 ※

---

轮廓和圆角 ※

例：

---

转载地址：http://koyki.baihongyu.com/