前端面试CSS

本文深入讲解CSS选择器的权重与优先级,解析盒模型、浮动、清除浮动等核心概念,并介绍水平垂直居中及响应式布局技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

选择器的权重和优先级

  • 选择器的类型:

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

代表内联样式,如style="xxx",权值为 1000;
代表 ID 选择器,如#content,权值为 100;
代表类、伪类和属性选择器,如.content、:hover、[attribute],权值为 10;
代表元素选择器和伪元素选择器,如div、p,权值为 1。

需要注意的是:通用选择器(*)、子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以他们的权值都为 0。 权重值大的选择器其优先级也高,相同权重的优先级又遵循后定义覆盖前面定义的情况。

盒模型

  • 标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin
  • 低版本IE盒子模型:宽度=内容宽度(content+border+padding)+ margin

box-sizing属性:

  • content-box:一个标准模式下的盒模型的计算方式
  • border-box:一个怪异模式下的盒模型的计算方式

div设置了box-sizing:border-box之后,width的宽度是内容 + padding + 边框的宽度(不包括margin),这样就比较符合我们的实际要求了。

浮动float

float被设计出来的初衷是用于文字环绕效果,即一个图片一段文字,图片float:left之后,文字会环绕图片.
float 的破坏性 —— float 破坏了父标签的原本结构,使得父标签出现了坍塌现象。导致这一现象的最根本原因在于:被设置了 float 的元素会脱离文档流。其根本原因在于 float 的设计初衷是解决文字环绕图片的问题。大家要记住 float 的这个影响。

清除浮动

.clearfix:after {
    content: '';
    display: table;
    clear: both;
}
.clearfix {
    *zoom: 1; /* 兼容 IE 低版本 */
}
<div class="clearfix">
    <img src="image/1.png" style="float: left"/>
    <img src="image/2.png" style="float: left"/>
</div>

如何实现水平居中

inline元素使用

text-align: center

block元素使用

margin: auto

绝对定位元素可结合left和margin实现,但是必须知道宽度。

.item {
    width: 300px;
    height: 100px;
    position: absolute;
    left: 50%;
    margin: -150px;
}

如何实现垂直居中

inline 元素可设置line-height的值等于height值,如单行文字垂直居中:

.container {
   height: 50px;
   line-height: 50px;
}

绝对定位元素,可结合left和margin实现,但是必须知道尺寸。

  • 优点:兼容性好
  • 缺点:需要提前知道尺寸
.container {
    position: relative;
    height: 200px;
}
.item {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -20px;
    margin-left: -40px;
}

绝对定位可结合transform实现居中。

  • 优点:不需要提前知道尺寸
  • 缺点:兼容性不好
.container {
    position: relative;
    height: 200px;
}
.item {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: blue;
}

绝对定位结合margin: auto,不需要提前知道尺寸,兼容性好

.container {
    position: relative;
    height: 300px;
}
.item {
    width: 100px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

移动端的布局用过媒体查询吗?

  • <head>里边<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样式/}

css动画

首先,使用@keyframes定义一个动画,名称为testAnimation,如下代码,通过百分比来设置不同的 CSS 样式,规定动画的变化。所有的动画变化都可以这么定义出来。

@keyframes myfirst
{
    0%   {background: red; left:0; top:0;}
    25%  {background: yellow; left:200px; top:0;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0; top:200px;}
    100% {background: red; left:0; top:0;}
}

然后,针对一个 CSS 选择器来设置动画,例如针对div元素设置动画,如下:

div {
    width: 100px;
    height: 50px;
    position: absolute;

    animation-name: myfirst;
    animation-duration: 5s;
}
### 前端面试中常见的CSS问题及解答 #### 1. 如何实现单行文本溢出显示省略号? 可以通过设置 `white-space` 属性为 `nowrap`,并配合 `overflow: hidden` 和 `text-overflow: ellipsis` 实现单行文本溢出时自动加上省略号的效果[^1]。 ```css .text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ``` #### 2. CSS样式的优先级是如何计算的? CSS样式的优先级由选择器的具体程度决定。具体来说,内联样式具有最高优先级,其次是ID选择器,接着是类选择器、属性选择器以及伪类,最后是标签选择器和伪元素[^1]。如果存在冲突,则按照权重较高的规则应用样式;若权重相同,则遵循后定义覆盖先定义的原则。 #### 3. 使用Flexbox布局时如何让子项水平居中对齐? 通过给父容器添加 `display: flex; justify-content: center; align-items: center;` 可以使子项在水平方向和垂直方向都居中对齐[^3]。 ```css .container { display: flex; justify-content: center; align-items: center; } ``` #### 4. 解释BFC(Block Formatting Context)的概念及其应用场景。 BFC是一种网页HTML文档的渲染方式,在这种模式下,盒子会根据一系列特定规则进行排列。创建新的BFC可以解决浮动塌陷等问题。通常情况下,根元素、float值不为none的元素、position绝对定位或者相对定位且z-index非auto的元素都可以触发一个新的BFC环境[^3]。 #### 5. 清除浮动有哪些方法? 清除浮动的方法主要包括: - 给父级元素添加clearfix hack; - 设置父级元素的 `overflow` 属性为 `hidden` 或者其他非visible值; - 利用`:after`伪元素来插入空白内容作为清浮工具[^1]。 ```css .clearfix::after { content: ""; display: table; clear: both; } ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值