关于Web面试的基础知识点--Html+Css（三）

文章目录

1.CSS中可以继承的属性
2.CSS选择器优先级
- 4个等级的定义
3.以下哪些CSS表示红色？
4.行内元素和块级元素
5.浮动元素
6.清除浮动并不会造成不稳定情况的方法
7.可以进行跨域请求的Html标签
8.viewport meta的结构
9.哪些情况会产生BFC

1.CSS中可以继承的属性

继承就是指子节点默认使用父节点的样式属性。不可继承的属性太多了不要背，记住可以继承的属性有哪些就行了。
可以继承的属性很少，只有颜色，文字，字体间距行高对齐方式，和列表的样式可以继承。
所有元素可继承：

visibility和cursor

内联元素可继承：

letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction

终端块状元素可继承：

text-indent和text-align

列表元素可继承：

list-style、list-style-type、list-style-position、list-style-image

2.CSS选择器优先级

题目：

权重越大，优先级越高
CSS选择器优先级是指“基础选择器”的优先级：
ID > CLASS > ELEMENT > *

4个等级的定义

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
权重：style 1000 行内样式， id 100 ，class 10 ，element 1 标签

3.以下哪些CSS表示红色？

A. red
B. #f00f
C. rgb(100%,0%,0%)
D. hsl(0,100%,50%)
个人所选答案：ACD
总结一下：表示颜色的方式：

直接使用颜色名，例如：red,blue,aqua...
使用十六进制（红绿蓝）：如#f00，#ff0000就表示红色,一般为三位或者六位
使用RGB三原色（Red,Green,Blue）:如rgb(100%,0%,0%)，rgb(255,0,0)表示红色
使用HSL（Hue,Saturation,Lightness）/（色调，饱和度，亮度）。如题目中的hsl(0,100%,50%)
正确答案：ABCD
Note:当使用十六进制进行颜色的表示的时候，第4位或者第7、8位表示透明度。B选项：#ff0000ff最后的ff表示透明度为0

4.行内元素和块级元素

在html中，元素主要分为行内元素和块级元素；

行内元素指的是书写完成后不会自动换行，并且元素没有宽和高。

块级元素写完后会自动换行，有宽高可以修改。

还有一种特殊的元素叫做行内块元素。

大致分类是：

行内元素有：head meat title lable span br a style em b i strong

块级元素有：body from select textarea h1-h6 html table button hr p ol ul dl cnter div

行内块元素常见的有： img input td

以上就是常见的行内元素和块级元素，还有常见的行内块元素

5.浮动元素

浮动元素：

浮动元素是设置float为非none值的元素，这时该元素会自动被设置成块元素，可以设置宽度、高度以及边距。浮动元素，顾名思义，使该元素浮动在其他元素之上，离开了原来的文档流，直到浮动到父元素的左右边距（上下边距不受限制）或者左、右方遇到其他设置了float的元素。而其附近设置的浮动元素会跟其边距相邻，表面上跟内联元素似的。

非浮动元素则相对复杂一些，分以下两种情况：

浮动元素后边的元素若是非浮动行内元素且因为定位产生重叠时，行内元素边框、背景和内容都在该浮动元素“之上”显示。
浮动元素后边的元素若是非浮动块级元素且在定位后产生重叠时，该块级元素边框和背景在该浮动元素“之下”显示，只有内容在浮动元素不在非浮动元素的部分显示。

如果有多个浮动元素，浮动元素会按照顺序排下来而不发生重叠的现象。
浮动元素会尽可能地向顶端对齐、向左或向右对齐。
如果有非浮动元素和浮动元素同时存在，并且非浮动元素在前，则浮动元素不会高于非浮动元素。
行内元素与浮动元素发生重叠，边框、背景、内容都会显示在浮动元素之上
块级元素与浮动元素发生重叠，边框、背景会显示在浮动元素之下，内容会显示在浮动元素之上

6.清除浮动并不会造成不稳定情况的方法

方法一：使用带clear属性的空元素

在浮动元素后使用一个空元素如<div class="clear'></div>，卉在CSS中赋予
.clear{clear：both}属性即可清理浮动．亦可使用<br class="clear"/>或
<hr class="clear"/>来进行清理。

方法二：使用CSS的overflow属性

给浮动元素的容器添力overflow:hidden或overflow:auto可以消除浮动，另外在ES6中还需要触发hasLayout，例如为父元素设置首容器宽高或设置zoom:1。
在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

方法三：给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

方法四：使用邻接元素处理

什么都不做。给浮动元素后面的元素添加clear属性。

方法五：使用CSS的:after伪元素

结合:after伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和IEhack，可以完兼容当前主流各大浏览器，这里的lEhack指的是触发hasLayout.
给浮动元素的容器添加一个clearfix的cIass，然后给这个class添加一个:after伪元素来实现元素末尾添加一个看不见的块元素(block element)清理浮动。

7.可以进行跨域请求的Html标签

在 HTML 中，<a>, <form>, <img>, <script>, <iframe>, <link>等标签以及 Ajax都可以指向一个资源地址，而所谓的跨域请求就是指：当前发起请求的域与该请求指向的资源所在的域不一样。这里的域指的是这样的一个概念：我们认为若协议 + 域名 + 端口号均相同，那么就是同域。
原文地址

8.viewport meta的结构

<meta name="viewport" content="width=device-width, initial-scale=1.0">
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

9.哪些情况会产生BFC

BFC(Block formatting context) 直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与。
产生BFC：

根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

即：
（1）具有浮动（即float不为none）
（2）具有绝对定位或固定定位（position：absolute |fixed）
（3）display为inline-block, table-cell, table-caption, flex, inline-flex
（4）overflow不为visible（一般设置overflow：hidden）
以上情况会触发BFC