css固定定位CSS基础、重点和难点
⼀、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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论