因为浏览器默认情况下会为元素添加margin和padding属性,需要将这两个属性初始化为0.
1、新建html文档,在body标签中添加一个div标签,然后为这个div设置一些样式:
2、用浏览器打开编辑好的html文档,这时可以从浏览器中发现浏览器四周留有一些白色空隙:
3、在style标签中为“*”添加“margin: 0padding: 0”样式,“*”表示所有元素,“margin”和“padding”表示外边距和内边距:
4、用浏览器重新打开编辑好的html文档,这时浏览器四周的白色空隙都会被去除:
width属性的使用方法进行总结。
width属性的使用
1. 解析width:100%与width:auto的区别
如果是p的width:100%,则说明p的width会得到980px就已经充满p区域,然后自己又有padding,所以会超出p。而当width:auto时它是总体宽度(包括width,margin,padding,border)等于父级宽度(width,不包含父级的margin,padding,border),所以如果padding已经左右占去10px的空间,那么width给的值就是960px。但无论是width:100%还是auto,其计算的参照都是父级内容区width值,而非总宽度值.
2. CSS调节图片的大小,要知道width、height
如何用css调整图片的大小,使用width和height这两个属性,这两个属性分别是用来设置元素的宽度和高度的。在CSS初学阶段,全部都是使用像素作单位。
3. css
宽度
width
宽度都是直接设置标签对象宽度,并且注意“等号”后跟具体数字宽度值(或百分比),具体宽度值不用跟长度单位,默认以像素(px)为单位,在TABLE表格标签或图片img标签内设置宽度时候其值不跟html单位,默认以像素为单位。
4. CSS2.1SPEC:视觉格式化模型之width属性详解(上)
width属性有几种不同的取值方式,有几下几种:
(1)宽度值:也就是用CSS长度值来明确地规定一个盒子的宽度,取值单位可以用CSS中支持的长度单位,比如px,em等。
(2)百分比:百分比是根据
包含块的宽度来计算的。但是如果包含块的宽度需要根据包含的内容来决定,那么最终的布局是未定义的,也就是标准中没有明确规定如何计算宽度值。另外,如果盒子是绝对定位的,那么它的百分比长度在计算时是根据包含块的
padding
edge的宽度来计算的。
(3)auto:根据CSS标准中规定的宽度计算方法来计算,具体的算法下文中将详细介绍
(4)inherit:事实上width属性是不可继承的,很奇怪为什么会有inherit这个选项,实际情况中width属性一般也很少用到inherit值
5. CSS2.1SPEC:视觉格式化模型之width属性详解(下)
"shrink-to-fit"算法的计算过程:
[1]计算preferred-width:在
除非包含的内容有明确的换行符(比如有<br/>标签时),否则就不换行的情况下,容纳其包含的内容所需要的宽度。
[2]计算preferred-min-width:在
能换行时(英文碰到空格或标点符号,出现了块级元素,当然也包含出现了<br/>标签时)就换行的情况下,容纳所包含的内容需要的宽度。
[3]计算available-width:即利用2.2.3节中的公式:
available-width
=width
of
containing
block
-
'margin-left'
-
'border-left-width'
-
'padding-left'
-
'padding-right'
-
'border-right-width'
-
'margin-right,这里也包括所有滚动出去的宽度。
最终的width则为:min(preferred-width,
max(preferred-min-width,
available-width))。最终的公式可以总结为:最终的宽度以available-width为基准,同时保证不能大于preferred-width以及不能小于preferred-min-width
width和heigh默认都是auto自动伸缩的,但不同的标签效果却不一样比如div默认是width:100%,通常不用写100%
如果是table,如果div内的table没有设定100%,那就是最小值,以td为准,td没设宽度的话,就以td的内容自动撑开width;那这个div的width就是100%,table=td
通常情况,各个标签的heigh默认是0,根据不同浏览器不同显示效果也不同,可能会有几px的高度,不过一般写页面的时候,不是独立模块的话,大的框架可以设heigh,不过最终要看你设计页面来定夺;
你开始学的时候,就先不设width和heigh,自适应的页面比较好控制,也可以通过margin和padding来控制div的宽度,
比如:
<div style="width:1000px">
<div style="margin-left:50pxmargin-right50pxpadding-top:50pxpadding-bottom:50px">
<div style="heigh:1000px"></div>
</div>
</div>
这段代码里,最里层的div宽度就是900px而最外层的div高度就是1100px
如果最外层设定了高度1000px,但内层的高度超过1000px的话,会把外层的撑开,以内层的为准