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;
浮动,会脱离文档流 不再保留原来位置 会造成在其下方的兄弟元素位置发生变化
当子元素发生浮动时,其父元素的高度发生塌陷