Web前端最全css基础1-引入与盒模型(3)，bilibili面试笔试题

读者福利

========

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

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）

1.新建一个以.css为后缀的css文件

2.在head中建立

3.在css文件中按照css基本语法写代码

导入样式

使用 @import url() 引入CSS文件

在CSS文件中直接使用 @import url()

@import url(文件.css);

在HTML文件中需要在 标签中使用 @import url()

在HTML初始化时，@import url() 导入的CSS会被直接

导入到 HTML 或 CSS 文件中，成为文件的一部分

选择器：是一种匹配模式；主要用于选中做样式的元素

===========================================================================================

1.通用选择器 *{}

2.标签选择器 标签名{}

<标签名>内容</标签名>

3.类选择器 .{}

<标签名 class=“类”>内容</标签名>

4.id选择器 #id{}

<标签名 id=“名”>内容</标签名>

注：id选择器具有唯一性，文件中只出现一次

5.组合选择器

1.后代选择器：选择该元素后代元素 父元素 子元素

2.子代选择器：该元素第一级元素 父元素>子元素

3.相邻选择器：该元素之后相邻第一个元素 元素+元素

4.兄弟选择器：该元素之后同级元素 元素~元素

6.伪类选择器 标签名:hover{属性：属性值；}

注:伪类常见于a标签，使用时注意顺序

a:link {

color: skyblue;

}

/* 标签未访问颜色天蓝色 */

a:hover {

color: pink;

}

/* 悬停在标签上粉红色 */

a:active {

color: red;

}

/* 点击标签时红色 */

a:visited {

color: blue;

}

/* 访问后蓝色 */

css优先级判定规则

=============================================================================

权重之和；和越大；越优先；和一样；越靠后；越优先

!important>行内样式>id>类选择器>标签选择器>通用选择器>继承>默认

浮动

=====================================================================

浮动：是一种布局属性；主要用于一行多列

语法：float:left(左浮动)和float:right(右浮动)

注：浮动会让元素脱离文档流

清除浮动

=======================================================================

为何清除浮动：如下代码时可以看到父元素黑色边框为2px；

而不是102px;也就是父元素的高度塌陷了

这是测试文字

解决

1.直接给父元素设置宽高

2.给父元素加浮动

3.overflow:hidden

注：BFC规范，但会对子元素想溢出有影响

4.display:inline-block;

注：BFC规范；也对后面元素有影响

5.设置空标签

6.after伪类：推荐使用如：