一、元素分类 特性展示 在此前的课程中，我们还有一些遗留问题没有解决，例如： 有些元素不管宽度多少，都是独立占一行显示，有些元素则可以共同占用一行显示; 有些元素可以设置宽度和高度，有些元素不能设置宽度和高度...我们来写一个实例，代码如下所示: 1 2 我是一个标题 3 我是一个标题 4 5 6 <img...二、浮动布局 了解了元素的分类之后，我们再来看下一个问题，我们之前讲解的盒子模型，都是用div作为容器来存放网页的内容，而div是块元素，那么如何让两个div在同一行显示呢，可以使用float属性来实现...，我们将两个div元素都设置float:left属性，这样两个div就可以在同一行显示了。...，使浮动元素后面的内容可以按正常的文档流布局，这样我们就可以看到h2标签成功第在菜单的下方显示了。
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有初始化CSS，往往会导致页面在不同浏览器之间出现差异。...例如都是块级元素，当显示这些元素中间的文本时，都将从新行中开始显示，其后的内容也将在新行中显示。 行内元素可以和其他行内元素位于同一行，在浏览器中显示时不会换行。...例如等，对于行内元素，不能设置其高度和宽度。 还有一种元素是行内块级元素，比如元素等。这些元素可以和其他行内元素位于同一行，同时可以设置其高度和宽度。...在同一个BFC中，两个毗邻的块级盒在垂直方向（和布局方向有关系）的 margin会发生折叠。 BFC决定元素如何对其内容进行布局，也决定与其他元素的关系和相互作用。 40、谈谈你对C规范的理解。...IFC中的线框一般左右都贴紧整个IFC，但是会被foat元素扰乱。同一个IFC下的多个线框高度不同。
1.浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同 问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。...碰到几率：20% 解决方案：使用float属性为img布局 备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。...解决方法：display：inline； 4 一个父标签与几个子标签嵌套，父标签不浮动，子标签float，子标签不撑开父的高度。...；} c 给父标签设置高度 5.两个块元素，竖向的margin值不增加，会重叠，其间距为最大margin值。...important 注明的css属性具有最高优先级(.abc{color:red !important;})。但在ie6中!important具有一个bug:在同一组css属性中，!
由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效....块级元素(block)特性： 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;...内联元素(inline)特性： 和相邻的内联元素在同一行; 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top...由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间的显示差异 但是初始化CSS会对搜索引擎优化造成小影响 BFC是什么?...选择符： 1.id选择器（ # myid） 2.类选择器（.myclassname） 3.标签选择器（div, h1, p） 4.相邻选择器（h1 + p） 5.子选择器（ul < li） 6.后代选择器
请看下面的实例： 实例 我是标题1 h1 我是标题2 h2 我是标题3 h3 我是标题4 h4 我是标题5 h5...您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。 定义列表：在这种类型的列表中，每个列表项可以包含 和 元素。...： 类 描述 实例 .lead 使段落突出显示 尝试一下 .small 设定小文本 (设置为父文本的 85% 大小) 尝试一下 .text-left 设定文本左对齐 尝试一下 .text-center...这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式) 尝试一下 .list-inline 将所有列表项放置同一行 尝试一下 .dl-horizontal 该类设置了浮动和偏移...，应用于 元素和 元素中，具体实现可以查看实例 尝试一下 .pre-scrollable 使 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条
块级元素(block)特性： 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;...内联元素(inline)特性： 和相邻的内联元素在同一行; 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top...原因是不同的浏览器对一些元素有不同的默认样式，如果你不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的性发生。 你可能会用Normalize来代替你的重置样式文件。...块级元素(block)特性： 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;... 内联元素(inline)特性： 和相邻的内联元素在同一行; 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top
伪类选择器 : 伪类指的是标签的不同状态: a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态 a:link...50%:基于字体大小的百分比 （文本垂直居中可以将行高和块的高度设置为相同值） vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效，不设置时默认以基线...dispaly属性 none block 设置成块级，可以设置长宽，独占一行 inline 设置成内联，长宽设置无效，大小由内容多少而定，不独占一行 inline-block 兼具块级和内联标签的特性...block元素可以设置width、height、margin、padding属性； inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化...如果内联元素是可替换元素（img，input，本身可以设置长和宽），不管怎么设置父元素的宽度和高度，而不设置img的宽和高时，img总是表现为其原始的宽和高。 <!
标签显示模式（display）重点 目标： 理解 标签的三种显示模式 三种显示模式的特点以及区别 理解三种显示模式的相互转化 应用 实现三种显示模式的相互转化 2.1 什么是标签显示模式...标签以什么方式进行显示，比如div 自己占一行， 比如span 一行可以放很多个 作用： 我们网页的标签非常多，再不同地方会用到不同类型的标签，以便更好的完成我们的网页。...2.5 三种模式总结区别 元素模式 元素排列 设置样式 默认宽度 包含 块级元素 一行只能放一个块级元素 可以设置宽度高度 容器的100% 容器级可以包含任何标签 行内元素 一行可以放多个行内元素 不可以直接设置宽度高度...行高和高度的三种关系 如果 行高 等 高度 文字会 垂直居中 如果行高 大于 高度 文字会 偏下 如果行高小于高度 文字会 偏上 4....概念： 定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时， 选择器相同，则执行层叠性 选择器不同，就会出现优先级的问题。 1).
block元素可以设置width、height、margin、padding属性； inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化...问题2：元素浮动造成的两个div覆盖或相互重叠如何解决。 （1）、左右结构div盒子重叠现象，一般是由于相邻两个DIV一个使用浮动一个没有使用浮动。...例如：下图例3 box1向右侧浮动，box2不设置clear属性时的示意图；例4中box1向右侧浮动，box2设置clear：right，表示右侧不允许出现浮动元素，则box2自动下移一行。 ?...这是相对定位的一个主要用法，图文混排。 ? 注意，标签中设置了position:relative;属性，不设置left，right和top，bottom的值，这些值则默认值为0。...注意，即使不设置值同样起到了相对定位作用，其子孙级别标签使用position:absolute;时同样会起到定位效果，position：relative的另一个主要用法：方便绝对定位元素找到参照物。
在同一界面中混合使用方角和圆角几乎总是比坚持使用其中一种看起来更糟糕。...系统需要包括 字体大小 字体重量 行高 颜色 外边距 内边距 宽度 高度 盒子阴影 边框半径 边框宽度 透明度 ......# 忽略少于五种重量的字体 一般来说， 有许多不同重量的字体往往比重量较少的字体更精心制作，更注重细节 # 优化可读性 避免使用 x 高度较短的浓缩字体作为主要用户界面文本 # 相信群众的智慧 如果一种字体很受欢迎..."很棒 "或 "很糟糕 "的标签 # 控制你的行长度 在为段落设计样式时，我们很容易犯一个错误，那就是使文字与布局相匹配，而不是努力创造最佳的阅读体验 为了获得最佳的阅读体验，请将段落宽度控制在每行...# 用色彩营造深度 一般来说（尤其是相同颜色的色调） ，浅色物体感觉离我们更近，深色物体感觉离我们更远 # 使用实体阴影 使用垂直偏移的短阴影，且完全没有模糊半径 # 重叠元素创建图层 创造深度的最有效方法之一就是将不同的元素重叠在一起
我们知道有一个已知的英雄，但在做更多工作之前，并不知道英雄出现在画面的什么位置。 输入画面看起来是这样的： ? 为了获取英雄的位置，我们可以利用它头上有个形状固定且不旋转的红条，也就是血槽这一事实。...我先尝试了用Inception v3模型进行迁移学习，来训练YOLO网络。网络在亚马逊AWS云p2.xlarge机器上，用每一类英雄1000张图的训练数据集训练48小时。...比方下面这段视频，画面中有两个英雄，开始他们相互接近，然后又各自逃开。 ? 当两个英雄重叠时，AI有时只能辨认出一个英雄，而不是两个。坦白说这也不奇怪，毕竟人眼可能都很难弄清楚实际情况。...当两个英雄重叠时，AI有可能会把他们认成一个完全不同的英雄。这显然是一个不好的结果。...只在标准的云平台上就能做到这些。 差的一面 还处理不好位置重叠的英雄。 现在速度虽然不慢了，但想要达到每秒60帧的标准，必须使用多个GPU交错输出。 接下来，还想尝试不同的网络，不同类型的游戏。
这样做给了Baldur“一些上下文信息，以说，‘关于状态，关于你正在回答我的问题的问题，这里有更多的信息，’”布伦说。“当我们给它额外的信息时，它能够更好地回答问题。...Thor“使用大型语言模型尝试预测证明的下一个可能步骤，但它还使用了一些被称为‘锤子’的东西，”布伦说。“锤子是这些数学工具，它们说，‘我知道一堆数学标签。让我尝试一下。...让我试试这个，试试这个，试试这个。’就像用锤子敲击问题，尝试不同的方法，看看是否有效。它同时尝试所有这些方法。”...Baldur方法不同之处在于它创建整个证明而不是逐行进行，尽管存在重叠，他说：“有一些它们都能证明的事情。但通过尝试一次性生成整个证明，我们能够证明一组不同的事情，而不是尝试逐步生成一件事。”...这种迭代的方法很可能真正简化开发人员的工作，但也使模型能够证明它自己无法完成的事情。” 这创造了一种半自动化的方法。 “原始的迭代方法不涉及开发人员，”他说。
上图中可以看到，h1标签是块级元素，占据了整行，span标签是行内元素，只占据内容这一部分。 现在我们尝试给两个标签设置宽高。效果如下： ?...上图中，我们尝试给两个标签设置宽高，但发现，宽高属性只对块级元素h1生效。于是我们可以做出如下总结。 行内元素和块级元素的区别：（非常重要） 行内元素： 与其他行内元素并排； 不能设置宽、高。...块级元素：所有的容器级标签都是块级元素，还有p标签。 我们把上面的分类画一个图，即可一目了然： ? 行内元素和块级元素的相互转换 我们可以通过display属性将块级元素和行内元素进行相互转换。...（3）此时，我么可以在div的里面放一个div（作为内墙），就可以让父亲div恢复高度： ? 于是，我们采用内墙法解决前言中的问题： ?...margin相关 margin塌陷/margin重叠 标准文档流中，竖直方向的margin不叠加，取较大的值作为margin(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。
h1{ color: cyan; } class选择器 （.class）通过标签的class 属性选择。...设置垂直居中：若文字是单行的，则行高属性值 = 自身高度属性值。...是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个标签上，这就是样式冲突。...一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后样式为准。 样式冲突，遵循的原则是就近原则。 样式不冲突，不会层叠。...0 auto; 清除浮动元素的影响： 设置一个父元素，使父元素的高度保持正常 1.
固定定位 fixed： 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定 位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。...(div, h1,p) 相邻选择器（h1 + p） 子选择器(ul > li) 后代选择器(li a) 通配符选择器(*) 优先级： !...属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反 BFC的区域不会与float...box重叠 BFC是一个独立容器，容器里面的子元素不会影响到外面的元素 计算BFC的高度时，浮动元素也参与计算高度 元素的类型和display属性，决定了这个Box的类型。...的值不为visible BFC的使用场景 去除边距重叠现象 清除浮动（让父元素的高度包含子浮动元素） 避免某元素被浮动元素覆盖 避免多列布局由于宽度计算四舍五入而自动换行 3.
编入索引：Google 会访问它通过抓取得知的网页，并会尝试分析每个网页的主题。Google 会分析网页中的内容、图片和视频文件，尝试了解网页的主题。...比如，#f09和#ff0099表示同一颜色。 四位数符号（#RGBA）是八位数形式（#RRGGBBAA）的减缩版。 比如，#0f38和#00ff3388表示相同颜色。...每一个数字表示一个重量 normal :等于 400` bold :等于 700` strong、b、h1~h6等标签的 font-weight 默认就是bold 2.3. font-style(一般...(常用) 两个基线(baseline)距离 一行文本 -> line-height 行高 - 文本高度 = 行距 line-height 用于设置文本的行高 行高可以先简单理解为一行文字所占据的高度...元素的整体高度 line-height :元素中每一行文字所占据的高度 应用实例: 假设 div 中只有一行文字，如何让这行文字在div内部垂直居中 让 line-height 等同于 height
浏览器（也称为网络浏览器或互联网浏览器）是安装在我们设备上的软件应用程序，使我们能够访问万维网。在阅读这篇文字时，你实际上正在使用一个浏览器。...父 div 占据视口宽度的 100%和高度的 50%。...当文档的各个部分绘制在不同的层中并相互重叠时，合成是必要的，以确保它们以正确的顺序绘制到屏幕上并且内容被正确呈现。通常，只有特定的任务会被重定向到 GPU，而这些任务可以由合成器线程单独处理。...实际上有一些特定的属性和元素表示新层的创建。...这就是为什么在处理 DOM 更改时我们应该尝试优化它们（我将在我的 DOM 系列的未来一篇文章中详细讨论这一点）。 有些动作只会触发重绘，有些动作会同时触发回流和重绘。
HTML简介（废话） HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。...超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。...这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。...border 设置表格标签 width 设置表格宽度 height 设置表格高度 align 设置表格相对于页面的对齐方式 cellspacing 设置单元格间距 tr 是行标签 th 是表头标签 td...标签默认独占一行 span 标签它的长度是封装数据的长度 p 段落标签默认会在段落的上方或下方各空出一行来（如果已有就不再空） 看下边： div 标签1 div 标签2 span
hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。...块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。...== visible 规则: 属于同一个 BFC 的两个相邻 Box 垂直排列 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠 BFC 中子元素的 margin box 的左边，...div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/ overflow: hidden; //此时已经触发了BFC属性。...行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
