第四天笔记

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;

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

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