Web前端最全css基础1-引入与盒模型，2024年最新华为od面试经历

最后前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。

不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。

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

层叠样式表

css3：css最新版本

语法：选择器{属性：属性值}

css引入形式

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

内联式

<元素 style=“属性：属性值”>内容</元素>

内部式

外链式

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;也就是父元素的高度塌陷了

这是测试文字

最后

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

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它