---恢复内容开始---
1.盒子
边框
border-top-width: 10px; 宽度
border-top-style: solid/dashed/dotted; 实线 虚线 点线
border-top-color: red; 颜色
border-top: 10px solid red; 宽 线 色 上边框
border-right:/border-bottom:/border-left: 右 下 左 边框
border:10px solid red; 宽 线 色 所有边框
border-radius:10px; 圆角边框
border-collapse:collapse; 合并表格边框
box-sizing: border-box; 边框为盒子尺寸（边框大小不变 内容会变小）
<head><meta charset="utf-8"><style> ???.cla1{ ???????width:200px; ???????height:200px; ???????border-top: 10px solid red; ????} ???.cla2{ ???????width:200px; ???????height:200px; ???????border:10px solid red; ???????border-radius:10px; ???????box-sizing: border-box; ???}</style></head><body> ???<div class="cla1"></div> ???<div class="cla2"></div></body>内间距
padding-top:10px;
padding-right:
padding-bottom:
padding-left:
padding: 上右下左 上(左右)下 (上下)(左右) 内间距
外间距
margin-top:10px;
margin-right:
margin-bottom:
margin-left:
margin:50px auto; 上下50 左右居中
margin-top 塌陷 解决方法
border: 1px solid gold;
overflow: hidden;
.clearfix:before{content:"";display:table;}
<style> ???.con{ ???????width: 300px; ???????height:200px; ???????background-color: gold; ???????/*border: 1px solid gold;*/ /*方法一*/ ???????/*overflow: hidden;*/ ??????/*方法二*/ ???????} ???.box{ ???????width: 100px; ???????height:100px; ???????background-color: green; ???????margin-top: 50px; ???} ???.clearfix:before{ ??????????/*margin-top塌陷*/ ???????content:""; ???????display:table; ???}</style></head><body> ???<div class="con clearfix"> ???????<div class="box"></div> ???</div></body>2.显示
width: ;height: ;background-color: ;
display:block/inline/inline-block/none; 块 行 行内块 隐藏
visibility:hidden; 隐藏（占位）
块元素：独占一行 可设宽高
行元素：同一行排列 不设宽高 由字体大小决定 父元素用 text-align:center;设置字体水平居中
行内块：同一行排列 可设宽高 多个行内块父不设高 自动 line-height:高度; 设置字体垂直居中
font-size:0; 同一行 无间隔
3.浮动 (定义一个宽高确定的区域 不影响整体布局)
width: ;height: ;background-color: ;
float:left/top; 覆盖下一个元素 下一个元素的文字绕图 下一个元素margin:图字间距
margin:50px
scroll 滚动条 scroll-y y轴滚动条
清除浮动（父边框不设高时）解决方法
overflow: hidden; 浮动隐藏
<div style="clear: both"></div> 加一个div清除浮动
.clearfix:after{content:"";display:table;clear: both;}
<head><style> ???.con{ ???????width: 300px; ???????/*height:300px;*/ ???????border: 1px solid #000; ???????margin: 100px auto 0; ???????font-size: 0; ???????/*overflow: hidden;*/ ?/*方法一*/ ???} ???.con a{ ???????width: 50px; ???????height: 50px; ???????background-color: gold; ???????font-size: 16px; ???????margin: 10px; ???????text-align: center; ???????line-height: 50px; ???????text-decoration: none; ???????float:left; ???} ???.clearfix:after{ ?/*方法三*/ ???????content:""; ???????display:table; ???????clear: both; ???}</style></head><body><div class="con clearfix"> ???<a href="">1</a> ???<a href="">2</a> ???<a href="">3</a> ???<a href="">4</a> ???<!--<div style="clear: both"></div>--> ?<!-- 方法二--></div></body>4.层级：z-index:10; 大的在上面（可以为负）
5.定位：
position:relative / absolute / fixed;
相对自身 相对上层定位元素 相对浏览器窗口
不影响 加定位浮动 后面上移 加定位浮动 后面上移 （注意：margin）
微调 不跟随滚动而移动
top/left/right/bottom： div框设置宽度 里面用百分比 宽度auto 内容多大宽度多大
css盒子、布局样式
原文地址：https://www.cnblogs.com/javscr/p/9633217.html