CSS实现需求的重要知识点

文本和样式

1.文字阴影

1. 文字在x轴上的阴影距离
2. 文字在y轴上的阴影距离
3. 文字的模糊距离
4. 阴影颜色
5. 1和2的负数代表文字左上的阴影，正数代表文字右下的阴影
6. 多个阴影样式用逗号分割

text-shadow: 1px 1px 1px rgb(0,0,0.4);
// 多个阴影样式
text-shadow: 1px 1px 1px rgb(0,0,0.4),
			-1px -1px 1px rgb(0,0,0.2);

2.文字排版

1.单词与单词之间的间距word-spacing: 10px;
2. 字母与字母或者汉字之间的距离letter-spacing: 2px;
3. 文本等宽展开text-align: justify;
4. 文本第一行缩进text-indent: 20px;
5. 文本换行white-space: wrap;
6. 英文单词内部换行word-break: break-all
7. 文本布局方向writing-mode: vertical-lr;
8. 如何展示溢出内容text-overflow: ellipsis

3. 溢出文字省略号显示

• 一行溢出

1. 先强制一行内显示文本
white-space: nowrap;
2. 超出的部分隐藏
overflow: hidden;
3. 文字用省略号替代超出的部分
text-overflow: ellipsis;

• 多行溢出

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

盒子布局

1.子盒子在父盒子中水平垂直居中

• 定位加css3的transform属性

.box {
           position: relative;
           width: 200px;
           height: 200px;
           border: 1px solid #ccc;
           margin: 20px auto;
       }
       .item {
           position: absolute;
           left: 50%;
           top: 50%;
           transform: translate(-50%,-50%);
           width: 50px;
           height: 50px;
           background-color: green;
       }

• 用flex布局实现

.box {
           display: flex;
           justify-content: center;
           align-items: center;
           width: 200px;
           height: 200px;
           border: 1px solid #ccc;
           margin: 20px auto;
       }
       .item {
           width: 50px;
           height: 50px;
           background-color: green;
       }

2.去除图片和表单与父盒子的空白缝隙

图片或者表单等行内块元素，他的底线会和父级盒子的基线 对齐。就是图片底侧会有一个空白缝隙

• 给img 添加 display：block; 转换为块级元素就不会存在问题了
• 把父元素的文字大小设置为0，font-size：0；

3. 清除浮动

• 伪元素清除：

/*用于清除浮动的伪元素样式*/
.clearfix:after{
        content: ""; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden;
}
.clearfix {
*zoom : 1;
}

• . 双伪元素清除浮动：

/*声明清除浮动的样式*/
.clearfix:before ,.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
   *zoom: 1;  /*ie6,7 专门清除浮动的样式*/
}

表单属性

1.textarea的拖拽属性

禁止：resize: none;
禁止横向拖拽：resize: vertical

2.表单placeholder属性

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	color: #ccc;
}

滚动条样式

.barScroll是滚动的元素
// 滚动条宽度
.barScroll::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
// 滚动条滑块
.barScroll::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #9e9e9e;
}
// 滚动条轨道
.barScroll::-webkit-scrollbar-track {
    border-radius: 0;
    background: #eee;
}

背景和边框

背景渐变

背景的渐变需要设置在background属性里面

	background-image: linear-gradient(red,green);
	background: linear-gradient(red,green)
	

• 改变渐变方向

background: linear-gradient(to right,red,green);
background: linear-gradient(to bottom right, blue, pink);

• 控制渐变角度

background: linear-gradient(70deg, blue, pink);

• 设置颜色的终止位置

颜色的终止位置可以是px，也可以是百分比

background-image: linear-gradient(to right,red 20%, gold 40%,green 60%);

给边框设置背景图片

		.box {
            width: 100px;
            height: 100px;
            border: 20px solid #ccc;
            border-image: url(./images/swiper1.jpg) 100;
        }