0523-朱鹏新

日志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
用户也可以自定义一个鼠标样式

二、心得体会

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

三、疑问

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

标签

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1