CSS盒子模型
所有的文档元素都会生成一个矩形框，描述着它所占有位置的空间；
首先我们介绍几个重要的概念:宽度/高度/外边距/内边距/边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS盒子</title> <style> *{ margin:0; /*外边距*/ padding:0; /*内边距*/ /* box-sizing: border-box; */ /*如果去掉或者注释这三个样式,那么box1就会和浏览器左上角有一点点的空白 浏览器默认会给元素一些外边距等属性,因为早期的网站还是比较普通，对于布局 没有什么严格的要求,所以之前css没有现在用的这么多，但是随着社会的发展 人们需求的提高,我们一开始就要把这些浏览器给样式自定义的样式清除掉，这样 会更方便我们去给网站进行布局 */ } .box1{ /* 1.我们可以通过宽度和高度来设置元素的大小(但是不是所有的元素都有宽度和高度的) 如果我们不设置的话他的宽度和高度就是auto,那么auto是什么,auto的意思是它会根据 子元素来决定他的高度，宽度是尽可能的宽(包含块宽度—元素水平外边距-元素水平边距 宽度-元素水平内边距),比如box2的大小由box3(高度)和body(宽度)决定,然后我们说min-width, min-height,max-width,max-height 如果我们去掉 box5,box4的宽度是400px,高度是200px, 也就是说宽度受body影响会尽可能的大,但是也不能超过max-weight,高度里面 没有元素支持 会尽可能的小,但是也不能小于min-height,这是一个区间,但是这个区间只设置一个也是可以 的,但是如果子元素的大小大于父级元素怎么办如box7,置于box7是一个怎样的表现取决与 box6的overflow属性,如果overflow没设置,那么就是overflow:visible,就是超出内容正常显示 还可以设置hidden(超出隐藏),scroll(一直显示滚动条),auto(根据内容来决定是否显示滚动条) 还有overflow-x,overflow-y自行百度查一下即可， 2.外边距 3.内边距 4.边框和阴影 */ width: 200px; height: 200px; background-color: yellowgreen; } .box2{ background: #eee; } .box3{ width: 300px; height: 300px; background-color: red; } .box4{ min-height: 200px; min-width: 200px; max-height: 400px; max-width: 400px; background: red; } .box5{ width: 300px; height: 300px; background:green; } .box6{ width: 300px; height: 300px; border:1px solid red; /* overflow: auto; */ } .box7{ width: 500px; height: 500px; background: green; } </style> </head> <body> <div class="box1"> box1 </div> <div class="box2"> <div class="box3"> box3 </div> </div> <div class="box4"> <div class="box5">box5</div> </div> <div class="box6"> <div class="box7">box7</div> </div> </body> </html>
原文：https://www.cnblogs.com/qianduan888/p/12339638.html