div width=auto 与 width = 100% 区别

发布时间:2024-11-28 02:02

CarPlay 或 Android Auto:连接手机,享受音乐与导航 #生活技巧# #自驾游建议# #自驾游必备APP#

最新推荐文章于 2024-04-02 10:00:00 发布

xiongzhengxiang 于 2013-07-16 11:20:25 发布

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

块级元素(div、p等)的初始宽度是auto。auto使块级元素占满父节点在水平方向上的所有可用空间。

具体公式如下:

‘margin-left'+border-left-width'+'padding-left'+'width'+'padding-right'+'border-right-width'+'margin-right' = width of containing block

请参考网页标准:   block-level, non-replaced elements in normal flow

只要块级元素使用样式:width=auto.就不用担心当自身有margin、padding 、border 时,宽度会超过父节点

样式width=100%,块级元素的外盒尺寸宽度将是父节点的宽度+自身在水平方向上的margin、padding、border。这样就会发生内容溢出父节点的情况,这可能是你想要的,单大多数时候,这不是你想要的

在css3样式中,使用box-size 可以破解width=100%带来的问题,但是由于pc端兼容性的问题,还不建议使用,不过可以先学习下

参考:http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

网址:div width=auto 与 width = 100% 区别 https://www.yuejiaxmz.com/news/view/294840

相关内容

html网页制作——HTML节日主题网页项目的设计与实现——圣诞节日介绍(HTML+CSS)
爱家居网页制作 网页设计与制作html+css+javascript)项目4
vue中 input type=date组件封装及调用
Web网页基于html、CSS设计——“爱家居”素材
CSS实现居中布局
【计算机毕设论文】基于SpringBoot图片热量估计系统
时间管理应用(可复制源码)
基于LayUI使用FullCalendar实现日程管理
干货整理|香港留学省钱宝典来啦!生活品质与经济的双重保障!
抽屉组件

随便看看