前言：
眼前看官们对“css文字滑进”都比较珍视，小伙伴们都需要知道一些“css文字滑进”的相关知识。那么小编在网络上搜集了一些关于“css文字滑进””的相关内容，希望你们能喜欢，我们快快来了解一下吧！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: 600px) { .example {background: red;} } @media only screen and (min-width: 600px) { .example {background: green;} } 1234565，新增了许多选择器
5.1、属性选择器: 选择器[attr] 、选择器[attr=value] 。。。。。。
5.2、结构性伪类选择器： 选择器:nth-child(n) 第n个子节点 。。。。。。
5.3、其它选择器：:disabled、:enabled、:checked、:first-line 、:first-letter、::selection 选中文本的时候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）。 项目默认沿主轴排列。优势
使用弹性布局可以有效的分配一个容器的空间 ，即使我们的容器元素尺寸发生改变 ，它内部的元素也可以调整它的尺寸来适应空间适用场景
适用于移动端
更多flex布局参考
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; } 123456当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度
超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度
更多的兼容参考链接
4、 CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别
当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。
chrome中，使用collapse值和使用hidden没有区别。firefox，opera和IE，使用collapse值和使用display：none没有什么区别。5、设置元素浮动后，该元素的display值是多少？
自动变成display:block
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样式/ } 1237、CSS优化、提高性能的方法有哪些避免后代选择符避免链式选择符避免不必要的重复避免不必要的命名空间避免！important最好使用表示语义的名字8、浏览器是怎样解析CSS选择器的
CSS选择器的解析是从右向左解析的，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。
而在 CSS 解析完毕后，需要将解析的结果与 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>1234567891011121314151617before、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} 123414、如果需要手动写动画，你认为最小时间间隔是多久，为什么多数显示器默认频率是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-spacing17、style标签写在body后与body前有什么区别
页面加载解析是自上而下的。
如果style放在body后面，可能会导致页面先行加载后，再去加载样式时，导致页面重新渲染，引起页面的闪烁。
原文链接：
作者：一月清辉
出处：CSDN
标签： #css文字滑进
