「CSS」前端基础部分总结

最新推荐文章于 2023-08-18 20:40:23 发布

油炸冰可乐

最新推荐文章于 2023-08-18 20:40:23 发布

阅读量199

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Wang_Pro/article/details/107544646

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前端基础

说到前端基础，小伙伴们可能会先联想到HTML、CSS、JavaScript、jQuery、ajax，等等等等高大上的技术封包组成的词汇。

天呐，我就是个新手菜鸟，刚开始学习的时候知道这么多其实好处也没有多少（心里瞬间草泥马飞驰而过～），所以雷，我觉得在学习一门新技术的时候，如果能给自己找一些特定的待解决的问题，那就很不错啦～。忘记说了，在学习后端框架的时候发现完全听不懂了，才来学的前端，有和我一样的咩？

上篇博客总结了HTML，也没有学多久，5天左右吧，进入了CSS的学习，途中被老师打断去写一个专利的初稿，老师人很nice，但是我太难了55555555，不过还好，CSS的基础算是给自己有了一个交代，发文记录～

第一天｜第二天

CSS描述，CSS是一个怎样的技术栈？位于整个前端模块的哪里？为什么HTML学完了就要去学CSS?

CSS被叫做层叠样式表，它的作用是来修饰页面元素的，一般大厂里会把HTML（结构）、CSS（样式）、JS（交互、动画）三个模块相分离，前面提到的这3个模块也被叫做Web标准，一个成熟的网页会同时拥有这三个模块，用一张图来简单提现以下这三个模块吧，哦对了，我是跟全网最骚气的pink老师的学生。
在这里插入图片描述
CSS中的选择器
CSS中，核心有两个，选择器与盒子模型，前者是用来找到HTML中确定的元素之后，修饰元素的样式，后者是把这些元素集成为模块，程序员在布局网页时只需要考虑模块与模块之间的关系了。

现在来介绍选择器的分类

基础选择器
- 标签选择器（div | a | p | a | h1 ）
  这类选择器往往能简便易行的确定不复杂的标签，修改他们的样式
- 类选择器
  我们可以在一个标签的开头给出这个标签的class，让他有自己的名字，之后可以在头文件中使用.类名{ }的方式确定这个类的样式
- id选择器
  同样的，也可以在一个标签内的同样地方给出这个标签的id，与给出类名类似，但是它们的区别在哪里呢？原来id选择器只能在整个HTML中调用一次，而class顾名思义，就是可以继承的嘛，谈到了继承，就可以多次调用起来，同时最近的声明可以覆盖掉先前的声明
- 通配符选择器
  学习过程中只接触到了*{ }用来修改浏览器对于HTML的初始化格式
复合选择器
复合选择器牵扯到标签之间的关系，大体来说分为两类，兄弟关系（并列）和父子关系（包含），所以有时候，复合选择器也可以被称之为后代选择器，后代选择器总是由大到小，由一个大模块到一个小例。所以复合选择器也可以分为5类👇

链接伪类选择器其实，就拿用的最多的来说就是hover，每当鼠标经过时，就会在所在区域出现变化。伪类选择器的样式还有：未点入型、访问过型、经过型、点击型、focus选择器

CSS的引入方式
CSS的引入方式有三种：
（1）行内式引入：直接写在我需要的段落行里得到实现
（2）内部式引入：写在head中，将CSS与HTML部分分离
（3）外部样式表：单独写入CSS文件，全部分离，之后在head中写入CSS文件的link

第三天

emment语法
一种快速生成HTML的语法，帮助快速开发，i了i了。
在这里插入图片描述
展示一个比较有用的自增写法：

元素的显示模式
块级元素、行内元素、行内块元素，块级元素好理解，它就相当于于一个盒子，行内元素也好理解，相当于自己占了一行例如这个“li”，可是行内块元素呢？它的独特之处就在于有display:block这样的声明，把一个行内元素转化成为了行内元素的初始环境下，又具有块级元素的特征

第四天

CSS的三大特性
层叠性、继承性、优先级

层叠性：样式类似于图层
继承性
- 例子：行高继承
优先级：同一个元素指定多个选择器
- 顺序（权重），声明！
- 选择器相同&不同
- 继承的权重为0
- 复合选择器：权重叠加问题，需要计算权重

CSS的盒子模型（重点）
CSS盒子模型的摆放是网页设计的核心

页面三大核心：
- 盒子模型
- 浮动
- 定位

盒子模型的组成元素：
- border边框
- content内容
- padding内边距
- margin外边距

遇到的一个问题：盒子塌陷（本应该在父盒子内部的元素跑到了外部）

为什么会出现这样的问题？
核心问题：浮动与否
描述：
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
1.当父盒子没有设置足够高的高度时，盒子里面的内容选择浮动，脱离文档流时，盒子高度塌陷
2.当父盒子设置高度为auto，同时父盒子里的内容都是浮动的，父盒子高度就会塌陷为零

这时候就出现了一个问题：如何才能避免塌陷呢？粗暴的解决是算准了盒子里的内容，然后写死盒子大小，别添加元素的浮动；但是这样的操作在开发中显然不适应，我们想要的是一种不会高度塌陷的同时自动适应大小的盒子。

解决方法：
1 在父盒子中添加overflow:hidden标签实现浮动清除；
2 在父盒子中添加clearfix修饰，这样就可以让浮动的元素限定在父盒子内发生；
3 双伪元素法；
4 隔墙法,.在两个盒子中间添加一个额外的块级元素,给这个额外添加的块级元素设置clear:both;属性，这是一个直接有效的方法；

实现如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* overflow标签实现浮动清除 */
            /* 父元素模块添加 */
            /* overflow: hidden; */
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        /* after标签法 */
        /* 在父盒子的class内加入clearfix修饰 */
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        /* 双伪元素法 */
        /* .clearfix:after, .clearfix:before{
            content:'';
            display:table;
        }
        .clearfix:after{
            clear:both;
        } 
        .clearfix{
            *zoom:1;
        }
        */
        .clearfix {
            *zoom: 1;
        }

        .damao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .clear {
            clear: both;
        }

        .footer {
            height: 200px;
            background-color: slategray;
        }
    </style>
</head>

<body>
    <!-- 在一个盒子内发生浮动 -->
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <!-- 隔墙法 -->
        <!-- <div class="clear"></div> -->
    </div>
    <!-- 底部标签 -->
    <div class="footer"></div>

</body>

</html>