网页设计,用div盒子制作网页,要怎么样才能把绿色盒子放到红色盒子下面...
想要将绿色盒子设为背景，可以通过将绿色盒子的包含在红色盒子的内部来实现。这样，绿色盒子将成为红色盒子的一部分，其背景色或背景图片会覆盖在其内部的元素之上。
如果你想让 div 有层次 那要用 ，定位的方法。如果你够聪明 看我现在和你说的 你就应该 明白了 。
为了布局，我们可以通过设置边框和背景色来帮助我们更直观地进行布局。例如：border：1px solid #000；（这是把边框显示出来，方便我们布局）背景色设置为background-color：#EEE；（这是背景色设置，#EEE为颜色值），这有助于我们区分不同的区域。div的设置属性有很多，如字体居中和设置边距等。
添加图片的描边效果有两种方法，对图片添加描边或者是给外面的盒子套个描边，先看给图片添加描边，如图；就是直接在img图片标签里添加上描边border。如图，添加了描边后的图片效果。想要改变图片的描边大小以及颜色，在这里修改。
使用背景属性即可；背景属性为background；给div添加style样式：background-image；使用绝对或相对 url 地址指定背景图像；设置或检索对象的背景图像。当背景图像与背景颜色（ background-color ）都被设定了时，背景图片将覆盖于背景颜色之上；此属性对于 currentStyle 对象而言是只读的。
content-box和border-box的区别
1、content-box和border-box是CSS中两种不同的盒模型。content-box的特点是其内容区域的大小由宽度和高度属性直接定义，而padding和border不会影响这个大小。换句话说，content-box不包含padding，这意味着其实际显示的大小可能小于你设置的宽度和高度。
2、在网页设计中，盒子模型的尺寸有两种：content-box和border-box。这两种方法的区别在于盒子的宽度是否包含padding和border。默认样式为content-box，这意味着宽度不包括padding和border。例如，设置一个100px的宽度的元素，实际上宽度只有100px，因为它没有考虑padding和border。
3、含义不同，效果不同等。含义不同：content-box是内容盒模型也是浏览器默认的盒模型。在这个模型中，元素的宽度和高度只包括内容区域，而不包括边框、内边距和外边距。而border-box是边框盒模型，在这个模型中，元素的宽度和高度包括内容、边框和内边距，但不包括外边距。
4、content-box不包含padding，border-box包含padding。
5、而content-box是最基本的裁剪方式，背景会延伸到元素的整个内容区域，包括边框、内边距和内容本身。以下是一个例子，以黄色背景展示这些差异。
css小盒子随着大盒子变大(css设置盒子大小始终为100%)
1、css中盒子里的盒子如何调整与外面大盒子的位置关系？要让盒子居中需要设置：margin：0auto。当然需要给盒子设置宽度，不然盒子默认的宽度是父容器宽度。也有其他方式，比如父容器设置display：flex；justify-content：center也是可以的。方法不少能达到效果就好了。
2、如果你怕因为屏幕的大小而不好设置的宽高的话，建议你顶部导航和底部版权栏的盒子设为width：100%； 中间正文部分就用固定width，margin：0 auto居中，中间的div全部居中就不会因为屏幕尺寸影响太大，最多是比例的问题。
3、使用视窗单位（vw/vh）： vw和vh是相对单位，1vw等于视窗宽度的1%，1vh等于视窗高度的1%。如，width： 50vw；会使盒子的宽度等于视窗宽度的一半。使用Flexbox： Flexbox布局模型非常适合创建自适应设计。通过设置display： flex；和flex-wrap： wrap；，使用可以使子元素根据可用空间进行自适应。
