关闭

css中width为auto或者100%的区别

时间: 2018-05-08阅读: 2325标签: 宽高

一、四个理论

1. 某div不显示设置宽度,那么width为auto.

2. 某div的width在默认情况设置的是盒子模型中content的值

3. 某div的width为100%表示的是此div盒子内容部分的宽度为其父元素的宽度。

4. 某个div的width不设置,或者设置为auto,那么表示的这个div的所有部分(内容、边框、内边距等的距离加起来)为父元素宽度。


二、小注意点

1. 有些时候,设置了某个div的背景,但是看不到,有可能是高度为0,也有可能是宽度为0.


三、实例

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../css/layout2.css">
</head>
<body>
    <div class="container">
        <div class="content1">

        </div>
        <div class="content2">

        </div>
    </div>
</body>
</html>

css

* {
    padding: 0;
    margin: 0;
}

.container {
    width: 100%;
    height: 1000px;
}

.content1{
    background: yellowgreen;
    width: auto;
    height: 100px;
    padding-left: 100px;
}

.content2 {
    background: gold;
    width: 100%;
    height: 100px;
    padding-left: 100px;
}


展示效果如下,绿色的div宽度刚好是整个浏览器宽度,黄色的div宽度却多了100px,原因就是width仅仅设置的为内容区域的宽度,左边多了100px,当然background设置的为整个div的背景色: 


来源:https://www.cnblogs.com/LiuChunfu/p/5795950.html


 

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/743

使用js如何设置、获取盒模型的宽和高

使用内联样式的元素的宽和高。浏览器渲染以后的元素的宽和高,无论是用何种方式引入的css样式都可以,但只有IE浏览器支持这种写法。计算一个元素的绝对位置(相对于视窗左上角)

css保持div等高宽比

那么css如何实现高度height随宽度width变化保持比例不变呢?即给定可变宽度的元素,它将确保其高度以响应的方式保持成比例(即,其宽度与高度的比率保持恒定)。下面以高宽 2:1 为例,通过2种方式来实现这种效果。

js获取屏幕以及元素宽高的方法

网页正文部分上:window.screenTop ,网页正文部分左:window.screenLeft,屏幕分辨率的高:window.screen.height ,屏幕分辨率的宽:window.screen.width ,屏幕可用工作区高度:window.screen.availHeight

网页中的各种上下左右宽高值

offset只读属性。width/height——显示出来的屏幕尺寸,top/left——相对于定位父元素的绝对位置.client只读属性。width/height——不带边框的offset,也不包含滚动条宽度top/left——内边距的外边缘与边框外边缘的距离,通常是边框宽度

理解css中min-width和max-width,width与它们之间的区别联系

css中,min-width是用来限制元素的最小宽度,max-width用来限制元素的最大宽度,也就是说当元素的width大于max-width,或者小于min-width。就被它们的值所代替,尤其适用于网站的自适应。下面将具体介绍下关于min-,max-的区别和联系

css如何实现保持div等高宽比?

那么css如何实现高度height随宽度width变化保持比例不变呢?即给定可变宽度的元素,它将确保其高度以响应的方式保持成比例(即,其宽度与高度的比率保持恒定)。下面以高宽 2:1 为例,通过2种方式来实现这种效果。

js获取元素,页面,屏幕,浏览器的宽度、高度方法总汇

js获取常用的获取网页,屏幕,滚动条等宽高,js获取元素的宽高等方法:clientHeight和clientWidth用于描述元素内尺寸, offsetHeight和offsetWidth用于描述元素外尺寸,lientTop和clientLeft返回内边距的边缘和边框的外边缘之间的水平和垂直距离...

通过js代码来改变div的宽度

当做网页图片的切换时,有的做法是将两个div并排在一起,但是只能显示一个div的宽度,当要切换图片时将一个div的宽度从一个宽度值改为0,就实现了简单的图片替换了。 首先,我们将要更改宽度的div摆上来

基于max-height实现不定高度元素的折叠/合并,展开/收缩的动画效果

基于实现元素的展开收缩,max-height,给定足够大的高度,就是言义上的任意高度,相对height来说比较灵活,两者的区别就是计算高度的过程,一个是由人为计算,一个由盒子内容高度去计算知识这种写法必须给定足够存放内容的高。

js获取浏览器/界面宽高的问题_以及兼容性实现方案

js获取浏览器/界面宽高的问题:clientHeight和clientWidth获取可视区域大小,scrollHeight和scrollWidth获取网页内容高度和宽度。offsetHeight和offsetWidth,获取网页内容高度和宽度(可视区域包括滚动条等边线,会随窗口的显示大小改变)

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!