当前位置： 首页 > article >正文

HTML+CSS总结【量大管饱】

article 2025/3/15 12:49:27

文章目录

  • 前言
  • HTML总结
    • 语义化标签
    • 常用标签
    • H5新的语义元素
    • H5的媒体标签
      • \<embed> 元素（少用）
      • \<object>元素（少用）
      • \<audio>
      • \<video>
    • 元素包含关系
    • iframe元素
    • 嵌入flash内容
    • 常用表单
      • input
      • select
  • CSS总结
    • 权重
    • 样式计算过程
    • 常用伪类
      • LOVE准则
    • contenteditable属性
    • 定位POSITION
      • 相对定位RELATIVE
      • 绝对定位ABSOLUTE
      • 固定定位FIXED
      • 粘性定位STICKY
      • 例子
    • 变量var
    • css颜色
      • rgb(r,g,b)：
      • rgba(r,g,b,alpha)：
      • hsl(h<角度>,s<百分比>,l<百分比>,alpha)：
      • hwb(h<角度>,w<百分比>,b<百分比>,alpha)：
    • 盒子模型
      • **盒子类型：**
      • **盒子的组成：**
      • **不过行盒有其特殊之处：**
      • 空白折叠：
      • box-sizing
      • 盒子模型的背景
    • 常规流布局
      • **包含块（containing block）：**
      • 块盒常规流
        • 每个盒子的宽度必须等于**包含块的的宽度**（高度不适用）
        • 块盒的高度
        • 百分比取值
          • 高度的百分比
        • 外边距合并
    • 浮动float
      • 高度坍塌
      • 不规则排序：
    • 弹性布局flex
      • tip：
    • @规则（css指令）
    • 堆叠上下文（stack context）
        • 同一堆叠上下文元素在z轴的排列：
    • svg

前言

本文总结了常用的html元素，以及其特性，还有一些可能会用到的内容，还总结了css的大部分常用内容，透彻的解析了原理内含，内容比较多，还有一些内容会以后补充，欢迎大家收藏！

HTML总结

语义化标签

html其实是使用各种标签来表示不同的文本所代表的信息，全称为超文本标记语言 (Hyper Text Markup Language)，

不同的标签有其对应的语义，所以选择对应的标签是一种更好的习惯，也能使整体结构更加清晰，例如：

// 根据w3c中对语义标签的定义
非语义元素的例子：

和 - 无法提供关于其内容的信息。
语义元素的例子：、 以及 - 清晰地定义其内容：表单、表格、图片。

常用标签

  • <em> 来强调重点

  • <b> 来吸引对文字的注意

  • <mark> 来标记关键词或短语

  • <strong> 来表明文本具有重要意义

  • <cite> 来标记书籍或其他出版物的标题

  • <i> 来表示西方文本中的技术术语、音译、思想或船名

  • <br> 回车

  • <hr> 生成分割线，可通过内置属性设置样式，不过兼容性不好

  • <s> 删除线

  • <sub> 将其内容变为下标格式，如：C<sub>8</sub>H<sub>10</sub>===>C8H10

  • <u> 下划线，<u> 元素的有效用例包括标注拼写错误、向中文文本中的专有名称添加专名号，以及其他形式的注释。你不应该使用 <u> 为文字添加视觉上的下划线，或者表示书籍的标题。

  • <p> 表示一段文本，文本段落

  • <a> 锚元素（超连接），可以起到跳转作用

    • ​ href：超链接所指向的 URL。链接不限于基于 HTTP 的 URL——它们可以使用浏览器支持的任何 URL 协议：

      • 使用文档片段链接到页面的某一段
      • 使用文本片段链接到某一段文字
      • 使用媒体片段链接到某个媒体文件
      • 使用 tel: URL 链接到一个电话号码
      • 使用 mailto: URL 链接到一个邮箱地址
      • 如果 web 浏览器不能支持其他 URL 协议，网站可以使用 registerProtocolHandler()

    • rel：该属性指定了目标对象到链接对象的关系

      <!-- <a> 元素跳转百度 -->
<a href="https://www.baidu.com"> Mozilla </a>

<!-- <a> 元素链接到下面部分 -->
<p><a href="#Section_further_down"> 跳转到下方标题 </a></p>

<!-- 要链接到的标题 -->
<h2 id="Section_further_down">更下面的部分</h2>

<!-- <a> 元素链接邮箱 -->
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

  • <form> 用于向目标提交表单

    • action：指定目标url，这个值可被<button>或<input>的提交事件改变
    • method：浏览器使用这种 HTTP 方法来提交 表单：
      • post：表单数据会包含在表单体内然后发送给服务器
      • get：表单数据会附加在 action 属性的 URL 中，并以 ? 作为分隔符
      • dialog：如果表单在<dialog>元素中，提交时关闭对话框

H5新的语义元素

如下图，样式都没有什么特别的，只是增强了语义性，更容易阅读：

在这里插入图片描述

  • <article>元素规定独立的自包含内容，文档有其自身的意义，并且可以独立于网站其他内容进行阅读(如：文章详情页)，下面是一个例子：

    <article>
   <header>
     <h1>What Does WWF Do?</h1>
     <p>WWF's mission:</p>
   </header>
   <p>WWF's mission is to stop the degradation of our planet's 	natural environment,
and build a future in which humans live in harmony with nature.
	</p>
</article>

  • <section> 元素被定义为相关元素块

  • <header> 元素为文档或节规定页眉

  • <footer> 元素为文档或节规定页脚

  • <nav> 元素定义导航链接集合

  • <aside> 元素页面主内容之外的某些内容（比如侧栏）

H5的媒体标签

<embed> 元素（少用）

所有主要浏览器均支持 <embed> 元素,<embed> 元素将外部内容嵌入文档中的指定位置，而此内容由外部应用程序或其他交互式内容源（如浏览器插件）提供

大多数现代浏览器已经弃用并取消了对浏览器插件的支持，所以如果你希望你的网站可以在普通用户的浏览器上运行，那么依靠 <embed> 通常是不明智的。

以下为一个例子：

<!DOCTYPE html>
<html>
<body>

<embed width="100%" height="500px" src="/demo/html/table.html">

</body>
</html>

它的src可以选择图片、视频、音频、html文件等，但是它旨在将插件（例如 Java applet、PDF 阅读器和 Flash 播放器）嵌入网页中，可是大多数浏览器不再支持 Java Applet 和插件。所有浏览器均不再支持 ActiveX 控件。在现代浏览器中，对 Shockwave Flash 的支持也已关闭。自然而然就很少用到此元素了
在这里插入图片描述

<object>元素（少用）

<object> 标签的作用是在 HTML 页面中嵌入多媒体元素，如音频、视频等

基本语法如下：

<object data="movie.swf" height="200" width="200"/>

如果浏览器不支持 Flash，将无法播放视频。

与<embed> 有点类似，但在当前，有些浏览器支持<embed>不支持<object>，而有些浏览器相反，所以这两种方式用的并不多。

<audio>

用于播放音频，基本语法如下：

<audio controls="controls">
	// 内部<source/>标签可以选择音频来源，由于不同的浏览器所支持的音频格式有所不同，所以可以使用此标签来选择多个音频文件，以此来解决部分兼容问题
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
  // 还是无法兼容显示无法兼容信息
Your browser does not support this audio format.
</audio>

如果只需要一个音频源文件，则可以省略source：

<audio controls="controls" src="song.mp3">
</audio>

还可以使用<embed>元素来进一步解决兼容性问题：

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

内含属性：

  • autoplay：布尔值属性，是否自动播放

  • controls：此属性只有声明或不声明，表示是否显示播放控制器

    <audio controls src="/media/cc0-audio/t-rex-roar.mp3"></audio>
<audio src="/media/cc0-audio/t-rex-roar.mp3"></audio>

    在这里插入图片描述

  • currentTime：获取当前文件播放到的事件

  • disableRemotePlayback：布尔值属性，用来禁用在远程设备上进行进度控制的能力

  • duration：视频总长度

  • loop：布尔值属性,是否循环播放

  • muted：布尔值属性,是否默认静音

  • src：嵌入的音频的 URL

事件：

  • audioprocess：输入缓冲区已准备好进行处理
  • durationchange：duration 属性已更新
  • ended：视频停止播放，因为媒体已经到达结束点
  • loadeddata：媒体的首帧已加载完成
  • loadedmetadata：元数据已加载完毕
  • loadstart ： 浏览器开始加载资源时触发
  • pause ：播放已暂停
  • play：播放已开始
  • timeupdate：由 currentTime 属性指示的播放时间已更新

<video>

用于播放视频的标签，基本语法如下：

<video width="320" height="240" controls="controls">
    // 内部<source/>标签可以选择视频来源，由于不同的浏览器所支持的视频格式有所不同，所以可以使用此标签来选择多个视频文件，以此来解决部分兼容问题
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
</video>

和音频的使用大致类似，不过属性有所不同

最好的兼容性写法也大致相同：

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

内部属性：

  • autoplay：布尔值属性，是否自动播放

  • controls：此属性只有声明或不声明，表示是否显示播放控制器

  • controlslist：当浏览器显示播放控制器时，controlslist 属性会帮助浏览器选择在控制面板上显示哪些 video 元素控件。

    允许的值有 nodownload(禁止下载)、nofullscreen （禁止全屏）和 noremoteplayback（禁止远程播放）。

    在这里插入图片描述

在这里插入图片描述

  • disablepictureinpicture：布尔值属性，防止浏览器显示画中画上下文菜单或在某些情况下自动请求画中画模式

  • height：视频显示区域的高度，单位是CSS 像素

  • loop：布尔值属性,是否循环播放

  • muted：布尔值属性,是否默认静音

  • playsinline：布尔值属性，是否位于包含块内播放（原播放区域），没有此属性并不意味着视频始终是全屏播放的

  • poster：海报帧图片 URL，用于在视频处于下载中的状态时显示，如果未指定该属性，则在视频第一帧可用之前不会显示任何内容，然后将视频的第一帧会作为海报帧来显示

  • src：要嵌到页面的视频的 URL

  • width：视频显示区域的宽度，单位是CSS 像素

事件：

  • audioprocess：输入缓冲区已准备好进行处理
  • durationchange：duration 属性已更新
  • ended：视频停止播放，因为媒体已经到达结束点
  • loadeddata：媒体的首帧已加载完成
  • loadedmetadata：元数据已加载完毕
  • loadstart ： 浏览器开始加载资源时触发
  • pause ：播放已暂停
  • play：播放已开始
  • timeupdate：由 currentTime 属性指示的播放时间已更新

元素包含关系

块级元素独占一行，可以换行可以包含行极元素

行级元素一行不能换行，不能包含块级元素，a元素除外

随着语义化标准的完善，有了新的总结：

  • 容器元素（如div）可以包含任何元素
  • a元素几乎可以包含任何元素
  • 有些元素有固定子元素，如ul>li、ol>li、table>dl>dt>dd
  • 标题元素无法包含容器元素、段落元素

iframe元素

内联框架元素，它能够将另一个 HTML 页面嵌入到当前页面中

例如需要其他网站的内容时，我们的网站禁止访问，就可以使用此元素内嵌要访问的网站，再用这个网站访问自己的内容

比如访问bilibili视频

在这里插入图片描述

然后放入代码中

<div class="a">
    <iframe src="https://player.bilibili.com/player.html?isOutside=true&aid=113211076512189&bvid=BV1adxAepEL9&cid=26036864706&p=1" scrolling="no" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
</div>

.a{
  width: 1000px;
  background-color: #50e024;
}
iframe{
  width: 1000px;
  height: 800px;
}

在这里插入图片描述

嵌入flash内容

使用object元素与embed元素实现

type为互联网媒体类型（MIME）

不过现在几乎都不支持flash了

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
  </head>
  <body>
    <object data="./BVN 2.6.swf" type="application/x-shockwave-flash">
      <param name="qulity" value="high">
      <embed src="./BVN 2.6.swf" type="application/x-shockwave-flash" qulity="high">
    </object>

  </body>
</html>

在这里插入图片描述

常用表单

input

<div class="a">
    <!-- 文本 -->
    <p><input type="text"></p>
    <!-- 密码 -->
    <p><input type="password"></p>
    <!-- 进度 -->
    <p><input type="range"></p>
    <!-- 日期 -->
    <p><input type="date"></p>
    <!-- 搜索 -->
    <p><input type="search"></p>
    <!-- 纯数字 -->
    <p><input type="number"></p>
    <!-- 多选框 -->
    <p>爱好：<input name="hobby" type="checkbox">唱 <input name="hobby" type="checkbox">跳</p>
    <!-- 单选框 -->
    <p>性别：<input name="gender" type="radio">男 <input name="gender" type="radio">女</p>
    <!-- 取色 -->
    <p><input type="color"></p>
    <!-- 文件选择 -->
    <p><input type="file"></p>
  </div>

在这里插入图片描述

select

<div class="s">
<!-- 下拉框 -->
   <select name="hobby" id="hobby">
     <option value="唱">唱</option>
     <option value="跳">跳</option>
     <option value="篮球">篮球</option>
    </select>
 <!-- 多重下拉，可多选 -->
    <select name="game" id="game" multiple>
      <optgroup label="fps">
        <option value="">cf</option>
        <option value="">csgo</option>
      </optgroup>
      <optgroup label="moba">
        <option value="">lol</option>
        <option value="">dota</option>
      </optgroup>
    </select>
  </div>

在这里插入图片描述

CSS总结

权重

类型选择器（标签）与伪元素选择器（::before）：权重最低

类选择器与伪类选择器：权重第二

id选择器：权重最高

!important：此声明将覆盖任何其他声明，不过尽量少使用，以免破环元素间的样式联系，当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用

样式计算过程

赋值：

自己为元素属性赋的值(没有冲突)

层叠冲突：

若有重复则以后赋的值为准

<style>
	.aaa{
		color:#fff;
		color:#000;
	}
</style>

若有多处赋值冲突，则需要比较权重来得到最终值

<div class="a" id="b">dawdad</div>

div{
    font-size: 30px			// 权重1
}
div.a{
	font-size: 20px			// 权重3
}
div#b{
	font-size: 12px			// 权重5
}

最终此div的font-size为12px

在这里插入图片描述

继承：

若没有赋值，则会向上查看父元素的此属性值，有则继承此属性值

不过如背景等非文本属性是无法继承的

// 以下文本aaa的字体大小会为30px
<div>
	<span>aaa</span>
</div>

<style>
    div{
        font-size: 30px
    }
</style>

默认值：

元素的所有属性不是默认为空的，而是都有初始值，若没有赋值也没有可继承的值，则会使用默认值

在这里插入图片描述

常用伪类

伪类含义
:link选中未访问过的超链接
:visited选中已访问过的超链接
:hover选中鼠标移入的元素
:active选中鼠标按下的元素
:focus选中聚焦的表单元素
:disabled选中被禁用的表单元素
:checked选中被选中的表单元素
:first-child选中第一个子元素
:last-child选中最后一个子元素
:nth-child(an+b)选中第「an+b」个子元素
a和b是常量，n的值会从0开始依次递增
:first-of-type选中第一个指定类型的子元素
:last-of-type选中最后一个指定类型的子元素
:nth-of-type(an+b)选中第「an+b」个指定类型的子元素
a和b是常量，n的值会从0开始依次递增

LOVE准则

即以 :link、:hover、:visited、:active的顺序来设置属性，这样可以避免样式的冲突（根据所需要的优先级），比如如果:active在:hover前配置，那点击时鼠标还是悬于此元素上，那样还是显示:hover的样式而不是:active的样式

contenteditable属性

该属性是一个布尔属性，可以设置到任何元素上，它可以让该元素变为可编辑的状态

在实际开发中，通常用于制作富文本框

基本语法如下，设置了此属性则此div的内容可以改变：

<div>
    <div contenteditable="true">
      <p>adwdawd</p>
    </div>
 </div>

在这里插入图片描述

定位POSITION

用于指定一个元素在文档中的定位方式

相对定位RELATIVE

元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）

绝对定位ABSOLUTE

元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素（一般为相对定位relative）偏移，来确定元素位置

固定定位FIXED

元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置，元素的位置在屏幕滚动时不会改变

粘性定位STICKY

元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block（最近《包含块》块级祖先 nearest block-level ancestor），包括 table-related 元素，基于 top、right、bottom 和 left 的值进行偏移

例子

以下列场景为例，通过查看有left和left为0、不停的改变position来看效果，代码如下：

<div class="a">
    <div class="b">
      <div class="c"></div>
    </div>
 </div>

.a{
  width: 400px;
  height: 400px;
  background-color: red;
  position: relative;
  left: 40px;
}
.b{
  position: relative;
  width: 300px;
  height: 300px;background-color: blue;
  // left: 20px;
  left: 0px;
  top: 30px;
}

position为relative时

以下为分别盒子b的left为0和为20px（后面一致）

在这里插入图片描述

在这里插入图片描述

此时为相对定位，刚开始，b随a一起向右，此时left为0，所以相对于b自己位置也还是那里，然后b的left变为20px，相对于b自己本身的位置再向右移动了20px

position为absolute时

在这里插入图片描述

在这里插入图片描述

看似和上面一样，其实原理不一样，刚开始b随a一起向右，此时left为0，b相对于a左右并没有移动，所以此时它们左边依然是重合的，然后left变为20px，由于a为相对定位，所以b相对于a进行移动，向右移动20px

position为fixed时

在这里插入图片描述

在这里插入图片描述

由于是固定定位，所以b直接相对于视口定位，不管其他的了，所以left为0时，直接与左边视口重合，left为20px后，也是相对于视口向右移动了20px

position为sticky时

在这里插入图片描述

在这里插入图片描述

此时为粘性定位，很明显b的父元素并没有滚动能力，再往上看

在这里插入图片描述

在这里插入图片描述

确实没有一个具有滚动的祖先元素，所以b没有参照物，left不起作用

变量var

使用一个变量来代替经常使用的属性值

定义变量名：使用 --开头即可

变量值：正确可用的即可

var(预选值，备选值)

.a{
  --dark-color: #ccc;
  --blue-color: blue;
  --abc-aaa: orange;
  width: 400px;
  height: 400px;
  background-color: var(--dark-color);
  position: relative;
  left: 40px;
}
.b{
  position: absolute;
  width: 300px;
  height: 300px;
  background-color: var(--abc-aaa,--blue-color);
  left: 20px;
  // left: 0px;
  top: 30px;
}

css颜色

rgb(r,g,b)：

由红（0-255）、绿（0-255）、蓝（0-255）三原色的占比来配置颜色

rgba(r,g,b,alpha)：

由红、绿、蓝三原色的占比来配置颜色，加上a来配置透明度，默认为1不透明

hsl(h<角度>,s<百分比>,l<百分比>,alpha)：

根据颜色的色调、饱和度和亮度分量在 sRGB 颜色空间中表示颜色。可选的 alpha 组件表示颜色的透明度，如下：

.b{
  position: absolute;
  width: 300px;
  height: 300px;
  background: hsl(0.3turn 60% 45% / .7);
  left: 20px;
  // left: 0px;
  top: 30px;
}

在这里插入图片描述

hwb(h<角度>,w<百分比>,b<百分比>,alpha)：

根据颜色的色调、白度和黑度来表示 sRGB 色彩空间中的颜色。可选的 alpha 组件表示颜色的透明度，如下：

.b{
  position: absolute;
  width: 300px;
  height: 300px;
  background: hwb(30deg 10% 0% / .5);
  left: 20px;
  // left: 0px;
  top: 30px;
}

在这里插入图片描述

盒子模型

box，一个元素在页面会形成一个矩形区域，类似盒子

盒子类型：

行盒：display为inline，内容不可换行，一行到尽头

块盒：display为block，独占一行，相当于一大行（可换行）

行块盒：display为inline-block，内容不可换行，但可以直接设置宽高

盒子的组成：

无论行盒或块盒，都是一样的结构组成

在这里插入图片描述

如上，margin（外边距）、border（边框）、padding（内边距）、content（内容，width、height设置的就是此内容，也叫内容盒）共同组成盒子模型

不过行盒有其特殊之处：

  • 行盒的内容盒：

    行盒的宽高是源于内容的大小与长度所决定的，并不能由自己设置，如下：

<div class="a" id="b">
    <span>你好12dwdqqqqqqq</span>
</div>

span{
  width: 1000px;
}

在这里插入图片描述

  • 行盒的内边距padding：

    水平方向有效，会挤压文本内容，垂直方向会以文本内容为中心对背景大小进行改变（可以说不能得到想要的效果，无效）

    span{
  padding: 100px;
}

    在这里插入图片描述

  • 边框border：

    和内边距差不多，水平方向有效，会挤压文本内容，垂直方向会以文本内容为中心对背景大小进行改变

    span{
  border: 100px solid red;
}

    在这里插入图片描述

  • 外边距margin：

    也是水平方向有效，会挤压文本内容，垂直方向会以文本内容为中心对背景大小进行改变

    span{
  margin: 100px;
}

    在这里插入图片描述

空白折叠：

行盒与行块盒都会产生空白折叠，即两个行盒或行块盒挨着时，它们之间会有一个空格间隔，而且不能消除

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
	<style>
		a{
  display: inline-block;
  width: 100px;
  height: 20px;
  line-height: 20px;
  border: 1px solid #6ee663;
  color: #38f;
  text-decoration: none;
  box-sizing: border-box;
  text-align: center;
}
	</style>
  </head>
  <body>
    <div class="a" id="b">
    <a href="">lorem</a>
    <a href="">lorem2</a>
  </div>

  </body>
</html>

在这里插入图片描述

不过在Vue中好像没有这个空白，Vue 模板在编译时，可能会移除某些空白字符。如果你没有在 <a> 标签之间放置明显的换行符或空格，Vue 可能会自动处理掉这些空白间隔

box-sizing

用于指定width、height等设置的是内容盒还是边框盒

box-sizing: content-box（默认）

此时设置的width、height就是内容盒

在这里插入图片描述

box-sizing: border-box

此时设置的width、height就是边框盒

在这里插入图片描述

盒子模型的背景

背景图片默认覆盖到整个border，可以使用background-clip来设置覆盖范围

在这里插入图片描述

在这里插入图片描述

常规流布局

所有元素默认情况下都是常规流布局

总体规则：

  • 块盒独占一行
  • 行盒水平依次排列

包含块（containing block）：

每个盒子都有它的包含块，包含块决定盒子的排列区域，一般情况下，盒子的包含块为其父盒子的内容盒

块盒常规流

每个盒子的宽度必须等于包含块的的宽度（高度不适用）
<div class="a">
    <div class="b"></div>
</div>

.a{
  width: 1000px;
  border: 10px solid;
  height: 300px;
  background-color: #50e024;
}
.b{
  height: 100px;
  background-color: #db6262;
}

在这里插入图片描述

宽度默认值为auto，margin默认值为0

它们的auto代表吸收其他空间，比如包含块宽度为100px，而b的宽度只有50px，此时设置margin为auto，两边的外边距就会吸收多余的50px，这也是常规流块盒水平居中的做法，（margin垂直方向的auto为0）

如下：

.a{
  width: 100px;
  height: 300px;
  background-color: #50e024;
}
.b{
  width: 50px;
  height: 100px;
  background-color: #db6262;
  margin: auto;
}

在这里插入图片描述

在这里插入图片描述

不过width的吸收能力要大于margin，如下：

.a{
  width: 100px;
  height: 300px;
  background-color: #50e024;
}
.b{
  width: auto;
  height: 100px;
  background-color: #db6262;
  margin: auto;
}

在这里插入图片描述

块盒的高度

高度的auto指的是适应内容的高度：

.a{
  width: 100px;
  height: auto;
  background-color: #50e024;
}
.b{
  width: 10px;
  height: 100px;
  background-color: #db6262;
}

在这里插入图片描述

百分比取值

一般的width、margin、padding的百分比取值都是以包含块的宽度为基准的

（至于为什么设置这个padding-top见下面外边距合并）

.a{
  width: 100px;
  height: 400px;
  background-color: #50e024;
  padding-top: 1px;
}
.b{
  width: 50%;
  height: 100px;
  margin-top: 50%;
  background-color: #db6262;
}

在这里插入图片描述

在这里插入图片描述

高度的百分比
  • 若包含块有高度、不依赖子元素撑开（不为auto），则以包含块高度为基准
.a{
  width: 100px;
  height: 400px;
  background-color: #50e024;
}
.b{
  width: 50%;
  height: 50%;
  background-color: #db6262;
}

在这里插入图片描述

  • 若包含块依赖子元素撑开，则百分比无效
外边距合并

若两元素（包括兄弟元素、父子元素）的外边距相邻（没有border、padding等隔开），则会取较大的一个外边距成为它们共同的外边距，如上面：

.a{
  width: 100px;
  height: 400px;
  background-color: #50e024;
  // padding-top: 1px; 不用padding-top隔开
}
.b{
  width: 50%;
  height: 100px;
  margin-top: 50%;
  background-color: #db6262;
}

在这里插入图片描述

父元素也会共用这个20px的margin-top

浮动float

会时元素变为块盒（设置display为block），默认值为none

此时元素的包含块与常规流一致，也是父元素的内容盒

  • float:left 左浮动，元素处于包含块左上

  • float:right 右浮动，元素处于包含块右上

    <div class="a">
    <div class="b">aaa</div>
    <div class="b">aaa</div>
    <div class="c">aaa</div>
    <div class="c">aaa</div>
</div>

    .a{
  width: 1000px;
  height: 400px;
  background-color: #50e024;
}
.b{
  float: left;
}
.c{
  float: right;
}

    在这里插入图片描述

  • margin的auto代表margin为0

  • 宽度的auto代表自适应内容宽度

  • 高度的auto代表自适应内容高度

  • 百分比设置也与常规流一致

  • 浮动盒子在包含块中排列时会避开常规流盒子

    <div class="a">
    <div class="b">aaa</div>
    <div>bbb</div>
    <div class="b">aaa</div>
    <div class="c">aaa</div>
    <div class="c">aaa</div>
</div>

    div{
  border: 1px solid;
}
.a{
  width: 1000px;
  height: 400px;
  background-color: #50e024;
}
.b{
  float: left;
}
.c{
  float: right;
}

    在这里插入图片描述

  • 行盒在排列时会避开浮动盒子（文字环绕），而块盒在排列时会无视浮动盒子

    <div class="a">
    <div class="b">aaa</div>
    <span>bbb this is a demo, no see</span>
    <div>ccc</div>
    <div class="b">aaa</div>
    <p>bbb this is a demo, no see</p>
  </div>

    div{
  border: 1px solid;
}
.a{
  width: 1000px;
  height: 400px;
  background-color: #50e024;
}
.b{
  float: left;
}
.c{
  float: right;
}
span{
  background-color: #f50d0d;
}
p{
  background-color: #4c57ef;
}

    在这里插入图片描述

高度坍塌

若子元素都浮动，父元素的高度自适应时，块元素会无视浮动元素去排列，所有会有父元素高度无法被撑开的问题

<div class="a">
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
  </div>

div{
  border: 1px solid;
}
.a{
  width: 1000px;
  background-color: #50e024;
}
.i{
  width: 300px;
  height: 300px;
  background-color: red;
  float: left;
}

在这里插入图片描述

解决方法：

clear：

  • none 不清除浮动
  • left 清除左浮动，使此元素在所有左浮动元素的下方
  • right 清除右浮动，使此元素在所有右浮动元素的下方
  • both 清除所有浮动，使此元素在所有浮动元素的下方
<div class="a">
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
    <div class="s"></div>
  </div>

div{
  border: 1px solid;
}
.a{
  width: 1000px;
  background-color: #50e024;
}
.i{
  width: 300px;
  height: 300px;
  background-color: red;
  float: left;
}
.s{
  clear: left;
}

在这里插入图片描述

不规则排序：

在这里插入图片描述

  • 左浮动的盒子向上向左排列
  • 右浮动的盒子向上向右排列
  • 浮动盒子的顶边不得高于上一个盒子的顶边
  • 若剩余空间无法放下浮动的盒子则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动

弹性布局flex

justify-content：

横轴摆放：flex-start;flex-end;center;space-between;space-around;

看例子：

<div class="a">
    <ul class="b">
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
    </ul>
    <ul class="b2">
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
    </ul>
    <ul class="b3">
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
    </ul>
    <ul class="b4">
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
    </ul>
    <ul class="b5">
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
    </ul>
    <ul class="b6">
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
    </ul>
  </div>

// 此处为less语法
.a{
  ul{
    list-style: none;
    border: 1px solid black;
    margin-top: 20px;
  }
  .b{
    display: flex;
    justify-content: flex-start;
  }
  .b2{
    display: flex;
    justify-content: flex-end;
  }
  .b3{
    display: flex;
    justify-content: left;
  }
  .b4{
    display: flex;
    justify-content: right;
  }
  .b5{
    display: flex;
    justify-content: space-around;
  }
  .b6{
    display: flex;
    justify-content: space-between;
  }
}

在这里插入图片描述

align-content:

纵轴摆放：flex-start;flex-end;center;space-between;space-around;

flex-direction:

改变坐标轴：row;row-reverse;column;column-reverse;

.a{
  ul{
    list-style: none;
    border: 1px solid black;
    margin-top: 20px;
  }
  .b{
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
  }
  .b2{
    display: flex;
    justify-content: flex-start;
    flex-direction: row-reverse;
  }
  .b3{
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
  }
  .b4{
    display: flex;
    justify-content: flex-start;
    flex-direction: column-reverse;
  }
  .b5{
    display: flex;
    align-content: flex-start;
    flex-direction: column;
  }
  .b6{
    display: flex;
    align-content: flex-start;
    flex-direction: column-reverse;
  }
}

在这里插入图片描述

order：

设置弹性盒子元素的顺序：number；

align-items：

纵轴摆放（此元素内的每个单独的子元素）：flex-start;flex-end;center;space-between;space-around;

flex-wrap:

元素间隔及顺序：nowrap;wrap;wrap-reverse;

align-self:

元素纵向摆放（此元素本身的纵轴摆放）：flex-start;flex-end;center;space-between;space-around;

tip：

推荐大家这个网站：https://flexboxfroggy.com/，这是一个针对flex布局的小游戏，玩了之后应该会对flex布局有一个更好的理解

在这里插入图片描述

@规则（css指令）

  • @import “path” 导入另一个css文件

  • @charset “字符编码集” 声明使用的是特定的字符编码集，必须写于顶行

  • @font-face{} 创建字体指令，让用户强制临时下载此字体。iconfont就是基于此制作

    @font-face{
	font-family: '字体名称',
	src:url("字体文件路径")
}

堆叠上下文（stack context）

由某个元素创建，规定此区域中的内容在z轴上的排列顺序

html元素与设置了z-index数值（非auto）的定位元素会创建堆叠上下文

同一堆叠上下文元素在z轴的排列：
  1. 创建堆叠上下文的元素的背景与边框
  2. 堆叠级别为负值的堆叠上下文
  3. 常规流非定位的块盒
  4. 非定位的浮动盒
  5. 常规流非定位的行盒
  6. 任何z-index为auto的定位子元素，以及z-index为0的堆叠上下文
  7. 堆叠级别为正值的堆叠上下文

svg

scalable vector graphics，可缩放的矢量图

  • 该图片使用代码书写而成

  • 缩放不会失真

  • 内容轻量（不能适用于复杂的图片内容）

  • 可以直接嵌入网页（直接把svg代码加入源码即可）

    <div class="a">
    <svg height="1100" node-id="1" sillyvg="true" template-height="1100" template-width="1100" version="1.1" viewBox="0 0 1100 1100" width="1100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs node-id="183"><linearGradient gradientUnits="objectBoundingBox" id="linearGradient-1" node-id="5" spreadMethod="pad" x1="0.5" x2="0.5" y1="0.000000000000001373901" y2="1"><stop offset="0" stop-color="#ffd5d7"/><stop offset="1" stop-color="#fff3f2"/></linearGradient><linearGradient gradientUnits="objectBoundingBox" id="linearGradient-2" node-id="8" spreadMethod="pad" x1="0.071961135" x2="0.94699264" y1="0.4140801" y2="0.4140801"><stop offset="0" stop-color="#ff3a1c"/><stop offset="0.23685916" 后面省略
   </linearGradient></linearGradient></defs></svg>
</div>

    在这里插入图片描述

  • 可以适用img元素src导入，也可以由元素背景图片设置导入，等等。


http://www.kler.cn/a/348836.html

相关文章：

  • Gin中如何自定义Model
  • 面腾讯后台开发，二面挂掉了，，，
  • Netty基础
  • 2024.10月15日- Vue前置基础
  • django urlconf反向解析
  • 插件生成XML
  • 尚硅谷rabbitmq 2024 集群ui 第49节 答疑一
  • 【通过el-breadcrumb实现动态面包屑】
  • （1）发布自己的python包
  • 如何在PHP中强制转换类型？
  • 熟练使用Spring Boot、Spring Cloud Alibaba微服务开发框架，并深入理解其原理 学习要求
  • Spring Cloud Alibaba 技术栈与概要说明
  • COD深度学习模型设计中，可以将各个模块归为这四大类。
  • VMware设置虚拟机与物理机在同一网段
  • 链表Set_LinkList（建立）
  • UE5 圆周运动、贝塞尔曲线运动、贝塞尔曲线点
  • 查看系统服务
  • SpringBoot驱动的飘香水果购物网站：设计与实现
  • 单片机原理与技术
  • SpringBoot驱动的智能健康推荐系统