CSS入门中,关于box-sizing、固定定位有些疑问。

CSS入门中,关于box-sizing、固定定位有些疑问。

1、电梯导航案例li里box-sizing是不是可以不写?它是不是有继承性?

https://img1.sycdn.imooc.com//climg/61a5dc1009460b1909391034.jpg

2、固定定位和绝对定位都使用top这些属性,它们有什么区别吗?

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好

1、此属性默认是没有继承性的。box-sizing默认值为content-box

可以将li中代码注释后运行观察运行效果,如下:

https://img1.sycdn.imooc.com//climg/61a5f69b09b1577913390528.jpg

设置为border-box后的运行效果如下:

https://img1.sycdn.imooc.com//climg/61a5f6e209e9fb7e13150479.jpg

2、区别是参照定位的元素不同。

固定定位的top是相对于浏览器窗口进行定位。

绝对定位的元素的位置相对于最近的已定位祖先元素进行定位,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块即body进行定位。

祝学习愉快~

  • 童真模式启动 提问者 #1

    1、(1)为什么要同时在ul和li中设置“box-sizing:border-box”?只在li中设置不可以吗?

    (2)浏览器“Styles”和“Computed”有什么不同?之前好像用的都是Styles。

    2021-12-01 15:01:04
  • 同学你好

    1、也是可以的,可以根据实际需求进行自定义,同学可自行修改代码进行测试。ul中不加实现效果如下:

    https://img1.sycdn.imooc.com//climg/61a72aa909d8345702700347.jpg

    2、Styles:查看元素的CSS属性,在元素的右边栏中的styles页面可以查看该元素的CSS属性,这个页面展示该元素原始定义的CSS属性以及从父级元素继承的CSS属性。从这个页面还可以查到该元素的某个CSS特性来自于那个CSS文件,使编码调试时修改代码变得非常方便。

    Computed:这个页面展示该元素经过计算之后的所有CSS属性,即最后浏览器渲染页面时使用的属性。属性的计算由浏览器自动进行,是浏览器渲染页面的一个必不可少的过程。

    祝学习愉快~

    2021-12-01 17:23:13
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师