一、四个理论
1. 某div不显示设置宽度，那么width为auto.
2. 某div的width在默认情况设置的是盒子模型中content的值
3. 某div的width为100%表示的是此div盒子内容部分的宽度为其父元素的宽度。
4. 某个div的width不设置，或者设置为auto,那么表示的这个div的所有部分（内容、边框、内边距等的距离加起来）为父元素宽度。
二、小注意点
1. 有些时候，设置了某个div的背景，但是看不到，有可能是高度为0，也有可能是宽度为0.
三、实例
<!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
js获取元素，页面，屏幕，浏览器的宽度、高度方法总汇
js获取常用的获取网页，屏幕，滚动条等宽高，js获取元素的宽高等方法：clientHeight和clientWidth用于描述元素内尺寸， offsetHeight和offsetWidth用于描述元素外尺寸，lientTop和clientLeft返回内边距的边缘和边框的外边缘之间的水平和垂直距离...
css实现左边定宽右边自适应的5种方法总汇
在网页布局中，通常需要实现左边定宽右边自适应布局：实现方法有：浮动布局、flex布局、使用负margin、绝对定位、table布局
理解css中min-width和max-width，width与它们之间的区别联系
css中，min-width是用来限制元素的最小宽度，max-width用来限制元素的最大宽度，也就是说当元素的width大于max-width,或者小于min-width。就被它们的值所代替，尤其适用于网站的自适应。下面将具体介绍下关于min-,max-的区别和联系
css中input与button在一行高度不一致的解决方法
在写html表单的时候，发现了一个问题：input和button设置了一样的宽高，但是显示高度确不一致，很明显的看出高度不一样。这是由于button在高度计算上始终使用了Quirks模式。
js获取浏览器/界面宽高的问题_以及兼容性实现方案
js获取浏览器/界面宽高的问题：clientHeight和clientWidth获取可视区域大小，scrollHeight和scrollWidth获取网页内容高度和宽度。offsetHeight和offsetWidth，获取网页内容高度和宽度（可视区域包括滚动条等边线，会随窗口的显示大小改变）
基于max-height实现不定高度元素的折叠/合并,展开/收缩的动画效果
基于实现元素的展开收缩，max-height，给定足够大的高度，就是言义上的任意高度，相对height来说比较灵活，两者的区别就是计算高度的过程，一个是由人为计算，一个由盒子内容高度去计算知识这种写法必须给定足够存放内容的高。
css中设置了宽度，div内容溢出不换行的的原因和解决方法
当我们为div标签声明了宽度，文本内容为单词或者纯数字的时候会出现文本越界的情况。原因是由于：浏览器在解析我们页面的时候，给这一串数字当成一个词了，这样就不会自动切断字符串而进行换行。
css保持div等高宽比
那么css如何实现高度height随宽度width变化保持比例不变呢？即给定可变宽度的元素，它将确保其高度以响应的方式保持成比例(即，其宽度与高度的比率保持恒定)。下面以高宽 2:1 为例，通过2种方式来实现这种效果。
js动态获取浏览器或页面等容器的宽高
首先说一下js动态获取浏览器或页面等容器的宽高的方法大体有哪些,有时候我们写了100%高度的时候，然后因为是当前页面的子页面，100%的只是父页面，而子页面有下拉条还有内容的话，一些东西就不能都获取到。
JS中的offset
一、offsetWidth与offsetHeight：获取的是元素的实际宽高 = width + border + padding ，二：offsetLeft与offsetTop；offsetLeft:获取自己左外边框与父级元素的左内边框的距离 ，offsetTop:获取自己上外边框与父级元素的上内边框的距离
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!