盒子模型
六大属性
width
盒子内容宽度
height
盒子内容高度
padding
1.内边距，补白 内容与border之间的距离，上下左右都有padding
2.有些标签有默认的padding *{padding:0;}
3.应用：调整内容与border之间的间隙
4.padding在页面是占空间的
<style>
*{
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
border: 2px solid red;
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>
<div>
<p>内边距</p>
</div>
</body>
1.盒子的外边距 盒子边框之外的距离，也分上右下左，margin可以设置负值。
2.margin-top margin-right margin-bottom margin-left
3.应用：*{margin:0} 水平居中 网站顶部背景100%宽 版心最新版居中。
4.margin对于男标签在四个方向上都有作用，对于女标签，只在水平方向上有效，在垂直方向上无效。
5.margin重叠（塌陷）：
2个前提：男标签，垂直方向
兄弟元素之间的重叠：上面盒子的下margin和下面盒子的上margin重叠，中间的margin大小是取大优先
解决重叠：
方法1：给男的变成不男不女的
方法2：浮动（浮动元素是不会塌陷的）
父子元素之间的重叠：父元素设置margin-top和父中第一个子元素设置的margin-top会重叠
解决重叠：
方法1：给父元素设置border-top 不想要边框，使用transparent
方法2：给父元素设置padding-top
方法3：给男的变成不男不女的
border
1.盒子的边框 盒子的边框也是有上边框，右边框，下边框，左边框
2.border:粗细 线型 颜色 border:1px solid red;
3.四个方向：border-top border-right border-bottom border-left
4.border-width border-style border-color
5.border-top-width xxx
6.border在页面是占空间的
7.应用：border可以实现小三角
<style>
div{
width: 0px;
border: 10px solid transparent;
border-top: 10px solid red;
}
</style>
1.盒子背景 背景默认情况下会填充内容和padding
2.background-color:
3.background-image:
4.默认水平和垂直方向都会平铺
5.如果空间不足，图片也会显示，只是显示不完整
6.url后面的路径引号可加可不加
7.背景图片默认会填充border,padding,content
8.background-repeat:
9.background-position:
10.background-attactment:
（七）Flex
容器与项目
如果一个div上属性有一个display:flex，那称这个div是一个容器。div中的子元素为项目。
容器的属性
flex-direction: row,row-reverse,column,column-reverse(在主轴方向上决定项目的排列方向)
flex-wrap：wrap,nowrap,wrap-reverse(控制项目换行)
flex-flow：flex-direction,flex-wrap
justify-content: flex-start,flex-end,center,space-between,space-around.(决定在主轴方向上，项目之间的位置关系)
align-items： stretch,flex-start,flex-end,center,baseline(在交叉轴上项目之间的位置关系)
align-content： stretch | flex-start | flex-end | space-between | space-around（当有多个主轴时，决定多个主轴之间的位置关系）
<style>
.box {
display: flex;
border: 2px solid black;
width: 200px;
height: 200px;
/* flex-direction: row; 主轴向右 */
/* flex-direction: column;交叉轴向下 */
/* flex-direction: row-reverse;主轴向左 */
flex-direction: column-reverse;交叉轴向上
/* flex-flow: wrap;换行 */
/* flex-flow: nowrap;不换行,压缩 */
/* justify-content: space-between;项目在主轴上的排列顺序 */
/* justify-content: space-around;项目在主轴上的排列顺序 */
/* justify-content: flex-end;项目在主轴上的排列顺序 */
/* justify-content: flex-start;项目在主轴上的排列顺序 */
/* justify-content: center;项目在主轴上的排列顺序 */
/* align-items: flex-end;项目在交叉轴上的排列顺序 */
/* align-items: flex-start;项目在交叉轴上的排列顺序 */
/* align-items: center;项目在交叉轴上的排列顺序 */
/* align-content: space-around;多根主轴的排列方式 */
/* align-content: flex-end;多根主轴的排列方式 */
/* align-content: flex-start;多根主轴的排列方式 */
/* align-content: center;多根主轴的排列方式 */
/* align-content: stretch;多根主轴的排列方式 */
/* align-content: space-between;多根主轴的排列方式 */
/* flex-flow: wrap; */
}
.item1{
/* order: 2;用来改变项目的顺序 */
/* flex-grow: 2;定义项目的放大比例 */
/* flex-shrink: 0;项目压缩 */
/* flex-basis: 300px;项目在主轴上占据的大小 */
/* align-self: flex-end;单独设置某个项目的对齐方式 */
}
</style>
（八） 浮动
浮动
目的是让男标签可以并排显示。
float: left / right / none none默认的不浮动
浮动的特点
0，浮动初衷是为了实现字围（新闻），后面才发现，浮动可以让多个男标签并排显示。
1，在一个父元素内部，如果一个元素浮动了，那么它就脱离了标准文档流，后面的元素就让向上排
2，浮动并没有完全地脱离了标准文档流（破坏性--->flex），如果后面的元素内部有文字，这些文字会环绕在浮动元素的周伟，产生字围。
3，如果多个元素浮动了，那么这们就会并排显示，如果都是同一个方向的浮动，它们会紧紧地贴在一起。
4，如果一个元素浮动了，先向上移动，直到贴靠到父元素的边界，接着，如果是左浮动，就向左移动，直到移动到父元素的左边界，如果是向右浮动，就向右移动，直接移动到父元素的右边界。
5，如果一个元素没有设置高度，它的高度是靠里面的内容撑起来的。如果父元素内部元素都浮动了，那么会造成父元素的高度塌陷。
6，如果元素浮动了，那么它会造成影响：造成父元素高度塌陷。解决:显示加高度（加高法） 小偏方（overflow:hidden）
7，如果元素浮动了，它也会造成对后面的兄弟元素影响。解决：clear:both/left/right
8，应用：实现左右布局 小导航 多个规则盒子水平排列（行内块）
9，当一个浮动起来的男盒子，没有设置width，那么这个盒子的宽高会尽可能小，小到包裹住它里面的内容，这叫包裹性，
10，如果一个元素浮动了，它会悄悄地做一个变性手术。如果一个女盒子浮动了，那么就可以设置宽高了，相当于把它变成男标签。
11，如果父元素也浮动了，那么就不会出现高度塌陷了。
12，如果有左浮动，又有右浮动，那么你需要把右浮动的元素写在左左浮动的前面
13，写三个盒子，利用27种情况去讨论最后的显示。
14，浮动元素会从标准文档流中半脱离出来。证明：字围
15，一个元素浮动了，那么它也是受父元素的控制。当父元素宽度变小时，装不下所有的子元素时，后面的子元素有贴靠性。当父元素小到极限时，里面的浮动的子元素宽度是不会改变的。
元素浮动会造成影响（清除浮动）：
1，对父元素造成的影响
父元素高度塌陷
解决：显示加高度（加高法） 小偏方（overflow:hidden） clear:both
加高法：简单 基本不用 大部分情况情况下，父元素的高度是需要子元素撑起来
overflow:hidden : 简单 使用了overflow:hidden 父元素的高度会随着子元素的高度变化而变化 overflow:hidden本职工作是用来处理溢出 在使用过程中，需要注意子元素如果想要超出父元素高度，此时overflow:hidden就不适合了。
clear:both 在所有子元素后面加一个空的div 在这个div上面加clear:both ---> 内qiang法
优点：clear:both专业清除浮动的 缺点：多写一个代码
2，对后面兄弟元素造成的影响：
兄弟元素会向上移动
解决：在受影响的元素上面的加 clear:both
项目中最常用清除浮动的方法： 利用伪元素 after
说白了，就是写一个清除浮动的类，如下：
.clear:after{content=""; display:block; clear:both; height:0; overflow:hidden;}
（九）js
变量组成
变量用来保存某个值的。
变量是由两部分组成：变量名称和变量的值。
变量名称：一般情况下，赋值符号左边的就是变量。
变量的值：一般情况下，赋值符号右边。
变量声明
单独声明：var a=5;
一次性声明多个： var a=5, y=5;
重复声明:var a=5; var a=5;
遗漏声明:a=5
全局变量.局部变量
全局变量和局部变量以函数为分界线。
全局函数：函数内部，外部都可以访问。
局部变量：函数外部不能访问。
