网页CSS基础笔记

最新推荐文章于 2022-07-22 10:26:45 发布

YANGGEOL

最新推荐文章于 2022-07-22 10:26:45 发布

阅读量317

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/qq_46253184/article/details/104828577

版权

前端专栏收录该内容

27 篇文章 2 订阅

订阅专栏

CSS

层叠样式表（英语：Cascading Style Sheets，简写 CSS），又称串样式列表、级联样式表、串接样式表、阶层式样式表，一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，由 W3C 定义和维护。目前最新版本是 CSS2.1，为 W3C 的推荐标准。

CSS语法

CSS 语法结构为：选择器{属性：值;属性：值;…}
选择器：通常是你需要设置样式的 HTML 元素。
属性：是你需要设置的样式属性，比如宽高，颜色，大小等。
属性值：你需要设置的样式属性的具体值，比如宽高具体是多少 px，颜色具体是什么颜色。

<style>
div{
    width: 100px;
}
</style>

CSS 数值与单位

长度和尺寸

像素（px）是一种绝对单位（absolute units），无论其他相关的设置怎么变化，像素指定的值是不会变化的。这也是我们最常用的单位。
em：1 em 与当前元素的字体大小相同（一个大写字母M的宽度）。在 CSS 样式被应用之前，浏览器给网页设置的默认基础字体大小是 16 像素，也就是说 1 em 的计算值默认为 16 像素。但是 em 单位是会继承父元素的字体大小，所以如果在父元素上设置了不同的字体大小，em 的像素值就会变得复杂。em 是 Web 开发中最常用的相对单位。
rem（root em）：（root em）和 em 以同样的方式工作，但它总是等于默认基础字体大小的尺寸；继承的字体大小将不起作用，但是在旧版本的IE上不被支持。

无单位的值

在 CSS 中，你有时会遇到一些无单位的数值——这并不总是意味着错误，在某些情况下，使用无单位的数值也是可以的。比如无单位的 0。因为 0 就是 0，与单位无关。
无单位的行高：行高（line-height）如果没有单位，那么：行高=文字大小*行高值。

百分比

大部分使用特定数值指定的内容同样可以使用百分比来指定。比如上面所提到的行高，如果行高单位是 "%"那么行高的计算也是：行高=文字大小*行高值。

颜色

颜色关键词：
用英语名称的“关键字”来表示，比如：black，green，red，blue，yellow，white 等等。
十六进制值：
每个颜色包括一个哈希/磅符号（#）和其后面紧跟的六个十六进制数，其中每个十六进制数可以是 0 和 F 之间的一个值（一共 16 个），0123456789abcdef。每对十六进制数代表一个通道（红色、绿色或者蓝色）允许我们指定 256 个可用值。 (16 x 16 = 256)
RGB：
一个 RG 值是一个函数——RGB() ——给定的三个参数，分别表示红色，绿色和蓝色通道的颜色值，这与十六进制值的工作方式大致相同。区别在于，RGB中每个通道不是由两个十六进制数字表示的，而是由 0 到 255 之间的十进制数表示的。
不透明度（Opacity）:
通过 opacity 设置透明度，CSS 中设置元素透明度有几种方法：（1）opacity : value ; value 值规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。（2）通过 RGBA，前三个值是 RGB 颜色值，最后一个是透明度的值。比如：background-color: RGBA(255,0,0,0.5);

CSS 样式类型

CSS 样式类型分为三种：
内联式(行内式)：通过标签的 style 属性来设置元素的样式，语法格式为：

<标签名 style="属性1:属性值1; 属性2:属性值2; ..."> 内容 </标签名>

优点：十分灵活，书写方便，权重高（后面会提到）。
缺点：只能操作某一个标签，没有实现样式和结构相分离。

内嵌式（内部样式表）：将 CSS 代码集中写在 HTML 文档的 head 头部标签中，并且用 style 标签定义。语法格式为：

<head>
<style type="text/css">
    选择器 {属性1:属性值1; 属性2:属性值2; ...}
</style>
</head>

优点：可以通过一条语句操作多个标签或类。
缺点：只能控制一个页面，没有彻底实现样式和结构分离。

外链式（外部样式表）：将所有的样式放在一个或多个以 .CSS 为扩展名的外部样式表文件中，通过 link 标签将外部样式表文件链接到 HTML 文档中。语法格式为：

<head>
  <link href="CSS文件的路径"  rel="stylesheet" />
</head>

优点：一个单独的 CSS 文件，多个 HTML 文件可以引用一个 CSS 样式表文件。HTML 代码和 CSS 代码分离,要写什么就在哪个文件去找，修改方便。这样写的前提是 HTML 页面与 CSS 文件在同一文件夹下。
注：href 定义所链接外部样式表文件的 URL，可以是相对路径，也可以是绝对路径。rel 定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

区块模型

区块模型也就是我们常说的盒子模型，而所谓盒子模型就是把 HTML 页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。

padding（内边距）

padding 内边距位于内容框的外边缘与边界的内边缘之间。padding-top:上内边距，padding-right:右内边距，padding-bottom:下内边距，padding-left:左内边距。
注：padding 属性接受长度值或百分比值，但不允许使用负值。如果使用百分比值，百分数值是相对于其父元素的 width 计算的。

border（边框）

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

border:border-width||border-style||border-color

border-top 设置上边框样式，border-bottom 设置下边框样式，border-left 设置左边框样式，border-right 设置右边框样式。
border-width, border-style, border-color: 分别仅设置边框的宽度／样式／颜色，并应用到全部四边边界。
也可以单独设置某一个边的三个不同属性，如 border-top-width, border-top-style, border-top-color 等。
border-style 的值：
在这里插入图片描述
注：可以按照 top-right-bottom-left（上右下左）的格式，分别写出元素的各个边框的属性。
注：默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是 body、div 或另一个 table。

margin(外边距)

外边距（margin）代表 CSS 框周围的外部区域，称为外边距。和 padding 类似，也有 margin-top、margin-right、margin-bottom 和 margin-left。
注：与 padding 不同的是 margin 可以是负值。另外需要注意的是外边距合并问题，简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者（两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值；两个相邻的外边距都是负数时，折叠结果是它们两者之间绝对值较大的值;两个外边距一正一负的时候,折叠的结果是两者相加的和）。边距合并问题只发生在块级元素之间。

高级的框操作

溢流：当使用绝对的值设置了一个框的大小（如，固定像素的宽/高），允许的大小可能不适合放置内容，这种情况下内容会从盒子溢流。使用 overflow 属性来控制这种情况的发生。常用的值：

auto:当内容过多的时候溢流的内容被隐藏，然后出现滚动条，让我们滚动查看所有的内容。
hidden: 当内容过多，溢流的内容被隐藏。
visible: 当内容过多，溢流的内容被显示在盒子的外边。

CSS 框类型

isplay：block;将行内元素转换为块级元素。
display：inline;将块级元素转换为行内元素。
display：inline-block;转换为行内块元素
块级元素的特点：
一个块级元素独占一行。
元素的高度、宽度、行高以及顶和底边距都可设置。
元素宽度在不设置的情况下，是它本身父容器的 100%（和父元素的宽度一致），除非设定一个宽度。
常见的块级元素：<div、<p、<h1、<form、<ul和 <li。
行内元素的特点：
和其他元素都在一行上。
元素的高度、宽度、行高及顶部和底部边距不可设置。
元素的宽度就是它包含的文字或图片的宽度，不可改变。
常见的行内元素：<a、<span、<br、<i、<em、<strong、<label。
行内块元素特点：同时具备内联元素、块状元素的特点。常见行内块元素：<img、<input。

样式化文字

基础文字和字体样式化

用于样式化文本的 CSS 属性通常有：
字体样式：作用于字体的属性，比如我们经常会使用到的字体大小，字体是粗体还是斜体。
文本布局风格：作用于文本的间距以及其他布局功能的属性。比如文本居中对齐。

字体

颜色

通过 color 属性设置字体的颜色，color 值接受任何合法的 CSS 颜色单位。

字体种类

通过 font-family 属性设置字体种类。font-family 可以把多个字体名称作为一个“回退”系统来保存，如果浏览器不支持第一个字体，则会尝试下一个，也就是说浏览器会使用它可识别的第一个值，它们之间用逗号隔开。比如：font-family: “Trebuchet MS”, Verdana, sans-serif。

字体样式

通过 font-style 属性设置文字格式。
normal: 将文本设置为普通字体 (将存在的斜体关闭)。
italic: 如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。
oblique: 将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。

字体粗细

通过 font-weight 属性设置字体的粗细。常用的有 normal：字体正常，bold：文字加粗。

文本转换

通过 text-transform 属性转换字体。值包括：
none: 防止任何转型。
uppercase: 将所有文本转为大写。
lowercase: 将所有文本转为小写。
capitalize: 转换所有单词让其首字母大写。
full-width: 将所有字形转换成固定宽度的正方形，类似于等宽字体，允许对齐。拉丁字符以及亚洲语言字形（如中文，日文，韩文）。

文本装饰

通过 text-decoration 属性设置或者取消字体上的文本装饰，我们一般会使用这个属性去掉链接上的默认下划线。可用值为：
none: 取消已经存在的任何文本装饰。
underline: 文本下划线。
overline: 文本上划线。
line-through: 穿过文本的线。

文本布局

文本对齐：通过 text-align 属性来控制文本它所在的内容盒子对齐的方式。常用值为：
left：文本左对齐。
right：文本右对齐。
center：文本居中对齐。
行高：通过 line-height 属性来设置文本每行之间的高。浏览器默认字体大小为:16 px，而浏览器默认行高为：18 px。行高=上间距+文字大小+下间距。上下间距是相等的，如果字体大小为 20 px，它的父元素 div 的高度为 40 px，那么我们只需要设置行高为 40 px，就可以使文字相对于 div 盒子垂直居中。

font 简写

选择器{font:font-style  font-weight  font-size/line-height  font-family}

注意:必须有字体大小和字体(font-size 和 font-family), 必须严格按顺序写。font-size 和 line-height 属性之间必须放一个正斜杠。

样式化列表

列表特定样式

符号样式：用 list-style-type 设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字。常见的取值有：
disc：无序列表的默认值，实心圆。
circle ：空心圆。
square：实心方块。
decimal：有序列表的默认值阿拉伯数字。
lower-alpha ：小写英文字母。
upper-alpha ：大写英文字母。

项目符号位置：通过 list-style-position 设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。默认值为 outside，这使项目符号位于列表项之外。如果值设置为 inside，项目条目则位于行内。

使用自定义的项目图片：通过 background 系列来设置。
在这里插入图片描述

样式化链接

选择器中有以下几种伪类 :link、 :hover、 :active、 :visited，也称为伪类设置样式。

区块模型

设置宽高的约束

通过属性 min-width、max-width、min-height 和 max-height 设置宽高的约束。

不常见的显示类型

display:table;允许你像处理 table 布局那样处理非 table 元素。
在这里插入图片描述
display:flex;弹性布局，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定 flex 布局，行内元素通过：display：inline-flex;设置 flex 布局。

flex布局

设为 flex 布局以后，子元素的 float、clear 和vertical-align 属性将失效，flex 布局默认是首行左对齐。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
主轴的开始位置（与边框的交叉点）叫做 main start，结束位置叫做 main end。
交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。
设置了 display: flex 的父元素被称之为 flex 容器（flex container）。

容器的属性：
flex-direction 属性：设置主轴的方向（也就是项目的排列方向）。
它的取值有：
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap属性：
默认情况下，项目都排在一条线（轴线）上。flex-wrap 属性定义如果一条轴线排不下，如何换行。它的取值有：
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。

justify-content 属性定义了项目在主轴上的对齐方式。
它的取值有：
flex-start：使所有 flex 项都位于主轴的开始处。
flex-end：使所有 flex 项到主轴的结尾处。
center：使 flex 项在主轴居中。
space-between：使 flex 项两端对齐，项目之间的间隔都相等。
space-around：使每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items 属性定义项目在交叉轴上如何对齐。它可能取5个值，具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下：
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为 auto，将占满整个容器的高度。

align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
它的可能取值为：
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

项目的属性：
order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0。

flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的 flex-grow 属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink 属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小。如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小。负值对该属性无效。

flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。它可以设为跟 width 或 height 属性一样的值（比如 350 px），则项目将占据固定空间。

flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。该属性可能取 6 个值，除了 auto，其他都与 align-items 属性完全一致。

背景

在这里插入图片描述

图片

height：定义图片的高度。
width：定义图片的宽度。
border：定义图片周围的边框。

表格

表格边框：使用 border 属性为表格设置边框。
折叠边框：使用 border-collapse 属性设置是否将表格边框折叠为单一边框。
表格的宽度和高度：使用 width 和 height 属性设置表格的高度和宽度。
表格文本对齐的方式：通过 text-align 属性设置水平对齐方式，取值有 left（左对齐）right（右对齐）和 center（居中对齐），通过 vertical-align 属性设置垂直对齐方式，取值有：top（顶端对齐）bottom（底部对齐）和 middle（居中对齐）。
表格内边距：通过为 td 和 th 元素设置 padding 属性，控制表格中内容和边框的距离。
表格颜色：通过 color 设置表格文本颜色，通过 background-color 设置表格背景颜色。
表格标题位置：通过 caption-side 属性设置表格的标题位置，它的取值有：top（默认值。把表格标题定位在表格之上），bottom（把表格标题定位在表格之下）和 inherit（规定应该从父元素继承 caption-side 属性的值）。

轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline-color设置轮廓的颜色。取值和其余颜色的取值一样。
outline-style 设置轮廓的样式。取值如下：
在这里插入图片描述
outline-width 设置轮廓的宽度。它的值有：
thin：规定细轮廓。
medium：默认取值规定中等的轮廓。
thick ：规定粗的轮廓。
length ：允许你自定义轮廓粗细的值。
inherit：规定应该从父元素继承轮廓宽度的设置。
outline 上面三个属性的连写。

盒子阴影

通过 box-shadow 属性设置盒子阴影。box-shadow 有四个值:
第一个值是水平偏移量（水平阴影）：即向右的距离，阴影被从原始的框中偏移(如果值为负的话则为左)。
第二个值是垂直偏移量（垂直阴影）：即阴影从原始盒子中向下偏移的距离(或向上，如果值为负)。
第三个值是模糊半径（影子大小）：即在阴影中应用的模糊度。
第四个值是阴影的基本颜色。你可以使用任何长度和颜色单位来定义这些值。
在最前方使用 inset 关键字，把它放在一个影子声明的开始，可以使它变成一个内部阴影，而不是一个外部阴影。

圆角边框

使用 border-radius 属性来创建圆角。
border-radius 的值除了用百分号（%）还可以用 length，如：border-radius:25px;。

选择器

基础选择器：标签选择器，类选择器，ID 选择器，通配符选择器
组合选择器：标签指定式选择器，后代选择器，并集选择器
属性选择器
伪类选择器
标签选择器
标签选择器也叫元素选择器。其实就是 html 代码中的标签，比如<html、<body、<h1、<p、<img。
类选择器
类选择器，是对 HTML 标签中 class 属性进行选择。CSS 类选择器的选择符是 “.”。
类选择器命名规范：不能是纯数字，不能是标签名，不建议使用汉字。一般是点+对应样式描述。
ID 选择器
ID 是对 HTML 标签中 ID 属性进行选择。ID 选择器的选择符是 “#”。任何元素都可以使用 id 属性设置唯一的 ID 名称。这是选择单个元素的最有效的方式。特别需要注意的是 ID 选择器具有唯一性，也就是说同一个 HTML 页面不能有相同的 ID 名称(使用多个相同的 ID 选择器，浏览器不会报错但是不符合 W3C 标准),可以这样理解：一个人的名字（class 类名）可以有很多重名的，但是身份证号（ID 名称）只能有一个唯一的，不能重复的。
通配符选择器
通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。
标签指定式选择器
标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个必须是标签选择器，第二个为 class 选择器或 ID 选择器。两个选择器之间不能有空格。简单记忆为：并且的意思。即…又…的意思，比如 p.one 选择的是类名为 one 的段落标签。
后代选择器
后代选择器又叫包含选择器，用来选择元素或元素组的后代。其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。
子代选择器
与后代选择器相比，子元素选择器只能选择作为某个元素的子元素。子选择器使用大于号作为子结合符。
div>p：即为选择后代子元素。
div p：即为选择div后代所有p。
并集选择器
并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class 类选择器、id 选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的 CSS 样式。简单记忆为：和的意思。
属性选择器
属性选择器是根据元素的属性及属性值来选择元素。常用的几种属性选择器：

伪类选择器
CSS 伪类用于向某些选择器添加特殊的效果。下面给大家介绍几个常用的伪类。
:link ：应用于未被访问过的链接。IE6 不兼容，解决此问题，直接使用 a 标签。
:hover：应用于有鼠标指针悬停于其上的元素。在 IE6 只能应用于a连接，IE7+ 所有元素都兼容。
:active：应用于被激活的元素，如被点击的链接、被按下的按钮等。
:visited ：应用于已经被访问过的链接。

定位

静态定位
静态定位就是按照标准流的方式显示，静态定位的元素不会受到 top， bottom， left， right 影响。
静态定位是每个元素获取的默认值，所以我们基本上都不需要再单独设置它。
绝对定位
绝对定位有以下特点：
绝对定位以浏览器左上角为基准设置位置。
当一个盒子包含在另一个盒子中，父盒子未设置定位，子盒子以浏览器左上角为基准设置位置；当父盒子设置定位，子盒子以父盒子左上角为基准设置位置。
绝对定位不占空间位置（类似于浮动）。
相对定位
相对定位有以下特点：
相对定位以元素自身的位置为基准设置位置。
相对定位要占空间位置。
一般子元素设置绝对定位，父元素设置相对定位（子绝父相）。
固定定位
固定定位表现类似于绝对定位，只有一个主要区别：绝对定位固定元素是相对于元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。固定定位也不占空间位置。
** top， bottom， left， right**
使用 top， bottom， left，和 right 来精确指定要将定位元素移动到的位置，这些属性的值可以使用逻辑上期望的任何单位：px，cm，%等。也可以使用负值。
z-index
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。用于处理当多个元素重叠的时候，哪些元素设置在其他元素的顶部。特别需要注意的是元素可拥有负的 z-index 属性值，属性值没有单位，只有数字。Z-index 仅能在定位元素上奏效（例如 position:absolute;）。

浮动

浮动通过 float 属性来定义，分为向左浮动和向右浮动。
浮动的特点：
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
设置了浮动的元素，脱离标准流（脱标）。
行内元素设置浮动后可以设置宽高。
块级元素设置浮动后可以在一行显示。

脱标

特别需要注意的是，设置了浮动的元素，脱离标准流（脱标）。

清除浮动

当父容器没有设置高度，里面的盒子没有设置浮动的情况下会将父容器的高度撑开。一旦父容器中的盒子设置浮动，脱离标准文档流，父容器立马没有高度，下面的盒子会跑到浮动的盒子下面。出现这种情况，我们需要清除浮动。
其中的一种方法，需在父级class中加上clearfix，伪元素法：

.clearfix:after {
    content: "";
    /*设置内容为空*/
    height: 0;
    /*高度为0*/
    line-height: 0;
    /* 行高为0*/
    display: block;
    /*将文本转为块级元素*/
    visibility: hidden;
    /*将元素隐藏*/
    clear: both/*清除浮动*/
}

.clearfix {
    zoom: 1;
    /*为了兼容IE*/
}