文章目录
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