css已设置width100% 为什么宽度没有占满浏览器?

html-css041

css已设置width100% 为什么宽度没有占满浏览器?,第1张

因为浏览器默认情况下会为元素添加margin和padding属性,需要将这两个属性初始化为0.

1、新建html文档,在body标签中添加一个div标签,然后为这个div设置一些样式:

2、用浏览器打开编辑好的html文档,这时可以从浏览器中发现浏览器四周留有一些白色空隙:

3、在style标签中为“*”添加“margin: 0padding: 0”样式,“*”表示所有元素,“margin”和“padding”表示外边距和内边距:

4、用浏览器重新打开编辑好的html文档,这时浏览器四周的白色空隙都会被去除:

padding-top= (高度/宽度)*100%即图片的高度与宽度的比例,因此就能实现背景图宽度100%,高度自适应

为了达到更好的效果再配合cover和center

既要宽度100%,又要不变形,这两个条件决定了图片的高度不能另外设置,只能跟随宽度的变化而变化,这样就无法保证完全覆盖剩余区域。除非把条件改为:当图片的宽高比大于区域的宽高比,则图片的高度100%,宽度超出区域的部分允许突出在区域外面;反之,则宽度100%,高度超出区域的部分允许突出在区域外面。是这个意思吗?