CSS面试题

CSS选择器有哪些?哪些属性可以继承?

CSS选择符:id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器(ul > li)、后代选择器(li a)、通配符选择器(*)、属性选择器(a[rel=”external”])、伪类选择器(a:hover, li:nth-child)

可继承的属性:font-size, font-family, color

不可继承的样式:border, padding, margin, width, height
 

CSS3新增伪类有那些?

p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。
 

### CSS 面试题整理:常见与重点 #### 宏观设计 CSS 工程化的核心在于解决代码组织、拆分和模块结构的设计问题。在实际开发中,需要考虑如何将样式文件合理地划分为多个模块,以提高代码的可维护性和复用性[^1]。例如,可以采用 BEM(Block Element Modifier)命名规范来确保名的唯一性和可读性。 #### 编码优化 编码优化的目标是写出更高效、更简洁的 CSS 代码。这包括但不限于以下几点: - 使用 CSS 预处理器(如 Sass 或 Less)来增强样式管理能力。 - 避免使用通配符选择器(`*`),因为它的性能较差。 - 尽量减少嵌套层级,保持代码的扁平化结构[^1]。 #### 构建与打包 构建工具的选择对 CSS 的最终打包结果至关重要。推荐使用 Webpack 或 Rollup 等现代构建工具,并结合插件(如 MiniCssExtractPlugin)将 CSS 文件单独提取出来。此外,压缩 CSS 文件(如通过 cssnano)也是优化性能的重要手段。 #### 浮动与布局 浮动是 CSS 中一种常见的布局方式,但它可能会引发一些问题,例如父元素高度塌陷。为了解决这一问题,可以通过添加一个清除浮动的元素来修复布局。例如: ```html <div class="outter"> <div class="inner"></div> <div style="clear: both;"></div> </div> ``` ```css .outter { width: 200px; background: #3FF; border: 1px solid #000; } .inner { float: left; width: 120px; height: 80px; background: #FF3; } ``` 上述代码中,`clear: both;` 的作用是清除浮动对父容器的影响[^2]。 #### CSS 加载方式 在网页制作中,推荐使用 `<link>` 标签来加载外部 CSS 文件,而不是使用 `@import` 方法。这是因为 `<link>` 方式能够并行下载资源,而 `@import` 则会阻塞其他资源的加载[^3]。 #### 图片格式 在网页开发中,常用的图片格式包括 PNG、JPEG、GIF 和 SVG。每种格式都有其适用场景: - **PNG**:适合透明背景或高质量图像。 - **JPEG**:适合照片图像。 - **GIF**:支持动画效果。 - **SVG**:适合矢量图形,具有无限缩放而不失真的特性[^3]。 #### 其他重点考察点 - **盒模型**:标准盒模型和 IE 盒模型的区别。 - **响应式设计**:媒体查询的使用方法。 - **Flexbox 和 Grid 布局**:两种现代布局方式的语法及应用场景。 - **浏览器兼容性**:如何处理不同浏览器间的差异。 ```css /* 示例:Flexbox 布局 */ .container { display: flex; justify-content: center; align-items: center; } ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值