1、图片和文字居中显示：
vertical-align:middle
2、图片底部默认有空白区域：
vertical-align：bottom
3、单行文本溢出显示省略号：
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
4、多行文本溢出显示省略号
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
5、solid单实线 dotted点线
double双实线 dashed虚线
6.当使用magin塌陷时的解决方法：
border:1px solid transparent
7、magin：0 auto在固定定位和绝对定位起不到作用，如果想要在中间的话使用
left：50% margin-left：盒子大小负的一半
或最好的办法是
left:50% ; transform:translate(-50%)
8、制作等腰三角形
width:0; height:0; (必须要有)
border:20px solid trasparent;
border-left-color:skyblue;
9、制作直角三角形
width:0 ; height:0;
border-top:100px solid transparent;
border-right:50px solid orange;
border-bottom:0px solid pink;
border-left:0px solid skyblue;
或
border-color:translparent red transparent transparent
border-style:solid
border-width:100px 50px 0 0
10、文字中间划一条横线
text-decoration:line-through
11、当使用padding和border时不会撑开盒子
box-sizing:border-box
12、filter:blur(15px)模糊图片
13、width:calc(100%-80px)
14、过渡transition:width .5s
15、logo SEO优化
(1)logo里放h1
(2)h1里面放链接
(3)链接里放文字但文字不显示出来
方法一：
text-indent:-9999px; overflow:hidden;
方法二:
font-size:0;
(4)最后给链接一个title属性，这样鼠标放在logo上就可以看到提示文字了。
16.如果是焦点图的话img要放在ul和li里面
17、图片下有一条缝 line-height:0;
18.图片变大效果
html
<div>
< img src="images/img.png" alt="">
</div>
css
div{
overflow: hidden;
}
div img{
transition: all .4s;
}
div img:hover{
transform: scale(1.1);
}
- 2D
移动位置：transform:translate(20,30);
旋转:transform:rotate(45deg);
放大缩小：transform:scale(1.2);
旋转位置：transform-origin:left bottom;
过渡：transistion:all 0.4s;
20.动画
(1)动画名称:
animation-name:move;
(2)持续时间:
animation-duration:2s;
(3)运动曲线:
animation-timing-function:ease;
(4)何时开始:
animation-delay:1s;
(5)重复次数:
animation-iteration-count:infinite;
(6)反方向播放:
animation-direction:alternate;
(7)播放结束停留:
animation-fill-mode:forwards;
(8)鼠标经过停止:
animation-play-state:running
(9)步数:
animation-timing-function:steps(10)
21.使用flex布局，float、clear、vertical-align属性将会失效
22.(1)设置主轴方向:
flex-direction:row/column
(2)让子元素居中对齐：
justify-content:center
平分剩余空间：
justify-content:space-around
先贴两边，再分配剩余的空间：
justify-content:space-between
(3)设置子元素换行：
flex-wrap:wrap
(4)侧轴居中(单行):
align-items:center
(5)在侧轴中间显示(多行):
align-content:center
(6)子项在侧轴平分剩余空间:
align-content:space-around
(7)子项在侧轴先分布在两头，再平分剩余空间
align-content:space-between
(8)设置主轴方向和是否换行(简写)
flex-flow:column wrap
(9)控制子项在侧轴上的排列方式：
align-self:flex-end
(10)order:-1 越小越靠前
23.固定（固定定位）的盒子要有宽度
width：100%
24.背景渐变：
background:-webkit-linear-gradient(left,red,blue)
25、将common.css文件导入index.css
(1)创建一个index.less
(2)输入 @import “common”;
26、页面元素rem计算公式：
页面元素的px / html 字体大小
27、提权
在后面加 !import;
28、点击文字也可以选中
<label for="man">男</label>
<input type="radio" name="sex" id="man">
29、点击链接另起一个窗口
target="_blank"
30、把<a href>里面文字的下划线去掉
a{
text-decoration:none;
}
31.把li前面的圆圈去掉
li{
list-style:none;
}
32.使用绝对定位position:absoult时margin起不到作用
33.给边框阴影：
box-shadow：0 2px 4px rgb(0,0,0,.2)
34.文本阴影效果：
text-shadow:1px 1px rgb(0,0,0,.2)
35.边框圆角
border-radius:5px
36.效果图: >
div::after{
content: '';
position: absolute;
top: 0px;
right: 9px;
width: 10px;
height: 10px;
border-top: 1px solid skyblue;
border-right: 1px solid skyblue;
transform: rotate(135deg);
}
37.（1）段落标签：<p></p>
（2）换行标签：
（3）加粗：<strong></strong> 或 <b></b>
（4）倾斜：<em></em> 或<i></i>
（5）删除线：<del></del> 或者 <s></s>
（6）下划线：<ins></ins> 或者 <u></u>
38.文本缩进：
p{
text-indet:2em
}
39.快速格式化代码：shift+alt+f
40.背景图像固定
background-attachment:scroll 或 fixed
41.背景半透明
background:rgba(0,0,0,.3)
42.去掉轮廓线
input{
outline:none
}
43.防止拖拽文本域
textarea{
resize:none
}
44.当我们鼠标经过button按钮的时候，鼠标变成小手
button{
cursor:pointer
}
45.清除浮动
.clearfix:before,.clearfix:after{
content: '';
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*Zoom:1;
}
网友评论