HTML5/CSS3面试重点：圆角、盒模型与选择器解析

"html5css3面试题及答案,前端面试题及答案-CSS篇" 本文主要探讨了HTML5和CSS3在面试中的常见问题及答案，重点集中在CSS3的新特性、CSS的选择器、盒模型以及优先级算法等方面，旨在帮助准备前端面试的开发者巩固和提升相关知识。 1. CSS3的新特性 - **实现圆角** (border-radius)：允许元素的边角变得圆润，提供更好的视觉效果。 - **阴影** (box-shadow)：为元素添加阴影效果，增强界面层次感。 - **文字特效** (text-shadow)：让文本产生阴影或颜色渐变，增加视觉吸引力。 - **线性渐变** (gradient)：创建从一种颜色平滑过渡到另一种颜色的背景效果。 - **旋转** (transform)：可以对元素进行旋转、缩放、移动等变换操作。 - **媒体查询** (media queries)：根据设备特性和屏幕尺寸应用不同的CSS样式。 - **多栏布局** (multi-column layout)：使内容自动分成多列显示，适应不同屏幕大小。 2. CSS中link和@import的区别 - **link** 是HTML标签，用于外部样式表的链接，页面加载时与HTML文档同步加载。 - **@import** 是CSS中的导入语句，它会在HTML文档加载完成后才加载CSS。 - **兼容性** ：link在所有浏览器中都支持，@import则在IE5以上版本才能识别。 - **优先级** ：link引入的样式权重高于@import。 3. CSS的盒模型 - **标准盒模型** (content-box)：元素的width和height仅包含内容区域，不包括边框和内填充。 - **IE盒模型** (border-box)：元素的width和height包含了内容、内填充和边框。 - 使用 `box-sizing` 属性可以切换盒模型模式，`content-box` 为标准模式，`border-box` 为IE模式。 4. CSS选择符 - **id选择器** (#myid)：选择具有特定ID的元素。 - **类选择器** (.myclassname)：选择具有特定类的元素。 - **标签选择器** (div,h1,p)：选择特定标签的元素。 - **相邻选择器** (h1+p)：选择紧接在另一元素后的元素。 - **子选择器** (ul>li)：选择作为指定元素直接子元素的元素。 - **后代选择器** (li a)：选择作为指定元素后代的元素。 - **通配符选择器** (*)：选择所有元素。 - **属性选择器** (a[rel="external"])：选择具有特定属性值的元素。 - **伪类选择器** (a:hover, li:nth-child)：选择处于特定状态或位置的元素。 5. 继承与不可继承的属性 - 可继承的样式包括字体大小、字体系列、颜色和文本缩进等。 - 不可继承的样式涉及边框、内填充、外边距、宽度和高度等，这些属性不会传递给子元素。 6. CSS3新增伪类 - **p:first-of-type**：选择属于其父元素的第一个子元素。 - **p:last-of-type**：选择属于其父元素的最后一个子元素。 以上内容涵盖了面试中常见的CSS3知识点，了解并掌握这些内容对于提高面试成功率至关重要。持续学习和实践，才能在前端开发领域保持竞争力。