div width=auto 与 width = 100%
2017-11-06 19:15
381 查看
块级元素(div、p等)的初始宽度是auto。auto使块级元素占满父节点在水平方向上的所有可用空间。
具体公式如下:
请参考网页标准: 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/
具体公式如下:
[html] view plain copy ‘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% 区别
- div高度、宽度100%|div width、height 100% - div100%
- width:100%与width:auto的区别
- width的100%和auto
- div 的width:auto到底代表什么意思
- css中width:auto和width:100%的区别有哪些
- width 的100% 与 auto
- iframe中内嵌div的width为100%出现的不兼容现象
- width:100% width:auto; 区别
- div#container{ margin-left:auto; margin-right:auto; width:168px; }
- div高度、宽度100%|div width、height 100% - div100%
- width:auto和width:100%的区别
- width为auto或者100%的区别
- css中width:auto和width:100%的区别是什么
- CSS的width:100%和width:auto区别
- css属性width默认值width: auto与width: 100%区别
- width:auto和width:100%的区别
- div高度、宽度100% div width、height 100%
- div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
- width:auto; 和 width:100%;的不同