在要嵌套的段落前添加一个 >> 符号 注意 块引用可以包含其他 Markdown 格式的元素。...并非所有元素都可以使用，你需要进行实验以查看哪些元素有效 列表 1.有序列表，在每个列表项前添加数字并紧跟一个英文句点。...()中3.代码块，要创建代码块，请将代码块的每一行缩进至少四个空格或一个制表符，或者将其包裹在三个反引号 (```) 中 分割线 要创建分隔线，请在单独一行上使用三个或多个星号 (***)、破折号 (—...1 的解释 [^a]: 这里是脚注 2 的解释 特别注意 并非所有的地方都能放置脚注，除列表，块引号和表之类的其他元素之外的任何位置 任务列表 任务列表使您可以创建带有复选框的项目列表。...在支持任务列表的 Markdown 应用程序中，复选框将显示在内容旁边。要创建任务列表，请在任务列表项之前添加破折号 - 和方括号 [ ]，并在 [ ] 前面加上空格。
，还会学习到其他的 三、多媒体音频标签 多媒体标签有两个，分别是 音频 -- audio 视频 -- video audio 标签说明 可以在不使用标签的情况下，也能够原生的支持音频格式文件的播放...谷歌浏览器把音频和视频标签的自动播放都禁止了 谷歌浏览器中视频添加 muted 标签可以自己播放 注意：重点记住使用方法以及自动播放即可，其他属性可以在使用时查找对应的手册 五、新增 input 标签...十二、伪元素选择器 伪类选择器 伪类选择器注意事项 before 和 after 必须有 content 属性 before 在内容前面，after 在内容后面 before 和 after 创建的是一个元素...，但是属于行内元素 创建出来的元素在 Dom 中查找不到，所以称为伪元素 伪元素和标签选择器一样，权重为 1 代码演示 div { width: 100px;...y) transform: translateX(n) transfrom: translateY(n) 重点知识点 2D 的移动主要是指 水平、垂直方向上的移动 translate 最大的优点就是不影响其他元素的位置
如果你想要英文字符也有中文字符的效果的话，在p使用“ word-break：break-all”。 <!...需要注意的是，图片显示完成后，img会成为“替换元素”，而替换元素是无法设置伪元素的，因为内容被图片替换掉了；还需要注意attr里面的变量不能加双引号。...，其他都是动态的；使用点的目的是语义化和低版本浏览器的兼容。 正在加载中... <!...利用保证金来改变尺寸，需要注意，改变尺寸的元素水平方向的尺寸不能是确定的。...如果使用padding留白，在Firefox和IE不会显示。
如下，我们在模拟的边框上加一个虚线的轮廓，其只是在外围包括了一层轮廓，并不影响布局。 ? 轮廓不影响布局 最后，内边距、边框和外边距都不是必需的，因此它们的默认值都是 0。...before textsome textafter text 3.1.2 盒子大小 默认情况下，元素盒子的width和height指的是内容区的宽高，即元素可渲染内容区的宽度和高度...最后，内边距、边框和外边框可以应用于元素的四边，也可以单独用于某一边。外边距甚至可以使用负值，从而使得元素在页面中移动。...甚至同一个元素的外边距也会折叠，如果存在一个空元素，只有外边距没有边框和内边距，此时自身的上下边距接触，发生折叠。 折叠后的外边距又接触其他元素的外边距，还会继续折叠。...只所以说设计之初是视口，是因为在后来引入了 transform 之后，当元素设置了 transfrom 属性后，会创建一个包含块，并且这个包含块会影响固定定位的子孙元素。
10、用纯CSS创建一个三角形的原理是什么？...* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。...不过浏览器需要同时支持旧的已经存在的伪元素写法， 比如:first-line、:first-letter、:before、:after等， 而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。...想让插入的内容出现在其它内容前，使用::before，否者，使用::after； 在代码顺序上，::after生成的内容也比::before生成的内容靠后。...自动变成了 display:block 30、怎么让Chrome支持小于12px 的文字？ （1）用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。
HTML && CSS HTML5 新特性、语义化 概念： HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构。...两者区别 1、广义： 其实要定义一个基准线，在此之上的增强叫做渐进增强，在此之下的兼容叫优雅降级 2、狭义： 渐进增强一般说的是使用CSS3技术，在不影响老浏览器的正常显示与使用情形下来增强体验...，而优雅降级则是体现html标签的语义，以便在js/css的加载失败/被禁用时，也不影响用户的相应功能。...*{margin:0;padding:0;} IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。...然后，可以通过设置垂直 或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是 否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
样式引入 可以从下拉框中选择样式名称，也可以直接输入样式名称： 只有定义在interpreter.css文件中的样式才会出现在下拉列表中 在其它样式文件中的名称只需要手工输入即可 通过@import规则引入的样式名称也不会出现在下拉列表中.../ModernUI/Styles/ModernUI.css"); @import引入的样式名称并不会出现在下拉框中； 3、创建客制化主题： 赋值现有的主题目录，如Default目录 重命名复制后的目录名称...::before和 ::after用法： ::before 定义元素之前添加内容。...id和类应该是小写的，应该使用破折号而不是下划线，例如:"label-left" 2、保持可读性，在不同的行中分开选择器和样式。...否则，始终使用十六进制格式或所需颜色的实际名称 12、使用注释CSS，就像任何其他语言一样，分段注释代码是个好主意。
注意： :before 和 :after 这两个伪元素，是在CSS2.1里新出现的。...起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before、::after。Sass、Less 是什么？为什么要使用他们？...一般使用伪元素的方式清除浮动：.clear::after{ content:''; display: block; clear:both;}clear属性只有块级元素才有效的，而::after等伪元素默认都是内联水平...}z-index属性在什么情况下会失效通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。...，所以上述操作不影响parent实例，所以输出结果不变；child1.show()，child1执行了change()方法后，发生了怎样的变化呢?
clear:both 父元素增肌伪类 ::after，设置{content:"",clear:both} css实现水平垂直居中 答案解析： 块级元素未知宽高情况下 利用弹性布局 .parent{...答案解析： link是XHML标签，除了加载css文件，还可以加载RSS得其他事务，而@import 只能加载css link无浏览器兼容问题，import在低版本浏览器下支持 link标签引用css文件的时候在页面载入同时加载...: 默认0，定义子元素相对于其他子元素在元素分配完还有剩余空间情况下的放大比例 flex-shrink:默认1，定义子元素相对于其他子元素在父元素空间不足时相对于其他子元素的缩放比例 flex-basis...这一方面解决了大文件不便维护的问题，另一方面也解决了一堆文件在加载时的性能问题 例如在css使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让我们的css更加简洁、适应性更强，代码直观...例如::before、::after在一些存在的元素添加内容，会以具体的UI显示出来，但是这些内容不会出现在dom 伪类 是表示已存在的某个元素处于某种状态，但是通过dom树又无法表示出不同状态下的样式
（2）盒模型排在第二位，因为它决定了组件的尺寸和位置。 （3）其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。 2.3 Example ?...3.2替代方法 （1）使用多个 元素 （2）通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件 （3）通过 Rails、Jekyll 或其他系统中提供过...七、简写形式的属性声明 7.1 滥用简写 在需要显示地设置所有值的情况下，应当尽量限制使用简写形式的属性声明。...这是因为虽然你可以使用嵌套，但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内（也就是后代选择器），并且存在多个需要嵌套的元素时才使用嵌套。 8.2 Example ?...（4）只有在必要的时候才将 class 限制在最近的父元素内（也就是后代选择器）（例如，不使用带前缀的 class 时 -- 前缀类似于命名空间）。 12.2 Example ?
在这种情况下，为了不影响到内存分配，会将对象从新生代空间移到老生代空间中。...bind 方法通过传入一个对象，返回一个 this 绑定了传入对象的新函数。这个函数的 this 指向除了使用 new 时会被改变，其他情况下都不会改变。...注意： :before 和 :after 这两个伪元素，是在CSS2.1里新出现的。...起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before、::after。...思路是先放大、后缩小：在目标元素的后面追加一个 ::after 伪元素，让这个元素布局为 absolute 之后、整个伸展开铺在目标元素上，然后把它的宽和高都设置为目标元素的两倍，border值设为 1px
在下面的示例中，我使用 attr() 函数使用其 data-value 属性来显示 span HTML 元素的 ::after 伪类的文本内容。...div中，CSS自动在每个h1标签前面添加数字，无需开发人员手动输入或使用JS。...非常适合在这样的情况下使用 .burn-color{ mix-blend-mode:color-burn; } 应用 CSS 后，最终结果如下所示。 5....仅在需要的地方向 PNG 添加阴影 要向元素添加阴影，我们通常使用 CSS 属性 box-shadow。此属性在元素的边框周围添加阴影。...CSS翻转 你可以使用带有缩放函数的变换属性在 CSS 中水平或垂直翻转图像。
Repaint——(重绘)是在一个元素的外观被改变，但没有改变布局的情况下发生。如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器repaint。...定位方案： （1）普通流（normal flow）按照html中的先后位置至上而下布局，行内元素水平排列 ，当前行被占满后换行，块级元素会被渲染为完整的新行。 （2）浮动（floats）。...比如:first-line、:first-letter、:before、:after等。 在css2之前用的是单冒号，之后css3使用时双冒号。...同理，after是在主体内容之后显示的。想让插入的内容出现在其它内容前，使用::before，之后使用::after；在代码顺序上，::after生成的内容也比::before生成的内容靠后。...30、怎么让Chrome支持小于12px 的文字？ 用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。 方法一：首先取消浏览器自动调整功能。
引言&概述 网页布局的本质： 使用 CSS 盒子模型来进行调整和定位。...： 1 、标准流作父元素，用于排列垂直位置 2 、浮动元素在标准流父元素内，用于排列水平位置 4. ...清除浮动 4.1 准备代码 4.2 引言 通常情况下，未设置高度的 标准流父元素，在子元素进行浮动时，会导致父元素失去子元素，高 度消失。 进而影响页面排版。...但会见到其他人的代码 中使用 但因为不会添加额外标签，很多美工人员用伪元素可以应对需求反复的修改，所以会见到其他人的 代码中使用 4.7 overflow:超出隐藏法 overflow...布局总结 网页布局中，行内元素 尤其是行内块元素，在布局上，无论垂直还是水平都容易操作。
，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成 margin，即外边距，在元素外创建额外的「空白」，空白通常指不能放其他元素的区域 标准盒模型 盒子总宽度 = width...，只需要考虑后代元素 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中 层叠上下文的创建（3类） 由一些CSS属性创建 「天生派」 「页面根元素天生具有层叠上下文...文件压缩 去除无用CSS 一种是不同元素或者其他情况下的重复代码 一种是整个页面内没有生效的CSS代码 「合理使用选择器」 不要嵌套使用过多复杂选择器，最好不要三层以上 使用id选择器就没必要再进行嵌套...元素的CSS具体发生什么改变，则决定属于上面哪种情况： 回流（又叫重排）：元素「位置、大小」发生变化导致其他节点联动，需要重新计算布局； 重绘：修改了一些不影响布局的「属性」，比如颜色； 直接合成：「合成层...「硬件加速」，可以让transform、opacity、filters这些动画不会引起回流重绘 在使用 JavaScript 「动态插入多个节点」时, 可以使用DocumentFragment.创建后一次插入
> 语法 margin: top right bottom left 上右下左> 外边距可以让设置了width的块级元素水平居中: > {margin: 0 auto} > 行内元素或行内快级元素水平居中...：float属性用于创建浮动层，将其移动到一边，直到左边缘或右边缘触及到包含块或另一个浮动框的边缘；浮动特性浮动元素会脱离标准流- 浮动的盒子不再保留原来的位置- 脱离了标准流的控制浮动元素会一行内显示...；- 浮动的盒子只会影响后面盒子的标准流，不会影响前面的标准流；div在服务的盒子前面，还是会独占一行；清除浮动很多情况下，父盒子不方便给高度，但子盒子浮动又不占有位置，最后父盒子的高度是0，就会影响到下面的标准流盒子...;这个时候就需要清除服务，就是清除浮动元素的影响；清除浮动后，父元素就会根据浮动的子元素自动计算高度；语法：图片清除浮动的方法：- 清除浮动的策略是闭合浮动，只让浮动在父元素内影响，不影响父盒子外面的盒子...,hidden 或scroll- 父元素添加：after伪类； 不需要添加额外标签，- 给父元素添加 双伪元素；before和after; 原理是在父盒子中的第一个元素和最后一个元素添加一个块级元素；图片
根据 DOM 树 和 CSSOM 规则树 构建生成 渲染树, 浏览器生成渲染树后，会很根据渲染树进行布局，确定 元素的大小 位置。 布局阶段结束后就是绘制内容显示在页面上。 ❞ 10....选择正在活动链接 :hover a:hover 把鼠标放在链接上的状态 关于 form 表单的伪类选择器 选择器 示例 示例说明 :focus input:focus 选择元素输入后具有焦点 :enabled...p::selection 被用户选取的部分 ::before p::before 在选择器前增加内容 ::after p::after 在选择器后增加内容 ❞ 3....CSS 样式权重 ❝css优先级规则： css选择规则的权重值不同时，权重值高的优先； css选择规则的权重值相同时，后定义的规则优先； css属性后面加 !...包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。 「元素在跨越特定阈值前为相对定位，之后为固定定位。」
audio 标签说明 可以在不使用标签的情况下，也能够原生的支持音频格式文件的播放， 但是：播放的格式是有限的。...谷歌浏览器把音频和视频标签的自动播放都禁止了 谷歌浏览器中视频添加muted属性就可以自己播放了 注意：重点记住使用方法及自动播放即可，其他属性在使用时查找对应的手册 「5....伪元素选择器」 伪元素选择器注意事项 before 和 after 必须有 content 属性 before 在内容前面，after 在内容后面 before 和 after 创建的是一个元素，但是属于行内元素...: translateX(n) transfrom: translateY(n) 重点知识点 2D的移动主要是指水平、垂直方向上的移动 translate最大的优点就是不影响其他元素的位置 translate...，100 % 是动画的完成，这样的规则就是动画序列 在 @keyframs中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
倡导的是结构、样式、行为分离 3.盒模型（Box Model） 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。...没有DOCTYPE的情况下使用怪异模式，IE也使用“IE盒模型”。在HTML页面声明 ，浏览器就会选择标准 w3c 盒子模型来呈现内容了。...还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。 但是在一种情况下，即使没有进行显式定义，也会创建块级元素。...也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。 块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。 行内框在一行中水平布置。...可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
