CSS基础知识

本文围绕前端面试常见的CSS问题展开。探讨了行内级元素设置宽高的情况,指出置换元素可以,非置换元素不行;介绍了清除浮动的方法,如使用额外标签;阐述了ZOOM:1的原理和作用,可解决IE下父元素不随子元素浮动扩大的问题;还提及了CSS :after选择器的用法。

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

1.行内级元素可以设置宽高吗?

  置换元素可以,非置换元素不可以。

  不会为自身内容形成新的块,而让内容分布在多行中的元素叫做行内级元素。此类元素可以与其它行内级元素在同一行中显示而不会另起一行,例如span,strong。在面试时,当被问到行内级元素可否设置宽高时,根据我们的经验往往会回答不能。但是这样往往着了面试官的道,因为有一些特殊的行内元素,比如img,input,select等等,是可以被设置宽高的。一个内容不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素。比如img是一个置换元素,当不对它设置宽高时,它会按照本身的宽高进行显示。所以这个问题的正确答案应该是置换元素可以,非置换元素不可以

参考博客:CSS十问——好奇心+刨根问底=CSSer

2.清除浮动的方法

子元素浮动后,父容器高度塌陷:高度塌陷,父容器包不住子元素

参考博客:清除浮动的七种方法

                几种常用的清除浮动方法   

               常见Web前端开发笔试题

(1)使用额外标签

 使用额外标签,这也是W3C推荐的方法。这种方法就是在内容的末尾增加一个空的标签,典型的做法就是使用类似

<br style="clear:both;" />

或者使用

<div style="clear:both;"></div>

这种办法通过增加一个HTML元素迫使外部容器撑开。不过这个办法会增加额外的标签使HTML结构看起来不够简洁。

3.ZOOM:1的原理和作用

当设置了zoom的值之后,所设置的元素就会就会扩大或者缩小,高度宽度就会重新计算了,这里一旦改变zoom值时其实也会发生重新渲染,运用这个原理,也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

注意:Firefox不支持zoom,看不出设置zoom的值之后有放大或者缩小的结果。

参考博客:ZOOM:1的原理和作用

             CSS中两种放大zoom和scale的区别  

4.CSS :after 选择器

:after 选择器在被选元素的内容后面插入内容。

 

请使用 content 属性来指定要插入的内容。

 

 

 

转载于:https://www.cnblogs.com/songsongblue/p/10895074.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值