一、css基础
1. 样式层叠优先级:内联>内部样式表>外部样式表>默认值
2. 选择器优先级:!important>内联>id选择器>伪类>类选择器>标签选择器>通用选择器*(!important要写在分号的前面)
3. 外部样式表:<link rel="stylesheet" type="text/css" href="mystyle.css">
4. 内部样式表:<style type="text/css"> p {margin-left:20px;} </style>
5. css注释:/* xxx */
6. css选择器:
id选择器:#xxx
class选择器:.xxx
分组选择器:h,p,#xxx{}
后代选择器:.aaa p{}(aaa下的所有p标签,包括孙子元素)
子元素选择器:.aaa > p{}(aaa下的子p标签)
相邻兄弟选择器:.aaa + p{}(aaa后的第一个兄弟元素)
普通相邻兄弟选择器:.aaa ~ p{}(aaa后的所有兄弟元素)
7. 常用伪类::first-child,:hover,nth-child(n),:checked
8. 常用伪元素:::before,::after,
9. background属性简写:background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];
background-color
使用的背景颜色,background-image
使用的背景图像。
background-repeat
如何重复背景图像,background-attachment
背景图像是否固定或者随着页面的其余部分滚动。
background-position
背景图像的位置,background-size
背景图片的尺寸。
background-origin
背景图片的定位区域,background-clip
背景的绘制区域。
10. text-indent:首行缩进
11. word-wrap:break-all,换行
12. text-shadow(box-shadow): 5px 5px 5px #FF0000;(水平阴影,垂直阴影,模糊距离,阴影颜色)
13. a:hover 必须跟在 a:link 和 a:visited后面 ,a:active 必须跟在 a:hover后面
14. border-collapse: collapse;把table的边框变成一条线
15. 盒子模型:box-sizing默认是content-box,ie模型是border-box
标准盒模型:盒子总宽度=width(content)+padding+border+margin
IE盒模型:盒子总宽度=width(content+padding+border)+margin
16. visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用未隐藏之前一样的空间。该元素虽被隐藏,但仍然会影响布局。
display:none可以隐藏某个元素,且隐藏的元素不占用空间,该元素不但被隐藏,原本占用的空间会从页面布局中消失。
17. 定位:position,z-index解决重叠问题
static:默认
fixed:相对于浏览器窗口是固定位置,脱离文档流,会和其他元素重叠
relative:相对其正常位置,原本所占的空间不会改变,会和其他元素发生重叠,常用做absolute定位的父容器
absolute:相对于最近的已定位父元素,脱离文档流,和其他元素重叠
18. 媒体查询(不同屏幕大小的样式,用于兼容):@media screen and (min-width: 480px) {}或者<link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:480px)”>
需要声明<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>
19. 可继承样式:font-size, font-family, color,不可继承样式:border, padding, margin, width, height
20. object-fit: cover;头像裁剪和居中
21. 上下居中:
①文字上下居中:height: 20px;line-height: 20px;
②用定位:position: relative;top: 50%;transform: translateY(-50%);
③用弹性布局:父元素display:flex;align-items: center; (垂直居中)
22. 水平居中:
①文字水平居中:text-align: center;
②用定位:position: relative;left: 50%;top: 50%;transform: translate(-50%, -50%);上下水平居中
③用弹性布局:父元素display:flex;justify-content: center; (水平居中)
23. 获取所有选择器:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/css.css" />
<style>
.css01{
background-image: url(img/01.png);
}
</style>
<script>
// 无论link还是<style></style>,从前往后依次是0,1,2……
alert(document.styleSheets[0].rules[0].style.backgroundImage);
alert(document.styleSheets[1].rules[0].style.backgroundImage);
</script>
</head>
<body>
<input type="file" id="inputFile" onchange="GetFilePath()" />
</body>
</html>
二、面试问题
1. 用css创建三角形
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
2. CSS里的visibility属性有个collapse属性值?在不同浏览器下以后什么区别?
当一个元素的visibility属性被设置成collapse值后,对于一般的元素,它的表现跟hidden是一样的。
chrome中,使用collapse值和使用hidden没有区别。
firefox,opera和IE,使用collapse值和使用display:none没有什么区别。
3. 对BFC规范(块级格式化上下文:block formatting context)的理解:
① BFC规定了内部的Block Box如何布局。定位方案:
内部的Box会在垂直方向上一个接一个放置。
Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠。
每个元素的margin box 的左边,与包含块border box的左边相接触。
BFC的区域不会与float box重叠。
BFC是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
计算BFC的高度时,浮动元素也会参与计算。
②满足下列条件之一就可触发BFC
根元素,即html
float的值不为none(默认)
overflow的值不为visible(默认)
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed
4. 为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式?
浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中,所以文档流的块框表现得就像浮动框不 存在一样。浮动元素会漂浮在文档流的块框上。
① 浮动带来的问题:
父元素的高度无法被撑开,影响与父元素同级的元素
与浮动元素同级的非浮动元素(内联元素)会跟随其后
若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构。
② 清除浮动的方式:
父级div定义height
最后一个浮动元素后加空div标签 并添加样式clear:both。
包含浮动元素的父标签添加样式overflow为hidden或auto。
父级div定义zoom
5. 浏览器解析CSS选择器:从右向左解析,第一步就可以筛选掉大部分的节点
6. style标签写在body后与body前有什么区别?
页面加载自上而下 当然是先加载样式。写在body标签后由于浏览器以逐行方式对HTML文档进行解析,当解析到写在尾部的 样式表(外联或写在style标签)会导致浏览器停止之前的渲染,等待加载且解析样式表完成之后重新渲染,在windows的IE 下可能会出现FOUC现象(即样式失效导致的页面闪烁问题)
7. a元素里不可以嵌套交互式元素(<a>、<button>、<select>等),<p>里面不可以嵌套<div>、<h1>~<h6>