前端面试知识点概括之CSS
资料来源于 50道css基础面试题
进行一些扩充和总结
CSS盒模型
CSS盒模型
标准盒模型:content + padding + border + margin
低版本IE盒模型:content + padding + border + margin
标准盒:width 等于 content
低版本IE盒(低于IE6) :width 等于 content + padding + border
box-sizing的两个属性
content-box:一个标准模式下的盒模型的计算方式
border-box：一个怪异模式下的盒模型的计算方式
CSS选择器
- id选择器(#)
- 类选择器(.)
- 标签选择器(div、h1、p、span)
- 相邻选择器(h1+p)
- 子选择器(ul>li)
- 后代选择器(li a)
- 通配符选择器(*)
- 属性选择器（a[rel="external"]）
- 伪类选择器（a:hover, li:nth-child）
CSS中可以和不可以被继承的属性
不可以被继承的属性
-
盒子模型的属性:
width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left -
背景属性:
- background、background-color、background-image、background-repeat、background-position、background-attachment
-
定位属性
- float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
- display：规定元素应该生成的框的类型
-
文本属性:
- vertical-align：垂直文本对齐
- text-decoration：规定添加到文本的装饰
- text-shadow：文本阴影效果
- white-space：空白符的处理
- unicode-bidi：设置文本的方向
可以被继承的属性
-
字体系列属性
-
font：组合字体
-
font-family：规定元素的字体系列
-
font-weight：设置字体的粗细
-
font-size：设置字体的尺寸
-
font-style：定义字体的风格
-
font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
-
font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
-
font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。
-
-
文本系列属性
-
text-indent：文本缩进
-
text-align：文本水平对齐
-
line-height：行高
-
word-spacing：增加或减少单词间的空白（即字间隔）
-
letter-spacing：增加或减少字符间的空白（字符间距）
-
text-transform：控制文本大小写
-
direction：规定文本的书写方向
-
color：文本颜色
-
-
元素可见性：visibility
-
表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
-
列表布局属性：list-style-type、list-style-image、list-style-position、list-style
-
生成内容属性：quotes
-
光标属性：cursor
-
页面样式属性：page、page-break-inside、windows、orphans
-
声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation
CSS三种引入方式
1.内联
2.页级
3.外联
内联:
<body>
<div style="width: 65px;height: 20px;border: 1px solid;">测试元素</div>
</body>
页级:
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
div {
width: 65px;
height: 20px;
border: 1px solid;
background: greenyellow;
}
</style>
</head>
外联:
link:<link rel="stylesheet" type="text/css" href="*.css" />
//link语法格式中，rel指的是关联(relation)，type指的是类型，href指的是链接文件路径。
//link的作用主要用来引入CSS和网页图标，指示告知搜索引擎，网页之间的关系等。
@import:<style>@import url("*.css");</style>
//@import语法格式务必写在style标签中，后直接加文件路径即可。
//@import作用在CSS文件和页面中，可以在一个CSS文件中引入其他的CSS文件.
外联CSS也可称为外部CSS，在实际的项目中通常使用此种方式，它只在页面中使用link或者@import引入即可，可维护性好；并且外联CSS是一个单独的文件，可以作用于多个页面，在修改的时候可以针对性地修改某一块区域，达到多个页面样式同时变更，相较于内联CSS和页级CSS，省去了到每个页面修改的步骤，提高了开发效率，同时一定程度提高了性能。
页面导入样式时，使用link和@import有什么区别？
- import有兼容的问题，link没有兼容问题
- link会跟页面一起加载，import等页面加载完才会加载
- import只能加载css,link除了加载css还能用于定义RSS，定义rel等连接属性等作用
CSS优先级
！import > 内联样式 > id > class > tag
优先级计算
元素选择符： 1
class选择符： 10
id选择符：100
元素标签：1000
- !important声明的样式优先级最高，如果冲突再进行计算。
- 如果优先级相同，则选择最后出现的样式。
- 继承得到的样式的优先级最低。
CSS3新增伪类
- p:first-of-type 选择属于其父元素的首个元素
- p:last-of-type 选择属于其父元素的最后元素
- p:only-of-type 选择属于其父元素唯一的元素
- p:only-child 选择属于其父元素的唯一子元素
- p:nth-child(2) 选择属于其父元素的第二个子元素
- :enabled :disabled 表单控件的禁用状态。
- :checked 单选框或复选框被选中。
display有哪些值
inline（默认）--内联
none--隐藏
block--块显示
table--表格显示
list-item--项目列表
inline-block
grid
BFC
块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
网友评论