CSS基础问题总结

阅读() @2018-07-15 14:13:46

1、 标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?

CSS盒子模型:由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height)。

标准的CSS盒子模型的宽指的是内容区域(content)的宽。

低端的IE盒子模型的宽指的是内容区宽+填充宽(padding)+边界宽(border)。

2、CSS选择符有哪些?哪些属性可以继承?

(1)CSS选择符有哪些?

类型选择符(body)、群组选择符(h1,h2,h3,span)、包含选择符(h2 span)、ID选择符(#id)、Class选择符(.content)

(2)哪些属性可以继承?

CLASS属性,伪类A标签,列表ul、li、dl、dd、dt可以继承。

3、优先级算法如何计算?

优先级就近原则,而且id的样式优先级大于class的样式优先级。

原则一: 继承不如指定;

原则二: #id > .class > 标签选择符;

原则三:越具体越强大;

原则四:标签#id >#id ; 标签.class > .class。

4、CSS3新增伪类有那些?

p:last-of-type  选择其父元素的最后的一个P元素;

p:last-child     选择其父元素的最后子元素(一定是P才行

p:first-of-type   选择其父元素的首个P元素

p:first-child       选择其父元素的首个p元素(一定是p才行

p:only-child    选择其父元素的只有一个元素(而且这个元素只能是p元素,不能有其他元素)

p:only-of-type   选择其父元素的只有一个p元素(不能有第二个P元素,其他元素可以有) 

选第N个:

p:nth-child(n)    选择其父元素的第N个 刚好是p的元素

p:nth-last-child(n)    从最后一个子元素开始计数

p:nth-of-type(n)   选择其父元素的n个元素

p:nth-last-of-type(n)  从最后一个子元素开始计数

5、li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法。

浏览器的默认行为是把inline元素间的空白字符(空格换行tab)渲染成一个空格,也就是我们上面的代码<li>换行后会产生换行字符,而它会变成一个空格,当然空格就占用一个字符的宽度。

Li设置:letter-spacing:normal;(间隙设置为默认的)

ul设置:letter-spacing:-3px; font-size:0px;

6、为什么要初始化CSS样式

消除浏览器之间的差异、减少代码重复。

7、元素竖向的百分比设定是相对于容器的高度吗

当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,但是,对于一些表示竖向距离的属性,例如 padding-top , padding-bottom , margin-top , margin-bottom 等,当按百分比设定它们时,依据的也是父容器的宽度,而不是高度。

8、什么是响应式设计?为什么要做响应式设计?响应式设计的基本原理是什么?

页面的设计和开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、css media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。

响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明viewport:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

9、让页面里的字体变清晰,变细用CSS怎么做?

-webkit-font-smoothing: antialiased;

文章内容部分参考自网络,且持续更新中!

微信二维码