1.display
1.常用属性及对应意义
block:块级元素
inline-block:行内块元素
inline:行内元素
none:不展示（可以用于元素的显示和隐藏）
**（派生型问题）**
2.块级元素和行内块元素的区别？
块级元素：
1）每个元素单独占一行
2）水平垂直方向的padding+margin都可设置
3）会自动换行
行内块元素：
1）排列成一行展示，不会自动换行
2）水平方向的padding+margin可设置，垂直方向无效
3）不可以设置宽高
3.有哪些常见的行内块元素？
a br img i input strong textarea
4.行内元素和块级元素的转换方法
1）display
2）float +display:block(去除行内元素之间的空隙问题)
3）position
5.显示和隐藏有哪些方法
display 不占位
visibility 占位
opacity:0 占位
6.display和visibility的区别
性能上：
display不占据空间，但是它的显示和隐藏会造成页面重排，但是visibility只会造成重绘
继承上：dispaly不会继承，visibility会继承
2.选择器&优先级
1，选择器分类
内联样式 1000
id选择器 #id 100
类选择器 .class 10
属性选择器 a[ref="link"] 10
标签选择器 div 1
伪类选择器 li:last-child 10
伪元素选择器 li:before 1
兄弟选择器 div+p 0
子选择器 ul>li 0
后代选择器 li a 0
通配符 * 0
2. 特殊场景的优先级如何判断？ *
!important 优先级最高
如果优先级相同，则后者高于前者
继承得到的样式，优先级最低
3.可继承的样式有哪些？
字体
font-size font-weight,font-family,font-style
文本
color,text-align,line-height,text-indent
元素
visibility
列表布局
list-style
光标
cursor
3.盒模型及特征
盒模型特点：paddig+margin+content+border
IE模型：width和height包含了content + padding + border部分
标准盒模型：width和height只包含content部分
1.模型的转换方式
box-sizing:content-box/border-box
4.伪元素和伪类
伪元素：只出现在css样式表中，不会存在于doc中
p::before {
content: 'zhaowa'//必须填写
}
伪类：在已有的元素上添加特征，不会产生新的元素
div:hover {
color: red;
}
5.css工程化与预处理
css类库 与工程化的理解？ ***
预处理器：less scss stylus
=> 利用编译库提供能力，提供层级、mixin、变量、循环、函数
后处理器：postCss
=> 利用后处理编译，属性增加前缀，实现跨浏览器兼容
6.单行/多行文本超出的处理
// 单行超出
overflow: hidden;
text-overflow: ellipsis; // 超出省略号
white-space: nowrap; // 不换行
// 多行超出
overflow: hidden;
text-overflow: ellipsis; // 超出省略号
display: -webkit-box; // 弹性伸缩盒子模型
-webkit-box-orient: vertical; // 从上往下垂直排列
-webkit-line-clamp: 3; // 显示的行数
// 兼容性方案
p {
position: relative;
line-height: 18px;
height: 40px;
overflow: hidden;
}
p::after {
content: '...';
position: absolute;
bottom: 0;
right: 0;
}
// 方案有什么不足之处 => 固定行高 => js处理
7.单位px em rem
百分比：子元素相对于父元素的单位设置
em: 相对于父元素的字体大小倍数
rem: 相对于根元素字体大小的倍数
vw: 视窗宽度，满视窗宽度为 100vw
vh: 视窗高度，满视窗高度为 100vh
vmin: vw和vh中较小值
vmax: vw和vh中较大值
1. 如何利用rem实现响应式？ 项目如何实现响应式的？
根据当前设备的视窗宽度与设计稿的宽度得到一个比例
根据比例设置根节点的font-size
所有长度单位都用rem
8.布局相关
浮动
1. 定位浮动 - 简单聊聊看浮动的影响还有原理？ *
浮动工作原理：
浮动元素脱离文档流，不占据空间 => 不受原有文档流的影响，同时无法影响原有父类 => 高度塌陷
2. 高度塌陷原因，如何解决高度塌陷？*
1）给父级定义height
2）浮动元素之后，给一个div，clear: both;
3）父级标签增加overflow:hidden;
4）用伪元素模拟div
BFC:块级上下文
1.如何创建
根元素body
float除了none
position脱离文本流的操作
overflow:hidden,auto,scroll
display:inline-block | table-cell | flex
2.特点
自上而下排列
相邻BFC元素之间的margin会重叠
计算BFC的高度，会加上浮动元素
它不会影响外部元素
3.解决哪些问题
1）解决margin重叠
2）解决高度塌陷
3）创建自适应布局
三列布局的实现：左右两栏宽度固定，中间自适应
1.** 绝对布局法(不推荐)**
.container {
position: relative;
height: 200px;
}
.left {
position: absolute;
width: 100px;
height: 200px;
}
.right {
position: absolute;
width: 200px;
height: 200px;
top: 0;
right: 0;
}
.center {
margin-left: 100px;
margin-right: 200px;
height: 200px;
}
2.**flex布局（推荐）**
.container {
display: flex;
height: 200px;
}
.left {
width: 100px;
}
.right {
width: 200px;
}
.center {
flex: 1;
}
3.**圣杯布局（重要）**
注意：中间元素需要先渲染
步骤：
1.center盒子先渲染
2.left,center,right都float:left
3.调整center盒子显示在合适位置
4.移动left（margin-left:-100%），right(margin-left:-本身的宽度)盒子
元素布局：
<div class="container">
<div class="center">中间</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
css布局：
.container {
padding-left: 200px; //内边距左边的宽度
padding-right: 150px;
box-sizing: border-box; //怪异盒子：保证盒子的宽度不会因为内边距而改变
min-width: 550px;
}
.center {
float: left;
width: 100%;
background: #f96d9f;
}
.left {
width: 200px;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
background: aqua;
}
.right {
width: 150px;
float: left;
margin-right: -150px;
background: yellowgreen;
}
.left,
.right,
.center {
min-height: 100px;
}
4.双飞翼布局（重要）
步骤：
1）center优先渲染
2）在圣杯布局的基础上，添加了inner元素
元素布局：
<div id="center">
<div id="inner">center</div>
</div>
<div id="left">#left</div>
<div id="right">#right</div>
css布局：
/* 双飞翼布局 */
#container {
padding-left: 200px;
padding-right: 150px;
box-sizing: border-box;
min-width: 550px;
}
#center {
float: left;
width: 100%;
background: #f96d9f;
}
/* 内容展示区域： 为了让中间部分的内容不被遮挡*/
#inner {
margin-left: 200px;
margin-right: 150px;
}
#left {
width: 200px;
float: left;
margin-left: -100%;
background: aqua;
}
#right {
width: 150px;
float: left;
margin-left: -150px;
background: yellowgreen;
}
#left,
#right,
#center {
min-height: 100px;
}
注意：圣杯布局跟双飞翼布局的区别
自适应：
圣杯布局存在缺陷：当中间元素的宽小于左边元素的时候，布局会塌陷和错乱，而双飞翼不会
页面布局上：
双飞翼比圣杯布局，多了一个inner元素
9.水平垂直居中
// 1. 绝对定位
div {
position: absolute;
left: 50%;
top: 50%;
margin-top: -height/2;
margin-left: -width/2;
}
// 2. 自我拉扯
div {
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
// 3. flex(推荐)
.parent {
display: flex;
justify-content: center;
align-items: center;
}
10.特别处理
- 三角形、梯形如何实现
/* 三角形 */
.sanjiao {
width: 0;
height: 0;
border-top: 100px solid transparent;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
border-bottom: 100px solid orangered;
}
/* 梯形 */
.tx {
/* 在三角的基础上添加宽度 */
width: 100px;
height: 0;
border-top: 100px solid transparent;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
border-bottom: 100px solid orangered;
}
- 动画的使用
@keyframes move{
0%{
transform: translate(0px);
}
100%{
transform: translate(100px);
}
.div1{
animation-name:move;/*需要执行的动画的名字*/
animation-duration: 3s;/*所需要的时间*/
animation-iteration-count: infinite;/* 执行次数*/
}
————————————————
版权声明：本文为CSDN博主「激进的土豆」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_49627122/article/details/126490677
- 移动端的1px
背景：由于设计稿参照的设备宽度比实际设备大一倍（物理设备/设计稿），所以开发的时候，我们应该把它设置为设计稿的0.5倍，但是直接写成0.5px，无法兼容ios系统
解决办法:
1) border-image => 不足：若边框颜色要更改，则必须重画一张边框图
2) box-shadow => 不足：无法实现圆角
3) 使用伪元素方法:(优点：兼容性好，还可以设置圆角)
* 将元素设置为相对定位;
* 子类元素：{
content:"";
display:block;
position:absolute;
left:0;
top:0;
border:1px solid red;
border-radius:5px;
transform: scale(0.5);
width: 100%;
height: 1px; //宽高和缩放的方向取决于设置的边框
}
4) viewport+js结合
- font-size小于12px
1) 利用transform:scale(0.5)
将字体单独放于一个div中(避免缩小影响父元素的宽高等)，将字体设置为实际值的2倍，然后scale(0.5)
2) 利用<svg>当中的<text>标签
<svg>
<text x="0" y="10">我是10px字体大小 hello world！</text>>
</svg>
注意：y值是字体大小
