1、设置white-space为nowrap，文本不会换行，文本会在同一行上继续，直到遇到<br>标签为止
2、链接：对于以下 HTML，下列选项中哪一个 CSS 选择器效果与其_蘑菇街笔试题_牛客网
来源：牛客网
结构伪类选择器
E:first-child-选择E元素的父元素的第一个子元素。
E:last-child-选择E元素的父元素的最后一个子元素。
E:root-选择文档的根元素，也就是html元素。
E:nth-child(n)-选择E元素的父元素的第n个子元素，n可以是正整数、计算式或者关键字。
E:nth-last-child(n)-选择E元素的父元素的倒数第n个子元素，n可以是正整数、计算式或者关键字。
E:first-of-type-选择E元素的父元素下第一个E元素。
E:last-of-type-选择E元素的父元素下最后一个E元素。
E:nth-of-type(n)-选择E元素的父元素下第n个E元素。
E:nth-last-of-type(n)-选择E元素的父元素下倒数第n个E元素。
E:only-child-选择父元素只包含一个子元素，且该子元素匹配E元素。
E:only-of-type-选择父元素只包含一个同类型的子元素，且该子元素匹配E元素。
E:empty-选择没有子元素的元素，而且该元素也不包含任何文本节点。
在上面十二个选择器中，有四个都带有参数n：
E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
实际应用中，n可以是整数（1、2、3...）、计算式（2n、2n+1...）、关键字（even、odd）。但是n最终的结果必须是 大于等于1 的整数。
3、position五个属性：static（默认）、relative、absolute、fixed、sticky、inherit
static：元素的top、right、bottom、left、z-index属性值不会生效
relative：元素的top、right、bottom、left、z-index属性值会生效，top等起效时元素在常规流中的位置依然存在
absolute：top等起效，脱离常规流，下方的元素会向上到此元素的原位置，top等属性相对上一级父元素偏移
fixed:相对窗口偏移
inherit：继承父元素的position值
4、可以定义一个带正方形的列表：list-style-type: square
5、em的值并不是固定的， 会继承父级元素的字体大小。px为固定单位。 pt 绝对长度单位 ， pt的效果是不随浏览器分辨率的变化而发生视觉的变化
6、！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承
7、标准盒子模型 ＝ margin + border + padding + width （width = content ）
IE盒子模型 ＝ margin + width（width = border + padding + content ）
8、外部资源由 <object> 元素表示，该元素可以被视为图像、嵌套的浏览上下文或插件要处理的资源。它包括各种属性，如存档、边框、分类、代码库、代码类型等
9、border-top-width:默认值medium,定义中等的上边框。
outline-width:默认值medium,规定中等的轮廓。
10、CSS 预编译工具有stylus，sass，less
11、优化 CSS 图片加载
CSSSprite：减少对服务器请求 SVGSprite：体积小，矢量 Iconfont：体积小，矢量，集成度高 Base64：减少对服务器请求
12、
贝塞尔曲线的快慢
cubic-bezier(x1,y1,x2,y2)
快慢由斜率k决定，k1=y1/x1,k2=y2/x2, k>0 则为快，k<0则为慢
13、text-shadow 属性中的四个值 (length、length、length、color) 分别是什么意义：
阴影离开文字的横方向距离，阴影离开文字的纵方向距离，阴影的模糊半径，阴影的颜色
14、要运用css3动画，需要运用@keyframes规则和animation属性
15、line-height 的百分比是相对于自身的字体大小
16、CSS 百分比参照问题
-
参照父元素宽度的元素：padding margin width text-indent
-
参照父元素高度的元素：height
-
参照父元素属性:font-size line-height
-
特殊：相对定位的时候，top(bottom) left(right)参照的是父元素的内容区域的高度与宽度，而绝对定位的时候参照的是最近的定位元素包含padding的高度与宽度
17、
a:visited {} a:link {} a:hover {} a:active {}
Link,visited,hover,active.
L o v e h a t e 爱与恨
18、
BFC就是“块级格式化上下文”的意思，创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC， 它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。
内部的Box会在垂直方向，从顶部开始一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box叠加。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
计算BFC的高度时，浮动元素也参与计算。
19、IE 浏览器（Trident 内核）的私有属性前缀：–ms
20、
关于link与@import的区别: 区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。 区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。 区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。 区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。
21、
Background-position属性
用处：配合background-image属性一起使用，用于设置背景图片在盒子中的位置
参数：xpos ypos |x% y% |x y三种,
如果只写第一个水平方向的参数，第二个垂直方向的参数会默认为：
center|50%|容器高度的一半px
Xpos：规定水平方向的对齐方式,值有left,right,center
Ypos：规定垂直方向的对齐方式,值有top,bottom,center
x%:规定图片水平方向的距离。
你会不会以为这个x%就是父级容器宽度的x%？那你就想错了哦，这里的x%指的是父级容器的宽度减去图片的宽度后的差值的x%。
举个栗子：background-position：50%，20%；
图片的宽度为 imgwidth：100px；高度为 imgheight：100px；
容器的宽度为 conwidth：200px；高度为 conheight：200px；
那么此时图片的左顶点距离容器的左顶点的水平距离就是(conwidth-imgwidth)*50%=50px,而不是conwidth*50%=100px；(很好理解的吧，不然盒子宽度200px，图片宽度100px，又距离左边100px，岂不是50%没实现水平居中而紧靠右了吗？)
由此也可以算出图片的左顶点距离容器的左顶点的垂直距离为20px
y%:对应x%
x:图片距离容器水平方向距离
y:图片距离容器垂直方向距离
22、浮动元素重叠
行内元素与浮动元素发生重叠，边框、背景、内容都会显示在浮动元素之上
块级元素与浮动元素发生重叠，边框、背景会显示在浮动元素之下，内容会显示在浮动元素之上
24、行内元素与浮动元素发生重叠，边框、背景、内容都会显示在浮动元素之上
块级元素与浮动元素发生重叠，边框、背景会显示在浮动元素之下，内容会显示在浮动元素之上
若不浮动的是块级元素，那么浮动的元素将显示在其上方
若不浮动的是行内元素或者行内块元素，那么浮动的元素不会覆盖它，而是将其挤往左方
25、
为了便于理解，我们换一种方式来重新定义BFC。一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
26、
:before选择器早在CSS 2.1版本就定义了，:before 选择器在被选元素的内容前面插入内容。
p:before{
content:"哈哈";
color:red;
font-weight:400;
}
扫一扫
822
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
