devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

CSS基础_css [class~=]

作者：2023面试高手 | 2024-03-23 13:18:46

赞

踩

css [class~=]

目录

一、初识CSS

1.1概述

1.2用途 

1.3发展史

1.4快速入门

 二、CSS基础入门

 2.1样式表

2.1.1内联样式表

2.1.2 内部样式表

 2.1.3外部样式表

2.1.4样式表层叠优先级

2.2CSS选择器

2.2.1元素选择器

2.2.2类选择器

​2.2.3ID选择器

2.2.4属性选择器 （id+class结合）

2.2.5层次选择器

2.2.6伪类选择器

2.3CSS语法规则

2.3.1注释语句

2.3.2 @charset

2.4CSS颜色

2.5CSS取值与单位

2.5.1数字

 2.5.2长度

2.6盒子模型

2.6.1内边距padding

2.6.2边框border

 2.6.3外边距Margin

2.6.4轮廓

2.6.5CSS Box-sizing，基于box的尺寸计算

2.6.6边框阴影

2.6.7图形边框

  2.7CSS图片

窗口缩放

延迟加载图片技术

2.8CSS背景

背景颜色

背景图像平铺方式background-repeat

固定/滚动背景图像background-attachment

定位背景图像background-position​编辑

 2.9CSS文本

 文本阴影

​ 长单词强制换行

 2.10CSS字体

字体简写

@font-face的规则

2.11CSS透明度

2.12CSS超链接

2.13CSS列表

 2.14CSS表格

2.15CSS表单

三、CSS高阶

3.1CSS 布局 - display 属性

3.2CSS 布局--vertical-align属性

3.3CSS 布局 – 溢出

3.4CSS 布局 – 浮动 和清除

3.4.1float 属性

3.4.2clear属性

3.4.3 display: flow-root

3.4.4浮动清除总结

3.5CSS渐变效果

3.5.1线性渐变

3.5.2径向渐变（了解）

3.6CSS 布局 - position 属性（定位）

3.6.1position: static

3.6.2position: relative

3.6.3position: fixed

3.6.4position: absolute

3.7层叠效果z-index

 四、CSS高阶

4.1CSS多列

4.1.1columns

 4.1.2column-gap

4.1.3column-rule

 4.2按钮

​ 4.3导航栏

侧边栏

上导航

弹性上导航

4.4 过渡

 4.5CSS 转换（transforms）

缩放

​ 4.6下拉列表

4.7Card模式

4.8css变量

4.9Viewport units，基于视窗的单位

 4.10CSS Flexbox Layout，弹性布局

4.10.1容器的属性

4.10.2flex-direction，决定容器主轴方向

 4.10.3flex-wrap，决定项是否换行

4.10.4justify-content决定项在主轴的对齐方法

 4.10.5align-items，决定项在交叉轴(纵轴)的对齐方式

 4.10.6align-content属性

 4.10.7项目的属性

4.10.8order

4.10.9flex-grow

4.10.10flex-basis

 4.10.11flex-shrink

4.10.12其他相关

 4.11Responsive Web Design，响应式布局

@media Rule

一、初识CSS

1.1概述

CSS 是层叠样式表（Cascading Style Sheets）的简称，是一种用于描述 HTML 或 XML 文档的呈现的样式表语言。CSS 可以用来控制网页的布局、字体、颜色、背景、边框、动画等各种视觉效果。CSS 也可以让网页适应不同的设备和屏幕尺寸

CSS 的基本语法是由选择器和声明组成的。选择器用来指定要应用样式的元素，声明用来指定元素的属性和值。声明由属性和值组成，属性是要设置的样式特征，值是要赋予属性的具体效果

1.2用途 

CSS 的用途是为 HTML 或 XML 文档添加样式，使网页的呈现更加美观和多样化。CSS 可以用来控制网页的以下方面：

  • 布局：CSS 可以用来定义网页元素的位置、大小、对齐方式、间距等，实现各种布局效果，如多列布局、响应式布局、网格布局等。

  • 字体：CSS 可以用来设置网页文本的字体、大小、颜色、粗细、斜体、阴影等，实现各种文本效果，如渐变文字、立体文字、动态文字等。

  • 背景：CSS 可以用来设置网页元素的背景颜色、图片、渐变、图案等，实现各种背景效果，如固定背景、视差滚动背景、动画背景等。

  • 边框：CSS 可以用来设置网页元素的边框样式、颜色、宽度、圆角等，实现各种边框效果，如阴影边框、立体边框、动画边框等。

  • 动画：CSS 可以用来设置网页元素的动画效果，如移动、旋转、缩放、淡入淡出等，实现各种动画效果，如加载动画、悬停动画、过渡动画等。

除了以上的方面，CSS 还可以用来控制网页的媒体查询、声音、打印样式等，使网页适应不同的设备和场景以及浮动和定位。

1.3发展史

1.4快速入门

css的优势：
1、内容和表现分离
2、网页结构表现统一，可以实现复用
3、样式十分的丰富
4、建议使用独立于html的css文件
5、利用SEO，容易被搜索引擎收录！

 二、CSS基础入门

 2.1样式表

CSS 可以通过多种方式应用到 HTML 文档中，例如：

  • 内联样式表：在 HTML 元素的 style 属性中直接写入 CSS 代码。
  • 内部样式表：在 HTML 文档的 head 标签中使用 style 标签来包含 CSS 代码。
  • 外部样式表：在 HTML 文档中使用 link 标签或 import 指令来引用外部的 CSS 文件。
  • 浏览器缺省设置

2.1.1内联样式表

  1. <h1 style="color: red;background-color: deepskyblue ">标题一</h1>
  2. <!--内联样式表-->

该声明表示设置当前<h1>和</h1>标签之间的文本字体颜色为蓝色，背景色为黄色。

2.1.2 内部样式表

  1. <style>
  2.         h1{
  3.             color: red;
  4.         }
  5.         p{
  6.             background-color: yellow;
  7.             color: blue;
  8.         }
  9. </style>

 2.1.3外部样式表

  1. <!--外部样式表-->
  2. <link rel="stylesheet" href="样式文件URL">

样式定义通常保存在外部.css文件中。
有了外部样式表文件，你只需改变一个文件就可以改变整个网站的外观!

外部样式表文件不应包含任何HTML标记，必须保存为.css扩展名

2.1.4样式表层叠优先级

这四种方式的优先级是由高到低的，也就是说，内联样式会覆盖内部样式表和外部样式表，内部样式表会覆盖外部样式表。但是，如果在 CSS 声明中使用了 !important 规则，那么这个声明会覆盖任何其他声明，无论它们的优先级如何

补充1!important 规则

!important 是 CSS 中的一个规则，用于增加样式的权重，使其覆盖其他的样式声明

  1. p {
  2.   color: blue;
  3. }
  4.  
  5. p {
  6.   color: red !important;
  7. }

在这个例子中，所有的段落元素的颜色都会是红色，因为 !important 规则会覆盖掉普通的 color: blue 声明。

!important 规则与优先级无关，但它与最终的结果直接相关。使用 !important 规则时，应该谨慎，因为它会破坏 CSS 的层叠规则，使得调试变得困难2。

一般来说，建议避免使用 !important 规则，除非有特殊的需求。例如，如果你需要覆盖一个内联样式或一个外部样式表中的样式，或者如果你需要在一个特定的页面中设置一个全局的样式

补充2浏览器下载css文件 渲染

2.2CSS选择器

CSS选择器是一种用来选取HTML元素的模式，它可以让您为不同的元素应用不同的样式。CSS选择器有多种类型，例如：

  • 基本选择器，如元素选择器、类选择器、ID选择器和属性选择器。
  • 组合器，如后代组合器、直接子代组合器、一般兄弟组合器和紧邻兄弟组合器。
  • 伪选择器，如伪类和伪元素。

2.2.1元素选择器

在CSS中最常见的选择器就是元素选择器，即采用HTML文档中的元素名称进行样式规定。元素选择器又称为类型选择器，可以用于匹配HTML文档中某一个元素类型的所有元素。

  1. p{background:gray}
  2. /*标签选择器*/

2.2.2类选择器

  1. <h1 class="red">这是标题，字体颜色是红色</h1>
  2. <p class="red">这是段落，字体颜色也是红色</p>
  3. .red{color:red}
  4. /*类选择器*/

2.2.3ID选择器

  1. <p id="test">这是一个段落</p>
  2. #test{color:red}
  3. /*ID选择器*/

优先级：ID选择器>类选择器>标签选择器

2.2.4属性选择器 （id+class结合）

 CSS属性选择器有不同的类型，如：

[attribute]：选择所有有指定属性的元素，不管属性值是什么。
[attribute=value]：选择所有指定属性值等于给定值的元素。（绝对等于）
[attribute~=value]：选择所有指定属性值包含给定词的元素。（包含，注意:属性值部分匹配需要将需要选择的关键字用空格分开）
[attribute^=value]：选择所有指定属性值以给定值开头的元素。（以什么开头）
[attribute$=value]：选择所有指定属性值以给定值结尾的元素。（以什么结尾）
[attribute*=value]：选择所有指定属性值包含给定子串的元素。（包含）
[attribute operator value i]：在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。
[attribute operator value s]：在匹配属性值时区分大小写（支持 ASCII 字符范围之内的字母）。

  1. <!DOCTYPE html>
  2. <html lang="en" >
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>代码举例</title>
  6.     <link rel="stylesheet" href="csstest.css">
  7.     <style>
  8.         /* 使用 [attribute] 选择器来选择所有有 class 属性的 li 元素 */
  9.         li[class] {
  10.             color: blue;
  11.         }
  12.  
  13.         /* 使用 [attribute=value] 选择器来选择所有 class 属性值等于 a 的 li 元素 */
  14.         li[class=b] {
  15.             color: red;
  16.         }
  17.  
  18.         /* 使用 [attribute~=value] 选择器来选择所有 class 属性值包含 a 的 li 元素 */
  19.         li[class~=a] {
  20.             color: green;
  21.         }
  22.  
  23.         /* 使用 [attribute|=value] 选择器来选择所有 class 属性值等于 c 或以 c- 开头的 li 元素 */
  24.         li[class|=c] {
  25.             color: yellow;
  26.         }
  27.  
  28.         /* 使用 [attribute^=value] 选择器来选择所有 href 属性值以 https 开头的 a 元素 */
  29.         a[href^=https] {
  30.             font-weight: bold;
  31.         }
  32.  
  33.         /* 使用 [attribute$=value] 选择器来选择所有 href 属性值以 .com 结尾的 a 元素 */
  34.         a[href$=".com"] {
  35.             color: blue;
  36.             font-style: italic;
  37.         }
  38.  
  39.         /* 使用 [attribute*=value] 选择器来选择所有 href 属性值包含 mdn 的 a 元素 */
  40.         a[href*="mdn.com"] {
  41.             color: pink;
  42.             text-decoration: underline;
  43.         }
  44.  
  45.         /* 使用 [attribute operator value i] 选择器来选择所有 title 属性值包含 link 的 a 元素，忽略大小写 */
  46.         a[title*=link i] {
  47.             color: purple;
  48.             text-transform: uppercase;
  49.         }
  50.  
  51.     </style>
  52. </head>
  53. <body >
  54. <ul>
  55.     <li class="b">Item 1</li>
  56.     <li class="a b">Item 2</li>
  57.     <li class="b a">Item 3</li>
  58.     <li class="c-111">Item 4</li>
  59.     <li class="c d">Item 5</li>
  60. </ul>
  61. <a href="https://example.com" title="Example Link">Example Link</a>
  62. <a href="#top" title="Back to Top">Back to Top</a>
  63. <a href="https://mdn.com" title="MDN Link">MDN Link</a>
  64.  
  65. </body>
  66. </html>

2.2.5层次选择器

descendant selector (space) ，后代选择器

child selector (>) ，子选择器

adjacent sibling selector (+)，相邻兄弟选择器

general sibling selector (~)，同级选择器

2.2.6伪类选择器

 伪类用于定义元素的特殊状态

2.3CSS语法规则

2.3.1注释语句

单行/多行注释同C/C++注释

2.3.2 @charset

该语法在外部样式表文件内使用，用于指定当前样式表使用的字符编码。

  1. @charset "utf-8";
  2. /*该语句表示外部样式表文件使用了utf-8的编码格式，一般写在外部样式表文件的第一行*/

2.4CSS颜色

CSS中的颜色通常是由：一个有效的颜色名称--如 "red""一个RGB值--如 "rgb(255, 0, 0) "一个HEX值--如 "#ff0000 "HTML和CSS支持140个标准颜色名称。

RGB颜色值可以用这个公式指定：rgb(red、green、blue)。每个参数（red、green、blue）都定义了0到255之间的颜色强度。

 RGB值也可以用十六进制颜色值的形式来指定： #RRGGBB，其中RR（红）、GG（绿）和BB（蓝）是00至FF之间的十六进制值（与十进制0-255相同）。(RGB值，通过指定16进制颜色值设置。#Rrggbb，其中RR（红），gg（绿）和bb（蓝色）是00和ff之间的十六进制值同十进制0-255) 

2.5CSS取值与单位

2.5.1数字

  1. 12 /* 一个整数 */
  2. 4.01 /* 一个小数 */
  3. -456.8 /* 一个负小数 */
  4. 0.0 /* 零 */
  5. +0.0 /* 带正号的零 */
  6. -0.0 /* 带负号的零 */
  7. .60 /* 点前的数字可以省略 */
  8. 10e3 /* 科学计数法 */
  9. -3.4e-2 /* 科学计数法最复杂的情况 */

 2.5.2长度

表示方法为数值接长度单位。可用于描述文本、图像或其他各类元素的尺寸。

具体表如下：

注意：

  1. rem，相对于根，即html元素设置的尺寸，在没有显式声明时。浏览器默认html字体为16px
  2. %，相对于父容器设置的百分比
  3. CSS像素，是一个相对(具体物理设备)的绝对单位 即在同一设备上，1px长度是相同的，但在不同设备上，1px长度是不同的
  4. 元素字体属性(大小、行高、间距、缩进等)建议使用em、rem 浏览器默认，1em=16px 元素布局(高宽等)建议使用%、px 当包含多媒体元素、页面宽度预知时，可以使用绝对尺寸

2.6盒子模型

  • 外边距——清除边框外的区域，外边距是透明的。
  • 内边距——清除内容周围的区域，内边距是透明的。

2.6.1内边距padding

CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间，元素的内边距也可以被理解为元素内容周围的填充物，因为内边距不影响当前元素与其他元素之间的距离，它只能用于增加元素内容与元素边框之间的距离。属性值不可以为负数

可以为元素的每一侧（上、右、下和左侧）设置内边距；(padding-top; padding-right; padding-bottom; padding-left）（单边内边距）

padding 是透明的 Padding，撑起的空间颜色由元素背景颜色决定

2.6.2边框border

CSS边框属性允许你指定一个元素的边框的样式、宽度和颜色。

  • border-style
  • border-width
  • border-color
  • border-radius(CSS3)

border-style, 指定要显示什么样的边界

 border-width, 为边框指定宽度

CSS中的border-width属性用于定义HTML元素边框的宽度。该属性有四种取值

边框宽度支持按上下左右分别声明； 

border-color

略

边框简写

  1. p {
  2. 	border-width: 1px;
  3. 	border-style: solid;
  4. 	border-color: red
  5. }
  6. /*简写*/
  7. p {
  8. 	border: 1px solid red
  9. }

 border-radius属性

 2.6.3外边距Margin

决定了元素边线至其他元素的距离，即撑起了整个元素至其他元素的空间；透明，空间颜色不由元素本身决定，而由父容器决定

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

可以为元素的每一侧（上、右、下和左侧）设置内边距；(margin-top; margin-right; margin-bottom;margin-left）（单边内边距）同内边距

外边距坍塌

元素的顶部和底部的边距有时会被折叠成一个单一的边距，这个边距等于两个边距中最大的那个。
这种情况不会发生在水平边距（左和右）上！只有垂直边距（上和下）！只有垂直边距（顶部和底部）!

2.6.4轮廓

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

轮廓与边框不同之处在于：

轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。

轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响；

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

outline-offset 属性用于设置 outline 与一个元素边缘或边框之间的间隙 。outline 是一条绘制在元素周围，超出边框边缘的线条 。元素与其 outline 之间的空间是透明的 。

2.6.5CSS Box-sizing，基于box的尺寸计算

默认

width/height属性为元素内容的高宽，因此，元素实际占用尺寸仍受margin/border/padding影响 致使在布局时计算复杂，非常不直观

CSS3提供Box-sizing属性，协助调整元素占用尺寸

  • Content-box，默认值。仍按内容计算高宽
  • Border-box，width/height属性值，为边框内，即border/padding/content的值。但不包括margin值 

2.6.6边框阴影

在CSS3中，box-shadow 属性可以为边框添加阴影，该属性适用于所有元素。box-shadow的默认属性值为none，表示无阴影效果

 

2.6.7图形边框

 

  2.7CSS图片

object-fit属性用于指定<img>或<video>应如何调整大小以适应其容器。

  • fill，默认值，缩放填充整合容器
  • contain，等比例缩放，填充容器
  • cover，等比例缩放，直到高宽任一完全填充，元素居中后，2边剪裁至容器大小 

窗口缩放

 注意：

当容器尺寸小于内部元素尺寸时 会使元素溢出

延迟加载图片技术

loading="lazy"属性支持延迟加载图片。在浏览器真正需要渲染显式图片时(具体由各浏览器决定，一般为滚动到需要展示图片时)加载图片，而非打开页面即加载。 当页面中图片过多时，浏览器仅需先加载首屏展示图片，可避免占用网络资源提高页面渲染效率。

2.8CSS背景

CSS背景属性用于定义元素的背景效果。

  1. body {
  2.             background-image: url("../resources/img.png");
  3.             background-repeat: no-repeat;
  4.             background-attachment: fixed;
  5.             background-size: cover;
  6.         }

背景颜色

background-color属性的默认值是transparent (透明的) 

背景图像平铺方式background-repeat

CSS中的background-image属性用于设置背景图像的平铺方式。如果不设置该属性，则默认背景图像会在水平和垂直方向上同时被重复平铺 该属性有四种不同的取值，如下表所示

固定/滚动背景图像background-attachment

CSS中的background-attachment属性用于设置背景图像是固定在屏幕上还是随着页面滚动。该属性有两种取值 该属性有四种不同的取值，如表所示 

定位背景图像background-position

关键词定位 

 使用关键词组合的方式定位图像，需要从表示水平方向和垂直方向的关键词中各选一个组
合使用，例如 background-position:left top 表示背景图像在元素左上角的位置。


关键词指示的方向非常明显，例如 left 和 right 就是水平方向专用，而 top 和 bottom是垂直方向专用。因此关键词的组合可以不分先后顺序，例如 left top 和 top left 就表达完全相同的含义。关键词 center 既可表示水平居中也可表示垂直居中，组合使用时取决于另一个关键词是水平还是垂直方向， center 则用于补充对立方向。

关键词定位的方式也可以简写为单个关键词的形式，这种情况会默认另一个省略的关键词为center。 例如简写形式left就等价于leftcenter或center left，表示水平方向左对齐、垂直方向居中显示。

长度值定位

百分比定位 

总结

  背景简写

  1. p{
  2.     background-color:silver;
  3. 	background-image:url(image/football.png);
  4. 	background-repeat:no-repeat;
  5. }
  6. p{ background: silver url(image/football.png) no-repeat }

 2.9CSS文本

常用：

文本对齐text-align 

 Text Decoration. 文本修饰

可用于删除文本中超链接的下划线，以及修饰文本

 文本转换

文本间距 

 文本阴影

 长单词强制换行

 

 

 2.10CSS字体

CSS 字体属性定义了字体族、字体样式、字体粗细、字体大小

font-family属性

font-style属性 

 font-weight属性

 font-size属性

W3C 建议使用 em 尺寸单位

字体简写

@font-face的规则

在CSS3之前，浏览器只能显示设备上已安装的字体。目前在CSS3中，通过@font-face的规则，网页可以显示任何字体。当有特殊字体时，可以将其放在服务器端，在浏览页面时会被自动下载到用户的设备终端。

2.11CSS透明度

opacity属性指定元素的透明度

opacity 属性的取值范围为 0.0-1.0。     值越低，越透明

opacity 属性通常与 :hover 选择器一同使用，这样就可以在鼠标悬停时更改透明度

2.12CSS超链接

 高级链接：组合多个 CSS 属性将链接显示为框/按钮 可创建用于导航的，按钮样式的超链接

2.13CSS列表

list-style-type

list-style-image

 CSS中的list-style-image属性可以用于设置列表的标志图标。标志图标可以是来源于本地或者网络的图像文件。如果已使用list-style-image属性声明了列表的标志图标，则不能同时使用list-style-type属性声明列表的标志类型，否则后者将无显示效果。

样式位置list-style-position

样式缩写 

 2.14CSS表格

 除以上5种属性设置外，在CSS中一些通用属性设置同样也可以用于表格元素。例如字体颜色(color) 、 背景( background )、文本对齐( text-align)、 边框( border)、 内边距( padding) 、宽度( width)和高度( height)等,这里不再展开详细说明。

折叠边框border-collapse

边线距离border-spacing

 标题位置caption-side

空单元格 empty-cells

表格布局table-layout

 几点注意：

  1. Th，默认字体加粗居中对齐 Td，默认字体左对齐
  2. tr的默认显式类型为display:table-row；即，内外边距必须声明在td，声明在tr无效
  3.  HTML table标签按整体渲染后加载到节点，CSS table方式逐条渲染。
  4. 条状表格：为了实现斑马纹表格效果，请使用 nth-child() 选择器，并为所有偶数（或奇数）表行添加 background-color 

2.15CSS表单

三、CSS高阶

3.1CSS 布局 - display 属性

display的属性值，inline ， block， inline-block


inline（行内元素）:
使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
不能更改元素的height，width的值，大小由内容撑开.
可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.

block（块级元素）:
使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
能够改变元素的height，width的值.
可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.

inline-block（融合行内于块级）:
结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
用通俗的话讲，就是不独占一行的块级元素。

通过将 display 属性设置为 none 可以隐藏元素。该元素将被隐藏，并且页面将显示为好像该元素不在其中； （display: none; 通常与 JavaScript 一起使用，以隐藏和显示元素，而无需删除和重新创建它们。）

visibility:hidden; 也可以隐藏元素。但是，该元素仍将占用与之前相同的空间。元素将被隐藏，但仍会影响布局。

3.2CSS 布局--vertical-align属性

vertical-align属性设置一个元素的垂直对齐。

3.3CSS 布局 – 溢出

CSS overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条

overflow属性可设置以下值：

  • visible - 默认。溢出没有被剪裁。内容在元素框外渲染
  • hidden - 溢出被剪裁，其余内容将不可见
  • scroll - 溢出被剪裁，同时添加滚动条以查看其余内容，  将在水平和垂直方向上添加一个滚动条（即使不需要）
  • auto - 与 scroll 类似，但仅在必要时添加滚动条

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

3.4CSS 布局 – 浮动 和清除

标准文档流

3.4.1float 属性

float属性指定了一个元素是否应该浮动。

补充：

  • 元素只能左右浮动，不能上下浮动
  • 浮动元素之后的“元素的内容”将围绕它
  • 严禁基于float，布局

在对元素声明浮动效果后，该浮动元素会自动生成一个块级框，因此需要明确指定浮动元素的宽度，否则会被默认不占空间。元素在进行浮动时会朝着指定的方向一直移动直到碰到页面的边缘或者上一个浮动框的边缘才会停下来。如果一行之内的宽度不足以放置浮动元素，则该元素会向下移动直到有足够的空间为止再向着指定的方向进行浮动。

3.4.2clear属性

clear属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧 浮动元素会继续浮动，但是被清除的元素将显示在其下方

3.4.3 display: flow-root

3.4.4浮动清除总结

3.5CSS渐变效果

调色网站推荐https://www.grabient.com/

3.5.1线性渐变

从上到下的渐变

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>线性渐变</title>
  6. <style type="text/css">
  7. .box{
  8. 		height: 200px;
  9. 		background-color: red; 
  10. 		background-image:linear-gradient(red,yellow,blue);}
  11. </style>
  12. </head>
  13. <body>
  14. 	<div class="box"></div>
  15. </body>
  16. </html>

 从左到右的渐变

  1. <style type="text/css">
  2. #box {
  3.   height: 200px;
  4.   background-color: red; /* 针对不支持渐变的浏览器 */
  5.   background-image: linear-gradient(to right, red , blue);
  6. }
  7. </style>

对角线渐变

  1. <style type="text/css">
  2. #box {
  3.   height: 200px;
  4.   background-color: red;
  5.   background-image: linear-gradient(to bottom right, red, blue);
  6. }
  7. </style>

使用角度的渐变

取代预定义的方向（向下、向上、向右、向左、向右下等等）。值 0deg 等于向上（to top）。值 90deg 等于向右（to right）。值 180deg 等于向下（to bottom）。

  1. <style type="text/css">
  2. #box {
  3.   height: 100px;
  4.   background-color: red; 
  5.   background-image: linear-gradient(90deg, red, yellow);
  6. }
  7. ​</style>

使用透明度 

如需添加透明度，我们使用 rgba() 函数来定义色标。 rgba() 函数中的最后一个参数可以是 0 到 1 的值，它定义颜色的透明度：0 表示全透明，1 表示全彩色（无透明）。

  1. <style type="text/css">
  2. .box {
  3.   height: 200px;
  4.   background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
  5. }
  6. </style>

重复线性渐变

用repeating-linear-gradient()属性

  1. <style type="text/css">
  2. box {
  3.   height: 200px;
  4.   background-color: red; 
  5.   background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
  6. }
  7. </style>

3.5.2径向渐变（了解）

语法格式：

        background-image: radial-gradient(shape size at position, start-color, ..., last-color);

默认地，shape 为椭圆形，size 为最远角，position 为中心。

  1. <style type="text/css">
  2. .box{
  3. 		height: 300px;
  4. 		background-image: radial-gradient(circle,red 20%,yellow 20%,blue)
  5. 	}
  6. </style>

3.6CSS 布局 - position 属性（定位）

position 属性规定应用于元素的定位方法的类型 定位方法的类型的值:

  • static
  • relative
  • fixed
  • absolute

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

3.6.1position: static

HTML 元素默认情况下的定位方式为 static（静态） 静态定位的元素不受 top、bottom、left 和 right 属性的影响 position:

static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位

3.6.2position: relative

 元素相对于其正常位置进行定位 设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。 Relative，相对于默认正常位置

3.6.3position: fixed

 元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。（相对于浏览器窗口区域的固定位置，与页面无关，不随页面滚动）  top、right、bottom 和 left 属性用于定位此元素

3.6.4position: absolute

 元素相对于所在的多级容器中，最近的定位祖先元素进行定位(显式声明了relative或fixed的元素，而不是相对于视口定位--如 fixed）

可用于实现悬浮按钮/弹出下拉导航等 绝对定位，背景颜色/宽度等不受容器影响，需定义自身的属性

position: absolute; 如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动

3.7层叠效果z-index

使用属性z-index可以为元素规定层次顺序，其属性值为整数，并且该数值越大将叠放在越靠上的位置。

默认是0，最高无上限

 四、CSS高阶

4.1CSS多列

CSS3可以将文本布局分割为多个列，实现仿报纸排版效果。

4.1.1columns

 4.1.2column-gap

CSS3中column-gap属性用于设置列与列之间的宽度。

4.1.3column-rule

CSS3中column-rule属性适用于同时为列与列之间的分割线设置宽度、样式和颜色规范。

 4.2按钮

 4.3导航栏

侧边栏

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>导航测试</title>
  6.     <style>
  7.         #sidebar1{
  8.             width: 200px;
  9.             box-sizing: border-box;
  10.         }
  11.         #sidebar1 ul{
  12.             list-style-type: none;
  13.             padding: 0;
  14.             background-color: #f1f1f1;
  15.         }
  16.         #sidebar1 a{
  17.             display: block;
  18.             padding: 8px 15px;
  19.             color: #000;
  20.             text-decoration: none;
  21.         }
  22.         #sidebar1 a:hover{
  23.             background: #555;
  24.             color: white;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.   <div id="sidebar1">
  30.       <ul>
  31.           <li><a href="https://www.baidu.com/">Home</a></li>
  32.           <li><a href="https://www.baidu.com/">News</a></li>
  33.           <li><a href="https://www.baidu.com/">Contact</a></li>
  34.           <li><a href="https://www.baidu.com/">About</a></li>
  35.       </ul>
  36.  
  37.   </div>
  38. </body>
  39. </html>

上导航

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         /* ------------上导航---------- */
  8.         #navbar1 ul {
  9.             /* li撑满ul */
  10.             padding: 0;
  11.             background: #333;
  12.         }
  13.         #navbar1 li {
  14.             /* 使列表inline横向排列，且内部按block撑满高度 */
  15.             display: inline-block;
  16.         }
  17.         #navbar1 a {
  18.             /* 撑满li */
  19.             display: block;
  20.             color: white;
  21.             padding: 14px 16px;
  22.             text-decoration: none;
  23.         }
  24.         #navbar1 a:hover {
  25.             background-color: #111;
  26.         }
  27.  
  28.     </style>
  29. </head>
  30. <body>
  31. <h2>Horizontal Navigation Bar</h2>
  32. <div id="navbar1">
  33.     <ul>
  34.         <li><a href="#">Home</a></li>
  35.         <li><a href="#">News</a></li>
  36.         <li><a href="#">Contact</a></li>
  37.         <li><a href="#">About</a></li>
  38.         <li><a href="#">Logout</a></li>
  39.     </ul>
  40. </div>
  41. </body>
  42. </html>

弹性上导航

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .nav ul {
  8.             display: flex;
  9.             padding: 0;
  10.             list-style-type: none;
  11.             background-color: #333;
  12.         }
  13.  
  14.         .nav li a {
  15.             display: block;
  16.             color: white;
  17.             padding: 14px 16px;
  18.             text-decoration: none;
  19.         }
  20.  
  21.         .nav li a:hover {
  22.             background-color: #111;
  23.         }
  24.  
  25.         .nav .right {
  26.             margin-left: auto;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31. <hr>
  32. <h2>Horizontal Navigation Bar</h2>
  33. <div class="nav">
  34.     <ul>
  35.         <li><a href="#">Home</a></li>
  36.         <li><a href="#">News</a></li>
  37.         <li><a href="#">Contact</a></li>
  38.         <li class="right"><a href="#">About</a></li>
  39.         <li><a href="#">Logout</a></li>
  40.     </ul>
  41. </div>
  42. <hr>
  43. </body>
  44. </html>

4.4 过渡

CSS 过渡允许在给定的时间内平滑地改变属性值 创建过渡效果，必须明确两件事： 指定添加过渡效果的CSS属性 指定持续时间。

默认时间为0，即无效果

hover，自动在鼠标移出时，反向执行相应操作

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         div.tran1 {
  8.             width: 100px;
  9.             height: 100px;
  10.             background: red;
  11.             transition: width 2s;
  12.         }
  13.  
  14.         div.tran1:hover {
  15.             width: 300px;
  16.         }
  17.  
  18.         div.tran2 {
  19.             width: 100px;
  20.             height: 100px;
  21.             background: red;
  22.             transition: width 2s, height 4s;
  23.         }
  24.  
  25.         div.tran2:hover {
  26.             width: 300px;
  27.             height: 300px;
  28.         }
  29.  
  30.         /*    */
  31.  
  32.         div.animated_div {
  33.             width: 60px;
  34.             height: 40px;
  35.             background: #92B901;
  36.             color: #ffffff;
  37.             font-weight: bold;
  38.             font-size: 1.5em;
  39.             text-align: center;
  40.             padding: 10px;
  41.             margin: 5px;
  42.             transition-property: width, height, background, font-size, opacity;
  43.             transition-duration: 1s, 1s, 1s, 1s, 1s;
  44.             border-radius: 5px;
  45.             opacity: 0.4;
  46.         }
  47.  
  48.         div.animated_div:hover {
  49.             opacity: 1;
  50.             background: #1ec7e6;
  51.             width: 120px;
  52.             height: 80px;
  53.             font-size: 3.5em;
  54.         }
  55.     </style>
  56. </head>
  57. <body>
  58. <h1>CSS Transitions</h1>
  59. 鼠标悬浮在以下div时，在2秒内宽度带过渡效果扩展 <br>
  60. <div class="tran1"></div>
  61. <hr>
  62. 宽度按2秒，高度按4秒，过渡扩展 <br>
  63. <div class="tran2"></div>
  64. <hr>
  65. 结合高宽背景色字体尺寸透明度的多项过渡效果 <br>
  66. transition-property属性值与transition-duration值一一对应 <br>
  67. <div class="animated_div">BO</div>
  68.  
  69. </body>
  70. </html>

 解释

 4.5CSS 转换（transforms）

CSS 转换（transforms）允许移动、旋转、缩放和倾斜元素

Transform不包含动态过渡效果

Transform属性，及标记方法

所有转换，均为先绘制元素及其他正常元素，再计算并转换元素。因此，其仍占用原位置，且，不影响其他元素的位置。即转换后，为绝对定位

缩放

 4.6下拉列表

使用 CSS 创建可悬停的下拉列表

鼠标悬浮的下拉选项/信息等

创建一个支持下拉的容器，容器包含下拉激活项(文本/按钮/图片等等)，以及隐藏的具体下拉内容

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .dropdown-2 {
  8.             position: relative;
  9.             display: inline-block;
  10.             z-index: 1;
  11.         }
  12.  
  13.         button.dropdown-toggle-2 {
  14.             background-color: #4CAF50;
  15.             color: white;
  16.             padding: 16px;
  17.             font-size: 16px;
  18.             border: none;
  19.             cursor: pointer;
  20.         }
  21.  
  22.         .dropdown-menu-2 {
  23.             display: none;
  24.             position: absolute;
  25.             background-color: #f9f9f9;
  26.             min-width: 160px;
  27.             box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  28.             z-index: 1;
  29.         }
  30.         .dropdown-2:hover .dropdown-menu-2 {
  31.             display: block;
  32.         }
  33.     </style>
  34. </head>
  35. <body>
  36. <h3>Dropdown Menu</h3>
  37. <div class="dropdown-2">
  38.     <button class="dropdown-toggle-2">
  39.         Mouse over me
  40.     </button>
  41.     <div class="dropdown-menu-2">
  42.         <ul>
  43.             <li>Link 1</li>
  44.             <li>Link 2</li>
  45.             <li>Link 3</li>
  46.         </ul>
  47.     </div>
  48. </div>
  49. <hr>
  50. </div>
  51. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, omnis.</p>
  52. </body>
  53. </html>

4.7Card模式

 Card，是包括Google Material Design，iOS Human Interface Guidelines等均涉及的经典设计风格

Card一般由2部分组成，放置标题/图片的header，以及content。因此，创建card容器(div)，嵌套header容器(div)以及内容容器(div)

为card容器添加阴影，使容器具有立体悬浮感

4.8css变量

有的网站都会有自己的主题色，例如饿了么：

在这里插入图片描述

所以很对元素都会用到这些颜色，例如某些字体颜色，弹框提示颜色等等。

如果每次用到的时候，都使用十六进制的颜色表示，那么效率十分低，并且如果万一有一天需要更换主题颜色，那么一个一个更改，是十分繁琐的

为了解决以上问题，css引入了变量。

CSS变量可以访问 DOM，可以创建具有局部或全局范围的变量，使用 JavaScript 和媒体查询来修改变量。var() 函数用于插入 CSS 变量的值。全局变量可以在整个文档进行访问使用，局部变量只能在声明它的选择器内部使用。

例如：

  1. :root{ 
  2.   --bg-color: #cccccc;
  3. }
  4. .father{ 
  5.   background-color: var(--bg-color);
  6. }

 :root声明的是全局变量，如果是一个自定义属性用–作为前缀，使用时比如: var(–bg-color)就和#cccccc相等。

好处:

1.可维护性
如果没有CSS变量需要手动改变大量的属性值，使用批量处理查找和替换，可能会影响其他样式规则。使用CSS变量只用改变定义时的值。
2.提高CSS可读性
可以通过变量名判断属性内容

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         :root {
  11.             --bg-color: #1e90ff;
  12.             --font-color: #cccccc;
  13.         }
  14.  
  15.         #app {
  16.             width: 100px;
  17.             height: 100px;
  18.             background-color: var(--bg-color);
  19.             color: var(--font-color);
  20.         }
  21.     </style>
  22. </head>
  23.  
  24. <body>
  25. <div id="app">
  26.     <p>Hello World!</p>
  27. </div>
  28. <br />
  29. <button onclick="changeColor()">切换背景色</button>
  30. <script>
  31.     function changeColor() {
  32.         console.log(document.documentElement.style);
  33.         document.documentElement.style.setProperty('--bg-color', 'black');
  34.         document.documentElement.style.setProperty('--font-color', 'white');
  35.     }
  36. </script>
  37. </body>
  38.  
  39. </html>

相关知识点：

以`--`为前缀声明变量名称，通过var()函数访问 可将变量通过`:root`伪类声明在页面根节点

 变量值是字符串，可以与其他字符串拼接；

变量值是数值，不能与数值单位直接连用;

变量值带有单位，不能写成字符串

calc()函数

4.9Viewport units，基于视窗的单位

CSS3.0提供基于用户浏览器视窗的相对单位

  • vw，相对视窗宽度的百分比
  • vh，相对视窗高度的百分比

即，%为相对父元素，vw/vh为相对当前视窗

 4.10CSS Flexbox Layout，弹性布局

  • Table，嵌套的table会增加开发复杂度不利于后续维护，且严重影响渲染速度；语义描述不符；不利与搜索引擎抓取
  • Float，后续元素有不可预期的影响，不利于控制维护
  • inline-block，W3C推荐的div+css布局解决方案，可实现自适应布局。但在设置子项的方向/对齐/顺序等方面灵活性较差(当前主流UI框架使用方案)
  • Flex，实现横向元素内容的一维弹性布局(基于弹性，也可用于二维布局)
  • Grid，实现网页整体结构的二维响应式布局

弹性布局必须声明弹性容器(flex container)，display属性设置为flex 弹性容器内的直接子元素，为弹性项(flexible items) 弹性项，具有弹性的，类似inline-block的特性

4.10.1容器的属性

4.10.2flex-direction，决定容器主轴方向

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.  
  8.         #flex2{
  9.             display: flex;
  10.             background-color: DodgerBlue;
  11.         }
  12.         #flex2 {
  13.             flex-direction: column-reverse;
  14.         }
  15.         #flex2 > div {
  16.             background-color: #f1f1f1;
  17.             width: 100px;
  18.             margin: 10px;
  19.             text-align: center;
  20.             line-height: 75px;
  21.             font-size: 30px;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.  
  27. <div id="flex2">
  28.     <div>1</div>
  29.     <div>2</div>
  30.     <div>3</div>
  31. </div>
  32. <hr>
  33. <p>The "flex-wrap: nowrap;" specifies that the flex items will not
  34.     wrap (this is default):</p>
  35. </body>
  36. </html>

 4.10.3flex-wrap，决定项是否换行

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.  
  8.         #flex3{
  9.             display: flex;
  10.             background-color: DodgerBlue;
  11.         }
  12.         #flex3 {
  13.             flex-wrap: nowrap;
  14.         }
  15.  
  16.         #flex3 > div {
  17.             background-color: #f1f1f1;
  18.             width: 100px;
  19.             margin: 10px;
  20.             text-align: center;
  21.             line-height: 75px;
  22.             font-size: 30px;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.  
  28. <div id="flex3">
  29.     <div>1</div>
  30.     <div>2</div>
  31.     <div>3</div>
  32.     <div>4</div>
  33.     <div>5</div>
  34.     <div>6</div>
  35.     <div>7</div>
  36.     <div>8</div>
  37.     <div>9</div>
  38.     <div>10</div>
  39.     <div>11</div>
  40.     <div>12</div>
  41. </div>
  42. <hr>
  43. <p>The "flex-wrap: wrap;" specifies that the flex items will wrap
  44.     if necessary:</p>
  45. </body>
  46. </html>

4.10.4justify-content决定项在主轴的对齐方法

 4.10.5align-items，决定项在交叉轴(纵轴)的对齐方式

 4.10.6align-content属性

 4.10.7项目的属性

弹性容器的直接子元素自动成为弹性（flex）项目。

有如下属性：

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

4.10.8order

 

4.10.9flex-grow

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.  
  8.         #flex5{
  9.             display: flex;
  10.             background-color: DodgerBlue;
  11.         }
  12.         #flex5 > .grow-1 {
  13.             flex-grow: 3;
  14.         }
  15.  
  16.         #flex5 > .grow-2 {
  17.             flex-grow: 2;
  18.         }
  19.         #flex5 > .grow-1, #flex5 > .grow-2{
  20.             background-color: #f1f1f1;
  21.             width: 100px;
  22.             margin: 10px;
  23.             text-align: center;
  24.             line-height: 75px;
  25.             font-size: 30px;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.  
  31. <div id="flex5">
  32.     <div class="grow-1">1</div>
  33.     <div class="grow-1">2</div>
  34.     <div class="grow-2">3</div>
  35. </div>
  36. <hr>
  37. <hr>
  38. <p>The "flex-wrap: wrap;" specifies that the flex items will wrap
  39.     if necessary:</p>
  40. </body>
  41. </html>

4.10.10flex-basis

在确定宽度前，项的初始长度，优先级高于width

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.  
  8.         #flex6{
  9.             display: flex;
  10.             background-color: DodgerBlue;
  11.         }
  12.  
  13.         #flex6 > div{
  14.             background-color: #f1f1f1;
  15.             width: 100px;
  16.             margin: 10px;
  17.             text-align: center;
  18.             line-height: 75px;
  19.             font-size: 30px;
  20.         }
  21.         #flex6 > .percent-30 {
  22.             flex-basis: 30%;
  23.         }
  24.  
  25.         #flex6 > .percent-70 {
  26.             flex-basis: 70%;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.  
  32. <div id="flex6">
  33.     <div class="percent-30">1</div>
  34.     <div class="percent-70">2</div>
  35.     <div class="percent-70">3</div>
  36. </div>
  37. <hr>
  38. <p>The "flex-wrap: wrap;" specifies that the flex items will wrap
  39.     if necessary:</p>
  40. </body>
  41. </html>

 4.10.11flex-shrink

当各元素占空间之和大于容器时，压缩每个元素的比例

默认值1。每个元素等比压缩；0，不压缩

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.  
  8.         #flex7{
  9.             display: flex;
  10.             background-color: DodgerBlue;
  11.         }
  12.  
  13.         #flex7 > div{
  14.             background-color: #f1f1f1;
  15.             width: 100px;
  16.             margin: 10px;
  17.             text-align: center;
  18.             line-height: 75px;
  19.             font-size: 30px;
  20.         }
  21.  
  22.     </style>
  23. </head>
  24. <body>
  25. <div id="flex7">
  26.     <div>1</div>
  27.     <div>2</div>
  28.     <div>3</div>
  29.     <div>4</div>
  30.     <div>5</div>
  31.     <div style="flex-shrink: 0">6</div>
  32. </div>
  33. <hr>
  34. </body>
  35. </html>

4.10.12其他相关

 4.11Responsive Web Design，响应式布局

无论使用何种设备(台式机/平板/手机等)浏览网页，网页不应遗漏信息以适应设备，而应调整其内容以适应设备

响应式网页布局，仅基于HTML CSS即可实现

@media Rule

  • Max-width，当窗口宽度最大为(即小于等于时)
  • Min-width，当窗口宽度最小为(即大于等于时) 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Title</title>
  9.     <style>
  10.         :root {
  11.             --col-1: 8.33333333%;
  12.             --col-2: 16.66666667%;
  13.             --col-3: 25%;
  14.             --col-4: 33.33333333%;
  15.             --col-5: 41.66666667%;
  16.             --col-6: 50%;
  17.             --col-7: 58.33333333%;
  18.             --col-8: 66.66666667%;
  19.             --col-9: 75%;
  20.             --col-10: 83.33333333%;
  21.             --col-11: 91.66666667%;
  22.             --col-12: 100%;
  23.         }
  24.         * {
  25.             margin: 0;
  26.             padding: 0;
  27.             box-sizing: border-box;
  28.         }
  29.         /* 测试用的区域样式 */
  30.         .area {
  31.             padding: 10px;
  32.             border: 2px solid #f08c00;
  33.             background-color: #ffec99;
  34.             border-radius: 5px;
  35.         }
  36.         /* 顶级容器 */
  37.         .container {
  38.             max-width: var(--container-width);
  39.             margin: auto;
  40.             /* 默认高度最小一屏 */
  41.             min-height: 100vh;
  42.         }
  43.         /* 全局弹性布局的，行容器 */
  44.         .row {
  45.             display: flex;
  46.             /* 超出项自动换行，从而实现响应式布局 */
  47.             flex-wrap: wrap;
  48.             /* 弹性项上对齐，纵向不拉伸 */
  49.             align-items: flex-start;
  50.         }
  51.         ul.nav-sidebar {
  52.             list-style: none;
  53.             display: var(--nav-sidebar);
  54.             justify-content: var(--nav-sidebar-justify);
  55.         }
  56.         /* 当大于等于200px时 */
  57.         @media (min-width: 200px) {
  58.             :root {
  59.                 --container-width: 540px;
  60.                 --nav-sidebar: flex;
  61.                 --nav-sidebar-justify: space-between;
  62.             }
  63.             .col-sm-1 {width: var(--col-1);}
  64.             .col-sm-2 {width: var(--col-2);}
  65.             .col-sm-3 {width: var(--col-3);}
  66.             .col-sm-4 {width: var(--col-4);}
  67.             .col-sm-5 {width: var(--col-5);}
  68.             .col-sm-6 {width: var(--col-6);}
  69.             .col-sm-7 {width: var(--col-7);}
  70.             .col-sm-8 {width: var(--col-8);}
  71.             .col-sm-9 {width: var(--col-9);}
  72.             .col-sm-10 {width: var(--col-10);}
  73.             .col-sm-11 {width: var(--col-12);}
  74.             .col-sm-12 {width: var(--col-12);}
  75.         }
  76.         /* 当大于等于992px时 */
  77.         @media (min-width: 992px) {
  78.             :root {
  79.                 --container-width: 960px;
  80.                 --nav-sidebar: block;
  81.                 --nav-sidebar-justify: none;
  82.             }
  83.             /* 分12列 */
  84.             .col-md-1 {width: var(--col-1);}
  85.             .col-md-2 {width: var(--col-2);}
  86.             .col-md-3 {width: var(--col-3);}
  87.             .col-md-4 {width: var(--col-4);}
  88.             .col-md-5 {width: var(--col-5);}
  89.             .col-md-6 {width: var(--col-6);}
  90.             .col-md-7 {width: var(--col-7);}
  91.             .col-md-8 {width: var(--col-8);}
  92.             .col-md-9 {width: var(--col-9);}
  93.             .col-md-10 {width: var(--col-10);}
  94.             .col-md-11 {width: var(--col-11);}
  95.             .col-md-12 {width: var(--col-12);}
  96.         }
  97.     </style>
  98. </head>
  99. <body>
  100. <div class="container">
  101.     <!-- header -->
  102.     <div class="area row">
  103.         <h3 class="col-md-12">Responsive Breakpoints: 992px</h3>
  104.     </div>
  105.     <!-- main -->
  106.     <div class="area row">
  107.         <!-- sidebar -->
  108.         <div class="area col-md-2 col-sm-12">
  109.             <ul class="nav-sidebar">
  110.                 <li><a href="">Nav 1</a></li>
  111.                 <li><a href="">Nav 2</a></li>
  112.                 <li><a href="">Nav 3</a></li>
  113.             </ul>
  114.         </div>
  115.         <!-- body -->
  116.         <div class="area col-md-7 col-sm-12">
  117.             <h1>Main article area</h1>
  118.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda autem, eligendi impedit ipsam ipsum
  119.                 non similique! Aut dolorum esse expedita, harum ipsum libero, numquam obcaecati provident recusandae
  120.                 sint sit suscipit veritatis voluptas.</p>
  121.         </div>
  122.         <!-- aside -->
  123.         <div class="area col-md-3 row col-sm-12">
  124.             <div class="area col-md-12 col-sm-6">Advertising1</div>
  125.             <div class="area col-md-12 col-sm-6">Advertising2</div>
  126.         </div>
  127.     </div>
  128.     <!-- footer -->
  129.     <div class="area row">
  130.         <h3 class="col-md-12">The footer</h3>
  131.     </div>
  132. </div>
  133. </body>
  134. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/295396?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号