全面系统CSS理解

居中

vertical-align:center;	//垂直元素都设置 垂直居中
margin-left: auto; margin-right: auto;  //水平设置居中
给父元素设置 text-align:center

背景

background:  radial-gradient(red, #aaffff,blue);//圆形
background-size: 30px 30px;//设置圆形的大小循环平铺
  
background:linear-gradient(90deg,transparent 0%,transparent 49.5%,#aaffff 49.5%,#aaffff 50.5%, transparent 0%,transparent 100%),     //注意逗号分隔
linear-gradient(0deg,transparent 0%,transparent 49.5%,#aaffff 49.5%,#aaffff 50.5%, transparent 0%,transparent 100%); //使用背景颜色画表格注意size设置

border:20px solid transparent; //边框为透明的
border-image:url(1.jpg) 20 round //round是完整的重复 实现图片边框

border:30px solid ;      
border-top: 30px solid transparent;
border-left:30px solid transparent;
border-right:30px solid transparent;
//实现边框花一个三角形trams[aremt是隐藏的意思
border-radius:30px;
//加上圆角和边框一样宽可以实现扇形

实现文本滚动条

width:100px;
height:100px;
overflow:auto;//超出部分显示滚动条
overflow:scroll; //不超出也显示滚动条
hidden超出部分隐藏

换行

overflow-wrap:break-word;//最好保留单词太长则打断整个单词换行
overflow-wrap:normal;//保留整个单词换行
word-break: break-all;//打断成字母
white-space: nowrap;//长文本不换行
word-break: keep-all;//所有单词保持整体

check标签图片美化

.checkbox是class=放在div里面
.checkbox input{
    display:none;//首先把checkbox隐藏，input标签的type是checkbox类型
}
.checkbox input + label{
    background: #aaffff; //初始界面，背景颜色切换
    background:url(1.png) left center no-repeat; 背景图片切换
	//格式设置一下
    background-size: 20px 20px;
    padding-left:20px;
}
.checkbox input:checked+label{
    background:#f40;//背景颜色切换，单击后的界面
    background-image:url(2.png);
}


<div class="checkbox">
    <input type="checkbox" id="handsome">
    <label for="handsome">我很帅</label>
</div>
//可以实现文件目录树结构

表格布局

border-collapse:collapse;//去掉两个单元格之间的边框和间距

元素

display:block;	//块级元素
display:inline;	//行内元素可以设置对齐
display:inline-block;	//行内块级元素

定位

position:absolute; //脱离文档流。绝对定位：元素可以放置到页面上的任何位置。不会影响别的元素，相对于最近的父级定位relative或absolute找不到相对于body定位.
position:relative;//生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。位置变但身体不变
position:fixed;// 脱离文档流。广告定位；
z-index:2;定位优先级

弹性盒子布局
flexbox

.container{
	width:800px;
	height:200px;
	display:flex;
}
.flex{
flex:1;
marign:2px;
}
.设置宽度{
	display:flex;
	width:200px
	flex:none;
}
<div class="container">
	<div class="flex">
	
	</div>
</div>

float浮动

• 元素“浮动”

• 脱离文档流

• 但不脱离文本流

• 实现图文混排

• 对自己的影响

• 形成“块”（BFC）形成块宽高

• 位置尽量靠上

• 位置尽量靠左（右）

对兄弟的影响：

• 上面贴非float元素
• 旁边贴float元素
• 不影响其它块级元素位置
• 影响其它块级元素内部文本
  对父级元素的影响
• 从布局上“消失”
• 高度塌陷
• overflow:hidden;或overflow:auto;隐藏撑起父元素