1、CSS3有哪些新特性
-
1，针对块容器：
圆角（border-radius:8px）、 阴影（box-shadow:10px）
背景的线性/径向渐变（gradient）、 边框图片(border-image)、RGBA和透明度 -
2，文字特效
文字阴影( text-shadow ）、定义自己的字体(font-face)、对长的不可分割单词换行(word-wrap：break-word) -
3，transform动态效果
平移（translate）、旋转（rotate）、缩放（scale）、倾斜（skew） -
4，媒体查询（
@media）：根据浏览器的尺寸变化采用不同的样式@media only screen and (max-width: 120px) and (min-width:600px){ .example {background: red;} } -
5，新增了许多选择器
5.1、属性选择器: 选择器[attr] 、选择器[attr=value] 。。。。。。
5.2、伪类选择器： 选择器:nth-child(n) 第n个子节点 、disabled、:enabled、:checked、:first-line 、:first-letter、::selection 选中文本的时候 。。。。。。
5.3、伪元素： :before、:after -
6，animation动画
2、CSS3的flexbox（弹性盒布局模型）,以及适用场景
-
是什么
flexbox 是 Flexible Box 的缩写，意为”弹性布局”。任何容器都可以指定为 Flex 布局。块级元素、行内元素都可以使用 Flex 布局。
.box{ display: inline-flex; }。Webkit 内核的浏览器，必须加上-webkit前缀。采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。 它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。 项目默认沿主轴排列。
-
优势
使用弹性布局可以有效的分配一个容器的空间 ，即使我们的容器元素尺寸发生改变 ，它内部的元素也可以调整它的尺寸来适应空间 -
适用场景
1). 水平垂直居中
2). 一边定宽，一边自适应
3). 多列等分
更多flex布局参考 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
3、常见的兼容性问题
- 不同浏览器的标签默认的margin和padding不一样
{margin:0;padding:0;} - Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
通过CSS 属性 -webkit-text-size-adjust: none; 解决 - 部分浏览器的img标签之间会有个默认的间距
使用float - 透明度的兼容
加前缀.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } - 当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度
超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度
6、移动端的布局用过媒体查询(@media)吗
通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。
方法如下：
-
方法一 html方法
<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)"> -
方法二 css方法
@media only screen and (max-device-width:480px) { /css样式/ }
7、CSS优化、提高性能的方法有哪些
- 避免后代选择符
- 避免链式选择符
- 避免不必要的重复
- 避免不必要的命名空间
- 避免！important
- 最好使用表示语义的名字
8、浏览器是怎样解析CSS选择器的
CSS选择器的解析是从右向左解析的，先找到最右侧节点，再向上寻找，若找到满足条件的匹配规则，则该样式有效。若寻找到了根节点，仍无法匹配，则该样式无效。
而在 CSS 解析完毕后，形成的 CSS Tree 与 DOM Tree 一起进行分析建立一棵 Render Tree，最终用来进行渲染页面。
在建立 Render Tree 时，浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style
Rules）来确定生成怎样的 Render Tree。
9、在网页中的应该使用奇数还是偶数的字体？为什么呢？
使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系
10、元素竖向的百分比设定是相对于容器的高度吗
当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的
当按百分比设定一个元素的高度时，它是相对于父容器的高度计算的
但是，对于一些表示竖向距离的属性，例如padding-top , padding-bottom , margin-top , margin-bottom等，当按百分比设定它们时，依据的是父容器的宽度，而不是高度。
11、全屏滚动的原理是什么？用到了CSS的哪些属性？
假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现
结合overflow：hidden；transition：all 1000ms ease来实现动画滚动
12、 ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用
单双冒号的区别
- 单冒号(:)用于
CSS3伪类
p:before{content:'序言'}
p:after{content:'......'} - 双冒号(::)用于
CSS3伪元素
`p:hover::before{}
<!DOCTYPE html>
<html>
<head>
<style>
p:before{
content:"台词：";
display:inline-block;
}
p:hover::before{
content:'滑过台词一: ';
}
</style>
</head>
<body>
<p>我住在 Duckburg。</p>
</body>
</html>
before、after伪类的作用
before、after 就是定义在元素主体内容之前/后的一个伪元素。并不存在于dom之中，只存在在页面之中。
13、怎么让Chrome支持小于12px 的文字
针对谷歌浏览器内核，加webkit前缀，用transform:scale()这个属性进行缩放！以达到设置小于12px的字体的效果
p{
font-size:12px;
-webkit-transform:scale(0.8); //0.8是缩放比例 ，12*0.8相等于10
}
14、如果需要手动写动画，你认为最小时间间隔是多久，为什么
多数显示器默认频率是60Hz，即1秒刷新60次，
所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。
15、 li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
受代码之间的空白或回车等的影响，因为空格也属于字符，也会占据一定的空间，所以会有间隔，解决方法如下：
- 将<li>代码全部写在一排
- 浮动
- 在ul中用font-size：0;
16、display:inline-block 什么时候会显示间隙
- 有空格时候会有间隙 解决：移除空格
- margin正值的时候 解决：margin使用负值
- 使用font-size时候 解决：font-size:0、letter-spacing、word-spacing
17、style标签写在body后与body前有什么区别
页面加载解析是自上而下的。
如果style放在body后面，可能会导致页面先行加载后，再去加载样式时，导致页面重新渲染，引起页面的闪烁。
18、文本溢出的处理
text-overflow,
1、值为clip ------ 修剪文本；
2、值为ellipses ------ 显示省略号来表示被修剪的文本；
3、值为string -------- 使用给定的字符串来代表被修剪的文本
-
多行元素的文本省略号(webkit浏览器实现方法如下，其它的结合js)
overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical -
单行元素的文本省略号
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
19、css动画如何实现
方法一、animation + @keyframes
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove {
from {left:0px;}
to {left:200px;}
}
css3的animation动画如何在动作结束时保持该状态不变:
animation-fill-mode:forwards;
- none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
- forwards 应用动画结束样式到目标元素上
- backwards 应用动画开始样式到目标元素上
- both 向前和向后填充模式都被应用
参考地址：https://blog.csdn.net/yiyueqinghui/article/details/120292718
方法二、transition ------ 过渡动画
transition-property的值可以是all，表示设置所有css属性变化的过渡动画效果
以下示例是显示opacity属性的变化的过渡效果
div {
opacity: 1;
transition: opacity 1s linear 0;
}
div:hover {
opacity: 0;
}
以下示例是显示所有属性的变化的过渡效果
div {
width:200px;
height:200px;
transition: all 1s linear 0;
}
div:hover {
width:400px;
height:400px;
}
20、float 的元素，display 是什么
display 为 block
21、隐藏页面中某个元素的方法
- display:none;
- visibility:hidden;
- opacity: 0;
- position 移到外部，
- z-index 涂层遮盖等等
22、display：table 和本身的 table 有什么区别
区别在于，display：table 的 css 声明能够让一个 html 元素和它的子节点像 table 元素一样，使用基于表格的 css 布局，而不会产生因为使用了 table 那样的表格标签导致 的语义化问题。
之所以现在逐渐淘汰了 table 系表格元素，是因为 用 div+css 编写出来的文件比用 table 边写出来的文件小，而且 table 必须在页面完全加载后才显示，div 则是逐行显示，table 的嵌套性太多，没有 div 简洁。
23、z-index 的定位方法
- z-index 属性设置元素的堆叠顺序
- z-index 可以为负，
- z-index 只能在定位元素上奏效，该属性设置一个定位元素沿 z 轴的位置，如果为正数，离用户越近，为负数，离用户越远
- z-index：auto，默认层级，表示堆叠顺序与父元素相等
- z-index：inherit，表示从父元素继承 z-index 属性的值
24、设置一个元素的背景颜色，背景颜色会填充哪些区域？
background-color 设置的背景颜色会填充元素的 content、padding、border 区域。
25、知道属性选择器和伪类选择器的优先级吗
属性选择器和伪类选择器优先级相同
26、inline-block、inline 和 block 的区别
- Block 是块级元素，其前后都会有换行符，能设置宽度，高度，margin/padding 水平垂直 方向都有效。
- Inline-block：能设置宽度高度，margin/padding 水平垂直方向 都有效，前后无换行符，eg：img属于inline-block元素。
- inline：
设置 width 和 height 无效，margin 在竖直方向上无效，水平方向上有效，padding 在水平方向垂直 方向都有效，前后无换行符 。
27、img是inline元素，为什么可以设置宽高？
img标签没有独占一行，所以是行内元素。
既然是行内元素为什么能够设置宽高呢？
从元素本身的特点来讲，可以分为不可替换元素和替换元素；
-
不可替换元素
HTML 的大多数元素是不可替换元素，即其内容直接表现给用户；比如h标签 -
可替换元素
首先，浏览器根据元素的标签和属性，来决定元素的具体显示内容，
例如：浏览器会根据 img 标签的src属性的值来读取图片信息并显示出来，
又例如：根据 input 标签的type属性来决定是显示输入框，还是单选按钮等。
可替换元素的特性，同设置了display:inline-block的元素一致HTML中的
<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容，即是一个空元素
所以，由于img标签属于替换元素，所以具有内置的宽高属性。
997
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
