css基础1-引入与盒模型,web开发例子

30 阅读4分钟

最后

javascript是前端必要掌握的真正算得上是编程语言的语言,学会灵活运用javascript,将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识,而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的,直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后,发现暂时没有提升的空间,我们可以暂时放一放。继续下面的学习,javascript贯穿我们前端工作中,在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解,关键是灵活运用。

css源码pdf

JavaScript知识点

开源分享:docs.qq.com/doc/DSmRnRG… css引入形式

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

内联式

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

内部式

选择器{属性:属性值;}

外链式

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

2.在head中建立

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

导入样式

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

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

@import url(文件.css);

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

@import url(文件.css);

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

.box1 { width: 100px; border: 1px solid black; background: red; } .box2 { width: 100px; height: 100px; background: blue; float: left; }

这是测试文字

在这里插入图片描述

解决

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

2.给父元素加浮动

3.overflow:hidden

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

4.display:inline-block;

注:BFC规范;也对后面元素有影响

5.设置空标签

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

.box1 { width: 100px; border: 1px solid black; background: red; } .box2 { width: 100px; height: 100px; background: blue; float: left; } .clear:after{ content:"";clear:both;display:block; } 其实前端开发的知识点就那么多,面试问来问去还是那么点东西。所以面试没有其他的诀窍,只看你对这些知识点准备的充分程度。so,出去面试时先看看自己复习到了哪个阶段就好。 这里再分享一个复习的路线:(以下体系的复习资料是我从各路大佬收集整理好的) **[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)** 《前端开发四大模块核心知识笔记》 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/536772a065c944c5a5cf78c9a676c66d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1773133629&x-signature=0XU2V4GsS3QUPfLoAPe6ESrH5Xs%3D) 最后,说个题外话,我在一线互联网企业工作十余年里,指导过不少同行后辈。帮助很多人得到了学习和成长。 我意识到有很多经验和知识值得分享给大家,也可以通过我们的能力和经验解答大家在IT学习中的很多困惑,所以在工作繁忙的情况下还是坚持各种整理和分享。