css入门教程
Sunday Lv2
  2023-01-09 17:56:40 2023-01-09 17:56      12.8k 字  54 分钟  

前言：CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。

css基础语法

CSS 规则集（rule-set）由选择器和声明块组成，如：

1
2
3
4
h1 {
    color: red;
    font-size: 14px;
}
  1. 选择器指向您需要设置样式的 HTML 元素。
  2. 声明块包含一条或多条用分号分隔的声明。多条 CSS 声明用分号分隔，声明块用花括号括起来。
  3. 每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。

css选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

我们可以将 CSS 选择器分为五类：

  1. 简单选择器（根据名称、id、类来选取元素）
  2. 组合器选择器（根据它们之间的特定关系来选取元素）
  3. 伪类选择器（根据特定状态选取元素）
  4. 伪元素选择器（选取元素的一部分并设置其样式）
  5. 属性选择器（根据属性或属性值来选取元素）
CSS元素选择器

元素选择器根据HTML元素名称来选择 HTML 元素。

1
2
3
4
p {
  text-align: center;
  color: red;
}
CSS id选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

1
2
3
4
#para1 { /* 这条 CSS 规则将应用于 id="para1" 的 HTML 元素：*/
  text-align: center;
  color: red;
}

id 名称不能以数字开头。

CSS 类选择器

类选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

1
2
3
4
.center {   /*在此例中，所有带有 class="center" 的 HTML 元素将为红色且居中对齐：*/
  text-align: center;
  color: red;
}
  1. 一个HTML 元素可以引用多个类。
  2. 类名不能以数字开头
CSS 通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

1
2
3
4
* {     /*下面的 CSS 规则会影响页面上的每个 HTML 元素：*/
  text-align: center;
  color: blue;
}
CSS 分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素。
分组选择器是使用,分隔的多个选择器，这些选择器是一个组，拥有同样的样式定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 分组前 */
h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

/* 分组后 */
h1, h2, p {
  text-align: center;
  color: red;
}

对选择器进行分组，可以最大程度上缩减代码量，实现代码复用

简单CSS选择器归纳

选择器 举例 描述
element p 选取所有 <p> 元素。
.class .intro 选取所有 class=“intro” 的元素。
#id #firstname 选取 id=“firstname” 的那个元素。
* * 选取所有元素。
element,element,… div, p 选取所有 <div> 元素和所有 <p> 元素。

分组选择器使用，分隔，使用空格隔开的不是分组选择器

css引入

当浏览器读到样式表时，它将根据样式表中的信息来格式化 HTML 文档。
在HTML文档中，有三种插入样式表的方法：

  1. 外部 CSS
  2. 内部 CSS
  3. 行内 CSS

外部css

通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！

外部样式在 HTML 页面 <head> 部分内的 <link> 元素中进行定义,每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。如：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

</body>
</html>

外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。
外部 .css 文件不应包含任何 HTML 标签。

mystyle.css

1
2
3
4
5
6
7
8
body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

内部css

如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。

内部样式在 HTML 页面的 <head> 部分内的 <style> 元素中进行定义,如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
        background-color: linen;
        }

        h1 {
        color: maroon;
        margin-left: 40px;
        } 
    </style>
</head>
<body>

    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

</body>
</html>

行内css

行内样式（也称内联样式）可用于为单个元素应用唯一的样式。

行内样式在相关元素的 “style” 属性中定义，style 属性可包含任何 CSS 属性，如：

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>

    <h1 style="color:blue;text-align:center;">This is a heading</h1>
    <p style="color:red;">This is a paragraph.</p>

</body>
</html>

总的来说，外部css可作用与整个网站，内部css仅针对某一特定HTML页面，行内css针对某一HTML元素。

在实际开发中，我们最好不要大量地使用行内css样式，这将使页面结构和样式糅杂在一起，失去了css本身的意义。

多个样式表

我们有这么多定义和引入css样式的方式，如果他们都为同一元素指定了样式，会使用那个呢？

如果在不同样式表中为同一选择器（元素）定义了一些属性，则将使用最后读取的样式表中的值。如：

1
2
3
4
5
6
7
8
9
10
11
12
<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">  <!-- h1 {color: navy;}-->
    <style>
        h1 {
            color: orange;
        }
    </style>
</head>

<!-- 如果内部样式是在链接到外部样式表之后定义的，则 <h1> 元素将是橙色 -->
<!-- 如果在链接到外部样式表之前定义了内部样式，则 <h1> 元素将是深蓝色 -->

补充：行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。

css注释

  1. html注释 <!-- -->
  2. css注释 /* */

注释用于解释代码,浏览器会忽略注释。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: red; /* 将文字颜色设置为红色 */
} 
</style>
</head>
<body>

<h2>My Heading</h2>

<!-- 这些段落将是红色的 -->
<p>Hello World!</p>
<p>这段文本由 CSS 设置样式。</p>
<p>CSS 注释不会在输出中显示。</p>

</body>
</html>

css颜色

通过css属性background-color、color、border,我们可以设置背景色、文本颜色、边框颜色

css背景颜色 
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>

    <h1 style="background-color:Tomato;">番茄色</h1>
    <h1 style="background-color:Orange;">橙色</h1>
    <h1 style="background-color:Violet;">紫色</h1>
    <h1 style="background-color:Gray;">灰色</h1>
    <h1 style="background-color:LightGray;">浅灰</h1>

</body>
</html>
css文本颜色 
1
2
3
<h1 style="color:Tomato;">China</h1>
<p style="color:DodgerBlue;">China is a great country!</p>
<p style="color:MediumSeaGreen;">China, officially the People's Republic of China...</p>
css边框颜色 
1
2
3
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

指定颜色可以使用预定义的颜色名称，也可以使用RGB、HEX、HSL、RGBA、HSLA 值，如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<body>

<!-- 与颜色名称 "Tomato" 等同： -->
<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>

<!-- 与颜色名称 "Tomato" 等同，但是有 50% 透明度： -->
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>

<p>除了预定义的颜色名称之外，还可以使用 RGB、HEX、HSL 指定颜色，甚至可以使用 RGBA 或 HSLA 颜色值指定带透明度的颜色。</p>

</body>
</html>
css rgb颜色

在 CSS 中，可以使用下面的公式将颜色指定为 RGB 值：
rgb(red, green, blue)

  1. 每个参数 (red、green 以及 blue) 定义了 0 到 255 之间的颜色强度。
  2. 要显示黑色，请将所有颜色参数设置为 0，如下所示：rgb(0, 0, 0)。
  3. 要显示白色，请将所有颜色参数设置为 255，如下所示：rgb(255, 255, 255)。
  4. 通过使用相等的红绿蓝色值，您会得到不同程度的灰色: rgb(180, 180, 180)

RGBA 颜色值是具有 alpha 通道的 RGB 颜色值的扩展，它指定了颜色的不透明度。语法：
rgba(red, green, blue, alpha)

  1. alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。
  2. 透明是指没有颜色，而不是白色
css hex颜色

在 CSS 中，可以使用以下格式的十六进制值指定颜色：
#rrggbb

  1. rr（红色）、gg（绿色）和 bb（蓝色）是介于 00 和 ff 之间的十六进制值（与十进制 0-255 相同）。
  2. #ff0000 显示为红色，因为红色设置为最大值（ff），其他设置为最小值（00）。
  3. 通过对红色，绿色和蓝色使用相等的值，您将获得不同程度的灰色，如: #787878 #b4b4b4
css hsl颜色

在 CSS 中，可以使用色相、饱和度和明度（HSL）来指定颜色：
hsla(hue, saturation, lightness)

  1. 色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。
  2. 饱和度（saturation）可以描述为颜色的强度，100％ 是纯色；50％ 是 50％ 灰色，但是您仍然可以看到颜色；0％ 是完全灰色，您无法再看到颜色。
  3. 亮度（lightness）指颜色的明暗程度，0％ 表示不亮（黑色），50％ 表示 50％ 亮（既不暗也不亮），100％ 表示全明（白）。
  4. 通常通过将色调和饱和度设置为 0 来定义灰色阴影，并将亮度从 0％ 到 100％ 进行调整可以得到更深/更浅的阴影：hsl(0, 0%, 47%) hsl(0, 0%, 71%)

HSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展，它指定了颜色的不透明度。HSLA 颜色值指定为：
hsla(hue, saturation, lightness, alpha)

  1. alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字

原来所有颜色都可以是红绿蓝三色的组合结果🤔，rgb颜色和hex颜色使用三色组合值，hsl使用单一颜色+饱和度+亮度确定一种颜色

css中，opacity属性可以指定元素的不透明度/透明度。取值范围为0.0（透明）-1.0（完全不透明）
当使用 opacity 属性为元素背景添加透明度时，其所有子元素也会变为透明。这可能会使完全透明的元素内的文本难以阅读。如果您不希望对子元素应用不透明度，例如上面的例子，请使用 RGBA 颜色值。

css背景

CSS 常见背景属性有

background-color

background-color属性指定元素的背景色。举例：

1
2
3
body {  /*设置页面背景色为海蓝*/
  background-color: lightblue;
}

您可以为任何 HTML 元素设置背景颜色：

1
2
3
4
5
6
7
8
9
h1 {
  background-color: red;
}
div {
  background-color: rgb(255,0,0);
}
p {
  background-color: #ff0000;
}
background-image

background-image 属性指定用作元素背景的图像
，默认情况下，图像会重复，以覆盖整个元素。

1
2
3
body {
  background-image: url("paper.gif");
}
background-repeat

默认情况下，background-image 属性在水平和垂直方向上都重复图像。我们可以设置background-repeat属性值为repeat-x、repeat-y、no-repeat来使背景图像水平重复、垂直重复、不重复(只显示一次背景图像)

1
2
3
4
body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}
background-position

background-position 属性用于指定背景图像的位置。

1
2
3
4
5
body {     /*把背景图像放在右上角，不重复显示*/
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}
background-attachment

background-attachment 属性指定背景图像是应该scroll滚动还是fixed固定的(不会随页面的其余部分一起滚动)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 指定应该固定背景图像,当鼠标向下滚动时，背景图片一直在原地 */
/* fixed效果就是图片一直在屏幕上的某个位置😜 */
body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

/* 指定背景图像应随页面的其余部分一起滚动 */
/* 当滚动一定程度后，背景就看不到了😐 */
body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

我们也可以使用简写版的背景属性background，在一个属性中指定所有背景属性。如：

css背景简写 
1
2
3
body {
  background: #ffffff url("tree.png") no-repeat right top;
}

在使用简写属性时，属性值必须按特定次序添加（可以缺失某个值）：

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

所有css背景属性如下表

属性 描述
background 在一条声明中设置所有背景属性的简写属性。
background-attachment 设置背景图像是固定的还是与页面的其余部分一起滚动。
background-clip 规定背景的绘制区域。
background-color 设置元素的背景色。
background-image 设置元素的背景图像。
background-origin 规定在何处放置背景图像。
background-position 设置背景图像的开始位置。
background-repeat 设置背景图像是否及如何重复。
background-size 规定背景图像的尺寸。

css边框

CSS border 属性允许您指定元素边框的样式、宽度和颜色。
当border-style、border-width 、border-color设置多个属性值时，规则：

  1. 4个值（上，右，下，左）
  2. 3个值（上，右左，下）
  3. 2个值（上下，左右）
  4. 1个值（上右下左）
css边框样式

border-style 属性指定要显示的边框类型:

属性值描述
solid定义实线边框
dotted定义点线边框
dashed定义虚线边框
double定义双线边框
none定义无边框
hidden定义隐藏边框
groove定义 3D 坡口边框。效果取决于 border
ridge定义 3D 脊线边框。效果取决于 border
inset定义 3D inset 边框。效果取决于 border
outset定义 3D outset 边框。效果取决于 border

border-style举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
  <style>
    p.dotted {border-style: dotted;}
    p.dashed {border-style: dashed;}
    p.solid {border-style: solid;}
    p.double {border-style: double;}
    p.none {border-style: none;}
    p.hidden {border-style: hidden;}
    p.mix {border-style: dotted dashed solid double;}
  </style>
</head>
<body>
​
  <h1>border-style 属性</h1>
  <p>此属性规定要显示的边框类型：</p>
  ​
  <p class="dotted">点状边框。</p>
  <p class="dashed">虚线边框。</p>
  <p class="solid">实线边框。</p>
  <p class="double">双线边框。</p>
  <p class="none">无边框。</p>
  <p class="hidden">隐藏边框。</p>
  <p class="mix">混合边框。</p>
​
</body>
</html>

除非设置了 border-style 属性，否则其他 CSS 边框属性都不会有任何作用！

css边框宽度

border-width 属性指定四个边框的宽度。

  1. 可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin（细边框）、medium（中等粗细边框） 或 thick（粗边框）
  2. border-width 属性可接受一到四个值（依次对应上、右、下、左边框）

border-width举例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
  <style>
    p.one {
      border-style: solid;
      border-width: 5px 20px; /* 上、下边框 5 像素，左、右边框 20 像素 🍎*/
    }

    p.two {
      border-style: solid;
      border-width: 20px 5px; /* 上、下边框 20 像素，左、右边框 5 像素 🍉*/
    }

    p.three {
      border-style: solid;
      border-width: 25px 10px 4px 35px; /* 上 25 像素、右 10 像素、下 4 像素、左 35 像素👻 */
    }

    p.four {
      border-style: solid;
      border-width: thin;
    }
  </style>
</head>
<body>

  <h1>border-width 属性</h1>
  <p>border-width 属性可接受一到四个值（依次对应上、右、下、左边框）：</p>

  <p class="one">一些文本。</p>
  <p class="two">一些文本。</p>
  <p class="three">一些文本。</p>
  <p class="four">一些文本。</p>

</body>
</html>

border-width 属性单独使用时不起作用。请首先使用 border-style 属性设置样式。

css边框颜色

border-color 属性用于设置四个边框的颜色。支持使用颜色名，rgb，hex，hsl等

  1. 如果未设置 border-color，则它将继承元素本来的颜色。
  2. border-color 属性可接受一到四个值（依次对应上、右、下、左边框）

border-color举例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
<style>
  p.one {
    border-style: solid;
    border-color: red;
  }

  p.two {
    border-style: solid;
    border-color: green;
  } 

  p.three {
    border-style: dotted;
    border-color: blue;
  } 

  p.four {
  border-style: solid;
  border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}


</style>
</head>
<body>

  <h1>border-color 属性</h1>
  <p>此属性规定四条边框的颜色：</p>

  <p class="one">红色实线边框</p>
  <p class="two">绿色实线边框</p>
  <p class="three">蓝色点状边框</p>
  <p class="four">多色的实线边框</p>

  <p><b>注释：</b>border-color 属性单独使用时不起作用。请首先使用 border-style 属性设置样式。</p>

</body>
</html>

border-color 属性单独使用时不起作用。请首先使用 border-style 属性设置样式。

与设置背景一样，边框也支持属性的简写，可以在一个属性中指定所有单独的边框属性。

css边框简写

border 属性是以下各个边框属性的简写属性：

  1. border-width
  2. border-style（必需）
  3. border-color

border简写举例

1
2
3
4
5
6
7
8
p {
  border: 5px solid red;
}

p.block {  /* 🤨这个就是markdown中区块的样式*/
  border-left: 6px solid red;
  background-color: lightgrey;
}

css也支持使用圆角边框：

css圆角边框

border-radius 属性用于向元素添加圆角边框,圆角边框通常使用px单位，数字越大，边框就越圆

border-radius举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
p.normal {
  border: 2px solid red;
}

p.round1 {
  border: 2px solid red;
  border-radius: 5px;
}

p.round2 {
  border: 2px solid red;
  border-radius: 8px;
}

p.round3 {
  border: 2px solid red;
  border-radius: 12px;
}

css外边距

CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。

所有外边距属性都可以设置以下值：

  1. auto 浏览器来计算外边距
  2. length 以 px、pt、cm 等单位指定外边距
  3. % 指定以包含元素宽度的百分比计的外边距
  4. inherit 指定应从父元素继承外边距

你可以为元素每一侧单独设置外边距：margin-top（上），margin-right（右），margin-bottom（下），margin-left（左）。也可以使用外边距简写属性margin指定所有外边距属性。

tips: margin允许负值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.div {
  border: 1px solid black;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
  background-color: lightblue;
}

.div2 {
  border: 1px solid black;
  margin: 25px 50px 75px 100px;
  background-color: lightblue;
}


margin auto

您可以将 margin 属性设置为 auto，以使元素在其容器中水平居中。该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。

tips：使用margin:auto;使元素在容器中水平居中的前提是指定了元素宽度

1
2
3
4
5
div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}
margin inherit

您可以将 margin 属性设置为 inherit，以使元素继承父元素的外边距

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      border: 1px solid red;
      margin-left: 100px;
    }

    p.ex1 {
      margin-left: inherit;
    }
  </style>
</head>
<body>
  <div>
  <p class="ex1">本段落继承了 div 元素的左外边距。</p>
  </div>

</body>
</html>
css外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 两个 div 之间的外边距是 20px，而不是 30px（20px + 10px） */
/* #d2的上外边距会消失 */
* {
  margin:0;
  padding:0;
  border:0;
}

#d1 {
  width:100px;
  height:100px;
  margin-top:20px;
  margin-bottom:20px;
  background-color:red;
}

#d2 {
  width:100px;
  height:100px;
  margin-top:10px;
  background-color:blue;
}

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

css内边距

CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。

通过 CSS，您可以完全控制内边距（填充）。有一些属性可以为元素的每一侧（上、右、下和左侧）设置内边距。

所有内边距属性都可以设置以下值：

  1. length 以 px、pt、cm 等单位指定内边距
  2. % 指定以包含元素宽度的百分比计的内边距
  3. inherit 指定应从父元素继承内边距
  1. padding不允许负值!
  2. 元素的内外边距是透明的，并不会遮挡后面的任何元素！
  3. 内边距也支持属性简写，用法和外边距相同

css box-sizing

css宽度固定

CSS width 属性指定元素内容区域的宽度。内容区域是元素（盒模型）的内边距、边框和外边距内的部分。
如果元素拥有指定的宽度，则添加到该元素的内边距会添加到元素的总宽度中。这通常是不希望的结果。

如果你希望为元素添加padding后不会改变其宽度，进而影响到布局，可以令box-sizing:border-box;

使用 box-sizing 属性可以使元素保持其宽度。如果增加内边距，则可用的内容空间会减少，而不会增大元素的宽度

1
2
3
4
5
6
7
8
9
10
11
12
/* <div> 元素的实际宽度将是 350px（300px + 左内边距 25px + 右内边距 25px） */
div {
  width: 300px;
  padding: 25px;
}

/* 使用 box-sizing 属性将宽度保持为 300px，无论填充量如何： */
div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

css 宽和高

height 和 width 属性分别用于设置元素的高度和宽度。

height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距“内”的区域的高度或宽度。
元素实际宽度=width+2padding+2border+2*margin

height 和 width 属性可设置如下值：

  1. auto 默认。浏览器计算高度和宽度。
  2. length 以 px、cm 等定义高度/宽度。
  3. % 以包含块的百分比定义高度/宽度。
  4. initial 将高度/宽度设置为默认值。
  5. inherit 从其父值继承高度/宽度。
max-width

max-width 属性用于设置元素的最大宽度。

若一个div的宽度为500px，当浏览器窗口小于元素的宽度（500px）时，浏览器会将水平滚动条添加到页面，元素也会显示不完全。
在这种情况下，使用 max-width 能够改善浏览器对小窗口的处理。当浏览器窗口小于元素最大宽度时，元素会随着浏览器窗口的缩小而缩小（始终占满整个浏览器宽度），浏览器也不会为元素添加滚动条

1
2
3
4
5
div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

max-width 属性的值将覆盖 width（宽度）

css框（盒）模型

所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。

CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

  1. 背景应用于由内容、内边距、边框组成的区域
  2. 内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
  3. 外边距可以是负值，而且在很多情况下都要使用负值的外边距。
1
2
3
4
5
6
7
div {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
元素的实际宽高

元素的总宽度应该这样计算：
元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

元素的总高度应该这样计算：
元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

css轮廓

轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。

轮廓与边框不同！轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响

属性 描述
outline-style 定义轮廓样式，如solid，dashed，double等
outline-color 定义轮廓颜色
outline-width 定义轮廓宽度
outline-offset 轮廓偏移，指定轮廓与元素的边缘或边框之间的空间
outline 轮廓简写

除非设置了 outline-style 属性，否则其他轮廓属性都不会有任何作用！

outline-width

outline-width 属性指定轮廓的宽度，并可设置如下值之一：

  1. thin（通常为 1px）
  2. medium（通常为 3px）
  3. thick （通常为 5px）
  4. 特定尺寸（以 px、pt、cm、em 计）
outline-color

outline-color 属性用于设置轮廓的颜色。
可以通过以下方式设置颜色：

  1. name - 指定颜色名，比如 “red”
  2. HEX - 指定十六进制值，比如 “#ff0000”
  3. RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
  4. HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
  5. invert - 执行颜色反转（无论颜色背景如何，轮廓都是可见的）
outline-offset

outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。

1
2
3
4
5
6
7
8
9
/* 本段落在边框边缘外 15 像素处有一条轮廓线 */
/* 背景色始终在边框之内 */
p {
  margin: 30px;
  background:yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}
outline

outline 属性是用于设置以下各个轮廓属性的简写属性：

  1. outline-width
  2. outline-style（必需）
  3. outline-color
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
  <style>
    p.ex1 {outline: dashed;}
    p.ex2 {outline: dotted red;}
    p.ex3 {outline: 5px solid yellow;}
    p.ex4 {outline: thick ridge pink;}
  </style>
</head>
<body>

  <h1>outline 属性</h1>

  <p class="ex1">点状轮廓。</p>
  <p class="ex2">红色的点状轮廓。</p>
  <p class="ex3">5 像素的黄色实线轮廓。</p>
  <p class="ex4">粗的粉色凸脊轮廓。</p>

</body>
</html>

css文本属性

属性 描述
color 设置文本颜色。
direction 指定文本的方向 / 书写方向。
letter-spacing 设置字符间距。
line-height 设置行高。
text-align 指定文本的水平对齐方式。
text-decoration 指定添加到文本的装饰效果。
text-indent 指定文本块中首行的缩进。
text-shadow 指定添加到文本的阴影效果。
text-transform 控制文本的大小写。
text-overflow 指定应如何向用户示意未显示的溢出内容。
unicode-bidi 与 direction 属性一起使用，设置或返回是否应重写文本来支持同一文档中的多种语言。
vertical-align 指定文本的垂直对齐方式。
white-space 指定如何处理元素内的空白。
word-spacing 设置单词间距。
css文本颜色

color 属性用于设置文本的颜色。颜色由以下值指定：

  1. 颜色名 - 比如 “red”
  2. 十六进制值 - 比如 “#ff0000”
  3. RGB 值 - 比如 “rgb(255,0,0)”

页面的默认文本颜色可在 body 选择器中定义

css文本对齐

text-align 属性用于设置文本的水平对齐方式。
文本可以left左对齐或right右对齐，center居中对齐。

当 text-align 属性设置为 “justify” 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

div {
  text-align: justify;
}

/* direction 和 unicode-bidi 属性可用于更改元素的文本方向 */
/* 这段文本会从右往左排列 */
p {
  direction: rtl;
  unicode-bidi: bidi-override;
}
/* vertical-align 属性设置元素的垂直对齐方式。本例演示如何设置文本中图像的垂直对齐方式 */
img.top {
  vertical-align: top;
}

img.middle {
  vertical-align: middle;
}

img.bottom {
  vertical-align: bottom;
}
css文字装饰

text-decoration 属性用于设置或删除文本装饰。
text-decoration: none; 通常用于从链接上删除下划线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 1. 带上划线的文本 */
h1 {
  text-decoration: overline;
}

/* 2. 带删除线的文本 */
h2 {
  text-decoration: line-through;
}

/* 3. 带下划线的文本 */
h3 {
  text-decoration: underline;
}

/* 4. 删除链接下的下划线 */
a {
  text-decoration: none;
}
css文本转换

text-transform 属性用于指定文本中的大写和小写字母。
它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 1. 英文字母全部大写 */
p.uppercase {
  text-transform: uppercase;
}

/* 2. 英文字母全部小写 */
p.lowercase {
  text-transform: lowercase;
}

/* 3. 英文首字母大写 */
p.capitalize {
  text-transform: capitalize;
}
css文字缩进

text-indent 属性用于指定文本第一行的缩进长度大小（首行缩进）

1
2
3
p {
  text-indent: 50px;
}
css字母间距

letter-spacing 属性用于指定文本中字符之间的间距。（包括中文，即单词间的距离）
它让段落中的文本更紧凑或更宽松

1
2
3
4
5
6
7
h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -3px;
}
css行高

line-height 属性用于指定行之间的间距（行高）
浏览器默认行高为110%-120%

1
2
3
4
5
6
7
p.small {
  line-height: 0.7;
}

p.big {
  line-height: 1.8;
}
css字间距

word-spacing 属性用于指定文本中单词之间的间距。

1
2
3
4
5
6
7
h1 {
  word-spacing: 10px;
}

h2 {
  word-spacing: -5px;
}
css段落内部不换行

white-space 属性指定元素内部空白的处理方式。

1
2
3
4
5
/* 禁用元素内的文本换行 */
/* 段落内文本过多时也会在一行内显示 */
p {
  white-space: nowrap;
}
css文本阴影

text-shadow 属性为文本添加阴影。
最简单的用法是只指定水平阴影（2px）和垂直阴影（2px），也可以设置阴影的颜色，模糊效果

1
2
3
4
/* text-shadow: 水平阴影大小 垂直阴影大小 模糊半径大小 阴影的颜色 */
h1 {
  text-shadow: 2px 2px 5px red;
}

css字体

css通用字体

在 CSS 中，有五个通用字体族：

属性描述
衬线字体（Serif）在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
无衬线字体（Sans-serif）字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
等宽字体（Monospace）这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
草书字体（Cursive）模仿了人类的笔迹。
幻想字体（Fantasy）是装饰性/俏皮的字体

在计算机屏幕上，无衬线字体被认为比衬线字体更易于阅读。

font-family

在 CSS 中，我们使用 font-family 属性规定文本的字体。font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。请以您需要的字体开始，并以通用系列结束

1
2
3
.p1 {
  font-family: "Times New Roman", Times, serif;
}
font-style

font-style 属性主要用于指定斜体文本。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 正常文本 */
p.normal {
  font-style: normal;
}

/* 斜体 */
p.italic {
  font-style: italic;
}

/* 倾斜文本 */
p.oblique {
  font-style: oblique;
}
font-weight

font-weight 属性指定字体的粗细

1
2
3
4
5
6
7
p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}
font-size

font-size 属性设置文本的大小。

如果您没有指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）
1em 等于当前字体大小，浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px

为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素

如果您使用了像素，则仍然可以使用缩放工具来调整整个页面的大小

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* 1. 以像素设置字体大小 */
/* 使用像素设置文本大小可以完全控制文本大小 */
h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

/* 2.用 em 设置字体大小 */

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

在网页设计中，能够管理文本大小很重要。但是，不应过度调整字体大小来使段落看起来像标题，或是使标题看起来像段落。
请始终使用正确的 HTML 标签，例如 <h1>-<h6> 用于标题，而<p>仅用于段落。

vw响应式字体大小

可以使用 vw 单位设置文本大小，它的意思是“视口宽度”（“viewport width”）。
视口（Viewport）是浏览器窗口的大小。 1vw = 视口宽度的 1％。如果视口为 50 厘米宽，则 1vw 为 0.5 厘米。

设置响应式字体大小后，字体大小将随浏览器窗口大小动态改变

1
<h1 style="font-size:1vw">Hello World</h1>
font简写属性

为了缩短代码，也可以在一个属性中指定所有单个字体属性。
font 属性是以下属性的简写属性：font-style，font-variant，font-weight，font-size/line-height，font-family。其中font-size 和 font-family 的值是必需的。如果缺少其他值之一，则会使用其默认值。

css图标

向 HTML 页面添加图标的最简单方法是使用图标库，比如Font Awesome。
可以将指定的图标类的名称添加到任何行内元素（如 <i> 或 <span>）。

使用图标库：1.引入样式库 2.添加图标对应类名

下面的图标库中的所有图标都是可缩放矢量，可以使用 CSS进行自定义（大小、颜色、阴影等）。

Font Awesome图标

如需使用 Font Awesome 图标，请访问 fontawesome，登录并获取js代码添加到 HTML 页面的 <head> 部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
  <script src="https://kit.fontawesome.com/yourcode.js"></script>
</head>
<body>
  <i class="fas fa-cloud"></i>
  <i class="fas fa-heart"></i>
  <i class="fas fa-car"></i>
  <i class="fas fa-file"></i>
  <i class="fas fa-bars"></i>
</body>
</html>
Bootstrap 图标

如需使用 Bootstrap glyphicons，请在 HTML 页面的 <head> 部分内添加css引用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

  <i class="glyphicon glyphicon-cloud"></i>
  <i class="glyphicon glyphicon-remove"></i>
  <i class="glyphicon glyphicon-user"></i>
  <i class="glyphicon glyphicon-envelope"></i>
  <i class="glyphicon glyphicon-thumbs-up"></i>

</body>
</html>
Google 图标

如需使用 Google 图标，请在HTML页面的 <head> 部分中引入css样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

  <i class="material-icons">cloud</i>
  <i class="material-icons">favorite</i>
  <i class="material-icons">attachment</i>
  <i class="material-icons">computer</i>
  <i class="material-icons">traffic</i>

</body>
</html>

css链接

css链接按钮

通过 CSS，可以用不同的方式设置链接的样式。链接可以使用任何 CSS 属性（例如 color、font-family、background 等）来设置样式。

此外，可以根据链接处于什么状态来设置链接的不同样式：

链接状态描述
a:link正常的，未访问的链接
a:visited用户访问过的链接
a:hover用户将鼠标悬停在链接上时
a:active链接被点击时

在CSS 定义中，a:hover 必须位于a:link和 a:visited之后才能生效。a:active 必须位于 a:hover 之后才能生效。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 未被访问的链接 */
a:link {
  color: red;
}

/* 已被访问的链接 */
a:visited {
  color: green;
}

/* 将鼠标悬停在链接上 */
a:hover {
  color: hotpink;
}

/* 被选择点击的链接 */
a:active {
  color: blue;
}

我们可以设置css样式把链接变成一个链接按钮：

1
2
3
4
5
6
7
8
9
10
11
12
13
/* text-decoration 属性主要用于从链接中删除下划线： */
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: #787878;
}
css光标样式

cursor 属性指定要显示的光标类型。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<body>

  <!-- 把鼠标移动到单词上，以查看指针效果 -->
  <!-- cursor:default  默认样式 -->
  <!-- cursor:pointer  掠过，小手样式 -->
  <!-- cursor:text     文本编辑样式 -->
  <!-- cursor:wait     转圈，等待样式 -->

  <span style="cursor:auto">auto</span><br>
  <span style="cursor:crosshair">crosshair</span><br>
  <span style="cursor:default">default</span><br>
  <span style="cursor:e-resize">e-resize</span><br>
  <span style="cursor:help">help</span><br>
  <span style="cursor:move">move</span><br>
  <span style="cursor:n-resize">n-resize</span><br>
  <span style="cursor:ne-resize">ne-resize</span><br>
  <span style="cursor:nw-resize">nw-resize</span><br>
  <span style="cursor:pointer">pointer</span><br>
  <span style="cursor:progress">progress</span><br>
  <span style="cursor:s-resize">s-resize</span><br>
  <span style="cursor:se-resize">se-resize</span><br>
  <span style="cursor:sw-resize">sw-resize</span><br>
  <span style="cursor:text">text</span><br>
  <span style="cursor:w-resize">w-resize</span><br>
  <span style="cursor:wait">wait</span><br>

</body>
</html>

css表格

表格属性 描述
border 简写属性。在一条声明中设置所有边框属性。
border-collapse 规定是否应折叠表格边框。
border-spacing 规定相邻单元格之间的边框的距离。
caption-side 规定表格标题的位置。
empty-cells 规定是否在表格中的空白单元格上显示边框和背景。
table-layout 设置用于表格的布局算法。
css表格 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
/* 全宽表格 占满整个屏幕 */
table {
  width: 100%;
}

/* 半宽的表格 */
table {
  width: 50%;
}


/* 单元格内文本水平居中对齐 */
td {
  text-align: center;
}

/* 垂直对齐方式 默认居中 */
td {
  height: 50px;
  vertical-align: bottom;
}

/* 设置表格内容与边框之间的距离 */
th, td {
  padding: 15px;
  text-align: left;
}

/* 鼠标掠过时，突出显示某一行 */
tr:hover {
  background-color: #f5f5f5;
}

/* 响应式表格，用div包裹并设置样式为overflow-x:auto; */
/* 如果屏幕太小而无法显示全部内容，则响应式表格会显示水平滚动条 */

table {
  width: 100%;
}

<div style="overflow-x:auto;">

  <table>
        table content 
  </table>

</div>


/* 设置表格标题的位置 表格下方 */
caption {
  caption-side: bottom;
}


css布局*

display

display 属性是用于控制布局的最重要的 CSS 属性

display 属性规定是否/如何显示元素。

每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline

块级元素（block element）和行内元素（inline element）

  1. 块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）
  2. 内联元素不从新行开始，仅占用所需的宽度。
元素所属类别
<div>块级元素
<h1>-<h6>块级元素
<p>块级元素
<form>块级元素
<header>块级元素
<footer>块级元素
<section>块级元素
<span>行内元素
<a>行内元素
<img>行内元素

如前所述，每个元素都有一个默认 display 值。但是，您可以覆盖它。将行内元素更改为块元素，反之亦然。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 为实现水平导航菜单而生成行内的 <li> 元素 */
li {
  display: inline;
}

/* 把链接显示为块元素，独占一行 */
a {
  display: block;
}

/* 值为 "block" 的 display 属性会导致两元素间的换行 */
span {
  display: block;
}


设置元素的 display 属性仅会更改元素的显示方式，而不会更改元素的种类。因此，带有 display: block; 的行内元素不允许在其中包含其他块元素。

关于隐藏元素：display指定应如何显示元素，
visibility指定元素是否应该可见。 %}

  1. display: none; 元素将被隐藏，并且页面将显示为好像该元素不在其中
  2. visibility:hidden; 元素将被隐藏，但仍会影响布局，该元素仍将占用与之前相同的空间
width、max-width、margin: auto;

块级元素始终占用可用的全部宽度（尽可能向左和向右伸展）。
设置块级元素的 width 将防止其延伸到其容器的边缘。然后，您可以将外边距设置为margin: auto;，以将元素在其容器中水平居中。元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配

width和max-width的区别：

  1. width 当浏览器窗口小于元素的宽度时，浏览器会将水平滚动条添加到页面。（元素始终保持一定宽度，不灵活，会导致元素显示不完全）
  2. max-width 当浏览器窗口小于元素的宽度时，元素宽度会动态地相应减少（等于窗口大小），元素中的内容自动适配（比如换行）。这种方式非常有利于网站在小型设备上使用，很灵活
1
2
3
4
5
6
7
8
9
10
11
12
/* 将浏览器窗口拖动到小于500px的宽度,查看效果*/
div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}
position + left|right|top|bottom

position属性规定应用于元素的定位方法的类型（static、relative、fixed、absolute 或 sticky）。
元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

position描述
position: static;HTML元素默认的定位方式,始终根据页面的正常流进行定位。静态定位的元素不受 top、bottom、left 和 right 属性的影响。
position: relative;元素相对于其正常位置进行定位
position: fixed;元素相对于视口定位，这意味着即使滚动页面，它也始终位于同一位置。
position: absolute;元素相对于最近的定位祖先元素进行定位。如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
position: sticky;粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置后“粘贴”在适当的位置

tips: top、bottom、left、right将根据定位方法分别设置定位框元素顶部、底部、左部、右部的距离（外边距）
tips: 绝对定位时“被定位的”元素是其位置除 static 以外的任何元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/* 设置 position: static; 的元素不会以任何特殊方式定位；它是始终根据页面的正常流进行定位 */
div.static {
  position: static;
  border: 3px solid #73AD21;
}

/* div相对于原来位置向右偏移了30px */
div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

/* div在右下方固定显示 */
/* 滚动页面，也不会改变其位置 */
div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

/* 绝对定位 */
div.father.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 

div.child.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

/* 粘性定位，先相对后固定 */
/* 在到达其滚动位置（将要从页面中消失）时，sticky 元素将停留在页面顶部（top: 0） */
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}

我们经常需要居中文本在图像中央

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
  <style>
      .container {
        position: relative;
      }

      /* 图片居中文本 */
      /* 图片占满容器，包含文本的div在容器中绝对定位top:50%，宽度占满容器，文本在div中水平居中对齐 */
      .center {
        position: absolute;
        top: 50%;
        width: 100%;
        text-align: center;
        font-size: 18px;
      }

      img { 
        width: 100%;
        height: auto;
        opacity: 0.3;
      }
  </style>
</head>
<body>

  <div class="container">
      <img src="/i/logo/w3logo-2.png" alt="W3School" width="800" height="450">
      <div class="center">星期天的博客</div>
  </div>

</body>
</html>

z-index

在对元素进行定位时，它们可以与其他元素重叠。

z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。之所以叫z-index，是因为z指屏幕到用户的距离

具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。如果两个定位的元素重叠而未指定 z-index，则位于 HTML 代码中最后的元素将显示在顶部。

1
2
3
4
5
6
7
8
/* 图像在文本下方显示 */
img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

overflow

overflow指定如果内容溢出元素框时的处理方式
overflow-x 和 overflow-y 属性规定是仅水平还是垂直地（或同时）更改内容的溢出

overflow描述
visible（默认）溢出内容不会被剪裁，而是在元素框外渲染
hidden溢出被剪裁，其余内容将不可见
scroll溢出被剪裁，同时添加滚动条以查看其余内容(即使没有溢出也会添加滚动条)
auto与scroll类似，但仅在必要时添加滚动条

overflow 属性仅适用于具有指定高度的块元素！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

/* 溢出会被裁剪，其余内容被隐藏 */
div {
  height: 50px;
  overflow: hidden;
}


/* 溢出将被裁剪，并添加水平和垂直滚动条以便在框内滚动 */
div {
  height: 50px;
  overflow: scroll;
}


div {
  height: 50px;
  overflow-x: hidden; /* 隐藏水平滚动栏 */
  overflow-y: scroll; /* 添加垂直滚动栏 */
}

float

CSS float 属性规定元素如何浮动。
CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。

float描述
left元素浮动到其容器的左侧
right元素浮动在其容器的右侧
none元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit元素继承其父级的 float 值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
  <style>
      img {
        float: right;
      }
  </style>
</head>
<body>

  <!-- 在本例中，图像会在段落中向右浮动，而段落中的文本会包围这幅图像 -->

  <p><img src="/i/logo/w3logo-3.png" alt="W3School" style="width:170px;height:170px;margin-left:15px;">
  领先的 Web 技术教程 - 全部免费。在 W3School，你可以找到你所需要的所有的网站建设教程。从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP。
  我们的参考手册涵盖了网站技术的方方面面。其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。
  在 W3School，我们提供上千个实例。通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。
  </p>

</body>
</html>
clear

clear 属性用于清除元素周围的浮动元素（指定哪些元素可以浮动于被清除元素的旁边以及哪一侧）

clear描述
none允许元素两侧都有浮动元素（默认）
left左侧不允许浮动元素
right右侧不允许浮动元素
both左侧或右侧均不允许浮动元素
inherit元素继承其父级的 clear 值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head>
    <style>
      /* 由于div1左浮动，div2中的文本将跑到div1周围 */
      .div1 {
        float: left;
        width: 100px;
        height: 50px;
        margin: 10px;
        border: 3px solid #73AD21;
      }

      .div2 {
        border: 1px solid red;
      }

      /* div3的左浮动被清除，div4仍在其下方显示 */
      .div3 {
        float: left;
        width: 100px;
        height: 50px;
        margin: 10px;
        border: 3px solid #73AD21;
      }

      .div4 {
        border: 1px solid red;
        clear: left;
      }
    </style>
</head>
<body>

    <h1>不使用 clear</h1>
    <div class="div1">div1</div>
    <div class="div2">div2 - 请注意，在 HTML 代码中 div2 在 div1 之后。不过，由于 div1 向左浮动，div2 中的文本会流动到 div1 周围。</div>
    <br><br>

    <h1>使用 clear</h1>
    <div class="div3">div3</div>
    <div class="div4">div4 - 在此处，clear: left; 把 div4 移动到浮动的 div3 下方。值 "left" 会清除向左浮动的元素。您也可以清除 "right" 和 "both"。</div>

</body>
</html>

参考文章：
1.5 万字 CSS 基础拾遗（核心知识、常见需求）

  • 本文标题：css入门教程
  • 本文作者：Sunday
  • 创建时间：2023-01-09 17:56:40
  • 本文链接：https://sblog.wyun521.top/posts/e26fc5f5.html
  • 版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
 评论
目录
  1. 1. css基础语法
  2. 2. css选择器
  3. 3. css引入
    1. 3.1. 外部css
    2. 3.2. 内部css
    3. 3.3. 行内css
    4. 3.4. 多个样式表
  4. 4. css注释
  5. 5. css颜色
  6. 6. css背景
  7. 7. css边框
  8. 8. css外边距
  9. 9. css内边距
  10. 10. css box-sizing
  11. 11. css 宽和高
  12. 12. css框（盒）模型
  13. 13. css轮廓
  14. 14. css文本属性
  15. 15. css字体
  16. 16. css图标
  17. 17. css链接
  18. 18. css表格
  19. 19. css布局*