您现在的位置是：网站首页> 编程资料编程资料

css属性width默认值width: auto与width: 100%区别详解Css深刻理解width:auto的用法

2023-10-17 348人已围观

简介 这篇文章主要介绍了css属性width默认值width: auto与width: 100%区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

width: auto

  • 子元素（包括content+padding+border+margin）撑满整个父元素的content区域。
  • 子元素有margin、border、padding时，会减去子元素content区域相对应的width值
  • 父元素的content = 子元素（content + padding + border + margin )

width: 100%

  • 强制将子元素的content区域 撑满 父元素的content区域
  • 子元素有margin、border、padding时，不改变子元素content区域的width，而是溢出父盒子，保持原有值
  • 父元素的content = 子元素的content

一例胜千言：

Document

width:auto

width:100%

注： 图片 子 width 改为 子 content

到此这篇关于css属性width默认值width: auto与width: 100%区别详解的文章就介绍到这了,更多相关css width: auto与width: 100%内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

上一篇：详解css3中的伪类before和after常见用法CSS伪类:empty让我眼前一亮(实例代码)浅谈CSS 伪元素&伪类的妙用CSS 伪类修改input选中样式的示例代码css伪类 右下角点击出现 对号角标表示选中的示例代码css选择器四大类：基本、组合、属性、伪类详解如何使用CSS3中的结构伪类选择器和伪元素选择器解决移动端跳转问题(CSS过渡、target伪类)css3 伪类选择器快速复习小结CSS新增的:where和:is伪类函数是什么

下一篇：详解在table设置max-width以及min-width兼容问题和解决方案多个div中table的tdwidth设置一样也不法对齐关于table的width:100%和margin导致溢出

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网