居中
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;隐藏撑起父元素