日志4

一、知识总结

盒子模型

1.盒子模型的各个部分：

​ （1）Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height 。

​ （2）Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。

​ （3） Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。

​ （4）Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。

2.标准盒模型

​ 在标准模型中，如果你给盒设置 width 和 height ，实际设置的是 content box。 padding和border再加上设置的宽高一起决定整个盒子的大小。

3.替代盒模型

​ 如果需要使用替代模型，您可以通过为其设置 box-sizing: borderbox 来实现。 这样就可以告诉浏览器使用 border-box 来定义区域，从而设定您想要的大小。

4.DISPLAY：

​ display 属性规定元素应该生成的框的类型。
​ display属性的值：

​ （1）block:元素呈现块元素特征，此元素前后会带有换行符

​ （2）inline:元素呈现行内元素特征，元素前后没有换行符

​ （3）inline-block：元素呈现行内并保持宽和高的属性，行内块元素

​ （4）none:元素不做呈现，不占网页空间。与visibility：hidden不同，visibility不显示但占用

网页空间。

​ display: inline-block 是一个特殊的值，它在内联和块之间提供了一个中间状态。

5.display: inline-block 是一个特殊的值，它在内联和块之间提供了一个中间状态。这对于以下情况
非常有用:您不希望一个项切换到新行，但希望它可以设定宽度和高度，并避免上面看到的重叠。
一个元素使用 display: inline-block ，实现我们需要的块级的部分效果：
（1）设置 width 和 height 属性会生效。
（2）padding , margin , 以及 border 会推开其他元素。
但是，它不会跳转到新行，如果显式添加 width 和 height 属性，它只会变得比其内容更大。

背景样式

1.背景颜色：

​ background-color 属性定义了CSS中任何元素的背景颜色。属性接受任何有效的 值 。背景

色扩展到元素的内容和内边距的下面。

2.背景图片

​ background-image 属性允许在元素的背景中显示图像。

3.控制背景平铺：

​ background-repeat 属性用于控制图像的平铺行为。可用的值是:

​ （1）no-repeat — 不重复。

​ （2）repeat-x —水平重复。

​ （3）repeat-y —垂直重复。

​ （4）repeat — 在两个方向重复。

4.调整背景图像的大小：

​ background-size 属性，它可以设置长度或百分比值，来调整图像的大小以适应背景。

5.背景图像的定位：

​ background-position 属性允许您选择背景图像显示在其应用到的盒子中的位置.

6.渐变背景

​ 渐变——当它用于背景时——就像图像一样，也可以使用 background-image 属性设置。

7.多个背景图像

​ 也可以有多个背景图像—在单个属性值中指定多个 background-image 值，用逗号分隔每个值

​ 其他 background-* 属性也可以有值逗号分隔的方式相同的 background-image 。

8.背景附加

​ 另一个可供选择的背景是指定他们如何滚动时，内容滚动。这是由 background-attachment 属性控制，它可以接受以下值:
​ （1）scroll : 使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。实际上，背
​ （1）景被固定在页面的相同位置，所以它会随着页面的滚动而滚动。
fixed : 使元素的背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动。它将始
终保持在屏幕上相同的位置。
​ （2）local : 这个值是后来添加的(它只在Internet Explorer 9+中受支持，而其他的在IE4+中受支持)，因为滚动值相当混乱，在很多情况下并不能真正实现您想要的功能。局部值将背景固定在设置的元素上，因此当您滚动元素时，背景也随之滚动。

CSS的值

长度：最常见的数字类型是length。

阴影

box-shadow 属性可以设置一个或多个下拉阴影的框

透明度

opacity 用于设置元素的透明度， 值的范围是 0~1 。1 为不透明， 0 为完全透明。

鼠标样式

cursor 属性用于定义鼠标样式，可选值有: pointer 、 wait 、 help 、 copy 、 crosshair
用户也可以自定义一个鼠标样式

二、心得体会

​ 今天感觉好累，不过还可以，初次接触这些东西，消化起来比较困难，也比较耗时。

三、疑问

​ 块元素和内联元素的嵌套这块还有很多问题。

​