介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同?
1 有两种:IE盒模型、W3C盒模型
2 盒模型:内容(content)、填充(padding)、边框(border)、外边距(margin)
3 区 别:IE的content把border和padding都计算了进去
CSS选择符有哪些?哪些属性可以继承?
1 id选择器(#id)
2 类选择器(.class)
3 标签选择器(div,p)
4 相邻选择器(h1+p)
5 子选择器(ul>li)
6 后代选择器(div p)
7 通配符选择器(*)
8 属性选择器(img[title="flower"])
9 伪类选择器(a:hover , li:nth-child)
可继承的样式:font-size font-family color等
不可继承的样式:border padding margin width height
CSS优先级算法如何计算?
优先级就近原则,同权重情况下样式定义以最近者为准
!important>id>class>tag
CSS3新增的伪类有哪些?
p:first-of-type
p:last-of-type
p:only-of-type
p:only-child
p:nth-child(2)
:after 在元素之前添加内容,也可以用来做清除浮动。
:before 在元素之后添加内容
:enabled
:disabled 控制表单控件的禁用状态
:checked
如何居中div?
水平居中:给div设置一个宽度,然后添加margin:0 auto属性
div{ width:200px; margin:0 auto; }
将绝对定位的div居中
div{ position: absolute; width: 300px; height: 300px; margin: auto; top: 0; bottom: 0; left: 0; right: 0; background-color: pink; /* 方便查看效果 */ }
水平垂直居中(一)
div{ position: absolute; width: 500px; height: 300px; top: 50%; left: 50%; margin: -150px 0 0 -250px; /* 也可以利用transform: translate(-50%, -50%); */ background-color: pink; }
水平垂直居中(二)
使用flex布局,应考虑兼容性
.container{ display: flex; align-items: center; justify-content: center; } .container div{ width: 100px; height: 100px; background-color: pink; }
display有哪些值?说明他们的作用
block 块元素,可设置宽高,换行显示
inline 行内元素,不可设置宽高,同行显示
inline-block 可以设置宽高,同行显示
none 不显示
list-item 像块元素一样显示,并添加样式列表标记
table 以块级表格显示
inherit 从父元素继承display的值
position的值relative和absolute定位原点是?
absolute 绝对定位,相对于不为static的第一个父元素进行定位
relative 相对定位,相对于其正常位置进行定位
static 默认,按正常来显示
CSS3有哪些新特性?
新增各种css选择器
@font-face
文字渲染(text-decoration)
多列布局(multi-column layout)
圆角(border-raidus)
渐变(线性渐变和径向渐变)
阴影(text-shadow ,box-shadow)
过渡(transition)变换(transform)动画(animation)
弹性盒模型(flex-box)
请解释一下CSS3的Flexbox,以及适用场景?
用flexbox布局是通过嵌套一个Flex容器(flex-container),它所有的子元素自动成为容器成员,称为Flex项目(flex item)。
常规布局是基于块和内联流的方向,而flex布局是基于flex-flow来进行,能对不同屏幕大小自适应。
多用于手机移动端
用CSS创建一个三角形的原理是什么?
把元素不设宽高,上,右,左三条边隐藏掉
div{ width: 0; height: 0; border-width: 50px; border-style: solid; border-color: transparent transparent red transparent; }
经常遇到的浏览器兼容性有哪些?解决的方法是什么?
*IE下可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()来获取自定义属性;
Firefox下,只能使用getAttribute()来获取自定义属性。
解决方法:同意通过getAttribute()来获取自定义属性。
*IE下,event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但没有x,y属性
解决方法:条件注释(缺点是在IE下可能会增加额外的HTTP请求)
*Chrome中文界面默认会将小于12px的文本强制按照12px显示
解决方法:
1 用图片,将小于12px的文字内容切出做成图片;
2 建议设计美工图的时候设置大于或等于12px的字体,给客户讲解小于12px浏览器不兼容的问题;
3 可以通过CSS属性 -webkit-text-size-adjust:none; 做到最大兼容。
*超链接访问过后hover样式就不出现了
解决方法:遵循love-hate规则:a:link{ } a:visited{ } a:hover{ } a:avtive{ }
li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
li与li之间有空格/回车空白内容,这些空白也会被用于样式,占据空间。
解决方法:把字符大小设为0。
为什么要初始化CSS样式?
不同浏览器默认的样式是不一样的,为了达到页面在不同浏览器中显示一样,所以要初始化CSS样式。
CSS定义的权重
标签权重为1,class的权重为10,id的权重为100。如果权重相同,则后面的样式会起作用。
请解释一下为什么需要清除浮动?清除浮动的方式
清除浮动是为了清除使用浮动元素产生的影响。浮动的元素会使高度塌陷,导致页面布局不正常显示。
清除浮动的方式:
1 父级div定义height;
2 父级div也一起浮动;
3 加伪元素
.clearfix:after{ content: ""; visibility: hidden; display: block; height: 0; clear: both; }
CSS优化、提高性能的方法有哪些?
关键选择器。选择器的最后部分为关键选择器;
如果以id选择器作为关键选择器,则不要为其添加标签。过滤掉无关的规则;
提取项目的公有样式,增强可复用性,按模块编写组件;增强项目的协同开发性、可维护性和可扩展性;
使用预处理工具或构建工具(gulp对css进行语法检查、自动补前缀、打包压缩、自动优雅降级)
浏览器是怎样解析CSS选择器?
样式系统从关键选择器开始匹配,然后左移查找选择器的祖先元素。
只要选择器的子树一直在工作,样式系统就会持续左移,直到匹配或因不匹配放弃。
::before和:after中双冒号和单冒号有什么区别?
单冒号(:)用于CSS3的伪类,双冒号(::)用于CSS3的伪元素。
双冒号是当前规范中引入的,用于区分伪类和伪元素。
如何修改chrome记住密码后自动填充表单的黄色背景?
input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{ background-color: rgb(250, 255, 189); background-image: none; color: rgb(0, 0, 0); }
设置元素浮动后,该元素的display值是多少?
自动变成了display:block
让页面里的字体变清晰,变细用CSS怎么做?
-webkit-font-smoothing:antialiased;
font-style属性设置为“oblique”是什么意思?
倾斜的字体样式
position:fixed在手机端无效怎么处理?
fixed的元素是相对于整个页面固定位置,你在屏幕上滑动只是移动viewport
原来的网页没问题,fixed的内容也没有变过,
问题的关键在于fixed的元素不是相对于手机屏幕固定
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minmum-scale=1.0,user-scalable=no" />
CSS动画的最小时间间隔是多久?为什么?
多数显示器默认的频率是60HZ,即1秒刷新60次,所以理论上最小间隔为1000/60=16.7ms
display:inline-block什么时候会显示间隙?
移除空格,使用margin负值,使用font-size:0,letter-spacing,word-spacing
什么是CSS预处理器/后处理器?
预处理器,如less,sass,用来预编译sass或less,增强了css代码的复用性,具有很方便的UI组件模块化开发能力,极大的提高工作效率。
后处理器,如postcss,通常被视为在完成的样式表中根据CSS规范处理CSS,让其更有效。目前最常做的是给CSS属性添加浏览器的私有前缀,实现跨浏览器的兼容。