收藏闪存小组博问

园龄：粉丝：关注：

2-CSS构建基础

title: 2-CSS构建基础
tags: CSS（设计Web）
category: MDN

层叠与继承

参考文档

冲突规则

CSS代表层叠样式表(Cascading Style Sheets)，理解第一个词cascading很重要— cascade 的表现方式是理解CSS的关键。

层叠

Stylesheets cascade（样式表层叠） — 简单的说，css规则的顺序很重要；当应用 两条同级别 的规则到一个元素的时候，写在后面的就是实际使用的规则。

优先级

浏览器是根据优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则

一个元素选择器 不是很具体 — 会选择页面上该类型的所有元素 — 所以它的优先级就会低一些。

一个类选择器 稍微具体点 — 它会选择该页面中有特定 class 属性值的元素 — 所以它的优先级就要高一点。

继承

一些设置在父元素上的css属性是可以被子元素继承的，有些则不能。

理解继承

控制继承

CSS 为控制继承提供了四个特殊的通用属性值。每个css属性都接收这些值。

inherit
    设置该属性会使子元素属性和父元素相同。实际上，就是 "开启继承".

initial
    设置属性值和 浏览器默认样式 相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit 。

unset
    将属性重置为自然值，也就是如果属性是 自然继承 那么就是 inherit，否则和 initial一样 

revert
    新的属性, 只有很少的浏览器支持。

body {
    color: green;
}
          
.my-class-1 a {
    color: inherit;
}
          
.my-class-2 a {
    color: initial;
}
          
.my-class-3 a {
    color: unset;
}

重设所有属性值

CSS 的 速记属性 all 可以用于同时将这些继承值中的一个应用于（几乎）所有属性。它的值可以是其中任意一个(inherit, initial, unset, or revert)

blockquote {
    background-color: red;
    border: 2px solid green;
}

/* 
  这里的 all 表示设置所有属性的继承方式
*/
.fix-this {
    all: initial;
}

理解层叠

资源顺序

如果你有超过一条同属性的规则，而且都是 相同的权重 ，那么最后面的规则会应用。可以理解为后面的规则覆盖前面的规则

优先级

不同类型的选择器有不同的分数值，把这些分数相加就得到特定选择器的权重，然后就可以进行匹配。

一个选择器的优先级可以说是由四个部分相加，可以认为是四位数：

  1. 千位： 如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。
  2. 百位： 选择器中包含ID选择器则该位得一分。
  3. 十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
  4. 个位：选择器中包含元素、伪元素选择器则该位得一分。

通用选择器 (*)，组合符 (+, >, ~, ’ ')，和否定伪类 (:not) 不会影响优先级。

在进行计算时不允许进行进位，例如，20 个类选择器仅仅意味着 20 个十位，而不能视为 两个百位，也就是说，无论多少个类选择器的权重叠加，都不会超过一个 ID 选择器。

!important

有一个特殊的 CSS 可以用来覆盖所有上面所有优先级计算，不过需要很小心的使用 — !important。用于修改特定属性的值， 能够覆盖普通规则的层叠。

覆盖 !important 唯一的办法就是另一个 !important具有 相同优先级 而且顺序靠后，或者更高优先级。

选择器

参考文档

选择器是什么

CSS选择器是CSS规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”

选择器列表

如果你有多个使用相同样式的CSS选择器，那么这些单独的选择器可以被混编为一个“选择器列表”，这样，规则就可以应用到所有的单个选择器上了

h1,
.special {
  color: blue;
}

当你使用选择器列表时，如果任何一个选择器无效 (存在语法错误)，那么整条规则都会被忽略

选择器的种类

选择器示例
类型选择器h1 { }
通配选择器* { }
类选择器.box { }
ID选择器#unique { }
标签属性选择器a[title] { }
伪类选择器p:first-child { }
伪元素选择器p::first-line { }
后代选择器article p
子代选择器article > p
相邻兄弟选择器h1 + p
通用兄弟选择器h1 ~ p

盒模型

参考文档

块级盒子 和 内联盒子

块级盒子 (block box) 和 内联盒子 (inline box)会在页面流（page flow）和元素之间的关系方面表现出不同的行为:

一个被定义成块级的（block）盒子（诸如标题(<h1>等)和段落(<p>)）会表现出以下行为:

  1. 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
  2. 每个盒子都会换行
  3. width 和 height 属性可以发挥作用
  4. 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”

如果一个盒子对外显示为 inline（诸如<a> 元素、 <span>、 <em> 以及 <strong>），那么他的行为如下:

  1. 盒子不会产生换行。
  2. width 和 height 属性将不起作用。
  3. 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
  4. 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

我们通过对盒子display 属性的设置，来控制盒子的 外部显示类型。

内部和外部显示类型

css的box模型有一个外部显示类型，来决定盒子是块级还是内联。

同样盒模型还有内部显示类型，它决定了盒子内部元素是如何布局的。默认情况下是按照 正常文档流 布局，也意味着它们和其他块元素以及内联元素一样

CSS 盒模型

完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content

盒模型的各个部分

  1. Content box: 这个区域是用来显示内容，大小可以通过设置 `width` 和 `height`.
  2. Padding box: 包围在内容区域外部的空白区域； 大小通过 `padding` 相关属性设置。
  3. Border box: 边框盒包裹内容和内边距。大小通过 `border` 相关属性设置。
  4. Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 `margin` 相关属性设置。

标准盒模型

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

margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框为止 —— 不会延伸到margin

替代（IE）盒模型

你可能会认为盒子的大小还要加上边框和内边距，这样很麻烦。因为这个原因，css还有一个替代盒模型。使用这个模型，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分

默认浏览器会使用标准模型。如果需要使用替代模型，您可以通过为其设置 box-sizing: border-box 来实现

.box {
  box-sizing: border-box;
}

如果你希望所有元素都使用替代模式，设置 box-sizing 在<html> 元素上，然后设置所有元素继承该属性

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

外边距、边框、内边距

外边距

外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。 外边距属性值可以为正也可以为负。设置负值会导致和其他内容重叠。

我们可以使用margin属性一次控制一个元素的所有边距，或者每边单独使用等价的普通属性控制：margin-top、margin-right、margin-bottom、margin-left

注意上下外边距会折叠为较大的那个外边距，而不是单纯的相加

边框

如果您正在使用标准的盒模型，边框的大小将添加到框的宽度和高度。

如果您使用的是替代盒模型，那么边框的大小会使内容框更小，因为它会占用一些可用的宽度和高度。

有四个边框，每个边框都有样式、宽度和颜色。我们可以使用border属性一次设置所有 四个边框 的宽度、颜色和样式。

设置 所有边 的颜色、样式或宽度，请使用以下属性：border-width、border-style、border-color

也可以分别设置 每边 的宽度、颜色和样式，例如：border-top、border-right、border-bottom、border-left

设置单边的颜色、样式或宽度，可以使用最细粒度的普通属性之一：

border-top-width
border-top-style
border-top-color
border-right-width
border-right-style
border-right-color
border-bottom-width
border-bottom-style
border-bottom-color
border-left-width
border-left-style
border-left-color

内边距

内边距位于边框和内容区域之间。与外边距不同，您不能有负数量的内边距，所以值必须是0或正的值。应用于元素的任何背景都将显示在内边距后面，内边距通常用于将内容推离边框。

可以使用padding简写属性控制元素 所有边，或者 每边 单独使用等价的普通属性：padding-top、padding-right、padding-bottom、padding-left

盒子模型和内联盒子

有些属性也可以应用于内联盒子，例如由<span>元素创建的那些内联盒子。

假如我们在一个段落中使用了<span>，并对其应用了宽度、高度、边距、边框和内边距。

宽度和高度被忽略了。

外边距、内边距和边框是生效的，但它们不会改变其他内容与内联盒子的关系，因此内边距和边框会与段落中的其他单词重叠

使用display: inline-block

display有一个特殊的值，它在内联和块之间提供了一个中间状态。这对于以下情况非常有用:您不希望一个项切换到新行，但希望它可以设定宽度和高度，并避免上面内容重叠。

一个元素使用 display: inline-block，实现我们需要的块级的部分效果：

  1. 设置width 和height 属性会生效。
  2. padding, margin, 以及border 会推开其他元素。

但是，它不会跳转到新行，如果显式添加width 和height 属性，它只会变得比其内容更大。

背景与边框

参考文档

CSS的背景样式

背景颜色

background-color属性定义了CSS中任何元素的背景颜色，背景色扩展到元素的内容和内边距的下面。

背景图片

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

默认情况下，大图不会缩小以适应方框，而小图则是平铺以填充方框。

如果除了背景图像外，还指定了背景颜色，则图像将显示在颜色的顶部。

控制背景平铺

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

no-repeat — 不重复。
repeat-x —水平重复。
repeat-y —垂直重复。
repeat —在两个方向重复。
调整背景图像的大小

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

也可以使用关键字:

cover
    浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。
    在这种情况下，有些图像可能会跳出盒子外

contain
    浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，
    则可能在图像的任何一边或顶部和底部出现间隙。
背景图像定位

background-position属性允许您选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系中，框的左上角是(0,0)，框沿着水平(x)和垂直(y)轴定位。

注意：默认的背景位置值是(0,0)。

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;

  /* 最常见的背景位置值有两个单独的值——一个水平值后面跟着一个垂直值。同时可以使用像top和right这样的关键字
 */
  background-position: top center;

  /* 或者使用 长度值, 百分比： */
  background-position: 20px 10%;

  /* 也可以混合使用关键字，长度值以及百分比 */
  background-position: top 20px;

  /* 还可以使用4-value语法来指示到盒子的某些边的距离。该例子将背景从顶部调整20px，从右侧调整10px */
  background-position: top 20px right 10px;
}

background-position是background-position-x和background-position-y的简写，它们允许您分别设置不同的坐标轴的值。

渐变背景

CSS渐变工具

在需要使用渐变的时候，在上面的工具调试自己喜欢的渐变颜色，然后应用到代码中即可

多个背景图像

也可以有多个背景图像——在单个属性值中指定多个background-image值，用逗号分隔每个值。同时注意修改背景图像的位置，否则会发生背景图像重叠的现象

body {
    background-image: url(/images/background1.png),url(/images/background2.png),url(/images/background3.png),url(/images/background4.png),url(/images/background5.png);

    background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,no-repeat; //背景图片不重复

    background-attachment: fixed,fixed,fixed,fixed,fixed;                 //背景图像不跟随移动

    background-size: contain,contain,contain,contain,contain;             //高和宽都匹配浏览器大小

    background-position: 0 0, 27% 0, 54% 0, 81% 0,100%  0;                //图片水平方向从左到右
}

背景滚动

另一个属性是当内容滚动时，背景如何滚动。这是由background-attachment属性控制的，它可以接受以下值:

scroll
    使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。
    实际上，背景被固定在页面的相同位置，所以它会随着页面的滚动而滚动。

fixed
    使元素的背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动。
    它将始终保持在屏幕上相同的位置。

local
    这个值是后来添加的(它只在Internet Explorer 9+中受支持，而其他的在IE4+中受支持)，
    因为滚动值相当混乱，在很多情况下并不能真正实现您想要的功能。
    局部值将背景固定在设置的元素上，因此当您滚动元素时，背景也随之滚动。

边框

我们使用一个简写属性在一行CSS中设置边框的颜色、宽度和样式。我们可以使用border为一个框的所有四个边设置边框。

.box {
  border: 1px solid black;
}

上面的例子可以细化为：

.box {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

同样的，我们也可以为其中一个方向的边框单独设置样式

.box {
  border-top: 1px solid black;
}

同样也可以细化为：

.box {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: black;
}

圆角

通过使用border-radius属性和与方框的每个角相关的长边来实现方框的圆角。

如果只传递一个值，则表示 水平半径 和 垂直半径 相同

/* 如下定义了一个盒子的四个角都有10px的圆角半径 */
.box {
  border-radius: 10px;
}

也可以使用两个长度或百分比作为值，第一个值定义水平半径，第二个值定义垂直半径。

/* 如下定义了一个盒子的右上角水平半径为1em，垂直半径为10％ */
.box {
  border-top-right-radius: 1em 10%;
}

处理不同方向的文本

参考文档

书写模式

CSS中的书写模式是指文本的排列方向是横向还是纵向的。writing-mode 属性使我们从一种模式切换到另一种模式

writing-mode的三个值分别是：

/* 以tb来说，块流向指文本从top开始，然后流向bottom */
horizontal-tb: 块流向从上至下。对应的文本方向是横向的。
vertical-rl  : 块流向从右向左。对应的文本方向是纵向的。
vertical-lr  : 块流向从左向右。对应的文本方向是纵向的。

因此，writing-mode属性实际上设定的是页面上块级元素的显示方向——要么是从上到下，要么是从右到左，要么是从左到右。而这决定了文本的方向。

书写模式、块级布局和内联布局

当我们切换书写模式时，我们也在改变块和内联文本的方向。因此，块维度指的总是块在页面书写模式下的显示方向。而内联维度指的总是文本方向。

即 块布局 为 块流向 的方向，而 内联布局 为 文本方向 的方向

逻辑属性和逻辑值

我们想要的实际上是使宽和高随着书写模式一起变化。当处于纵向书写模式之下时，我们希望盒子可以向横向模式下一样得到拓宽。

为了更容易实现这样的转变，CSS最近开发了一系列映射属性。这些属性用逻辑（logical）和相对变化（flow relative）代替了像宽width和高height一样的物理属性。

书写模式下，映射到width的属性被称作内联尺寸（inline-size）——内联维度的尺寸。而映射height的属性被称为块级尺寸（block-size），这是块级维度的尺寸。

逻辑外边距、边框和内边距属性

在书写模式下，margin-top属性的映射是margin-block-start——总是指向块级维度开始处的边距。

padding-left属性映射到 padding-inline-start，这是应用到内联开始方向（这是该书写模式文本开始的地方）上的内边距。border-bottom属性映射到的是border-block-end，也就是块级维度结尾处的边框。

逻辑值

还有一些属性的取值是一些物理值（如top、right、bottom和left）。这些值同样拥有逻辑值映射（block-start、inline-end、block-end和inline-start）

应该使用物理属性还是逻辑属性呢

逻辑属性是在物理属性之后出现的，如果你并没有应用多种书写模式，那么现在你可能更倾向于使用物理属性，因为这些在你使用弹性布局和网格布局时非常有用。

溢出的内容

参考文档

什么是溢出

CSS中万物皆盒，因此我们可以通过给width和height（或者 inline-size 和 block-size）赋值的方式来约束盒子的尺寸。溢出是在你往盒子里面塞太多东西的时候发生的

CSS尽力减少“数据损失”

你也许会好奇，为什么CSS默认会采取如此不整洁的方式，让内容这么凌乱地溢出出来呢？为何不把多余的内容隐藏起来，或者让盒子变大呢？

只要有可能，CSS就不会隐藏你的内容，隐藏引起的数据损失通常会造成困扰。在CSS的术语里面，这会导致一些内容消失

overflow属性

overflow属性是你控制一个元素溢出的方式，它告诉浏览器你想怎样处理溢出。overflow的默认值为visible，这就是我们的内容溢出的时候，我们在默认情况下看到它们的原因。

如果你想在内容溢出的时候把它裁剪掉，你可以在你的盒子上设置overflow: hidden。这就会像它表面上所显示的那样作用——隐藏掉溢出。

也许你还会想在有内容溢出的时候加个滚动条？如果你用了overflow: scroll（x和y轴都会有滚动条），那么你的浏览器总会显示滚动条，即使没有足够多引起溢出的内容。你也可以使用overflow-y属性，设置overflow-y: scroll来仅在y轴方向滚动

你也可以用overflow-x，以在x轴方向上滚动，尽管这不是处理长英文词的好办法！如果你真的需要在小盒子里面和长英文词打交道，那么你可能要了解一下word-break或者overflow-wrap属性（用于处理断行）

你也可以用overflow属性指定x轴和y轴方向的滚动，同时使用两个值进行传递。如果指定了两个关键字，第一个对overflow-x生效而第二个对overflow-y生效。否则，overflow-x和overflow-y将会被设置成同样的值。例如，overflow: scroll hidden会把overflow-x设置成scroll，而overflow-y则为hidden

如果你只是想让滚动条在有比盒子所能装下更多的内容的时候才显示，那么使用overflow: auto。此时由浏览器决定是否显示滚动条。

溢出建立了块级排版上下文

CSS中有所谓块级排版上下文（Block Formatting Context，BFC）的概念。在你使用诸如scroll或者auto的时候，你就建立了一个块级排版上下文。结果就是，你改变了overflow的值的话，对应的盒子就变成了更加小巧的状态。在容器之外的东西没法混进容器内，也没有东西可以突出盒子，进入周围的版面。激活了滚动动作，你的盒子里面所有的内容会被收纳，而且不会遮到页面上其他的物件，于是就产生了一个协调的滚动体验。

CSS的值与单位

参考文档

什么是CSS的值

在CSS规范和MDN的属性页上，您将能够发现值的存在，因为它们将被尖括号包围，如<color>或<length>

您还将看到被称为数据类型的CSS值。这些术语基本上是可以互换的——当你在CSS中看到一些被称为数据类型的东西时，它实际上只是一种表示值的奇特方式。

CSS值倾向于使用尖括号表示，以区别于CSS属性(例如color属性和 <color> 数据类型)（color属性是键，而<color>是值）。您可能还会混淆CSS数据类型和HTML元素，因为它们都使用尖括号，但这不太可能——它们在完全不一样的上下文中使用。

长度、百分比、数字

CSS中有各种数值数据类型

数值类型描述
<integer>一个整数，比如1024或-55
<number>表示一个小数——它可能有小数点后面的部分，也可能没有，例如0.255、128或-1.2
<dimension><dimension>是一个<number>，它有一个附加的单位，例如45deg、5s或10px。<dimension>是一个伞形类别（或者说是金字塔类别），包括<length>、<angle>、<time>和<resolution>类型。
<percentage>表示一些其他值的一部分，例如50%。百分比值总是相对于另一个量，例如，一个元素的长度相对于其父元素的长度。

长度

最常见的数字类型是<length>，例如10px(像素)或30em。CSS中有两种类型的长度——相对长度和绝对长度

绝对长度单位

以下都是绝对长度单位——它们与其他任何东西都没有关系，通常被认为总是相同的大小。

单位名称等价换算
cm厘米1cm = 96/2.54 px
mm毫米1mm = 0.1cm
Q四分之一毫米1Q = 0.025cm
in英寸1in = 2.54cm = 96px
pc十二点活字1pc = 0.0625in
pt点1pt = 1/72 in
px像素1px = 1/96 in
相对长度单位

相对长度单位相对于其他一些东西，比如父元素的字体大小，或者视图端口的大小

单位相对于
em在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width
ex字符“x”的高度
ch数字“0”的宽度
rem根元素的字体大小
lh元素的line-height
vw视窗宽度的1%
vh视窗高度的1%
vmin视窗较小尺寸的1%
vmax视图大尺寸的1%

百分比

百分比总是相对于其他值设置的。例如，如果将元素的字体大小设置为百分比，那么它将是元素父元素字体大小的百分比。如果使用百分比作为宽度值，那么它将是父值宽度的百分比。

注意，虽然许多值接受长度或百分比，但也有一些值只接受长度。您可以在MDN属性引用页面上看到它能接受哪些值。如果允许的值包括<length-percent>，则可以使用长度或百分比。如果允许的值只包含<length>，则不可能使用百分比。

数字

有些值接受数字，不添加任何单位。接受无单位数字的属性的一个例子是不透明度属性（opacity ），它控制元素的不透明度(它的透明程度)。此属性接受0(完全透明)和1(完全不透明)之间的数字。

颜色

现代计算机的标准颜色系统是24位的，它允许通过不同的红、绿、蓝通道的组合显示大约1670万种不同的颜色，每个通道有256个不同的值(256 x 256 x 256 = 16,777,216)

颜色关键词

关于颜色的属性可以定义一个英文的关键词值

十六进制RGB值

每个十六进制值由一个散列/磅符号(#)和六个十六进制数字组成，每个十六进制数字都可以取0到f(代表15)之间的16个值中的一个——所以是0123456789abcdef。每对值（即每两位十六进制数）表示一个通道—红色、绿色和蓝色—并允许我们为每个通道指定256个可用值中的任意一个(16 x 16 = 256)。

RGB 和 RGBA的值

RGB值是一个函数，即RGB()，它有三个参数，表示颜色的红色、绿色和蓝色通道值，与十六进制值的方法非常相似。RGB的不同之处在于，每个通道不是由两个十六进制数字表示的，而是由一个介于0到255之间的十进制数字表示的

您还可以使用RGBA颜色——它们的工作方式与RGB颜色完全相同，因此您可以使用任何RGB值，但是有第四个值表示颜色的alpha通道，它控制不透明度。如果将这个值设置为0，它将使颜色完全透明，而设置为1将使颜色完全不透明。介于两者之间的值提供了不同级别的透明度。

注意: 在颜色上设置alpha通道与使用我们前面看到的opacity属性有一个关键区别。当你使用不透明度时，你让元素和它里面的所有东西都不透明，而使用RGBA颜色只让你指定的颜色不透明。

HSL 和 HSLA 的值

与RGB相比，HSL颜色模型的支持稍差一些(在旧版本的IE中不支持)，它是在设计师们感兴趣之后实现的。hsl() 函数接受色调、饱和度和亮度值作为参数，而不是红色、绿色和蓝色值，这些值的不同方式组合，可以区分1670万种颜色：

色调
    颜色的底色。这个值在0和360之间，表示色轮周围的角度。

饱和度
    颜色有多饱和？ 它的值为0 - 100%，其中0为无颜色(它将显示为灰色阴影)，
    100%为全色饱和度

亮度
    颜色有多亮？ 它从0 - 100%中获取一个值，其中0表示没有光(它将完全显示为黑色)，
    100%表示完全亮(它将完全显示为白色)

就像RGB有RGBA一样，HSL也有HSLA等效物，它使您能够指定alpha通道值。

图片

<image> 数据类型用于图像为有效值的任何地方。它可以是一个通过 url()函数指向的实际图像文件，也可以是一个渐变。

注意：<image>还有一些其他可能的值，但是这些都是较新的，并且目前对浏览器的支持很差。

位置

<position> 数据类型表示一组2D坐标，用于定位一个元素，如背景图像(通过 background-position)。它可以使用关键字(如 top, left, bottom, right, 以及center )将元素与2D框的特定边界对齐，以及表示框的顶部和左侧边缘偏移量的长度。

字符串和标识符

我们看到关键字被用作值的地方(例如<color>关键字，如 red, black, rebeccapurple, and goldenrod)。这些关键字被更准确地描述为 标识符，一个CSS可以理解的特殊值。因此它们没有使用引号括起来——它们不被当作字符串。

在某些地方可以使用CSS中的字符串，例如 在指定生成的内容时。

/* 颜色名字的关键字，即 CSS标识符，没有被引号括起来 */
.box {
  width:400px;
  padding: 1em;
  border-radius: .5em;
  border: 5px solid rebeccapurple;
  background-color: lightblue;
}

/* 这是一个字符串，因为有引号 */
.box::after {
  content: "This is a string. I know because it is quoted in the CSS."
}

函数

在编程中，函数是一段可重用的代码，可以多次运行，以完成重复的任务，对开发人员和计算机都是如此。但它们也以属性值的形式存在于CSS中。我们已经在颜色部分看到了函数的作用，rgb()、hsl()等。用于从文件返回图像的值，url()也是一个函数。

calc()函数 使您能够在CSS中进行简单的计算。如果您希望计算出在为项目编写CSS时无法定义的值，并且需要浏览器在运行时为您计算出这些值，那么它特别有用。

.wrapper {
  width: 400px;
}

/* 这里的百分比是相对于父容器的 */
.box {
  width: calc(20% + 100px);
}

在CSS中调整大小

参考文档

原始尺寸，或固有尺寸

在受CSS设置影响之前，HTML元素有其原始的尺寸。一个直观的例子就是图像。一副图像的长和宽由这个图像文件自身确定。这个尺寸就是固有尺寸。

一个空的<div>是没有尺寸的。如果你在你的HTML文件中添加一个空<div>并给予其边框，你会在页面上看到一条线。这是边框被压缩后的效果— 它内部没有内容。

试着在空元素内部添加些内容。现在边框内包含一些文字了，因为元素的高度由其所含内容高度确定。再强调一次，这就是元素的固有尺寸 — 由其所包含的内容决定。

设置具体的尺寸

当给元素指定尺寸（然后其内容需要适应该尺寸）时，我们将其称为 外部尺寸。以上面例子中的 <div> 举例 — 我们可以给它一个具体的 width 和 height 值, 然后不论我们放什么内容进去它都是该尺寸。 如果内容的数量超出了元素可容纳的空间，则设置的高度会导致内容溢出。

使用百分数

许多时候，百分数是长度单位，它们常常可与长度互换。当使用百分数时，你需要清楚，它是 什么东西 的百分数。

对于一个处于另外一个容器当中的盒子，如果你给予了子盒子一个百分数作为宽度，那么它指的是父容器宽度的百分数。

如果我们的<div>没有被指定百分数的值，那么它会占据100%的可用空间，因为它是块级别的元素。

如果我们给了它一个百分数作为宽度，那么这就是它原来情况下可以占据空间的百分数。

把百分数作为内外边距

.box {
  border: 5px solid darkblue;
  width: 300px;
  margin: 10%;
  padding: 10%;
}

把margin和padding设置为百分数的话，值是以包含块的 内联尺寸 进行计算的，也就是元素的 水平宽度。在我们的示例中，所有的外边距或填充都是 宽度 的10%。

当你使用百分比作为元素外边距或填充的单位时，你将得到一个相同尺寸的外边距或填充。

min-和max-尺寸

如果你有一个包含了变化容量的内容的盒子，而且你总是想让它至少有个确定的高度，你应该给它设置一个min-height属性。盒子就会一直保持大于这个最小高度，但是如果有比这个盒子在最小高度状态下所能容纳的更多内容，那么盒子就会变大。

max-width的常见用法为，在没有足够空间以原有宽度展示图像时，让图像缩小，同时确保它们不会比这一宽度大。

这个技术是用来让图片可响应的，所以在更小的设备上浏览的时候，它们会合适地缩放。

视口单位

视口，即浏览器窗口的大小（如果是在 iframe 中，则是按 iframe 等的窗口大小），也是有尺寸的。在CSS中，我们有与视口尺寸相关的度量单位，即意为视口宽度的vw单位，以及意为视口高度的 vh单位。使用这些单位，你可以把一些东西做得随用户的视口改变大小。

1vh等于视口高度的1%，1vw则为视口宽度的1%.你可以用这些单位约束盒子的大小，还有文字的大小。

.box {
  border: 5px solid darkblue;
  width: 100vw;
  height: 20vh;
  font-size: 10vh;
}

图像、媒体和表单元素

参考文档

替换元素

图像和视频被描述为替换元素。 这意味着CSS不能影响这些元素的内部布局-仅影响它们在页面上于其他元素中的位置。

某些替换元素（例如图像和视频）也被描述为具有宽高比。 这意味着它在水平（x）和垂直（y）尺寸上均具有大小，并且默认情况下将使用文件的固有尺寸进行显示。

调整图像大小

对于图像的溢出问题，一个常用的技术是将一张图片的max-width设为100%。这将会允许图片尺寸上小于但不大于盒子。这个技术也会对其他替换元素（例如<video>，或者<iframe>）起作用。

如果你可能想把一张图像调整到能够完全盖住一个盒子的大小。object-fit属性可以在这里帮助你。当使用object-fit时，替换元素可以以多种方式被调整到合乎盒子的大小。

布局中的替换元素

替换元素的展现略微与其他元素不同，例如，在一个flex或者grid布局中，元素默认会把拉伸到充满整块区域。图像不会拉伸，而是会被对齐到网格区域或者弹性容器的起始处。

替换元素在成为网格或者弹性布局的一部分时，有不同的默认行为，这很必要，避免了他们被布局奇怪地拉伸。

如果想要强制图像拉伸，以充满其所在的网格单元，可以添加如下代码：

img {
  width: 100%;
  height: 100%;
}

form元素

许多表单的控制是通过<input>元素的方式实现的，这定义了简单的表单区域，例如文字输入，更进一步还有HTML5新加入的更加复杂的区域，例如颜色和日期撷取器。

另外还有一些其他元素，例如用于多行文本输入的<textarea>，以及那些用来包含和标记表格的一些部分的元素，例如<fieldset>和<legend>。

HTML5还涵盖了一些特性，它们允许Web开发者表示哪些区域是必填的，甚至还能标识待填入的内容类型。如果用户输入了一些未预料的内容，或者让必填区域空白，浏览器会显示一个错误信息。不同的浏览器在它们给这样的物件的样式化和自定义余地的问题上，并没有达成一致。

样式化文本输入元素

允许文本输入的元素，例如<input type="text">，特定的类型例如<input type="email">以及<textarea>元素，是相当容易样式化的，它们会试图表现得和在你的页面上其他盒子一样。

/* 以下均是使用 属性选择器，更改表单的样式 */
input[type="text"],
input[type="email"] {
  border: 2px solid #000;
  margin: 0 0 1em 0;
  padding: 10px;
  width: 100%;
}

input[type="submit"] {
  border: 3px solid #333;
  background-color: #999;
  border-radius: 5px;
  padding: 10px 2em;
  font-weight: bold;
  color: #fff;
}

input[type="submit"]:hover {
  background-color: #333;
}

继承和表单元素

在一些浏览器中，表单元素默认不会继承字体样式，因此如果你想要确保你的表单填入区域使用body中或者一个父元素中定义的 字体，你需要向你的CSS中加入这条规则。

/* 以下代码含义为 开启继承字体样式，并且字体大小与父元素一致 */
button,
input,
select,
textarea {
  font-family : inherit;
  font-size : 100%;
}

form元素与box-sizing

为使得表单大小不被 内边距、边框 撑开，使用 box-sizing: border-box 将其转换为 替换盒模型

为了保证统一，将所有元素的内外边距均设为0是个好主意，然后在单独进行样式化控制的时候将这些加回来。

button,
input,
select,
textarea {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

其他有用的设置

除了上面提到的规则以外，你也应该在<textarea>上设置overflow: auto 以避免IE（替换盒模型）在不需要滚动条的时候显示滚动条：

textarea {
  overflow: auto;
}

将一切都放在一起“重置”

作为最后一步，我们可以将上面讨论过的各式属性包起来，成为以下的“表单重置”，以提供一个统一的在其上继续进行工作的地基，这包含了前三节提到的所有东西：

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  box-sizing: border-box;
  padding: 0; margin: 0;
}

textarea {
  overflow: auto;
}

通用样式表，例如Normalize.css。被许多开发者用作所有项目的一系列基础样式，它确保了跨浏览器的任何事情都被默认设定为 统一样式。

样式化表格

参考文档

1、使您的表格标记尽可能简单，并且保持灵活性，例如使用百分比，这样设计就更有响应性。

2、使用 table-layout: fixed 创建更可控的表布局，可以通过在标题width中设置width来轻松设置列的宽度。

3、使用 border-collapse: collapse 使表元素边框合并，生成一个更整洁、更易于控制的外观。

4、使用<thead>, <tbody> 和<tfoot> 将表格分割成逻辑块，并提供额外的应用CSS的地方，因此如果需要的话，可以更容易地将样式层叠在一起。

5、使用斑马线来让其他行更容易阅读。

6、使用 text-align直线对齐您的<th>和<td>文本，使内容更整洁、更易于跟随。

本文作者：tiansz

本文链接：https://www.cnblogs.com/tiansz/p/16319543.html

版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   tiansz  阅读(35)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起