css知识点
display有哪些属性
- none : 隐藏
- inline : 行内元素
- block : 块级元素
- inline-block : 行内块级元素
- flex : 弹性布局
- grid : 网格布局
- table : 表格布局
- table-cell : 表格单元格
- table-row : 表格行
- table-column : 表格列
- list-item : 列表项
- inline-flex : 行内弹性布局
- inline-grid : 行内网格布局
- inline-table : 行内表格布局
- inline-list-item : 行内列表项
- inline-table-cell : 行内表格单元格
- inline-table-row : 行内表格行
- inline-table-column : 行内表格列
- inline-flex : 行内弹性布局
- inherit : 继承
- initial : 初始值
- unset : 取消
- revert : 恢复
1、inline 与 inline-block区别
- inline元素不会换行，但是可以设置宽度，高度，颜色，背景颜色，边框，float，vertical-align等样式，不能设置行高，文字颜色，文字大小，margin，padding等外边距和内边距样式
- inline-block元素可以设置宽度，高度，颜色，背景颜色，边框，行高，文字颜色，文字大小，margin，padding，float，vertical-align等样式。 2、行内元素和块级元素的区别
- 行内元素：无法设置宽高，水平方向可以设置margin和和padding，垂直方向无法设置，不会自动换行。
- 块级元素：可以设置宽高，可以设置margin和padding，会自动换行。 3、块级元素和行内元素有哪些
- 行内元素标签：a，img，span，input，button，label，...
- 块级元素标签：div，p，h1，h2，h3，h4，h5，h6，ul，ol，li，table，tr，td，th，form，fieldset，legend，... 4、块级元素与行内元素相互转换的方式有哪些
- display、float、position、clear
选择器
1、选择器优先级划分
- !important 无穷大
- 行内样式 > 内联样式 1000
- id选择器 100
- class选择器 = 属性选择器a[ref="xxx"] = 伪类选择器li:hover 10
- 标签选择器 = 伪元素选择器 li::before 1
- 通配符选择器 * 0 2、特殊场景优先级判断
- !important > 行内样式 > 内联样式 > id选择器 > class选择器 > 标签选择器 > 通配符选择器
- 优先级相同时，后出现的样式覆盖前面的样式
- 继承得到的样式，优先级最低 3、可以继承的样式有哪些
- 字体：font-family，font-size，font-weight，font-style
- 文本：color，text-align，text-decoration，text-indent，line-height，word-spacing，lletter-spacing
- 元素: visibility
- 列表布局：list-style-type，list-style-image，list-style-position
- 光标：cursor 4、伪类和伪元素的区别
- 伪元素：只出现在css样式中，不存在 document 对象中
p::before{
content:"*";
}
P::first-line{
background-color:red;
}
- 伪类：已有的元素加上特殊类别，不产生新的元素
a:hover{
color:red;
}
隐藏和显示
1、元素隐藏的方法有哪些，区别在哪里
- display:none; 不占位
- visibility:hidden; 占位
- opacity:0; 占位
- position:absolute; 不占位
- z-index: -1; 不占位
- clip:rect(0,0,0,0); 不占位
- overflow:hidden; 不占位
- transform:scale(0); 占位 2、display 与 visibility区别
- 在渲染时，display是隐藏不占位，渲染树中不存在节点，visibility是占位，渲染树中存在节点
- 继承：display不会被继承，visibility会继承
- 性能：display会造成dom树的重排（回流），visibility只是会导致文本的重绘
盒模型及其特性
1、标准盒模型与IE盒模型（怪异盒模型）的区别，如何转换
- 标准盒模型：宽高为内容宽高（content）
- IE盒模型：宽高为内容+padding+border 转换：box-sizing: border-box / content-box;
图片格式及css-sprites
1、图片格式
- BMP: 位图格式，大小固定，不支持透明,无损、未压缩，通常体积较大
- GIF: 动态图，无损、采用了LZW压缩算法，仅支持8bit索引色
- JPEG：有损、直接色存储，适合还原度较高的图片
- PNG-8：无损、使用索引色，体积更优秀，且支持透明度调节
- PNG-24：无损、直接色存储，压缩
- SVG：矢量图，放大不会失真，适合做logo、icon
- webP：谷歌的图片格式，有损+无损，直接色，支持透明度，压缩。 2、CSS-sprites 精灵图、雪碧图
- 一张图片，包含多个小图片，通过css定位，实现多个小图片的合并，减少http请求，提高页面加载速度。
像素密度与图片应用
1、像素密度
- 经典设备宽高：414px * 896px
- 物理像素：1242px * 2688px => 1242 / 414 = 3
- 逻辑像素：物理像素 = 1 : 3 => 像素密度3 => 3倍屏 2、如何在图片的加载上应用动态密度
- 设计师提供 @2x @3x @4x的图片 （2倍图、3倍图、4倍图）
image {
background-image: url("./img/logo@2x.png");
}
// 媒体查询
@media only screen and (min-device-pixel-ratio: 3) {
image {
background-image: url("./img/logo@3x.png");
}
}
css工程化与预处理
1、css类库与工程化理解
- 预处理器：sass、less、stylus => 利用编译库提供能力，提供层级、mixin、变量、循环、函数
- 后处理器：postCss => 利用后处理编译，属性增加前缀，实现跨浏览器兼容性
单行多行文本溢出
1、单行、多行文本溢出省略号
/* 单行文本溢出省略号 */
overflow: hidden;
text-overflow: ellipsis; // 超出省略号
white-space: nowrap; // 不换行
/* 多行文本溢出省略号 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; // 弹性伸缩盒子模型
-webkit-line-clamp: 2; // 显示行数
-webkit-box-orient: vertical; // 垂直排列
/* 兼容性处理 */
p {
position: relative;
line-height: 20px;
height: 40px;
overflow: hidden;
}
p::before {
content: '...';
position: absolute;
bottom: 0;
right: 0;
}
px em rem
1、多种单位的差别
- 百分比：子元素的百分比相对于直接父元素的对应属性
- em：相对于父元素的字体大小倍数
- rem：相对于根元素字体大小倍数
- vw：视窗宽度，最大为100vw
- vh：视窗高度，最大为100vh
- vmin：vw和vh中较小的那个
- vmax：vw和vh中较大的那个 2、如何利用rem实现响应式，项目如何实现响应式
- 根据当前设备的视窗宽度与设计稿的宽度比值，
- 再根据比值设置根节点的font-size
- 所有的px单位，都转换成rem
布局
1、浮动的影响和原理
- 浮动元素不会影响上下元素的布局，但是左右元素会受影响
- 浮动元素会脱离文档流，不会被其他元素覆盖，不占空间
- 不受原有文档流影响，同时无法影响原有父类，会造成高度塌陷 2、浮动停留的条件，浮动元素移动遵循的空间
- 浮动元素碰到包含他的边框或者其他浮动元素的时候会停留
- 浮动元素可以左右移动
- 浮动元素高度独立，不会影响撑开原有父类的高度 3、高度塌陷原因，如何解决
- 父级定义height
- 父级定义overflow: hidden
- 父级定义display: flex
- 父级定义position: relative
- 浮动元素之后定义一个同级块级元素，或者父级 clear: both；
- 用伪元素模拟块级元素 4、如何触发BFC，利用BFC解决哪些问题 触发BFC：
- 浮动元素：float，float：none除外
- 绝对定位元素：position: absolute
- display: inline-block、table-cell、table-caption、flex
- overflow: hidden、scroll、auto BFC特点：
- 垂直方向，自上而下排列，和文档流排列方式一致
- BFC中上下相邻容器的margin会重叠
- 计算BFC高度需要计算浮动元素
- BFC不会影响外部元素 BFC作用： 解决margin重叠问题，高度塌陷问题，创建自适应布局
5、有几种方式能实现两列布局
/* 绝对定位 */
.content {
position: relative;
}
.left {
position: absolute;
left: 0;
width: 50%;
}
.right {
position: absolute;
right: 0;
width: 50%;
}
/* 浮动 */
.content {
overflow: hidden;
}
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}
/* flex */
.content {
display: flex;
}
.left {
flex: 1;
}
.right {
flex: 1;
}
/* grid */
.content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.left {
grid-column: 1;
grid-row: 1;
background-color: #ccc;
}
.right {
grid-column: 2;
grid-row: 1;
background-color: #eee;
}
6、多栏布局（左右固定，中间自适应）
/* 绝对定位 */
.content {
position: relative;
}
.left {
position: absolute;
left: 0;
width: 200px;
}
.right {
position: absolute;
right: 0;
width: 200px;
}
.center {
margin: 0 auto;
width: calc(100% - 400px);
}
/* flex */
.content {
display: flex;
justify-content: space-between;
width: 100%;
}
.left {
width: 200px;
background-color: #ccc;
}
.center {
flex: 1;
background-color: #fff;
}
.right {
width: 200px;
background-color: #eee;
}
/* grid */
.content {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-gap: 10px;
}
.left {
grid-column: 1;
}
.center {
grid-column: 2;
}
.right {
grid-column: 3;
}
/* 圣杯浮层布局 */
.content {
overflow: hidden;
}
.left {
float: left;
width: 200px;
}
.right {
float: right;
width: 200px;
}
.center {
margin: 0 auto;
width: calc(100% - 400px);
}
/* 双飞翼布局 */
.content {
overflow: hidden;
}
.left {
float: left;
width: 200px;
}
.right {
float: right;
width: 200px;
}
.center {
width: 100%;
margin: 0 200px 0 200px;
}
7、水平垂直居中
/* 绝对定位 */
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.content {
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/* flex */
.content {
display: flex;
justify-content: center;
align-items: center;
}
