前端面试知识点整理——CSS_给一个图片,只知道url,实现图片铺满和居中(1)

最新推荐文章于 2024-05-02 14:20:31 发布

2401_84446963

最新推荐文章于 2024-05-02 14:20:31 发布

阅读量774

点赞数 21

分类专栏：程序员文章标签： css 前端面试

本文链接：https://blog.csdn.net/2401_84446963/article/details/138391617

版权

程序员专栏收录该内容

158 篇文章 0 订阅

订阅专栏

4.float + BFC

        /\* 4.float + BFC \*/
        .container {
            background-color: #ccc;
        }

        .left {
            float: left;
            height: 200px;
            width: 100px;
            background-color: pink;
        }

        .right {
            overflow: hidden;
            height: 200px;
            background-color: skyblue;
        }

5.table

        /\* 5.table \*/
        .container {
            display: table;
            background-color: #ccc;
            width: 100%;
        }

        .left {
            display: table-cell;
            height: 200px;
            width: 100px;
            background-color: pink;
        }

        .right {
            display: table-cell;
            height: 200px;
            background-color: skyblue;
        }

6.grid

        /\* 6.grid \*/
        .container {
            display: grid;
            grid-template-rows: 200px;
            grid-template-columns: 100px auto;
        }

        .left {
            background-color: pink;
        }

        .right {
            background-color: skyblue;
        }

十、CSS三栏布局

    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>

1.flex

        /\* 1.flex \*/
        .container {
            display: flex;
        }

        .left {
            width: 100px;
            height: 200px;
            background-color: pink;
        }

        .main {
            flex: 1;
            height: 200px;
            background-color: #ccc;
        }

        .right {
            width: 100px;
            height: 200px;
            background-color: skyblue;
        }

2.absolute + margin

        /\* 2.absolute + margin \*/
        .container {
            position: relative;
        }

        .left {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 200px;
            background-color: pink;
        }

        .main {
            height: 200px;
            margin-left: 100px;
            margin-right: 100px;
            background-color: #ccc;
        }

        .right {
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 200px;
            background-color: skyblue;
        }

3.float + margin

        /\* 3. \*/
        .container {}

        .left {
            float: left;
            width: 100px;
            height: 200px;
            background-color: pink;
        }

        .main {
            height: 200px;
            margin-left: 100px;
            margin-right: 100px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 100px;
            height: 200px;
            background-color: skyblue;
        }

4.table

        /\* 4.table \*/
        .container {
            display: table;
            width: 100%;
        }

        .left {
            display: table-cell;
            width: 100px;
            height: 200px;
            background-color: pink;
        }

        .main {
            display: table-cell;
            height: 200px;
            background-color: #ccc;
        }

        .right {
            display: table-cell;
            width: 100px;
            height: 200px;
            background-color: skyblue;
        }

5.grid

        /\* 5.grid \*/
        .container {
            display: grid;
            grid-template-rows: 200px;
            grid-template-columns: 100px auto 100px;
        }

        .left {
            background-color: pink;
        }

        .main {
            background-color: #ccc;
        }

        .right {
            background-color: skyblue;
        }

十一、CSS污染怎么解决

1.尽量少用标签选择器
2.使用类选择器时更加具体一些，例如通过后代选择器提高权重（但可能会导致性能问题）
3.把样式写到行内
4.可以给class加一些前缀
。。。

十二、CSS垂直居中方法

1.line-height
2.absolute + top：50% 、margin-top：-子盒子高度一半
3.absolut + top：0、bottom：0、margin-top margin-bottom：auto
4.display：flex + align-items：center
5.display：table-cell + vertical-align：middle

十三、CSS水平居中方法

1.行内元素：text-align：center
2.块级元素：margin-left margin-right：auto
3.absolute + left：50% 、margin-left：-子盒子宽度一半
4.absolut + left：0、right：0、margin-left margin-right：auto
5.display：flex + justify-content：center

十四、css水平垂直居中

1.flex

        .father {
            width: 200px;
            height: 200px;
            background-color: pink;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: purple;
        }

2.flex+auto

        .father {
            width: 200px;
            height: 200px;
            background-color: pink;
            display: flex;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: purple;
            margin: auto;
        }

3.absolute

        .father {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .son {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px;
            或者是：transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            background-color: purple;
            
        }

4.absolute+auto

        .father {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .son {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            width: 100px;
            height: 100px;
            background-color: purple;
        }

十五、响应式布局实现

针对不同的像素密度，可以使用媒体查询，选择不同精度的图片，以保证图片不失真
适配不同的屏幕大小，使用rem、em、vw、vh等相对单位

十六、选择器优先级

继承/*/子/后代：0
标签/伪元素：1
属性/类/伪类：10
id：100
行内：1000
！important：无穷大

十七、继承与非继承属性

随便记几个
继承：font-family、font-size、line-height、color、visibility、cursor
非继承：display、width、height、vertical-align、定位、background

十八、单行、多行文本溢出隐藏

单行文本溢出

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文本溢出

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;

十九、隐藏元素的方法

（1）display：none 整个对象相当于不存在，不渲染、不占有位置、不响应监听事件
（2）visibility：hidden 占有空间、不响应监听事件
（3）opacity：0 透明了、占有空间、响应监听事件
（4）position：absolute 移除可视区
（5）z-index：负值被别人压住

display：none和visibility：hidden区别：
display：none：从渲染树中移除，不占有位置、非继承属性，子节点跟着父节点消失，不能通过修改样式显现出来、会导致回流、不可以被读取
visibility：hidden：占有位置、继承属性，可以修改子节点visibility：visible让其显示、只会导致重绘、内容可以被读取

二十、link和@import区别

link：是xhtml标签，除了加载CSS还可以加载其他、在页面载入时同时加载CSS、放在html文件里、支持使用js控制dom去修改样式

<link rel="stylesheet" href="xxx.css" />

@inport：只能加载CSS、等页面完全载入后加载CSS、放在html或css文件里、不支持使用js控制dom去修改样式

@import url(xxx.css);

二十一、transition与animation区别

transition：过渡属性，触发一个事件，然后执行动画
animation：动画属性，设定好时间可以自己执行，还能循环执行

二十二、伪类和伪元素区别

伪类：如：hover、：active，给已有元素在特定状态下添加样式
伪元素：如::before、::after，插入额外的元素并设置样式，但这些元素不存在于dom树中，因此是伪元素

二十三、CSS盒模型

box-sizing：content-box 标准盒模型 width就是content，因此，修改padding和border会撑大或缩小盒子
box-sizing：border-box IE盒模型 width包括了实际的content+padding+border，因此，修改padding或border不会撑大或缩小盒子

二十四、CSS中的空元素（没有闭合标签）

br、hr、img、input、link、meta……

二十五、CSS3新增

属性选择器、结构伪类选择器、伪元素选择器
圆角border-radius
文字特效text-shadow
……

二十六、CSS优化

压缩、使用link而不是@import（@import需要页面加载完成之后才加载）、尽量不用*选择器、减少使用后代选择器（开销大）、减少回流重绘、CSS精灵图……

二十七、position取值

在这里插入图片描述

二十八、CSS三角

在这里插入图片描述

<div></div>

div {
	width: 0;
	height: 0;
	border-width: 20px 0 0 10px;
	border-style: solid;
	border-color: transparent transparent transparent red;
}

二十九、画一条0.5px的线

        div {
            width: 200px;
            height: 1px;
            background: #000;
            transform: scaleY(0.5);
        }

三十、设置小于12px的字体

在这里插入图片描述

三十一、媒体查询

@media screen and (max-width: 300px) {
	body {
		background-color: skyblue;
	}
}

三十二、grid布局

grid布局可以看作是二维布局，而flex布局可以看作是一维布局

（1）容器属性

1.display：grid/inline-grid（容器元素设置为行内元素）
注：设为网格布局后，容器子元素（项目）的float、display：inline-block、display：table-cell、vertical-align和colum-*等都将失效

2.grid-template-columns：定义列宽
3.grid-template-rows：定义行高
-可以使用百分比
-可以使用repeat（重复次数，重复的值）
-auto-fill表示自动填充，e.g.repeat(auto-fill, 100px)
-fr表示比例关系，fraction缩写，意为片段，常与绝对单位结合使用例如：
第一列固定150px 二三列按照剩余空间（容器）1：2划分

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr; 
}

-minmax（最小值，最大值）
-auto
-网格线名称

布局实例：
-两栏布局：

.container {
	display: grid;
	grid-template-columns: 70% 30%;
}

-十二网格布局

.container {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
}

4.grid-row-gap：设置行间距、grid-column-gap：设置列间距、grid-gap：< grid-row-gap> < grid-column-gap>
最新标准：三个属性都可以不用写grid-前缀

5.grid-template-areas：定义区域
注：区域的命名会影响到网格线的名字。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end

6.grid-auto-flow：row（默认）/column/row dense/column dense 先行后列、先列后行、是否紧密

文末

如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。

同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

2401_84446963

关注

21
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
前端面试知识点整理——CSS_给一个图片,只知道url,实现图片铺满和居中(1)

4.float + BFC5.table6.grid十、CSS三栏布局1.flex2.absolute + margin3.float + margin4.table5.grid十一、CSS污染怎么解决1.尽量少用标签选择器2.使用类选择器时更加具体一些，例如通过后代选择器提高权重（但可能会导致性能问题）3.把样式写到行内4.可以给class加一些前缀。。。1.line-height2.absolute + top：50% 、margin-top：-子盒子高度一半3.abs
复制链接

扫一扫