为什么会导致这样的情况发生呢，原因很简单，因为后台管理系统主要是给工作人员去做系统维护的，比如一个新闻发布网站，工作人员要发布一条新闻，那么就得登录后台管理系统，进入一个什么新闻管理的菜单，这些操作注重的是简单...原来，span是一个行内元素，而只有块级元素和行内块级元素才能够有自己的宽高，所以，我们给行内元素添加宽度和高度是没有效果的。...P元素和div元素竟然这样，听说还有程序员不知道！ p元素是一个块级元素，所谓块级元素，就是那种会独自占满一行的元素，还有div也是块级元素。先来个例子吧。我现在要在B区域加一个P元素： ?...那么，在我们开发网页的时候，我们肯定不希望这样的事情发生吧，还记得我们当初采用浮动布局的目的是什么吗，是不是要让几个块级元素并排显示呀？...有一个办法就是在浮动定位的最后一个元素后面，加上一个空元素，比如div元素，里面啥也不写，然后加上一个叫做clear:both的样式，那么，浮动就被清除了。 ?
关键词分析和选择是SEO最重要的工作之一。...为什么要初始化样式？ 由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间的显示差异 但是初始化CSS会对搜索引擎优化造成小影响 34. BFC是什么?...（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。 （3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。...position的值， relative和absolute定位原点是？ 1.block 像块类型元素一样显示。 none 缺省值。向行内元素类型一样显示。...彻底的隐藏元素包括位置也不在占据 inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。 list-item 象块类型元素一样显示，并添加样式列表标记。
CSS复合选择器 目标 理解 理解css复合选择器分别的应用场景 应用 使用后代选择器给元素添加样式 使用并集选择器给元素添加样式 使用伪类选择器 为什么要学习css复合选择器 CSS选择器分为...行内块元素的特点： （1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个 （2）默认宽度就是它本身内容的宽度。...它本身内容的宽度 容纳文本或则其他行内元素 行内块元素 一行放多个行内块元素 可以设置宽度和高度 它本身内容的宽度 2.6 标签显示模式转换 display 块转行内：display:inline...; 行内转块：display:block; 块、行内元素转换为行内块： display: inline-block; 此阶段，我们只需关心这三个，其他的是我们后面的工作。...那个样式离着结构近，就执行那个样式。 样式不冲突，不会层叠 CSS层叠性最后的执行口诀： 长江后浪推前浪，前浪死在沙滩上。 5.2 CSS继承性 ?
block 象块类型元素一样显示。 none 缺省值。象行内元素类型一样显示。 inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。...list-item 象块类型元素一样显示，并添加样式列表标记。...table 此元素会作为块级表格来显示 inherit 规定应该从父元素继承 display 属性的值 position的值relative和absolute定位原点是？...最简单的初始化方法： * {padding: 0; margin: 0;} （强烈不建议） 淘宝的样式初始化代码： body, h1, h2, h3, h4, h5, h6, hr, p, blockquote...为什么呢？ margin和padding分别适合什么场景使用？ 抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题] 元素竖向的百分比设定是相对于容器的高度吗？ 全屏滚动的原理是什么？
block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。 none 缺省值。象行内元素类型一样显示。 inline 行内元素类型。...默认宽度为内容宽度，不可设置宽高，同行显示。 inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。 list-item 象块类型元素一样显示，并添加样式列表标记。...* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。...最简单的初始化方法： * {padding: 0; margin: 0;} （强烈不建议） 淘宝的样式初始化代码： body, h1, h2, h3, h4, h5, h6, hr, p,blockquote...样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。 只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。
HTML 块和内联 在 HTML 中，您主要会遇到两种类型的 HTML 元素： 块元素用于通过将内容划分为连贯的块来构造页面的主要部分。...p>如果感兴趣，可以点击这里来访问我的主页p> 开始和结束标签 所有块级元素都有一个开始和结束标签。...p> p> 有些人非常勤奋，别人休息和娱乐的时候，都在工作学习。...>）都是 的后代； 块元素和内联元素嵌套 块元素可以包含块元素或内联元素。...为什么不直接在 HTML 中设置样式？ 因为我们要把内容和其表示形式分开。这样做的好处显而易见。 首先是可阅读性变高了，有哪些元素，以及元素哪些属性一目了然，也利于分别维护和修改。
「学习笔记」CSS基础 CSS构造块 「1. HTML的局限性」 HTML满足不了设计者的需求，可以将网页结构与样式相分离，这样就可以在不更改网页结构的前提下，更换网站的样式。...字体粗细 记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位 font-style 字体样式 记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用...那个样式离着结构近，就执行那个样式。 样式不冲突，不会层叠。 「2. CSS 继承性」 -概念： 子标签会继承父标签的某些样式，如文本颜色和字号。...属性值 描述 visible 不剪切内容也不添加滚动条 hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll 不管超出内容否，总是显示滚动条 auto 超出自动显示滚动条，不超出不显示滚动条...为什么需要精灵技术：为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。
一 CSS CSS是Cascading Style Sheets的缩写，层叠样式表，用来控制网页数据的显示，可以使网页的显示与数据内容分离。...二 引入方式 （1）行内式：在标记的style属性中设置CSS样式，不推荐使用。 和上图一致； 为什么用Chrome浏览器和IE都不能显示，但在Windows Edge浏览器中可以。推荐使用这种方式。 块级元素可以嵌套内联元素或者某些块级元素，内联元素不能包含块级元素而只能包含其他内联元素； 2. h1, h2, h3, h4, h5, h6 p, dt这些块级元素只能包含内联元素； 3. li
但大多数情况下，一个语义化元素即使其语义再不贴切，也比用 div 强，div 标签只代表 “一块区域”。 元素的默认样式 是什么决定了元素的样式？为什么有的元素独占一行，而有的元素能共处一行？ ?...article、div、li、ul 以及 p 标签都是块级元素。 注意，在上面的例子中，为什么即使 img 标签是行内元素，头像图片依然独占一行？因为它下方的 div 是块级元素。...此空间的大小也由默认样式控制：p 标签的顶部和底部都有 margin。 你也会注意到按钮列表的圆点，以及列表的缩进行为。这些也都是默认样式。我们马上就要修改这些默认样式了。...如果我们用浏览器调试工具将元素高亮显示，就会发现 p 和 ul 元素有默认的上下 margin（在 Chrome 的调试工具中，margin 以橙色显示，而 padding 以绿色显示）： ?...你可以恣意发挥，像给任何其他元素设置样式一样。伪元素用来实现标记（badge）、消息提醒或其他小花样最合适不过了。 图标按钮 还有一项工作要做，那就是用图标替换按钮。
=“类名1 类名2”>段落内容p> 那为什么不把这两个类选择器里的样式都合到一个类选择器里呐?...:选择所有符合条件的所有后代,这里的ul和li都可以不写,但是建议一层一层写上 子选择器:只选择符合条件的所有儿子 P101.并集选择器 并集选择器可以选择多组标签,同时为他们定义相同的样式...元素显示模式的分类 元素显示模式的转换 一.元素显示模式的定义和分类 1.定义 定义:元素(标签)显示的方式 html元素类型分类:块元素和行内元素 2.分类 a.块元素 块元素:比如div...特殊的:块元素-p和h这种内部只能放文本的块元素中不能再放块元素....样式不冲突,不会覆盖 样式冲突,就近原则 div { height: 500px;/*不冲突*/ width: 700px;/*不冲突*/
web标准简单来说可以分为结构、表现和行为，其中结构主要是有HTML标签组成，或者通俗点来讲，在页面Body中我们写入的标签都是为了页面的结构，表现指css样式表，通过css可使页面的结构标签更具美感，...②对于css和js，尽量使用外链css样式表和js脚本，使结构，表现和行为分为三块，提高页面渲染速度，提高用户体验，尽量少用行间样式表，使结构与表现分离，标签的id和class等属性名要做到见文知意。...块级元素有哪些?CSS的盒模型?...块级元素：div p h1 h2 h3 h4 form ul 行内元素: a b br i span input select Css盒模型:content（内容），border（边框） ,margin...标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。 3. ::before 和 :after中双冒号和单冒号有什么区别？...6.为什么会出现浮动？什么时候需要清除浮动？清除浮动的方式有哪些？ 浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。...浮动元素会漂浮在文档流的块框上。...8.前端项目中为什么要初始化CSS样式？ 因为浏览器的兼容问题，不同浏览器对标签的默认值是不同的，如果没有对浏览器的CSS初始化，会造成相同页面在不同浏览器的显示存在差异。...9.页面导入样式时，使用link和@import有什么区别？
说明他们的作用 block 象块类型元素一样显示。 none 缺省值。象行内元素类型一样显示。...inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。 list-item 象块类型元素一样显示，并添加样式列表标记。...table 此元素会作为块级表格来显示 inherit 规定应该从父元素继承 display 属性的值 position的值relative和absolute定位原点是？...行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了 为什么要初始化CSS样式 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的...px 相对于显示器屏幕分辨率，无法用浏览器字体放大功能 em 值并不是固定的，会继承父级的字体大小： em = 像素值 / 父级font-size 解释下什么是浮动和它的工作原理？
DOCTYPE> 声明表示文档类型，并帮助浏览器正确显示网页。它只出现一次，在页面顶部（在任何HTML标记之前）。 声明不区分大小写。块。说明：HTML 段落是通过 p> 标签来定义的。浏览器会自动地在段落的前后添加空行。（p> 是块级元素）案例： 元素中的文本以固定宽度字体显示（通常为 Courier），并保留空格和换行符:效果如下:图片HTML 链接说明：HTML 链接是通过 标签来定义的。案例：显示HTML元素的样式，这就是他的主要作用。那么在HTML中，还可以通过style属性来完成样式的修改，本篇做几个简单的例子。其实，在实际开发中，样式是专由CSS负责。...也就是说HTML是内容，CSS是控制内容如何显示，比如颜色、字体、布局等等，实际开发中，内容和样式的控制是分离的。小栗子：改变字体颜色和大小设置 HTML 元素的样式，可以通过 style 属性完成。
; 1、特征： 1.1 块级元素在一行显示 （得到内联元素的属性） 1.2 内联元素支持宽高 （得到块的属性）...> 父级元素宽高 1.4 p包含块级元素标签。...此时IE6浏览器渲染会出现：自动生成div的兄弟节点P，且p标签不再包含div，布局乱套了 p> p> 1.5 总结用于不能包含块级元素的特殊块级元素的标签...> 父级元素宽高 1.4 p包含块级元素标签。...此时IE6浏览器渲染会出现：自动生成div的兄弟节点P，且p标签不再包含div，布局乱套了 p> p> 1.5 总结用于不能包含块级元素的特殊块级元素的标签
链接不会显示，但此文字会有跳转功能 06-绝对和相对路径 绝对路径 Windows系统下的文件绝对路径: C:\Program Files\feiq\RecvFace\xxx.pngMac系统下的文件绝对路径.../最多用两个不要多写 07-常用标签02 p 段落标签 br 换行标签 字符实体 空格 < < 小于号 大于号 & &字符实体 div块标签 span标签 08-常用标签小结 标题 a标签 链接 img 图片标签 scr alt title p 标签 br 换行 div 块标签 span 圈住一块文字 < < 空格 & & 今日头条界面内容展示...CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率.../css/main.css"> CSS书写方式小结 临时设置某一个标签的样式，或测试等可以选择行内式网站首页用嵌入式，优点加载快，网页显示快 工作中常用外链式，其他界面，
显示效果如下。 ? 可以看到，标题有了，但是没有居中，段落也有了，但是并不是一行行显示的。这是因为HTML只是告诉了浏览器这是什么，并未给的显示的具体细节，这需要样式表来支持。...当然也可以使用CSS来覆盖任何元素的大小与样式。 使用p>元素来创建段落，浏览器在显示段落的时候，通常会空一行。 使用元素来创建换行，它后面的内容会换行显示。它没有对应的闭标签。...这样就不会自动换行，以及不忽略多个空格。HTML的注释是从结束。 在内的所有元素可以分为两类。 块级元素：块级元素会在它的开始和结束都有一个换行符。...例如,,p>等。 行内元素：它不会引起浏览器换行显示，它作用于本行之内。例如,,等。 严格意义上，行内元素不能包含块级元素。并且只能位于块级元素内。...同时块级元素可以包含其他块级元素，也可以包含行内元素。 加上背景图片就漂亮多了。 ? HTML是用来表达结构的，或者表达一些简单的样式。这是HTML的主要工作。样式的工作交给了CSS。
保持不同类型代码的分离和纯净使处理该代码的任何人工作更为容易。 您唯一可能需要使用内联样式是当您的工作环境真的非常受限（也许您的CMS只允许您编辑 HTML 的 body）。...---- CSS如何工作 当浏览器显示文档时，它必须将文档的内容与其样式信息结合。它分两个阶段处理文档： 浏览器将 HTML 和 CSS 转化成 DOM （文档对象模型）。...它把文档内容和其样式结合在一起。 浏览器显示 DOM 的内容。 ? ---- DOM是什么 HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。它是一个抽象概念。(????)...CSS声明块 声明按块分组，每一组声明都用一对大括号包裹，用 ({) 开始，用 (}) 结束。 声明块里的每一个声明必须用半角分号（;）分隔，否则代码会不生效（至少不会按预期结果生效）。...下表显示了几个示例。试着通过这些，并确保你理解他们为什么具有我们给予他们的专用性。
学习目标 三种样式表的书写位置和优缺点 标签的三种显示模式和转换 复合选择器 背景属性 css的三大特性 样式表的书写位置 样式表可以有三种书写方式，分别分为 内嵌式样式表 外链式样式表 行内式样式表...较少 控制一个标签（少） 内嵌式样式表 部分结构和样式相分离 没有彻底分离 较多 控制一个页面（中） 外链式样式表 完全实现结构和样式相分离 需要引入 最多，强烈推荐 控制整个站点（多） 标签的三种显示模式...块级元素 可设置宽和高 独占一行 默认宽度是父级标签的宽度 块级元素一般用于包裹其他块级或者行内元素 p这种段落标签不要嵌套块级元素 代表标签：div,p,ol,li,ul,dt,dd,dl,header...都可以控制行内块元素） 允许其他的行内元素排一排 可以设置宽高 代表标签：input,img display:inline-block 注：一般实际工作来说标签不需要进行转换，因为大多数情况下都可以选择对应的标签来实现需求...复合选择器 交集选择器 既又原则 例如：p.box {} 既是p标签 又有box类名 并集选择器 将多个选择器合并在一起 例如： div,p,h1 {} 后代选择器 空格前面的元素和后面的元素必须是嵌套关系
使用表格布局 () 虽然现代网页通常不推荐使用表格布局，但了解如何使用 标签在某些情况下仍然非常重要。表格用于组织和展示数据。 代码示例： 样式也通过 CSS 进行了一定的优化，使其看起来更整洁。 说明： 当涉及到 和 的差异时，以下几点需要明确： 块级元素 vs....行内元素： 是一种块级元素，它会独占一整行，同时可以设置宽度、高度和边距等样式属性。它非常适合用于构建页面的大型结构，比如主体区域、容器和布局等。 ...它适合用于对文本或其他行内元素进行样式化、标记或包裹。 默认样式和布局： 元素的默认样式是块级显示，会以块的形式占用可用的空间。 ... 元素的默认样式是行内显示，它不会独占整行，仅占据其内容的宽度。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
