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

一例胜千言：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">* {margin: 0;padding: 0;}body {background: #dcdcdc;}.box {width: 400px;border: 3px solid red;padding: 0 50px;}.box1 {width: auto;height: 100px;background: pink;padding: 0 50px;margin: 0 50px;border-width: 0 50px;border-style: solid;border-color: green;}.box2 {width: 100%;height: 100px;background: gold;padding: 0 50px;margin: 0 50px;border-width: 0 50px;border-style: solid;border-color: green;}.box3 {width: 100px;height: 100px;background: orange;}.box4 {float: left;width: 50px;height: 50px;background: pink;}</style>
</head>
<body>
<div class="box"><div class="box1"></div><div class="box2"></div>
</div>
</body>
</html>

注：图片子 width 改为子 content

css属性width默认值width: auto与width: 100%区别相关推荐

CSS transition 的默认值
语法 transition: property duration timing-function delay|initial|inherit; 示例: div {width: 100px;height ...
为 protocol 中属性添加默认值
首先放个简单的Playground做下示范. 普通 protocol 中的 get set protocol中属性可以声明为{ get }或者{ get set }.大多数人第一眼肯定觉得{ get ...
php属性赋值吗,php – 设置类中属性的默认值
我需要编写一个类,用户可以根据需要设置自己的值.我需要为属性设置默认值. 我怎么能以正确的方式做到这一点.这是我需要实现的一个例子 class Test { protected $var1; prot ...
Java-Day11 面向对象遍程的入门 (类属性的默认值、构造方法、类的成员、static关键字、类的成员加载顺序、Java(权限)访问修饰符)
目录 1. 类的属性的默认值问题 2. 构造方法(Constructor) 3. 类的成员 3.1 类的成员之一:属性 3.2 UML类图 4. static关键字 5. 类的成员加载(运行)顺序 6 ...
【css】vertical-align默认值baseline
文章目录 vertical-align默认值baseline带来的问题问题1:尺寸不是预期的尺寸问题2:图片底部有一小部分空白解决方法第一种:vertical-align:top 第二种:内联 ...
当对象或对象属性为空时，如何安全给对象或对象属性添加默认值
今天遇到的问题,也是写代码的习惯问题,逻辑没有问题,但不规范,也不安全, 容易出现漏洞. 先将代码贴出: String isPrintLogo = vodInfoDto.getIsPrintLogo( ...
Hibernate 中Datetime类型属性数据库默认值
为什么80%的码农都做不了架构师?>>> 在有些时间,我们在设置Hibernate 的配置文件时希望POCO类的一个属性使用数据库中的默认值,这种情况出现在应用服务器和数据服务 ...
Java对性别默认值为男_当对象或对象属性为空时，如何安全给对象或对象属性添加默认值...
今天遇到的问题,也是写代码的习惯问题,逻辑没有问题,但不规范,也不安全, 容易出现漏洞. 先将代码贴出: String isPrintLogo = vodInfoDto.getIsPrintLogo( ...
typescript设置默认值_TypeScript属性的默认值
我在TypeScript中定义了一个接口,如下所示: export interface User { id?: number; name?: string; logoUrl?: File; email ...

css属性width默认值width: auto与width: 100%区别

width: auto

width: 100%

一例胜千言：

css属性width默认值width: auto与width: 100%区别相关推荐

最新文章

热门文章