CSS 较高级技巧

CSS高级技巧

• 精灵图
• 字体图标
• css三角
• css用户界面样式
• vertical-align属性应用
• 溢出的文字省略号显示
• 常见布局技巧

精灵图

把小的图片放到一起，一次请求返回全部图片，减小服务器接收和发送请求的次数，提高加载速度

用一堆盒子去框框背景图片

用background-position

字体图标

把fonts放在根目录下

引入字体图标，加一段声明，

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?q90a4p');
  src:  url('fonts/icomoon.eot?q90a4p#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?q90a4p') format('truetype'),
    url('fonts/icomoon.woff?q90a4p') format('woff'),
    url('fonts/icomoon.svg?q90a4p#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

复制网页的小框框,添加字体

追加图标加到selestion.json里

CSS三角

高度，宽度都是0时，给一边加边框，其余的边框透明transparent

div{
    width:0;
    height:0;
    line-height:0;
    font-size:0;
    border:50px solid transparent;
    border-left-color:pink;
}

鼠标样式cursor

li{cursor:pointer;}

属性值	描述
default	小白 默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

轮廓线outline

input{
	outline:none;
}

文本域textarea

禁止拖拽

textarea{
	resize: none;
}

垂直对齐 vertical-align

只对行内元素和行内块元素有用

图片和文字垂直对齐

{
	vertical-align: middle|bottom|top|baseline
}

解决空白缝隙问题

vertical-align:middle|top|bottom;

把图片转化为块级元素display：block;

一处文本省略号显示

单行

1. 先强制到一行内显示white-space:nowrap;
2. 溢出部分隐藏：overflow:hidden;
3. 溢出用省略号显示：text-overflow:ellipsis;

多行

兼容性问题

{
	overflow:hidden;
	text-overflow:ellipsis;
	/*弹性伸缩*/
	display: -webkit-box;
    /*限制行数*/
	-webkit-line-clamp:2;
    /*排列方式*/
	-webkit-box-orient:vertical
}

margin负值

使2个盒子边框不重合

给每个盒子加浮动，再margin值给负值，浮动的盒子压住了后面的边框

经过时边框显示

1. 如果盒子没有定位，鼠标经过添加相对定位即可

{
    position:relative;
	border:1px solid blue;
}

2. 如果li都有定位，则用z-index提高层级

{
	z-index:1;
	border:1px solid blue;
}

直角不等边三角形（i标签）

.box1{
            width: 0;
            height: 0;
            border-top: 100px transparent solid;
            border-bottom: 0px pink solid;
            border-left: 0px pink solid;
            border-right: 80px pink solid;
        }
    </style>css

初始化

em,
i{
	font-style:normal;
}//斜体扶正

表单新增

属性	值	说明
required	required	表单拥有该属性表示其内容不能空，必填
placeolder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off/on	当用户在字段开始键入时,成功提交后，第二次填写有记录，必须有name值
multiple	multiple	可以多选文件夹

CSS新特性

选择器

属性选择器

选择符	简介
E[att]	选择具有att属性的E元素
E[att=“val”]	选择att属性值等于val的E元素
E[att^=“val”]	匹配具有att属性且值以val开头的E元素
E[att$=“val”]	匹配具有att属性且值以val结尾的E元素
E[att*=“val”]	匹配具有att属性且含有val的E元素

结构选择器

E：first-child

ul li：nth-child(n){
	xxx
}

括号里面写even是选偶数，写odd是选奇数

括号里也可以写关于n的公式

公式	取值
2n	偶数
2n+1	奇数
5n	5，10，15
n+5	从第5个开始到最后
-n+5	前5个，包括5

E：first-of-type

区别：这个可以选多层的，child只能选次级盒子

伪元素选择器

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

必须有content属性，值为插入的东西

伪元素清除浮动

一

.clearfix:after{
	content:'';
	display:block;
	height:0;
	clear:both;
	overflow:hidden;
}

二

.clearfix:before,.clearfix:after{
	content:"";
	display:table;/*转化为块级元素*、
}
.clearfix:after{
	clear:both;
}

盒子模型

box-sizing: content-box;/*盒子大小为一堆相加，默认值*/
box-sizing: border-box;/*盒子大小为width*/

图片模糊

滤镜filter属性

img{
            filter: blur(5px);
        }

calc函数

width：calc(100%-30px);100%为父元素的大小

过渡

transition：要过渡的属性 花费时间 运动曲线 何时开始；

transition:width .5s ease 1s

写多个属性变化加逗号或者全部变化用all

网站favicon图标

必须用ico文件，48*48

放到根目录下

引入方法

<link rel="stylesheet" href="/favicon.ico">

TDK三大标签

• title网站标题

建议：网站名-网站介绍（不超过30个汉字）

• description网站说明

简要说明网站的主要作用

• keyword关键字

logo制作

<div class="logo">
            <h1>
                <a href="index.html" title="品优购商城">品优购商城</a>
            </h1>
 </div>

制作静态网页时遇到的问题：

1. 清除浮动
2. 图片上下的阴影
3. 字体的名称
4. 按钮里的文本居上，居下
5. 顶上的东西缩小会溢出