一)盒子模型:
HTML中的元素，其实本质上来说就是一个矩形
HTML中的元素，都是一个矩形，矩形里面包含着一些内容，可以存放一些文字，就好像一个盒子一样；
一个盒子由下面的四个部分组成:
1)外边距:margin
2)边框:border
3)内边距:padding
4)内容
当我们进行点击页面中的a标签的时候
下面来举一个盖房子的例子来进行理解:
因此我们就可以通过CSS的属性来进行设置当前这几个方面的尺寸
1)内边距:margin
2)内边距:padding
3)边框:border
一)边框
0)正常来说border的属性有三个值组合:
border-width:表示边框的粗细
border-style:表示边框的样式
border-style表示边框的样式，常见的属性有none(无边框),hiddle:无边框；dotted:点状边框，dashed:虚线；groove：凹恒边框；ridge:3D拢状边框，insert:3Dinsert边框；
border-color:表示边框的颜色
1)设置边框的时候，三个属性一起写，加上边框之后，会撑大盒子，会撑大原来的盒子，边框会进行新增空间，现在的边框可以撑大盒子，设置边框很容易就把元素的尺寸给改变了；
进一步的就影响了页面布局和页面排版；
例如说页面宽度是500px，里面要放很多图片，5个图片1行，每一个图片100px宽度，结果给图片加上了一个边框，就最终可能会导致一行显示不了5张图片；
2)因此在实际开发中，更常用到的操作是，是设置border-box属性为border-box；这个时候设置的边框会挤压元素内容，不会撑大盒子:box-sizing:border-box
3)加上边框之后，最终的元素尺寸会加上边框的；
4)在进行演示内边距和边框的时候，我们根据CSS选中元素的时候，进行设置height属性和width属性都是针对于元素内容来进行设置的
div{ background-color:red; height:200px; width:200px; text-align:center; line-height:200px; border-left:green 20px groove;//设置左边框 border-right:black 20px groove;//设置右边框，各自元素之间没有分号 border-bottom:brown 20px groove; border-top:blue 20px groove; box-sizing:border-box;//防止撑大盒子 }
二)内边距:控制边框和内容的边距
1)默认情况下就是元素内容顶着边框来进行存放的
2)不光边框可以撑大盒子，设置内边距也是会撑大盒子的，我们还是可以设置box-sizing:border-box来进行设置不许撑大盒子；
3)实现的就是让内容距离边框左侧有一个50px的内边距，让内容距离边框顶部有一个距离为60px的上边距；
<style> div{ height:500px; width:600px; padding-left:50px; padding-top:60px; } </style> </head> <body> <div>内边距</div> </body>
1)内边距属性用padding来表示，当padding中只写一个属性时，例如只写一个20px,那么表示上下左右的内边距都是20px，写法还有很多种；
2)padding:5px 表示四个方向都是5px(四个方向都会有内边距)
padding:5px 10px 表示上下间距是5px,左右边距是10px
padding:5px 10px 20px 表示上边距5px,左右边距10px,上下边距是20px
padding:5px 10px 20px 30px 表示上5px 右 10px 下 20px 左 30px
当padding进行缩小的时候，会缩小边框和内容之间的距离
三)外边距:表示两个盒子也就是两个元素之间的边距，也就是控制边框外边和其他内容的距离
随之看出当我们使用鼠标不断放大margin-bottom中的尺寸的时候，发现你好C++的内容区域也就是div标签离下面的你好java的内容的底部距离在不断的增大
外边距margin在垂直方向上可能会存在坍塌的情况，当两个元素都进行设置了外边距的时候，实际的外边距是两者的较大值，而不是相加，但是在水平方向上是不会出现这个问题的
四)控制块级元素水平方向居中，而不是文本水平居中
1)必须要指定宽度:如果说不指定宽度，那么它的宽度默认和父亲元素保持一致；
text-align:是控制水平居中，不过是控制元素里面的文字水平居中；
line-height:文本的水平居中
2)margin:
是控制整个块级元素在父元素里面水平居中，我们在这里直接将margin设置成auto即可
(左侧是auto，右边也是auto)
下面我们来进行下面代码的展示效果:
<style> .father{ background-color:red; height:500px; width:100%; } .child{ background-color:green; width:300px; height:300px; } </style> </head> <body> <div class="father"> <div class="child"> text1 </div> </div>
下面我们在子元素上加上margin:0 auto，就可以实现div这个块级元素在整个大的背景图中水平居中了，上下外边距是0，左右外边距是auto；
同样margin只能控制块级元素在父亲背景中水平居中，但是从本质上来说margin是不可以控制元素垂直居中，margin可以控制水平居中纯属凑巧(left-auto,right-auto)
五)清除浏览器的默认样式：看上面的图片text1的顶端并不是顶在网页的顶端，这时我们就可以清除浏览器的默认样式
*{ margin:0; padding:0; box-sizing:0; }
六)弹性布局:既完成水平方向上的布局，也完成垂直方向上的布局，是页面布局时候的一种主流方式，主要是为了描述一行里面的多个子元素是如何进行排列的
1)前面介绍的属性，大部分都是针对于元素本身来进行设置的，但是这里面的有些属性，是影响到元素和元素之间的，其中的盒子模型(外边距)就是其中的一部分，但是还不够
2)弹性布局就是用来强化这一点的，默认的网页布局，其实是从上到下的，因为块级元素是独占一行的，但是实际的网页，不仅仅需要从上到下，也需要从左到右
3)弹性布局:它存在的目的就是为了更好地解决按照水平方向上布局的这样一个问题的
4)flex本质就是给父亲盒子添加display:flex属性，来进行控制子盒子的位置和排列方式
页面布局：让元素被摆放一个适当的位置上；
弹性布局：更好的解决水平方向布局的问题；
块级元素：默认就是独占一行的，怎么样才可以让他水平布局呢？
1)之前说过通过使用display来改变元素的排列方式，那他转化成行内块元素，从而达到既可以横向排列，又可以水平排列；
下面就可以实现两个div块级元素水平在一行的(默认是竖着排列的，我们是想让他水平排列)
2)这种方法固然可以，但是两个行内块元素之间会有一个小空格，写着十分不方便
3)我们就可以使用display:flex来实现元素弹性布局
display:flex，这里将display:flex
直接写到父类元素中，由此经过这个写法，和上图中展示的结果是一致的，还没有了空格
.father{ display:flex; background-color:red; height:500px; } .child1{ background-color:green; height:200px; width:200px; } .child2{ background-color:green; width:200px; height:200px; } <div class="father"> <div class="child1"> child1 </div> <div class="child2"> child2 </div>默认的布局方式是垂直方向上的布局，如果需要进行水平方向上的布局，就可以使用弹性布局，通过flex布局，就可以实现子元素排列的方式，因为当在父亲元素中设置display:flex的时候，这些元素都是默认挤在左上角的
一)justfy-content:专门在水平方向上，控制块级元素
1)先在父亲元素里面，让元素变成弹性布局的方式
2)再从父亲元素里面的写:justfy-conent来实现多个子元素在父亲元素里面的排列方式
<style> .father{ background-color:red; width:100%; height:600px; display:flex; /* 先根据弹性布局把块级元素水平排列 */ justify-content:space-around; //再按照特殊的弹性布局进行排列 } .child1 .child2 .child3 .child4{ background-color:green; width:100px; height:100px } </style> <div class="father"> <div class="child1">test1</div> <div class="child2">test2</div> <div class="child3">test3</div> <div class="child4">test4</div> </div>
这个过程就是先将块级元素水平排列，再根据justfiy-content来进行分布水平排列，如果说没有justfy-content和display:flex,布局就会变成下面这样:
那么此时的页面效果就变成了这样，因为是四个块级元素，四个块级元素各自独占一行
写在父亲元素里面
justfy-content里面常使用的值:1)space-around:让元素之间有一些等分的间隔，最左面的元素和最右边的元素都是和边框有距离的，它也是等距离划分的，但是当元素只有一个的时候，元素会排在水平方向的中间位置
2)flex-start:水平方向边挨着边挤在最左面
3)flex-end:水平方向边挨着边挤在最右面
4)center:在水平方向中间挤
5)space-between:在水平方向上假设有两个行内块级元素一个挤在最左边，一个挤在最右边，让元素在整个水平方向上可以均匀的排列，这些间隔都是浏览器自动计算的
二)align-items:来控制块级元素的垂直居中，在竖直方向上进行控制(侧轴上排列)
在上面的父亲元素上面加上align-items："center"，这就可实现垂直居中，就变成了这样:
flex-start:靠上来进行显示
flex-end:靠最下来进行显示
flex-enter:处置居中
<style> .father{ background-color:red; width:100%; height:600px; display:flex; justify-content: space-around; align-items:center; } .child1{ background-color:green; width:100px; height:100px; } </style> </head> <body> <div class="father"> <div class="child">test</div> </div> </body>
练习:实现一个页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .home{ height:1000px; width:1300px; background-color:red; } .father1{ height:100px; width:1300px; background-color:aqua; } .father2{ height:800px; width:1300px; background-color:blue; display:flex; justify-content:space-between; } .child1{ width:160px; height:800px; background-color:green; } .content{ height:800px; width:980px; } .child2{ width:160px; height:800px; background-color:green; } .father3{ width:14300px; height:400px; } *{ margin:0; padding:0; box-sizing:0; } </style> <body> <div class="home"> <div class="father1"></div> <div class="father2"> <div class="child1"></div> <div class="content"></div> <div class="child2"></div> </div> <div class="father3"></div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .nav{ width: 100%; height: 50px; background-color: rgb(60, 60, 60); color: white; text-align: center; line-height: 50px; font-size: 20px; } .container{ height:1000px ; width: 100%; background-color:grey; display: flex; justify-content:center; } .container>.left{ width: 20%; height: 100%; background-color: green; text-align: center; line-height: 1000px; } .container>.right{ width:20%; height: 100%; background-color: green; text-align: center; line-height: 1000px; } .container>.content{ width:80%; height:100%; background-color: blue; text-align: center; line-height: 1000px; } .foot{ width: 100%; height: 30%; background-color:red; text-align: center; line-height: 300px; } </style> </head> <body> <div class="nav">导航栏</div> <div class="container"> <div class="left">左侧边栏</div> <div class="content">文字部分</div> <div class="right">右侧边栏</div> </div> <div class="foot">底部区域</div> </body> </html>
1)设置父亲元素中背景图片在背景颜色中的位置，可以让图片水平居中:(先要保证不平铺),这个属性用background-position来表示
background-position(参数1，参数2）里面的参数有两个，一个是水平方向上上的位置，一个是垂直方向上的位置
2)设置行内元素独占一行，况且可以给行内元素设置宽高display:block(这时既可以独占一行，有可以设置宽高)
3)设置行内元素及可以设置宽高，又可以不独占一行(多个行内元素可以在同一行)
行内块元素:可以让他横着排列，display:inline-block
4)控制内边距，每一个标签相当于是一个盒子，内边距就是来控制内容和边框之间的距离；
5)控制块级元素水平居中(在父亲的背景中水平居中):margin:auto;况且这种方法只是针对块级元素来说的；
在这个地方要注意:text-algin是控制元素里面的文字水平居中，line-height是设置元素里面的文字处置居中，但是margin是控制当前标签元素在整个父亲元素里面水平居中
6)控制多个块级元素不独占一行，全部想让他水平进行排列
1)变成行内块元素
2)直接在多个块级元素的父亲元素里面加上一个属性
display:flex,就可以实现水平布局了；
这样做有一个很大的好处，我们仍然可以保持原来的元素的属性不变(行内元素还是行内元素，块级元素还是块级元素，就算是span标签，也是可以实现弹性布局的；
7)加上display:flex，还可以分成下面两个用法:
1）justfy-content:center
2）align-items:center
这样就可以控制元素水平垂直居中
