显示模式

    显示模式：标签（元素）的显示方式作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容块级元素特点：独占一行宽度默认是父级的100%添加宽高属性生效行内元素特点：一行可以显示多个宽高尺寸由内容撑开设置宽高属性不生效行内块元素特点：一行可以显示多个宽高尺寸也可以由内容撑开设置宽高属性生效

转换显示模式

   	属性：display属性值        效果block        块级inline-block 行内块inline       行内display: inline;

盒子模型

    内容区域 – width & height内边距 – padding（出现在内容与盒子边缘之间）边框线 – border 外边距 – margin（出现在盒子外面）div {margin: 50px;border: 5px solid brown;padding: 20px;width: 200px;height: 200px;background-color: pink;}

边框线

	  四个方向边框线属性名：border（bd）属性值：边框线粗细  线条样式  颜色（不区分顺序）属性值  线条样式solid   实线dashed  虚线otted   点线div {width: 200px;height: 200px;background-color: pink;/* 实线 *//* border: 1px solid #000; *//* 虚线 *//* border: 2px dashed red; *//* 点线 */border: 3px dotted green;}

    单方向边框线属性名：border-方位名词（bd+方位名词首字母，例如，bdl）属性值：边框线粗细  线条样式  颜色（不区分顺序）方位词  方向top     上bottom  下left    左right   右div {width: 200px;height: 200px;background-color: pink;border-top: 1px solid #000;border-right: 2px dashed red;border-bottom: 5px dotted green;border-left: 10px solid orange;}

内边距

    作用：设置 内容 与 盒子边缘 之间的距离属性名：padding / padding-方位名词属性值：数字 + px提示：添加 padding 会撑大盒子div {width: 200px;height: 200px;background-color: pink;/* 四个方向 内边距相同 */padding: 30px;/* padding: 20px; *//* 单独设置一个方向内边距 */padding-top: 10px;padding-right: 20px;padding-bottom: 40px;padding-left: 80px;}

padding 多值写法

技巧：从 上 开始 顺时针 赋值，当前方向没有数值则与 对面取值相同

取值个数	实例	含义
一个值	padding:10px;	四个方向内边距均为10px
两个值	padding: 10px 80px;	上下：10px；左右：80px
三个值	padding: 10px 40px 80px;	上：10px；左右：40px；下80px
四个值	padding: 10px 20px 40px 80px;	上：10px；右：20px；下：40px；左：80px

尺寸计算与内减法模式

    默认情况：盒子尺寸 = 内容尺寸 + 内边距尺寸 + border 尺寸结论：给盒子加 border / padding 会撑大盒子解决：手动做减法：减掉 border / padding 的尺寸內减模式：box-sizing: border-box（不需要手动减法，加padding和border不会撑大盒子）div {width: 200px;height: 200px;/* 手动减法 *//* width: 160px;height: 160px; */background-color: pink;padding: 20px;/* 內减模式：不需要手动减法，加padding和border不会撑大盒子 */box-sizing: border-box;}

外边距

     外边距 作用：拉开两个盒子之间的距离属性名：margin属性值：数字 + px提示：与 padding 属性值写法、含义相同版心居中左右 margin 值 为 auto（盒子要有宽度）/* 版心居中要求：盒子要有宽度 */width: 1000px;height: 200px;background-color: pink;/* 外边距 不会 撑大盒子 *//* 版心居中 */margin: 0 auto;

清除默认样式

    清除标签默认的样式，比如：默认的内外边距/* 清除默认内外边距 */* {margin: 0;padding: 0;/* 内减模式 */box-sizing: border-box;}/* 去掉列表的项目符号 */li {list-style: none;}/* 去掉超链接下划线 */a {text-decoration: none;}

元素溢出

    作用：控制溢出元素的内容的显示方式属性名：overflow属性值    效果hidden    溢出隐藏scroll    溢出滚动（无论是否溢出，都显示滚动条位置）auto      溢出滚动（溢出才显示滚动条位置）div {width: 200px;height: 200px;background-color: pink;overflow: hidden;/* overflow: scroll; *//* overflow: auto; */}

外边距问题

合并现象

    场景：垂直排列的兄弟元素，上下 margin 会合并现象：取两个 margin 中的较大值生效.one {width: 100px;height: 100px;background-color: brown;margin-bottom: 80px;}.two {width: 100px;height: 100px;background-color: orange;margin-top: 50px;}

塌陷现象

    场景：父子级的标签，子级的添加 上外边距 会产生塌陷问题现象：导致父级一起向下移动解决方法：方式一： 取消子级margin，父级设置padding方式二： 父级设置 overflow: hidden方式三： 父级设置 border-top.father {width: 300px;height: 300px;background-color: pink;/* padding-top: 50px;box-sizing: border-box; *//* 溢出隐藏 *//* overflow: hidden; */border-top: 1px solid #000;}.son {width: 100px;height: 100px;background-color: orange;margin-top: 50px;}

行内元素 – 内外边距问题

    场景：行内元素添加 margin 和 padding，无法改变元素垂直位置解决方法：给行内元素添加 line-height 可以改变垂直位置span {/* margin 和 padding 属性，无法改变垂直位置 */margin: 50px;padding: 20px;/* 行高可以改变垂直位置 */line-height: 100px;}