02.09笔记

文字单行超出省略

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

文字多行超出省略

overflow: hidden;

display: -webkit-box;

text-overflow: ellipsis;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

字体图标的三种引入方式

第一种：加两个类名的方式

先link引入css文件
在标签设置'iconfont'类名和'图标的类名'两个类名

第二种：Unicode方式

先link引入css文件
在标签中Unicode代码，如<span></span>
再为标签设置字体系列font-family:'iconfont'

第三种：为伪元素设置字体图标

先link引入css文件
设置属性content: '\e6f8'（注意写斜杆）
再设置字体系列font-family:'iconfont'

平面转换

复合书写形式:transform:translate(100px) rotate(60deg) scale(2);

设置旋转中心:transform-origin:原点水平位置原点垂直位置

三种取值方式

方位名词(left、top、right、bottom、center)
像素单位数值
百分比(参照盒子自身尺寸计算)

补充

单标签不能用伪元素

img为单标签，即便是设置了宽高，也不能设置伪元素

颜色渐变方向设置

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

background-image: linear-gradient(180deg, red ,pink, blue);

盒子居中的五种写法

margin数值调整
定位+数值调整
margin方位名词+transform:translate()
在定位基础上，四个方位名词都设置为0，然后margin:auto（用来填充四个方向使盒子居中）
弹性布局display:flex

02.10笔记

空间变换

设置视距

用属性perspective:800-1200（设置在父盒子上，配合z轴实现近大远小功能，但盒子并未发生实质大小变化）

旋转的另一种写法

transform:rotate(1turn)表示转一圈等价于transform:rotate(360deg)

使用rotate实现元素空间旋转效果:

rotate3d(x, y, z, 角度度数) :用来设置自定义旋转轴的位置及旋转的角度
x，y，z 取值为0-1之间的数字
六面体设置rotate3d()使盒子实现从各种角度旋转

空间变换复合书写方式

transform: translate3d(x,y,z) rotate3d(0,0.5,1,360deg) scale3d(x,y,z);

为整个网页可视区域设置背景的一种方式(对html和body都设置`height: 100%`)

html {

height: 100%;

}

body {

height: 100%;

background: url(./images全民出行/f1_1.jpg) no-repeat center;

background-size: cover;

}

02.12笔记

flex布局

分为主轴（水平）和侧轴（垂直）: justify-设置主轴属性 align-设置侧轴属性

flex盒子伸缩比

flex盒子中，存在flex伸缩属性和width属性，优先执行flex:2

圣杯布局

三个盒子一行，左右设定固定的宽，中间设置flex:1

02.13笔记

侧轴对齐方式

align-item: 一般用单行对齐

align-content: 一般用于多行对齐

补充

在设置精灵图的background-size：20px auto;时，注意设置宽度为具体数值，高度为auto自适应（而不能将高度设为具体数值，否则精灵图将压缩）

web页面宽度设置超过页面宽度时，会出现页面滚轮。

02.15笔记

视口自动适配

使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果 (将网页的width等分为10份，用<script src="./js/flexible.js\"></script>引入，写在body标签最后)

错题

如下代码中, box盒子的宽和高分别是多少( C )

html {
   font-size: 20px;
}

body {
   font-size: 40px;
}

.box {
   width: 5rem;
   height: 5em;
   font-size: 50px;
}

A：宽度: 100px 高度: 100px;

B：宽度: 200px 高度: 200px

C：宽度: 100px 高度: 250px(em相对于父元素，rem相对于根元素)

D：宽度:200px 高度: 250px

02.16笔记

移动web适配通过设置rem，和，vw或vh实现。

rem适配在less文件中设置@rootSize:37.5;

vw适配在less文件中设置@rootSize:3.75;（视口的1/100）

02.17笔记

设置版心时注意

bootstrap中使用版心类名container，会自带左右padding为15px，如果不要padding，设置子盒子类名row（padding为-15px）

引入文件顺序

（引用顺序错误会导致样式出不来）做轮播图使用bootstrap时——

link标签文件：

先引入icon图标
引入bootstrap文件
引入index.css文件

script标签文件：

在body的最后部分，需要先引入jquery.js
再引入bootstrap.css文件

前端知识重难点笔记整理