：display:inline-bloak；使行内元素具有块级元素特性、使块级元素具有行内元素特性； 1 基础css布局 1.1 position定位 position用于规定如div等元素的定位方法的类型...; } 1.1.4 absolute定位方式 绝对定位，根据外面一层包着的元素来定位（relative)，左啊还是右啊，如果外面没有那就是html元素，最大的那个咯。...DOCTYPE html> html> css浮动 <...3.2 教程文档小结 3.2.1 基本概念 容器和属性 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z1bGM4dl-1626658206875)(https://i.loli.net...将覆盖容器的 align-items 属性所设置的默认对齐方式。 3.3 flex布局应用 3.3.0 实例代码运行效果图 3.3.1 实例HTML源码 <!
至于学习路线，我这里列一下css的学习脑图 在HTML怎么使用CSS 一般有两种：内联样式和外部样式表 内联样式是什么，就是直接在HTML标签中使用style属性来定义元素样式： 例如 css的文件中，在HTML头部区域添加一个link元素，应用创建的.css文件,这个方法经常用。...背景颜色 background-color:blue； 字体大小 Font-size：20px； 文本对齐方式： text-align: center;（居中对齐） 3、盒子模型 就是把HTML当成一个大房间...例如，以下代码将一个div元素的宽度设置为500像素，高度设置为300像素： div { width: 500px; height: 300px; } 边框：border属性用于定义HTML元素的边框样式...>3div> div class="这是grid布局">4div> div> 以上是三种基本布局方式，还有其他的布局，咱们后面再慢慢来讲。
浮动的特性 浮动的元素的对齐 浮动的元素排列位置 为什么要清除浮动 清除浮动本质 清除浮动的方法 使用after伪元素清除浮动 # CSS 布局的三种机制 网页布局的核心——就是用 CSS 来摆放盒子。...在CSS中，通过float属性来定义浮动，其基本语法格式如下： 选择器{ float:属性值; } 属性值 描述 none 元素不浮动（默认值） left 元素向左浮动 right 元素向右浮动...# 浮动的元素排列位置 浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。...如果浮动一开始就是一个美丽的错误，那么请用正确的方法挽救它。 # 清除浮动本质 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。...在CSS中，clear属性用于清除浮动，其基本语法格式如下： 选择器{ clear:属性值; } 属性值 描述 left 不允许左侧有浮动元素（清除左侧浮动的影响） right 不允许右侧有浮动元素
有开始标签和结束标签(又叫围堵标签)，支持正确的嵌套。...注意：HTML中不支持：空格、回车、制表符，他们都会被解析成一个空白字符 注意：空的html标签解释 没有内容的 HTML 元素被称为空元素。...在开始标签中添加斜杠，比如 ，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。...size 粗度 color 颜色 align 对齐方式 在 HTML 4.01 中，hr 元素的所有呈现属性均不被赞成使用...>div> 行级块标签 行内块标签 作用： (1) div>div> div+css
扩展如下图所示： 并且还实时根据用户选择的对齐方式，显示对应的CSS代码，方便我们可以直接拷贝代码使用。...Chrome插件开发基本知识 在应用商店中下载下来的插件基本上都是以.crx为文件后缀，该文件其实就是一个压缩包，包括插件所需要的html、css、javascript、图片资源等等文件。...它会根据控件类型自动选取正确的方法来更新元素。这里在select中使用v-model方法来监听选中的值。...为了能预览不同对齐的效果，先在CSS中写好和下拉框中值相同的对应的类名样式，这样当用户选中不同的值的时候能显示不同的效果。...对应到我们这个实例，就是当用户选择flexbox不同的对齐方式的时候，及时同步对应的CSS代码到代码预览区域。
前言 在阅读过程中可以把代码片复制到vscode上去浏览器看实际效果，更易理解喔 以及在看本篇之前需要有HTML的基础，详情请见【前端基础篇】HTML零基础速通 CSS介绍 什么是CSS CSS(Cascading...缺点是不能写太复杂的样式. 外部样式，html和css实现了完全的分离, 企业开发常⽤⽅式....选择器 选择器的功能 选中页面中指定的标签元素 要先选中元素, 才能设置元素的属性 选择器的种类 以下内容只是 CSS2 标准中支持的选择器, 在 CSS3 中还做出了一些补充, 后面会讲到一些...CSS 中使用 # 开头表示 id 选择器 id 选择器的值和 html 中某个元素的 id 值相同 html 的元素 id 不必带 # id 是唯一的, 不能被多个标签使用 (是和类选择器最大的区别...="three">上划线div> div class="four">删除线div> div> 例如 B 站这里的导航链接, 就是使用这个属性去的掉的下划线.
Chrome插件开发基本知识 在应用商店中下载下来的插件基本上都是以.crx为文件后缀，该文件其实就是一个压缩包，包括插件所需要的html、css、javascript、图片资源等等文件。...开发一个插件就跟我们平时做web开发流程没多大的区别，就是先搭好基本的页面，然后使用js来写交互逻辑等功能。...它会根据控件类型自动选取正确的方法来更新元素。这里在select中使用v-model方法来监听选中的值。...为了能预览不同对齐的效果，先在CSS中写好和下拉框中值相同的对应的类名样式，这样当用户选中不同的值的时候能显示不同的效果。...对应到我们这个实例，就是当用户选择flexbox不同的对齐方式的时候，及时同步对应的CSS代码到代码预览区域。
插件主要功能是根据用户选择的对齐方式，实时预览效果和显示对应的CSS代码，方便我们可以直接拷贝代码使用。...Chrome插件开发基本知识 在应用商店中下载下来的插件基本上都是以.crx为文件后缀，该文件其实就是一个压缩包，包括插件所需要的html、css、javascript、图片资源等等文件。...它会根据控件类型自动选取正确的方法来更新元素。这里在select中使用v-model方法来监听选中的值。...为了能预览不同对齐的效果，先在CSS中写好和下拉框中值相同的对应的类名样式，这样当用户选中不同的值的时候能显示不同的效果。...对应到我们这个实例，就是当用户选择flexbox不同的对齐方式的时候，及时同步对应的CSS代码到代码预览区域。
【题组一】 在前端项目开发中，如果需要修改页面结构，应该修改一下哪个文件（ ） A. css文件 B. html文件 C. scss文件 D. js文件 一个HTML页面，最基本的结构正确的是（） A...html> 下列选项中，不属于双标签的是( ) A. br B. p C. h1 D. b 下列关于html标签的关系描述正确的是（） A ....rgb(100%, 0, 0); D. color: #f00; 针对不同css引入方式，以下描述中不正确的是（ ） A....D. margin 下列选项中正确设置CSS3盒模型并且实际宽度是200px的div是( ) A. div { box-sizing:content-box;width:200px; height:100px...相对定位的元素保留自身在标准流中的位置，并且为绝对定位的子元素提供参考 关于绝对定位、固定定位、相对定位和静态定位，下列说法正确的是( ) A. 固定定位会参考设置了定位的父元素进行对齐 B.
Box: CSS布局的基本单位Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。 元素的类型和 display 属性，决定了这个 Box 的类型 。...清除浮动影响：当父元素内部有浮动的子元素时，父元素的高度可能会塌陷（无法正确包裹住浮动的子元素）。利用 BFC 可以解决这个问题 div class="float-box">div> div>html>父元素 .parent 通过触发 BFC，其高度能自适应浮动子元素的高度... html>在这个 段落中，几个 span 元素作为内联元素，在水平方向依次排列，并且通过 vertical-align: middle 设置了垂直方向的中部对齐方式.../div> div class="grid-item">6div> div>html>.grid-container 创建了 GFC，并定义了具体的网格结构
HTML为网页提供了一种结构性的标记方式，使得浏览器可以正确地解析和显示网页内容。 HTML的主要元素包括： 元素：包括段落、标题、链接、图像、列表等等。...HTML为这些元素提供了特定的标签，如、、、、等。 属性：这些是HTML元素中可以包含的额外信息，如链接的href属性，图像的src和alt属性等。...样式CSS：HTML5引入了内联样式（通过HTML元素直接包含的样式）和外部样式表（通过CSS文件定义的样式）两种方式来控制网页的外观和格式。...脚本JavaScript：HTML5支持通过JavaScript嵌入到网页中，使得网页可以具有交互性。 HTML文档的基本结构通常包括一个html>声明，一个html>元素，以及若干个和元素。其中，元素包含了网页的所有内容，如文本、图片、视频、音频、链接等等。
abbr >， 用来定义一个长单词的缩写 站">交流站 abbr的title属性表示需要缩略的所有内容，文本元素内容表示...块元素： 块元素，在浏览器中，通常是从新的一行开始和结束 内联元素： 内联元素在浏览器显示时，不会以新行开始 div >元素： div是块元素，主要用来组合其他HTML元素标签 div元素没有特殊含义...div和CSS一起使用，可以有效的设置样式属性 元素： HTML 元素是内联元素，可用作文本的容器 与CSS一起使用是，元素可用于部分文本设置样式属性 HTML 类：...对HTML进行(元素)分类（设置类），可以为元素的类定义CSS样式 ps：为相同的类设置相同的样式，或者为不同的类设置不同的样式 定义设置类（名）： class属性：可以为该标签设置类名...div >,标签是一种容器，都可以借由class属性进行类定义 HTML布局： HTML最常使用div >元素布局（通过CSS定位） HTML响应式设计： HTML框架：
div2发现上边的元素div1是标准流中的元素，因此div2的相对垂直位置不变，顶部仍然和div1元素的底部对齐。...div2发现上一个元素div1是标准流中的元素，因此div2相对垂直位置不变，与div1底部对齐。...(标准流中的元素)的底部对齐。 ...其实这种理解是不正确的，这样做没有任何效果。看小菜定论： 对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。 怎么理解呢？...为了减轻读者心理压力，本文没有任何CSS、HTML代码，因为现在很多教程上来就是一大堆CSS代码，看到就烦，别说细读了。 最后预祝读者阅读愉快，开心掌握知识。 参考
前端入门——CSS 1 CSS入门 1.1 初识CSS 1.1.1 概述 在学习了基本HTML标签和样式后，接下来学习前端开发的第二门技术。...外部样式表是指将CSS编写在扩展名为.css 的单独文件中，并从HTML 元素引用它，通常link标签编写在HTML 的head标签内部。...重点讲解： 选择器作为CSS的重要部分，这里强调基本选择器的使用和其他选择器的基本格式。...选择器的分类： 分类 名称 符号 作用 示例 基本选择器 元素选择器 标签名 基于标签名匹配元素 div{ } 类选择器 ....选择器是CSS的重要部分： 基本选择器：可以通过元素，类，id来选择元素。
通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。 CSS 语法 先来实例。...请务必使用正确的HTML标签，就h1-h6表示标题和p表示段落。 字体大小的值是可以绝对或相对的大小。...然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。...使用 clear 属性往文本中添加图片廊： .text_line { clear:both; } CSS 布局 - 水平 & 垂直对齐 元素居中对齐 要水平居中对齐一个元素(如 div), 可以使用...使用容器元素(如：div)来创建下拉菜单的内容，并放在任何你想放的位置上。 使用div元素来包裹这些元素，并使用CSS来设置下拉内容的样式。
-- bad --> div class="left">div> [强制] 元素 id 必须保证页面唯一。 解释： 同一个页面中，不同的元素包含相同的 id，不符合 id 的属性含义。...div> [建议] 在 CSS 可以实现相同需求的情况下不得使用表格进行布局。 解释： 在兼容性允许的情况下应尽量保持语义正确性。对网格对齐和拉伸性有严格要求的场景允许例外，如多列复杂表单。...示例： [建议] 在 html 标签上设置正确的 lang 属性。...如果正确指定了 form 元素的 action 属性和表单控件的 name 属性时，提交仍可继续进行。...>{$item.name} {/foreach} div> {/if} [建议] 模板代码应以保证 HTML 单个标签语法的正确性为基本原则。
插件，html文件里右键选择open with live server 玩透 CSS 3 选择器，网页元素任意操作 选择网页某个元素 选择器名 { } 一 标签选择器 *：通配符，全部选择 h1：选择...，类似正则表达式 ^：开头包含 $：结尾包含 *：含字符串 ~：含单词 |：字符串开头或者用-连接 六 伪类选择器 选择元素的不同状态或者不确定存在的元素 a:link：a标签元素被点中后...3权重，写CSS样式更流畅 层叠样式，是不同的选择器效果附加到元素上。...：字符间距 word-spacing：单词间距 排版方向：writing-mode指定从哪里开始写 word的排版基本都可以实现 CSS3 盒子模型全面掌握 指定顺序：上右下左 auto：自动值...，table-cell 表格标题：caption标签 对齐：文本用文本对齐，表格用块对齐方式 表格颜色：与div差不多 表格背景：与div差不多 细线表格：border-collapse，设置
CSS字体样式属性调试工具 目标 应用 使用css字体样式完成对字体的设置 使用css外观属性给页面元素添加样式 使用常用的emment语法 能够使用开发人员工具代码调试 1.font字体 1.1...尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。 CSS Unicode字体 ? 为什么使用 Unicode字体 在 CSS 中设置字体名称，直接写中文是可以的。...方案二： 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。...#f00 代表红色 2.2 text-align:文本水平对齐方式 作用： text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性 其可用属性值如下：...通过开发人员工具小指针工具，查找页面元素 左侧是html页面结构，右侧是css样式 小技巧： ctrl+滚轮 可以 放大开发者工具代码大小。 左边是HTML元素结构 右边是CSS样式。
html,css,js，还停留在初级阶段是的时候，前端工程化还不存在的时候，jqery还在统治江湖的时候，以及这张图还在大火的时候，额！...我么们想要实现两个div一排显示除了行内块元素以外，只能用这让人又爱又恨的float float float 属性定义元素在哪个方向浮动。...以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。...由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。...特别是上下边的padding和margin不能正确显示。 4、如果前面的元素设置了浮动，那后面的元素就有可能产生异位的现象。 如图所示，由于元素1浮动了，脱离文档流，导致元素2上去了 ?
green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。...（两端对齐） 例子： div>[站外图片上传中……(3)]div> 此时在嵌入式样式中应这样写： div{ text-align:xxx; } 解释： 该属性通过指定行框与哪个点对齐...，从而设置块级元素内文本的水平对齐方式。...一般来说，把各个元素的内边距和外边距 浮动 因为 div 元素是块级元素，独占一行的。如何在一行显示多个 div 元素？显然默认的标准流已经无法满足需求，这就要用到浮动。...布局初探 布局是我们书写整个网页的基本，就是把整个页面的框架先打好，例如我们现实生活中房子 装潢的时候就有布局的概念，我们网页也是的，一个网页可以看成是由几个不同，这些组成部分我们可以使用 div
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
