第四天笔记

1.盒子模型

内边距
/* 应用于所有边 */
padding: 1em;
/* 上边下边 | 左边右边 */
padding: 5% 10%;
/* 上边 | 左边右边 | 下边 */
padding: 1em 2em 2em;
/* 上边 | 右边 | 下边 | 左边 */
padding: 5px 1em 0 2em;
 
/* 全局值 */
padding: inherit;
padding: initial;
padding: unset;
 
 
border单独的边界属性
/* style */
border: solid;
/* width | style */
border: 2px dotted;
/* style | color */
border: outset #f33;
/* width | style | color */
border: medium dashed green;
 
margin外边距属性
/* 应用于所有边 */
margin: 1em;
margin: -3px;
/* 上边下边 | 左边右边 */
margin: 5% auto;
/* 上边 | 左边右边 | 下边 */
margin: 1em auto 2em;
/* 上边 | 右边 | 下边 | 左边 */
margin: 2px 1em 0 auto;
2. 外边距塌陷问题

父元素的第一个子元素的margin-top值会被父元素抢走

解决方法：1.给父元素添加边框2.子元素overflow:hidden; -------偏方

3.文本溢出

overflow: auto; 文本框

overflow: hidden; 隐藏多出

4.样式继承

       不是所有样式都继承，只有改变之后对布局无影响的样式，才会继承

a链接最好在自身更改样式

5.解决padding影响盒子大小问题

box-sizing: border-box;

6.flex布局

display: flex;
 
/* 排列方式 */
 
flex-direction: row-reverse;
 
flex-direction: column;
 
flex-direction: column-reverse;
 
flex-direction: row;
 
/* 让flex布局变为多行 */
 
flex-wrap: wrap;
 
/* flex-wrap: nowrap; */
 
/* flex-wrap: wrap; */
 
/* 主轴上的布局 */
 
justify-content: center;
 
justify-content: end;
 
justify-content: space-around;
 
justify-content: space-evenly;
 
justify-content: space-between;
 
 
/* 侧轴 */
 
/* align-items 单行的 align-content：多行的*/
 
align-items: center;
 
/* align-items: end; */
 
align-items: start;
 
 
 
align-content: start;
 
align-content: end;
 
align-content: center;
 
align-content: space-between;
 
align-content: space-around;
 
align-content: space-evenly;
 

7.浮动float: left;

浮动，会脱离文档流 不再保留原来位置 会造成在其下方的兄弟元素位置发生变化 

当子元素发生浮动时，其父元素的高度发生塌陷