1.盒模型
padding 内间距
默认状态下设置的宽高为内容的宽高，
标签的大小 = 内容大小+内间距大小+边框大小
内容大小不变的情况下 间距和边框越大，则标签越大
设置 box-sizing : border-box 以后
设置的宽高 就为整体的宽高，而不是内容区的宽高
内容区的宽高就为整体宽高-内间距-边框
所以：设置宽和高为 内容区+内间距+边框 用 box-sizing : border-box
2.
用display : none ; 来设置标签消失时，标签的位置也消失
用visibility : hidden ; 设置标签消失时，标签不可见但是 标签位置保留
3.
overflow : hidden; 隐藏溢出内容 ，消除滚动轴
display : flex ; 用来设置开启弹性布局
justify-content : center ; 用来设置水平方向居中显示
align-items : center ; 用来设置垂直方向 居中显示
<title>display空间分配</title>
<style>
body{
/* 开启弹性布局以后 所有的子标签会在同一行显示 */
display:flex;
}
section{
height:400px;
border:1px solid red;
/* 设置每个section的大小 */
flex-basis: 25%;
}
/* 当有标签设置了order值 有的标签没有设置order值
那么会先排列所有没有设置order值的标签
然后在后面排列设置了order值的标签
当两个标签的order值一样的时候
先出现的标签会排列在前面 */
section:nth-child(1){
order:3;
}
section:nth-child(2){
order:1;
}
/*
section:nth-child(3){
order:2;
}
section:nth-child(4){
order: 1;
} */
</style>
</head>
<body>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
</body>
flex-grow : __; 子标签占父标签的几份
flex-wrap : wrap ; 换行
align-items : baseline ; 设置所有的文本的底部在同一水平线上
border-radius : 15px ; 设置角度
4.
3d旋转
perspective：100px； 用多远的距离观察
animation : zhuan 1s linear inlinite ; 设置旋转属性
transform-style : preserve-3d ; 保留标签在3d座标系中的位置
keyframes关键帧
rotate旋转 使旋转