css冲刺

Posted 2021-11-24 tanqurey

CSS知识点及面试题

1、一般与文本相关的属性都可以继承
text-/font-/line-

2、background属性
1)background-repeat:repeat/repeat-x/repeat-y/no-repeat
2)background-position:默认0 0 只指定一个值，其他为center
3)background-image:url() 图片地址
4)background-attachment
scroll:默认值，背景图相对于元素固定，背景随页面滚动而移动，即背景和内容绑定。
fixed：背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了body上。
local：背景图相对于元素内容固定，
对于可以滚动的元素（设置为overflow:scroll的元素）。当background-attachment设置为scroll时，背景图不会随元素内容的滚动而滚动

3、盒模型
1)盒子的大小由padding、content、border组成
区分ie盒模型和W3C标准盒模型
W3C标准盒模型的width仅指内容部分的宽度，而ie盒模型的width包括了content、border、margin
2)padding会撑大盒子，记得修改content大小
3)块级元素水平居中：margin：0 auto
仅在设置了元素宽度，且必须是块级元素才生效
文字水平居中：text-align：center
盒子水平居中：margin：0 auto
加了定位的盒子margin:0 auto 将失效
改用以下方式：
position：absolute;
left:50%;
margin-left:-(盒子宽度的一半)px;‘

position：absolute;
top:50%;
margin-top:-(盒子高度的一半)px;

水平垂直居中
.out{
display:table-cell;
vertical-align:middle;
text-align:center;
}
.in{
display:inline-block;
}

4)未设置宽高时，如何水平垂直居中？
为父元素设置：display: flex; justify-content: center;align-items: center;
5)

4、外边距合并
1)相邻元素：
存在margin-top和另一个存在margin-bottom的元素的相接部分按较大者合并，而不直接展示和
2)父子元素
父元素没有内边距及边框，合并后的边距同样是较大的那一个
可以为父元素设置overflow:hidden 或给父元素加一个边框 来避免
3)不设置盒子宽度（比如说子盒子），对其设置padding将不会撑开盒子。子盒子块不设置宽，将默认与父盒子块同宽

5、box-shadow(css3)
见手册

6、浮动left/right/none
1)默认隐式转换为行内块，为了能让元素在一排上显示
2)脱标，找最近的父元素对齐，不会超出padding的范围
3)一个父盒子内若要所有子盒子都一行对齐显示，必须都设置float属性
4)清除浮动
为父元素设置：
.clearfix {
overflow: auto;
zoom: 1; //zoom: 1; 处理兼容性问题
}

或添加一个冗余元素
.clear{clear:both; height: 0; line-height: 0; font-size: 0}
</style>
<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="clear"></div>
</div>

或使用伪元素：.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
不用添加冗余元素

常见伪类——:hover,:link,:active,:visted,:not(),:focus。
常见伪元素——::first-letter,::first-line,::before,::after,::selection。

附：隐藏元素的区别：
我们知道display:none/opacity:0/visbility:hidden 都能使元素隐藏，它们的区别是
1)display:none 会从文档标准流中移除该元素，而后两者不会
2)visibility:hidden 不会影响子元素，子元素若显式设置visiable可以正常显示
3)visibility 和 display 属性是不会影响其他元素触发事件的，而 opacity 属性
如果遮挡住其他元素，其他的元素就不会触发事件了

7、定位
1)top/bottom/left/right都是相对于父元素来说的
2)position:static/relative/absolute/fixed
依次：static 自动定位
relative 根据原来元素在标准流中应该在的位置定位，以左上角为坐标远点，仍然在原位置保留文档流，行内块元素
absolute 相对于是一个已经定位的最近的父或祖先元素定位，脱离文档流，若父元素都没有定位，则按照当前document进行定位，行内块元素
fixed 相对于浏览器窗口固定定位，完全脱标，不随滚动条滚动
多个元素设置定位时，页面可能会发生重叠，此时要设置z-index

8、隐藏
1)display:none 不再保留原有位置
2)visibility:hidden 仍保留原有位置

9、overflow
1)hidden:超出盒模型之外的内容均被隐藏
2)scroll:超出盒模型时出现滚动条
3)auto:清除浮动

10、vertical-align
不影响块级元素的对齐，只针对行内元素或行内块元素。通常用来控制图片/表单与文字对齐

11、white-space
noraml:默认处理方式
nowrap:强制全部一行显示

12、text-overflow
clip/elipsis
默认/显示省略号
必须结合以下内容使用：
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;