02-CSS

CSS****属性的官方文档

CSS****官方文档地址

CSS****推荐文档地址:

由于浏览器版本、****CSS****版本等问题,查询某些CSS是否可用:

  • 可以到https://caniuse.com/查询CSS属性的可用性;

  • 这个网站在后续的browserlist工具中我们再详细说明;

目前需要掌握的****CSS****属性

要想深刻理解所有常用****CSS****属性,最好先学会以下几个最基础最常用的CSS属性

  • font-size:文字大小

  • color:前景色(文字颜色)

  • background-color:背景色

  • width :宽度

  • height:高度

CSS属性 - background-color

◼ background-color决定背景色

image.png

CSS属性 - color

◼ color属性用来设置文本内容的前景色

  • 包括文字、装饰线、边框、外轮廓等的颜色

CSS属性 – text

CSS属性 – text-decoration(常用)

text-decoration用于设置文字的装饰线

  • decoration是装饰/装饰品的意思;

◼ text-decoration有如下常见取值:

  • none:无任何装饰线
    ✓ 可以去除a元素默认的下划线
  • underline:下划线
  • overline: 上划线
  • line-through:中划线(删除线)

◼ a元素有下划线的本质是被添加了text-decoration属性

text-transform(一般)

text-transform用于设置文字的大小写转换

  • Transform单词是使变形/变换(形变);

◼ text-transform有几个常见的值:

  • capitalize:(使...首字母大写, 资本化的意思)将每个单词的首字符变为大写
  • uppercase:(大写字母)将每个单词的所有字符变为大写
  • lowercase:(小写字母)将每个单词的所有字符变为小写
  • none:没有任何影响

◼ 实际开发中用JavaScript代码转化的更多.

text-indent(一般)

text-indent用于设置第一行内容的缩进

◼ text-indent: 2em; 刚好是缩进2个文字

image.png

text-align(重要)

text-align: 直接翻译过来设置文本的对齐方式;
MDN: 定义行内内容(例如文字)如何相对它的块父元素对齐;
常用的值

  • left:左对齐
  • right:右对齐
  • center:正中间显示
  • justify:两端对齐

letter-spacing、word-spacing(一般)

letter-spacing、word-spacing分别用于设置字母、单词之间的间距

  • 默认是0,可以设置为负数

CSS属性-字体

font-size(重要)

font-size决定文字的大小
◼ 常用的设置

  • 具体数值+单位
    ✓ 比如100px
    ✓ 也可以使用em单位(不推荐):1em代表100%,2em代表200%,0.5em代表50%
  • 百分比
    ✓ 基于父元素的font-size计算,比如50%表示等于父元素font-size的一半

font-family (重要, 不过一般仅设置一次)

◼ font-family用于设置文字的字体名称

  • 可以设置1个或者多个字体名称;
  • 浏览器会选择列表中第一个该计算机上有安装的字体;
  • 或者是通过 @font-face 指定的可以直接下载的字体。

淘宝使用的字体:

image.png

font-weight(重要)

font-weight用于设置文字的粗细(重量)
常见的取值:

  • 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 :每一个数字表示一个重量
  • normal:等于400
  • bold:等于700

◼ strong、b、h1~h6等标签的font-weight默认就是bold

font-style(一般)

font-style用于设置文字的常规、斜体显示

  • normal:常规显示
  • italic(斜体):用字体的斜体显示(通常会有专门的字体)
  • oblique(倾斜):文本倾斜显示(仅仅是让文字倾斜)
image.png

◼ em、i、cite、address、var、dfn等元素的font-style默认就是italic

font-variant(了解)

font-variant可以影响小写字母的显示形式

  • variant是变形的意思;

可以设置的值如下

  • normal:常规显示
  • small-caps:将小写字母替换为缩小过的大写字母

line-height(常用)

line-height用于设置文本的行高

  • 行高可以先简单理解为一行文字所占据的高度
image.png

为什么文本需要行高?

image.png

line-height

◼ 行高的严格定义是:两行文字基线(baseline)之间的间距

◼ 基线(baseline):与小写字母x最底部对齐的线

image.png

line-height

注意区分height和line-height的区别

  • height:元素的整体高度
  • line-height:元素中每一行文字所占据的高度

◼ 应用实例:假设div中只有一行文字,如何让这行文字在div内部垂直居中

  • 让line-height等同于height
image.png

font

font是一个缩写属性

  • font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写;

  • font-style font-variant font-weight font-size/line-height font-family

规则:

  • font-style、font-variant、font-weight可以随意调换顺序,也可以省略

  • /line-height可以省略,如果不省略,必须跟在font-size后面

  • font-size、font-family不可以调换顺序,不可以省略

image.png

CSS选择器(selector)

◼ 开发中经常需要找到特定的网页元素进行设置样式

  • 思考:如何找到特定的那个元素?

什么是CSS选择器

  • 按照一定的规则选出符合条件的元素,为之添加CSS样式

选择器的种类繁多,大概可以这么归类

  • 通用选择器(universal selector)
  • 元素选择器(type selectors)
  • 类选择器(class selectors)
  • id选择器(id selectors)
  • 属性选择器(attribute selectors)
  • 组合(combinators)
  • 伪类(pseudo-classes)
  • 伪元素(pseudo-elements)

通用选择器

通用选择器(universal selector)

  • 所有的元素都会被选中;

一般用来给所有元素作一些通用性的设置

  • 比如内边距、外边距;
  • 比如重置一些内容;

◼ 效率比较低,尽量不要使用;

简单选择器

简单选择器是开发中用的最多的选择器:

  • 元素选择器(type selectors), 使用元素的名称;
  • 类选择器(class selectors), 使用 .类名 ;
  • id选择器(id selectors), 使用 #id;
image.png

id注意事项

◼ 一个HTML文档里面的id值是唯一的,不能重复

id值如果由多个单词组成,单词之间可以用中划线-、下划线_连接,也可以使用驼峰标识

最好不要用标签名作为id值

◼ 中划线又叫连字符(hyphen)

属性选择器(attribute selectors)

拥有某一个属性 [att]

属性等于某个值 [att=val]

image.png

◼ 其他了解的(不用记)
[attr*=val]: 属性值包含某一个值val;
[attr^=val]: 属性值以val开头;
[attr$=val]: 属性值以val结尾;
[attr|=val]: 属性值等于val或者以val开头后面紧跟连接符-;
[attr~=val]: 属性值包含val, 如果有其他值必须以空格和val分割;

后代选择器(descendant combinator)

后代选择器一: 所有的后代(直接/间接的后代)

  • 选择器之间以空格分割
image.png

后代选择器二: 直接子代选择器(必须是直接自带)

  • 选择器之间以 > 分割;
image.png

兄弟选择器(sibling combinator)

兄弟选择器一:相邻兄弟选择器

  • 使用符号 + 连接
image.png

兄弟选择器二: 普遍兄弟选择器 ~

  • 使用符号 ~ 连接
image.png

选择器组 – 交集选择器

交集选择器: 需要同时符合两个选择器条件(两个选择器紧密连接)

  • 在开发中通常为了精准的选择某一个元素;
image.png

并集选择器: 符合一个选择器条件即可(两个选择器以,号分割)

  • 在开发中通常为了给多个元素设置相同的样式;
image.png

认识伪类

什么是伪类呢?

  • Pseudo-classes: 翻译过来是伪类;

  • 伪类是选择器的一种,它用于选择处于特定状态的元素;

◼ 比如我们经常会实现的: 当手指放在一个元素上时, 显示另外一个颜色;

image.png

伪类(pseudo-classes)

常见的伪类有

  • 1.动态伪类(dynamic pseudo-classes)

    • :link、:visited、:hover、:active、:focus
  • 2.目标伪类(target pseudo-classes)

    • :target
  • 3.语言伪类(language pseudo-classes)

    • :lang( )
  • 4.元素状态伪类(UI element states pseudo-classes)

    • :enabled、:disabled、:checked
  • 5.结构伪类(structural pseudo-classes)

    • :nth-child( )、:nth-last-child( )、:nth-of-type( )、:nth-last-of-type( )

    • :first-child、:last-child、:first-of-type、:last-of-type

    • :root、:only-child、:only-of-type、:empty

  • 6.否定伪类(negation pseudo-classes)

    • :not()
  • 所有的伪类: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

动态伪类(dynamic pseudo-classes)

使用举例

  • a:link 未访问的链接

  • a:visited 已访问的链接

  • a:hover 鼠标挪动到链接上(重要)

  • a:active 激活的链接(鼠标在链接上长按住未松开)

使用注意

  • :hover必须放在:link和:visited后面才能完全生效

  • :active必须放在:hover后面才能完全生效

  • 所以建议的编写顺序是 :link、:visited、:hover、:active

除了a元素,:hover、:active也能用在其他元素上

动态伪类 - :focus

◼ :focus指当前拥有输入焦点的元素(能接收键盘输入)

  • 文本输入框一聚焦后,背景就会变红色

◼ 因为链接a元素可以被键盘的****Tab****键选中聚焦所以:focus也适用于a元素

动态伪类编写顺序建议为

  • :link、:visited、:focus、:hover、:active

直接给a元素设置样式,相当于给a元素的所有动态伪类都设置了

  • 相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red

伪元素(pseudo-elements)

常用的伪元素有

  • :first-line、::first-line

  • :first-letter、::first-letter

  • :before、::before

  • :after、::after

◼ 为了区分伪元素和伪类,建议伪元素使用2个冒号,比如::first-line

伪元素 - ::first-line - ::first-letter(了解)

◼ ::first-line可以针对首行文本设置属性

◼ ::first-letter可以针对首字母设置属性

image.png

伪元素 - ::before和::after(常用)

::before和::after用来在一个元素的内容之前或之后插入其他内容(可以是文字、图片)

  • 常通过 content 属性来为一个元素添加修饰性的内容。
image.png

CSS继承-层叠-元素类型

CSS的属性继承

CSS的某些属性具有继承性(Inherited):

  • 如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性;

  • 当然, 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高);

如何知道一个属性是否具有继承性呢?

  • 常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性;

  • 这些不用刻意去记, 用的多自然就记住了;

另外要多学会查阅文档, 文档中每个属性都有标明其继承性的:

image.png

tips:注意(了解):继承过来的是计算值, 而不是设置值

常见的继承属性有哪些呢?(不用记)

image.png

CSS属性的层叠

CSS的翻译是层叠样式表, 什么是层叠呢?

  • 对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置;
  • 那么属性会被一层层覆盖上去;
  • 但是最终只有一个会生效;

那么多个样式属性覆盖上去, 哪一个会生效呢?

  • 判断一: 选择器的权重, 权重大的生效, 根据权重可以判断出优先级;

  • 判断二: 先后顺序, 权重相同时, 后面设置的生效;

选择器的权重

按照经验,为了方便比较****CSS****属性的优先级,可以给CSS属性所处的环境定义一个权值(权重)

  • !important:10000
  • 内联样式:1000
  • id选择器:100
  • 类选择器、属性选择器、伪类:10
  • 元素选择器、伪元素:1
  • 通配符:0
image.png

HTML元素的类型

◼ 我们会经常提到div是****块级元素****会独占一行, span是****行内级元素****会在同一行显示.

  • 到底什么是块级元素, 什么是行内级元素呢?

HTML定义元素类型的思路:

  • HTML元素有很多, 比如h元素/p元素/div元素/span元素/img元素/a元素等等;

  • 当我们把这个元素放到页面上时, 这个元素到底占据页面中一行多大的空间呢?

    ✓ 为什么我们这里只说一行呢? 因为垂直方向的高度通常是内容决定的;

  • 比如一个h1元素的标题, 我们必然是希望它独占一行的, 其他的内容不应该和我的标题放在一起;

  • 比如一个p元素的段落, 必然也应该独占一行, 其他的内容不应该和我的段落放在一起;

  • 而类似于img/span/a元素, 通常是对内容的某一个细节的特殊描述, 没有必要独占一行;

◼ 所以, 为了区分哪些元素需要独占一行, 哪些元素不需要独占一行, HTML将元素区分(本质是通过****CSS****的)成了两类

  • 块级元素(block-level elements): 独占父元素的一行

  • 行内级元素(inline-level elements):多个行内级元素可以在父元素的同一行中显示

通过CSS修改元素类型

前面我们说过, 事实上元素没有本质的区别:

  • div是块级元素, span是行内级元素;

  • div之所以是块级元素仅仅是因为浏览器默认设置了display属性而已;

image.png

那么我们是否可以通过display来改变元素的特性呢?

◼ 当然可以!

CSS属性 - display

CSS中有个display属性,能修改元素的显示类型,有4个常用值

  • block:让元素显示为块级元素
  • inline:让元素显示为行内级元素
  • inline-block:让元素同时具备行内级、块级元素的特征
  • none:隐藏元素

◼ 事实上display还有其他的值, 比如flex, 后续会专门学习;

display值的特性(非常重要)

block元素:

  • 独占父元素的一行

  • 可以随意设置宽高

  • 高度默认由内容决定

inline-block元素:

  • 跟其他行内级元素在同一行显示

  • 可以随意设置宽高

  • 可以这样理解

✓ 对外来说,它是一个行内级元素

✓ 对内来说,它是一个块级元素

inline:

  • 跟其他行内级元素在同一行显示;  不可以随意设置宽高;

  • 宽高都由内容决定;

image.png

编写HTML时的注意事项

块级元素、inline-block元素

  • 一般情况下,可以包含其他任何元素(比如块级元素、行内级元素、inline-block元素)

  • 特殊情况,p元素不能包含其他块级元素

行内级元素(比如a、span、strong等)

  • 一般情况下,只能包含行内级元素

元素隐藏方法

方法一: display设置为none

  • 元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样);

方法二: visibility设置为hidden

  • 设置为hidden, 虽然元素不可见, 但是会占据元素应该占据的空间;

  • 默认为visible, 元素是可见的;

方法三: rgba设置颜色, 将a的值设置为0

  • rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素;

方法四: opacity设置透明度, 设置为0

  • 设置整个元素的透明度, 会影响所有的子元素;

CSS****属性 - overflow

overflow****用于控制内容溢出时的行为

  • visible:溢出的内容照样可见

  • hidden:溢出的内容直接裁剪

  • scroll:溢出的内容被裁剪,但可以通过滚动机制查看

  • 会一直显示滚动条区域,滚动条区域占用的空间属于width、height

  • auto:自动根据内容是否溢出来决定是否提供滚动机制

CSS样式不生效技巧

为何有时候编写的CSS属性不好使,有可能是因为

  • 选择器的优先级太低

  • 选择器没选中对应的元素

  • CSS属性的使用形式不对
    ✓ 元素不支持此CSS属性,比如span默认是不支持width和height的
    ✓ 浏览器不支持此CSS属性,比如旧版本的浏览器不支持一些css module3的某些属性
    ✓ 被同类型的CSS属性覆盖,比如font覆盖font-size

建议 充分利用浏览器的开发者工具进行调试(增加、修改样式)、查错


CSS盒子模型

认识盒子

生活中, 我们经常会看到各种各样的盒子:

image.png

HTML每个元素都是盒子

◼ 事实上, 我们可以把HTML每一个元素看出一个个的盒子:

image.png

盒子模型(Box Model)

◼ HTML中的每一个元素都可以看做是一个盒子,如下图所示,可以具备这4个属性

  • 内容(content)

    • 元素的内容width/height
  • 内边距(padding)

    • 元素和内容之间的间距
  • 边框(border)

    • 元素自己的边框
  • 外边距(margin)

    • 元素和其他元素之间的间距
image.png

盒子模型的四边

因为盒子有四边, 所以margin/padding/border都包括top/right/bottom/left四个边:

image.png

在浏览器的开发工具中

image.png

内容 – 宽度和高度

设置内容是通过宽度和高度设置的:

  • 宽度设置: width

  • 高度设置: height

◼ 注意: 对于行内级非替换元素来说, 设置宽高是无效的!

另外我们还可以设置如下属性:

  • min-width:最小宽度,无论内容多少,宽度都大于或等于min-width

  • max-width:最大宽度,无论内容多少,宽度都小于或等于max-width

  • 移动端适配时, 可以设置最大宽度和最小宽度;

下面两个属性不常用:

  • min-height:最小高度,无论内容多少,高度都大于或等于min-height

  • max-height:最大高度,无论内容多少,高度都小于或等于max-height

内边距 - padding

padding属性****用于设置盒子的内边距, 通常用于设置****边框和内容之间的间距****;

padding包括四个方向, 所以有如下的取值:

  • padding-top:上内边距

  • padding-right:右内边距

  • padding-bottom:下内边距

  • padding-left:左内边距

padding单独编写是一个缩写属性:

  • padding-top、padding-right、padding-bottom、padding-left的简写属性

  • padding缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;

padding并非必须是四个值, 也可以有其他值;

padding的其他值

image.png

边框 - border

border用于设置盒子的边框:

image.png

边框相对于content/padding/margin来说特殊一些:

  • 边框具备宽度width;

  • 边框具备样式style;

  • 边框具备颜色color;

设置边框的方式

边框宽度

  • border-top-width、border-right-width、border-bottom-width、border-left-width

  • border-width是上面4个属性的简写属性

边框颜色

  • border-top-color、border-right-color、border-bottom-color、border-left-color

  • border-color是上面4个属性的简写属性

边框样式

  • border-top-style、border-right-style、border-bottom-style、border-left-style

  • border-style是上面4个属性的简写属性

边框的样式设置值

边框的样式有很多, 我们可以了解如下的几个:

  • groove:凹槽, 沟槽, 边框看上去好象是雕刻在画布之内

  • ridge:山脊, 和grove相反,边框看上去好象是从画布中凸出来

image.png

同时设置的方式

如果我们相对某一边同时设置 宽度 样式 颜色, 可以进行如下设置:

  • Border-top

  • Border-right

  • border-bottom

  • Border-left

  • border:统一设置4个方向的边框

边框颜色、宽度、样式的编写顺序任意

image.png

圆角 – border-radius

border-radius用于设置盒子的圆角

image.png

border-radius常见的值:

  • 数值: 通常用来设置小的圆角, 比如6px;

  • 百分比: 通常用来设置一定的弧度或者圆形;

border-radius补充

border-radius事实上是一个缩写属性:

  • 将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius,和 border-bottom- left-radius 简写为一个属性。

  • 开发中比较少见一个个圆角设置;

◼ 如果一个元素是正方形, 设置border-radius大于或等于50%时,就会变成一个圆.

image.png

外边距 - margin

margin属性****用于设置盒子的****外边距****, 通常用于****元素和元素之间的间距****;

margin包括四个方向, 所以有如下的取值:

  • margin-top:上内边距

  • margin-right:右内边距

  • margin-bottom:下内边距

  • margin-left:左内边距

margin单独编写是一个缩写属性:

  • margin-top、margin-right、margin-bottom、margin-left的简写属性

  • margin缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;

margin也并非必须是四个值, 也可以有其他值;

margin的其他值

image.png

上下margin的传递

margin-top传递

  • 如果块级元素的顶部线和父元素的顶部线重叠,那么这个块级元素的margin-top值会传递给父元素

margin-bottom传递

  • 如果块级元素的底部线和父元素的底部线重写,并且父元素的高度是auto,那么这个块级元素的margin-bottom值会传递给父元素

如何防止出现传递问题?

  • 给父元素设置padding-top\padding-bottom

  • 给父元素设置border

  • 触发BFC: 设置overflow为auto

建议

  • margin一般是用来设置兄弟元素之间的间距

  • padding一般是用来设置父子元素之间的间距

上下margin的折叠

垂直方向上相邻的2个margin(margin-top、margin-bottom)有可能会合并为1个margin,这种现象叫做collapse(折叠)

水平方向上的margin(margin-left、margin-right)永远不会collapse

折叠后最终值的计算规则

  • 两个值进行比较,取较大的值

如何防止margin collapse ?

  • 只设置其中一个元素的margin

上下margin折叠的情况

两个兄弟块级元素****之间****上下margin的折叠

父子块级元素****之间****margin的折叠

image.png

外轮廓 - outline

outline表示元素的外轮廓

  • 不占用空间

  • 默认显示在border的外面

outline相关属性有

  • outline-width: 外轮廓的宽度

  • outline-style:取值跟border的样式一样,比如solid、dotted等

  • outline-color: 外轮廓的颜色

  • outline:outline-width、outline-style、outline-color的简写属性,跟border用法类似

应用实例

  • 去除a元素、input元素的focus轮廓效果

盒子阴影 – box-shadow

box-shadow属性可以设置一个或者多个阴影

  • 每个阴影用<shadow>表示

  • 多个阴影之间用逗号,隔开,从前到后叠加

<shadow>的常见格式如下

image.png
  • 第1个<length>:offset-x, 水平方向的偏移,正数往右偏移

  • 第2个<length>:offset-y, 垂直方向的偏移,正数往下偏移

  • 第3个<length>:blur-radius, 模糊半径

  • 第4个<length>:spread-radius, 延伸半径

  • <color>:阴影的颜色,如果没有设置,就跟随color属性的颜色

  • inset:外框阴影变成内框阴影

盒子阴影 – 在线查看

◼ 我们可以通过一个网站测试盒子的阴影:

image.png

文字阴影 - text-shadow

text-shadow用法类似于box-shadow,用于给文字添加阴影效果

<shadow>的常见格式如下

image.png
  • 相当于box-shadow, 它没有spread-radius的值;

我们可以通过一个网站测试文字的阴影:

行内非替换元素的注意事项

以下属性对行内级非替换元素不起作用

  • width、height、margin-top、margin-bottom

以下属性对行内级非替换元素的效果比较特殊

  • padding-top、padding-bottom、上下方向的border

CSS属性 - box-sizing

box-sizing用来设置盒子模型中宽高的行为

content-box

  • padding、border都布置在width、height外边

border-box

  • padding、border都布置在width、height里边

box-sizing: content-box

image.png

◼ 元素的实际占用宽度 = border + padding + width

◼ 元素的实际占用高度 = border + padding + height

box-sizing: border-box

image.png

◼ 元素的实际占用宽度 = width

◼ 元素的实际占用高度 = height

IE盒子模型

image.png

元素的水平居中方案

在一些需求中,需要元素在父元素中水平居中显示(父元素一般都是块级元素、inline-block)

行内级元素(包括inline-block元素)

  • 水平居中:在父元素中设置text-align: center

块级元素

  • 水平居中:margin: 0 auto

CSS设置背景

认识网页的背景

在开发中, 为了让网页更加美观, 我们经常会设置各种各样的背景:

  • 我们前面已经学习了如何设置背景颜色, 这里我们要学习设置背景的更多知识;
image.png

background-image

background-image用于设置元素的背景图片

  • 会盖在(不是覆盖)background-color的上面

如果设置了多张图片

  • 设置的第一张图片将显示在最上面,其他图片按顺序层叠在下面

注意:如果设置了背景图片后,元素没有具体的宽高,背景图片是不会显示出来的

background-repeat

background-repeat用于设置背景图片是否要平铺

常见的设值有

  • repeat:平铺

  • no-repeat:不平铺

  • repeat-x:只在水平方向平铺

  • repeat-y:只在垂直平方向平铺

image.png
image.png

background-size

background-size用于设置背景图片的大小

  • auto:默认值, 以背景图本身大小显示

  • cover:缩放背景图,以完全覆盖铺满元素,可能背景图片部分看不见

  • contain:缩放背景图,宽度或者高度铺满元素,但是图片保持宽高比

  • <percentage>:百分比,相对于背景区(background positioning area)

  • length:具体的大小,比如100px

image.png

background-position

background-position用于设置背景图片在水平、垂直方向上的具体位置

  • 可以设置具体的数值 比如 20px 30px;

  • 水平方向还可以设值:left、center、right

  • 垂直方向还可以设值:top、center、bottom

  • 如果只设置了1个方向,另一个方向默认是center

image.png

background-attachment

background-attachment决定背景图像的位置是在视口内固定,或者随着包含它的区块滚动。

可以设置以下3个值

  • scroll:此关键属性值表示背景相对于元素本身固定, 而不是随着它的内容滚动

  • local:此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制,背景将会随着元素的内容滚动.

  • fixed:此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。

background

background是一系列背景相关属性的简写属性

常用格式是

image.png

◼ background-size可以省略,如果不省略,/background-size必须紧跟在background-position的后面

◼ 其他属性也都可以省略,而且顺序任意

background-image和img对比

利用background-image和img都能够实现显示图片的需求,在开发中该如何选择?

image.png

总结

  • img,作为网页内容的重要组成部分,比如广告图片、LOGO图片、文章配图、产品图片

  • background-image,可有可无。有,能让网页更加美观。无,也不影响用户获取完整的网页内容信息


©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 175,490评论 5 419
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 74,060评论 2 335
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 124,407评论 0 291
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 47,741评论 0 248
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 56,543评论 3 329
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 43,040评论 1 246
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 34,107评论 3 358
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 32,646评论 0 229
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 36,694评论 1 271
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 32,398评论 2 279
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 33,987评论 1 288
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 30,097评论 3 285
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 35,298评论 3 282
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 27,278评论 0 14
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 28,413评论 1 232
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 38,397评论 2 309
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 38,099评论 2 314

推荐阅读更多精彩内容

  • 课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS三种显示模式熟练掌握...
    璐璐熙可阅读 645评论 0 0
  • 一、CSS简介 定义:层叠样式表(Cascading Style Sheets),也叫级联样式表。 作用:用来美化...
    magic_pill阅读 888评论 0 4
  • 有了HTML之后,我们下面就要学习CSS,使用 CSS 同时控制多重网页的样式和布局,通过CSS来提升工作效率! ...
    小五丶_阅读 497评论 0 0
  • 什么是选择器 每一条css样式声明(定义)由两部分组成,形式如下: 在{}之前的部分就是“选择器”,“选择器”指明...
    小挠许阅读 312评论 0 1
  • Css层叠样式表 Css层叠样式表,允许网页设计者定义网页元素的样式,字体颜色及其它高级样式. 样式表说白了就是表...
    liusong007阅读 486评论 0 1