css中width、height、margin、padding默认值总结

默认值

left top right bottom width height：默认值为 auto

margin padding: 默认值为 0

百分比参照于谁

width margin padding: 包含块的width

height: 包含块的height

left: 包含块的width

top: 包含块的height

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>test</title><style type="text/css">* {margin: 0;padding: 0;}.box {margin：50px auto;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>

css中width、height、margin、padding默认值总结相关推荐

CSS中position的几个属性值
CSS中position的几个属性值 position的四种取值 : static:static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你想覆盖以前的定义时才需要显示指定 ...
CSS中定位属性的常见属性值
CSS中定位属性的常见属性值在使用CSS对页面布局时,我们常会使用到定位属性,定位主要应用于一个元素在另外一个元素之上,或者我们需要在网页中精准地确定某一个元素的位置,并且这个元素有明确的参照物.其 ...
css中position的4个取值的含义
css中position的4个取值的含义一.在我们书写css代码的时候,position取值有4个,分别是: 1. Absolute:绝对定位,是相对于最近的且不是static定位的父元素来定位 2 ...
Swift语言中为外部参数设置默认值可变参数常量参数变量参数输入输出参数
Swift语言中为外部参数设置默认值可变参数常量参数变量参数输入输出参数 7.4.4 为外部参数设置默认值开发者也可以对外部参数设置默认值.这时,调用的时候,也可以省略参数传递本文选自Swift ...
html5下拉列表默认值,element-ui中的select下拉列表设置默认值方法_简单_前端开发者...
element-ui中的select下拉列表如何设置默认值? 在element-ui的运用中,涉及到了select下拉列表.项目中需要将select的默认值给展示出来那如何修改呢? 上element ...
金蝶KIS专业版旗舰版如何将物料属性中的科目代码设置默认值
如何将物料属性中的科目代码设置默认值? 请按下列步骤操作: 1.打开[基础设置]→[核算项目]:2.单击[核算项目资料]列表下的[物料],单击工具条[修改]: 3.在[核算项目类别-修改]窗口,单击[ ...
【CSS中width、height的默认值】
对于初学者来说,CSS中的width.height的默认值是很神奇的,因为经常看到如下这样的代码:明明只给一个#father标签(红色的div)设置了一个width,为啥它在浏览器中显示出来是有一个固 ...
padding在css中是什么意思,padding
Padding[1] (填充)属性定义元素边框与元素内容之间的空间. padding 简写属性在一个声明中设置所有内边距属性.设置所有当前或者指定元素内边距属性.该属性可以有1到4个值. 当元素的 P ...
css中width是什么意思,css width是什么意思
width是宽度的意思,它是CSS中的一个用于设置元素宽度的属性. width属性设置元素的宽度. width属性定义元素内容区的宽度,在内容区外面可以增加内边距.边框和外边距:行内非替换元素会忽略这 ...

css中width、height、margin、padding默认值总结

默认值

百分比参照于谁

width: auto与width: 100%区别

css中width、height、margin、padding默认值总结相关推荐

最新文章

热门文章