一、水平方向
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>.outer{width: 800px;height: 200px;border: 10px #FF0000 solid;}.inner{/* width的值默认为auto */width: 200px;height: 200px;background-color: #BBFFAA;/* 元素的水平方向的布局：元素在其父元素中水平方向的位置由以下几个属性共同决定：margin-leftborder-leftpadding-leftwidthpadding-rightborder-rightmargin-right一个元素在其父元素中，水平布局必须要满足以下的等式：margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区的宽度（必须满足）而实际上为： 0 + 0 + 0 + 200 + 0 + 0 + 0 = 600 != 800以上等式必须满足，如果相加结果使等式不成立，则称为过渡约束，则等式会自动调整调整的情况:如果这七个值中没有为auto的情况，则浏览器会自动调整margin-right值以使等式满足0 + 0 + 0 + 200 + 0 + 0 + 600 = 800这七个值中有三个值可设置为autowidth margin-leftmaring-right如果某个值为auto,则会自动调整为auto的那个值以使等式成立如果将一个宽度和一个外边距设置为auto,则宽度会调整到最大，设置为auto的外边距会自动为0如果将三个值都设置为auto,则外边距都是0，宽度最大如果将两个外边距设置为auto,宽度固定值，则会将外边距设置为相同的值所以我们经常利用这个特点来使一个元素在其父元素中水平居中示例:width: xxxpx;margin:0 auto;*/}</style></head><body><div class="outer"><div class="inner"></div></div></body></html>
二、垂直方向
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>.outer{background-color: #BBFFAA;/* 默认情况下父元素的高度被子元素撑开 */}.inner{width: 100px;height: 100px;background-color: yellow;margin-bottom: 100px;}.box1{width: 200px;height: 200px;background-color: orange;overflow: hidden;}.box2{width: 100px;/* 子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出使用overflow属性来设置父元素如何处理溢出的子元素可选值:visible, 默认值子元素会从父元素中溢出，在父元素外部的位置显示hidden溢出内容将会被裁剪不会显示scroll生成两个滚动条，通过滚动条来查看完整的内容auto根据需要生成滚动条overflow-x:单独处理水平方向的溢出overflow-y:单独处理垂直方向的溢出*/height: 400px;background-color: #FF0000;}</style></head><body><div class="outer"><div class="inner"></div><div class="inner"></div></div><div class="box1"><div class="box2"></div></div></body></html>
三、外边距的折叠
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>.box1 , .box2{width: 200px;height: 200px;}/* 垂直外边距的重叠(折叠)相邻的垂直方向外边距会发生重叠现象兄弟元素兄弟元素间的相邻垂直外边距会取两者之间的较大值(两者都是正值)特殊情况:如果相邻的外边距一正一负，则取两者的和如果相邻的外边距都是负值，则取两者中绝对值较大的兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理*/.box1{background-color: #BBFFAA;/* 设置一个下外边距 */margin-bottom: 100px;}.box2{background-color: #FFA500;/* 设置一个上外边距 */margin-top: 100px;}/* 父子元素父子元素间相邻外边距，子元素的会传递给父元素(上外边距)父子外边距的折叠会影响到页面的布局，必须要进行处理现在想单纯的将box4向下移动100px，根据目前知识有两种解决方案：方案一：不用外边距.box3{width: 200px;height: 100px;background-color: #00FFFF;padding-top: 100px;}.box4{width: 100px;height: 100px;background-color: #FF0000;}方案二：让它们不相邻*/.box3{width: 200px;height: 199px;background-color: #00FFFF;border-top: 1px #00FFFF solid;}.box4{width: 100px;height: 100px;background-color: #FF0000;margin-top: 99px;}</style></head><body><div class="box1"></div><div class="box2"></div><div class="box3"><div class="box4"></div></div></body></html>
四、行内元素的盒模型
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>.s1{background-color: #FFFF00;/* 行内元素的盒模型行内元素不支持设置宽度和高度行内元素可以设置padding,但是垂直方向padding不会影响页面的布局行内元素可以设置border,垂直方向的border不会影响页面的布局行内元素可以设置margin,垂直方向的margin不会影响布局*/margin: 100px;}.box1{width: 200px;height: 200px;background-color: #7FFFD4;}a{/* display用来设置元素显示的类型可选值:inline将元素设置为行内元素block将元素设置为块元素inline- block将元素设置为行内块元素行内块，既可以设置宽度和高度又不会独占一行table将元素设置为一个表格none元素不在页面中显示visibility用来设置元素的显示状态可选值:visible默认值，元素在页面中正常显示hidden元素在页面中隐藏不显示，但是依然占据页面的位置 */display: block;width: 100px;height: 100px;background-color: orange;}</style></head><body><a>我是超链接</a><span class="s1">我是span</span><span class="s1">我是span</span><div class="box1"></div></body></html>
五、浏览器默认样式
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>/* 默认样式:通常情况，浏览器都会为元素设置一些默认样式 默认样式的存在会影响到页面的布局，通常情况下编写网页时必须要去除浏览器的默认样式(PC端的页面)以下这种为一个元素一个元素的去除默认样式，过于繁琐，通常有两种方法代替：方法一：*{margin:0;padding:0;}缺点：有些元素的默认样式去不了方法二：引入重置样式表*/body{margin: 0;}p{margin: 0;}ul{margin: 0;padding: 0;/* 去除项目符号 */list-style: none;}.box1{width: 100px;height: 100px;border: 1px solid black;}</style></head><body><div class="box1"></div><p>我是一个段落</p><p>我是一个段落</p><p>我是一个段落</p><ul><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul></body></html>
