HTML与CSS问题合集

发表于 | 更新于 | 分类于 | | 阅读次数 |

整理收集的HTML和CSS相关问题。

HTML和CSS相关问题合集

display: none 与 visibility: hidden 的区别

  1. display: none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。visibility: hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

  2. display: none 是非继承属性，子孙节点消失是由于元素从渲染树中消失造成，通过修改子孙节点的属性无法显示；visibility: hidden 是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility: visible，可以让子孙节点显示。

  3. display: none会产生回流（reflow）与重绘（repaint），影响前端性能；visibility: hidden没有这个问题。

  1. link属于HTML标签，而@import是CSS提供的；导入CSS的语法不同：
1
<link rel="stylesheet" href="style.css" type="text/css"/>
1
2
3
<style type="text/css">
  @import url("style.css");
</style>

  1. 页面被加载时，link会顺序加载，而@import引用的CSS文件会等到HTML页面被加载完再加载。

  2. @import只在IE5以上才能识别，而link是HTML标签，无兼容问题。

CSS 的三种定位机制

position属性

可取的值 表现
static 默认。块级元素（矩形框），于文档流中；行级元素（一至多个行框），于父元素中
relative 相对于元素自身偏移，它原本所占的空间仍保留
absolute 相对于其包含块定位。无已定位祖先元素，以<html>为偏移参照基准；有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准。产生滚动条时随滚动条变化。(相对于 static 定位以外的第一个父元素进行定位)
fixed 类似于absolute，不过其包含块是视窗本身，即相对于视窗定位。不随滚动条变化，且被它遮盖的元素，可以从其下穿过

static和relative：定位后仍处于标准文档流（元素原本所占的空间仍保留）。

absolute和fixed（绝对定位）：定位后完全脱离文档流（元素框从文档流完全删除，元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样）。

float: left / float: right（浮动） 脱离文档流

relative（相对定位）：不会脱离文档流。

relative，absolute和fixed：随即拥有偏移属性和z-index属性

一、标准文档流

从左到右 从上到下

块级元素（从左到右撑满页面，独占一行，触碰到页面边缘时，会自动换行）

行级元素（不会改变HTML文档结构）

块级元素和行级元素都是盒子模型

相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

二、浮动

元素会左移，或右移，直至触碰到容器或另一个浮动框为止

设置了浮动的元素，脱离了文档流

浮动的影响：（联想设置 <li> 元素的float属性时）相邻元素上移，占据其后位置，紧挨着它，并排显示

怎么清除浮动？对谁清除浮动？

浮动导致的问题：父元素高度无法自动扩展；相邻元素上移，填满空隙，打乱布局

对设置了float属性的元素的父元素需要清除浮动，否则父元素会因为子元素的浮动而撑不开高度，导致其背景颜色、边框、父级子级的margin padding不能正常显示。有三种方法清除浮动：

  • 若已知浮动元素的高度，则直接设置其父元素的高度；

  • 在父元素结束前新建一个盒子并添加样式：clear:both;，或将该清理样式加在现有的合适的元素上。

    原理：clear属性是指元素的两边或某一侧不能有浮动元素，为了达到这个目的，在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了clear属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。最终使这个元素被挤到浮动元素的下外边距以下。

  • 父元素样式添加：overflow: hidden/auto;

    原理：overflow需要父元素紧贴子元素，所以父元素需要撑大来包裹子元素。

    当设置成auto时，如果父元素内容过多，会出现滚动条；而使用hidden时，不能和position配合使用，因为超出的尺寸的会被隐藏。

    这个方法不适用于 IE6/7，需要加上一个IE特有的属性zoom:1

  • 以浮制浮（父级同时浮动）：缺点是需要给每个浮动元素父级添加浮动，浮动多了容易出现问题。

  • 万能伪类清除法：在父元素上添加伪类：

1
2
3
4
5
6
7
8
9
10
11
12
.clearfix:after{
  content: "020";  //或 "."
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
}
.clearfix {
  /* 为了兼容IE6,7 触发 hasLayout */ 
  zoom: 1; 
}

通过上面的例子，我们不难发现清除浮动的方法可以分成两类：

一是利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both属性的空 div来闭合元素，其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。

二是触发浮动元素父元素的 BFC，使到该父元素可以包含浮动元素。

三、绝对定位

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

盒模型

主要是注意IE盒模型和W3C盒模型的区别（width和height属性的计算规则不同）：

盒模型

box-sizing: content-box; 设置为W3C标准盒模型，width即content的width。

box-sizing: border-box; 设置为IE盒模型，width包括了padding和border。

IE8及其以上为W3C盒子模型。IE8以下的为IE 盒子模型。

CSS 选择器及优先级，可继承样式，CSS3新增伪类

CSS选择器

  1. id选择器(#myid)
  2. 类选择器(.myclassname)
  3. 标签选择器(div, h1, p)
  4. 相邻选择器(h1 + p)
  5. 子选择器(ul > li)
  6. 后代选择器(li a)
  7. 通配符选择器( * )
  8. 属性选择器(a[rel = "external"])
  9. 伪类选择器(a:hover, li:nth-child)

可继承的样式

font-size, font-family, color, text-indent

不可继承的样式

border, padding, margin, width, height.

优先级算法

  1. !important > 内联 > id > class > tag > * > inherite > browser default

  2. 载入样式以最后载入的定位为准;

  3. 优先级就近原则，同权重情况下样式定义最近者为准;

CSS3新增伪类举例

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

:enabled :disabled 控制表单控件的禁用状态。

:checked 单选框或复选框被选中。

HTML5 和 CSS3 新特性

HTML5

canvas video audio

localStorage, sessionStorage

语义化更好的元素：article、footer、header、nav、section

表单控件：calendar、date、time、email、url、search, multiple, placeholder

window.postMessage

CSS3

  1. 增加了更多的CSS选择器：属性选择器[att*=val], [att^=val], [att$=val]；结构性伪类选择器:root, :not(h1), :empty， first-child, nth-last-child, E:hover;

  2. 文字特效：阴影text-shadow, 换行word-break, url自动换行: word-wrap:break-word;

  3. 盒样式(display属性)：inline-block, inline-table, list-item, run-in, compact, overflow, box-shadow

  4. 背景与边框样式：

background-clip, background-origin, background-size

渐变：background: linear-gradient(to bottom, orange, black); radial-gradient

圆角：border-radius: 20px 30px, border-image:（常用于当元素宽高随时可变时）

旋转：transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

动画：transition: property duration timing-function timeout， animations 可以定义关键帧@keyframes

多栏布局(column-count)：比以前优势：保持底部对齐。但各栏宽度相同。

弹性盒布局：flex, order, flex-direction, flex-wrap

媒体查询(@media screen and (min-width: 1000px){...})

rgba(alpha通道：0~1 透明度)

在CSS3中唯一引入的伪元素是::selection 设置指定特定标签内容文字选中后的样式状态

BFC

Block Formatting Contexts, 块级格式化上下文

一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。

在同一个 BFC 中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的 margin 会发生折叠。两个处于普通流的盒子，会有margin叠加的问题，是因为他们属于同一个BFC，当他自身创建了一个新的BFC时，这个问题就不存在了。

形成BFC的条件（满足其中之一即可）:

  1. float的值不为none。

  2. overflow的值不为visible。

  3. display的值为table-cell, table-caption, inline-block中的任何一个。

  4. position的值不为relative和static。

BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其父元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直沿着其父元素的边框排列。

补充：IFC（Inline Formatting Context）即行内格式化上下文。

垂直方向外边距折叠计算

  • 参加折叠的margin都是正值：取其中margin较大的值为最终margin值。
  • 参与折叠的margin都是负值：取的是其中绝对值较大的，然后，从 0 位置，负向位移。
  • 参与折叠的margin中有正值，有负值：先取出负margin中绝对值中最大的，然后，和正margin值中最大的margin相加。

CSS Sprites

解释

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

利用CSS的background-image, background-repeat, background-position的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

利用CSS Sprites能很好地减少网页的http请求，这样可以减少很多图片请求的开销，从而大大的提高页面的性能，因为请求耗时比较长，请求虽然可以并发，但是也有限制，一般浏览器都是6个。这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因。从这个点来讲，未来可能就不需要这样做了，因为有了支持多路传输的HTTP2。

CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

有了HTTP2之后

HTTP/1.x 有个问题叫线端阻塞(head-of-line blocking)，它是指一个连接(connection)一次只提交一个请求的效率比较高，多了就会变慢。 HTTP/1.1 试过用流水线(pipelining)来解决这个问题，但是效果并不理想(数据量较大或者速度较慢的响应，会阻碍排在他后面的请求)。此外，由于网络媒介(intermediary)和服务器不能很好的支持流水线，导致部署起来困难重重。

而HTTP2的多路传输(Multiplexing)能很好地解决这些问题，因为它能同时处理多个消息的请求和响应；甚至可以在传输过程中将一个消息跟另外一个掺杂在一起。所以客户端只需要一个连接就能加载一个页面。

对语义化的理解

html语义化：指的是在编写网页时，使用正确的标签表达正确的意思，有利于在浏览器中显示清晰的结构。HTML5新增了很多语义化标签。

有利于SEO：与搜索引擎建立良好沟通，有助于爬虫抓取更多有效信息。

方便浏览器的解析，以很好的方式进行渲染。

便于团队开发和维护，语义化更具可读性。

Doctype 与 浏览器渲染模式

Doctype 是什么

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML，所以不需要引用 DTD。

DTD（文档类型定义）是一组机器可读的规则，他们定义 XML 或 HTML 的特定版本中允许有什么，不允许有什么。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。浏览器通过分析页面的 DOCTYPE 声明来了解要使用哪个 DTD ，由此知道要使用 HTML 的哪个版本。

浏览器渲染模式

  • <!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。
  • 严格模式：浏览器按W3C标准解析执行代码运行。
  • 在混杂模式（怪异模式）：页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。浏览器使用自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。
  • 声明正确的DTD即可触发严格模式，DOCTYPE不存在或未声明DTD或格式不正确会导致文档以混杂模式呈现。

常用的 DOCTYPE 声明

HTML 5, HTML 4.01 Strict, HTML 4.01 Transitional, HTML 4.01 Frameset,

XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1

推荐的写法：<!DOCTYPE html>

HTML 与 XHTML 的区别

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

HTML 兼容性问题

网上有很多，这里摘取三个我认为相对更常见的：

  1. 浏览器默认的 margin 和 padding 不同

    解决方案：加一个全局的 *{margin:0;padding:0;} 来统一。

  2. 超链接的样式设置顺序：

    1
    2
    3
    4
    a:link {}
    a:visited {}
    a:hover {}
    a:active {}

  1. 上下margin重合问题：IE 和 FF 都存在，相邻的两个 div 的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。

    解决方法：养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。

对浏览器内核的理解

主要分成两部分：渲染引擎(layout engineer或 Rendering Engine) 和 JS 引擎。

渲染引擎：负责取得网页的内容（HTML、 XML 、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎则：解析和执行 javascript 来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

利用CSS画三角形、圆形

画三角形

原理

以下面为基础：

1
2
3
4
5
6
7
8
.caret {
    width: 0;
    height: 0;
    border-top: 40px solid #000;
    border-right: 40px solid #ff0000;
    border-left: 40px solij d #ff0000;
    border-bottom: 40px solid #000;
}

只需要为三角形底部设置边框，两腰边框透明即可制作四个朝向的三角形。

画圆

1
2
3
4
5
6
7
8
9
10
.circle{
        background-color: grey;
        
        /*border-radius为圆弧长的四分之一（l = 90度圆心角 * 半径r）。或者写50% */
        border-radius: 78.5px;
        
        /*width和height均为直径2r*/
        width: 100px;
        height: 100px;
}

水平居中 垂直居中

水平居中

垂直居中

品字形布局

上方的“口”中有一个元素水平垂直居中 下面两个“口”各50%

满屏自适应品字形

三个有一定高度的div，上面的div宽100%，下面的两个div分别宽50%，然后用float使其不换行即可。

1
2
3
<div class="header">头部</div>
<div class="left">左</div>
<div class="right">右</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.header, .left, .right {
    height: 300px;
}
.header{
  width: 100%;
  background-color: yellow;
}
.left{
  float: left;
  width: 50%;
  background-color: red;
}
.right{
  float: left;
  width: 50%;
  background-color: blue;
}

非满屏品字形

左右在排版时要反过来，不然不出效果

1
2
3
<div class="header">Header</div>
<div class="right">Right</div>
<div class="left">Left</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.header, .left, .right {
    height: 100px;
    width: 100px;
}
.header {
    margin: 0 auto;
    background-color: #FF0000;
}
.right {
    float: left;
    margin-left: 50%; /*先布局right div*/
    background-color: blue;
}
.left {
    float: left;
    margin-left: -200px; /*负的两倍的div宽度*/
    background-color: yellow;
}

CSS overflow属性

可取的值 如何表现
visible 默认值。溢出不裁剪
hidden 溢出部分不可见，无滚动条
scroll 无论是否需要，用户代理都会提供一种滚动机制。即使元素框中可以放下所有内容也会出现滚动条。
auto 滚动条：需要才有
inherit IE(all) not supported

W3School 详解+在线示例 link

(HTML <a> / HTML 5 <form>) target属性

保留值 如何表现
_blank 新打开未命名窗口
_self 默认值。在当前窗口中打开
_parent 载入包含该链接的窗口/父框架集。如果链接在当前窗口则等同于 _self
_top 清除所有被包含的框架并将文档载入整个浏览器窗口

alt与title的区别

  • alt: 图片加载失败时的文字展示。搜索引擎优化。
  • title: 鼠标滑过该img显示的提示信息。

浏览器内核

主要分成两部分：渲染引擎(Layout Engineer或 Rendering Engine) 和 JS 引擎。

渲染引擎：负责取得网页的内容（HTML、 XML 、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎：解析和执行 javascript 来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

主流的三大浏览器内核：Webkit, Gecko, Trident.

Wekbit: Safari, Chrome.

Firefox: Gecko.

IE系列: Trident。

另外，搜狗浏览器是双核的，双核并不是指一个页面由2个内核同时处理，而是所有网页（通常是标准通用标记语言的应用超文本标记语言）由webkit内核处理，只有银行网站用IE内核。

form表单的属性

blog

name: 控制表达与后台程序的关系

method: GET, POST

enctype: text/plain, application/x-www-form-urlencoded, multipart/form-data

target: _blank, _self, _parent, _top

display: inline

inline元素水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

优雅降级和渐进增强

优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。为那些无法支持功能的浏览器增加候选方案(hack)，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。

渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

前端页面性能优化

  • 本质之一是要减少网页下载的内容：
    image
  • yahoo团队34条准则 博客1
  • 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
  • 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
  • 图片预加载，将样式表放在顶部，将脚本放在底部。
  • 当要创建大段HTML元素时，先使用document.createFragment创建页面片。
  • 减少cookie大小：因为每次cookie会随着HTTP请求发送出去。

em和rem

em: 相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(相对父元素的字体大小倍数)

rem: 相对于根元素(即html元素)font-size计算值的倍数（只相对于根元素的大小）。

rem作用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化。

defer与async的区别

defer要等到整个页面正常渲染结束，才会执行；async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。defer是“渲染完再执行”，async是“下载完就执行”。另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。

png与jpg

png支持透明而jpg不支持透明。

低版本的浏览器如IE6是不支持png格式的。

PNG无损压缩。JPG有损压缩。会失真是因为索引图像保存不了那么多种颜色。

小图标，需要透明的用PNG。jpg适用于摄影图片，以及色彩丰富的图片。

如果是纯色或者只是简单的没有渐变之类的图片，用GIF还是很不错的，因为体积很小

ToBeContinued

分享
0%