初学CSS的基础知识点笔记-02

柯cute

已于 2022-05-24 17:43:13 修改

阅读量101

点赞数

分类专栏：前端学习-CSS 文章标签： css3

于 2022-04-20 16:12:27 首次发布

本文链接：https://blog.csdn.net/weixin_45999422/article/details/124296828

版权

前端学习-CSS 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、盒子模型
二、结构伪类选择器
三、伪元素
四、标准流
五、浮动

前言

本篇是继上一篇《初学CSS的基础知识点笔记-01》基础上接着学习的内容。

一、盒子模型

1.盒子模型的介绍

盒子的概念
页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子
盒子模型
➢ CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（ margin）构成，这就是盒子模型。
记忆：可以联想现实中的包装盒

2.内容的宽度和高度

➢ 作用：利用 width 和 height 属性默认设置是盒子内容区域的大小
➢ 属性：width / height
➢ 常见取值：数字+px
在这里插入图片描述

3.边框（border）

3.1 边框（border）- 单个属性

➢ 作用：给设置边框粗细、边框样式、边框颜色效果
➢ 单个属性：
在这里插入图片描述

3.2 边框（border）- 连写形式

➢ 属性名：border
➢ 属性值：单个取值的连写，取值之间以空格隔开
• 如：border : 10px solid red;
➢ 快捷键：bd + tab

3.3 边框（border）- 单方向设置

➢ 场景：只给盒子的某个方向单独设置边框
➢ 属性名：border - 方位名词
➢ 属性值：连写的取值

3.4 盒子实际大小初级计算公式

➢ 盒子实际大小初级计算公式：
• 盒子宽度 = 左边框 + 内容宽度 + 右边框
• 盒子高度 = 上边框 + 内容高度 + 下边框

3.5 CSS3盒模型（自动内减)

➢ 需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
• 给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大？
➢ 解决方法 ① ：手动内减
• 操作：自己计算多余大小，手动在内容中减去
• 缺点：项目中计算量太大，很麻烦
➢ 解决方法 ② ：自动内减
• 操作：给盒子设置属性 box-sizing : border-box ; 即可
• 优点：浏览器会自动计算多余大小，自动在内容中减去

4 .外边距（margin）

4.1 外边距（margin）- 取值

➢ 作用：设置边框以外，盒子与盒子之间的距离
➢ 属性名：margin
➢ 常见取值：
在这里插入图片描述

➢ 记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！

4.2 外边距（margin） - 单方向设置

➢ 场景：只给盒子的某个方向单独设置外边距
➢ 属性名：margin - 方位名词
➢ 属性值：数字 + px

4.3 margin单方向设置的应用

在这里插入图片描述

4.4 清除默认内外边距

➢ 场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的
margin和padding，后续自己设置
• 比如：body标签默认有margin：8px
• 比如：p标签默认有上下的margin
• 比如：ul标签默认由上下的margin和padding-left
• ……
➢ 解决方法：

<style>
        *{
            margin: 0;
            padding: 0;
            
        }
   </style>

4.5 外边距正常情况

➢ 场景：水平布局的盒子，左右的margin正常，互不影响
➢ 结果：最终两者距离为左右margin的和

4.6 外边距折叠现象 – ① 合并现象

➢ 场景：垂直布局的块级元素，上下的margin会合并
➢ 结果：最终两者距离为margin的最大值
➢ 解决方法：避免就好
• 只给其中一个盒子设置margin即可

4.7 外边距折叠现象 – ② 塌陷现象

➢ 场景：互相嵌套的块级元素，子元素的 margin-top 会作用在父元素上
➢ 结果：导致父元素一起往下移动
➢ 解决方法：

给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
给父元素设置overflow：hidden
转换成行内块元素
设置浮动

4.8 `行内元素`的margin和padding无效情况

➢ 场景：给行内元素设置margin和padding时
➢ 结果：

水平方向的margin和padding布局中有效！
垂直方向的margin和padding布局中无效！

二、结构伪类选择器

目标：能够使用结构伪类选择器在HTML中定位元素

1.作用与优势

作用：根据元素在HTML中的结构关系查找元素
优势：减少对于HTML中类的依赖，有利于保持代码整洁
场景：常用于查找某父级选择器中的子元素

2 选择器

在这里插入图片描述

3.注意点

在这里插入图片描述
➢ n的注意点：

n为：0、1、2、3、4、5、6、……
通过n可以组成常见公式

4.nth-of-type结构伪类选择

➢ 选择器：
在这里插入图片描述
➢ 区别：
• :nth-child → 直接在所有孩子中数个数
• :nth-of-type → 先通过该类型找到符合的一堆子元素，然后在这一堆子元素中数个数

三、伪元素

目标：能够使用伪元素在网页中创建内容。
➢ 伪元素：一般页面中的非主体内容可以使用伪元素
➢ 区别：

元素：HTML 设置的标签
伪元素：由 CSS 模拟出的标签效果
➢ 种类：

➢ 注意点：
必须设置content属性才能生效
伪元素默认是行内元素
例子：写一个老鼠爱大米的例子。
eg：

<style>
        .box{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .box .box1{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        .box .box1::before{
            content: "老鼠";
        }
    </style>
</head>
<body>
    <div  class="box">
        <div class="box1">爱大米</div>
    </div>
</body>

四、标准流

目标：能够认识标准流的默认排布方式及其特点
➢ 标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
➢ 常见标准流排版规则：

块级元素：从上往下，垂直布局，独占一行
行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

五、浮动

5.1 浮动的作用

➢ 早期的作用：图文环绕
➢ 现在的作用：网页布局
• 场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右
eg:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
       .top{
           height: 40px;
           background-color: #333;
       }
       .center{
           margin: 0 auto;
           width: 1226px;
           height: 100px;
           background-color: #ffc0cb;
       }
       .bottom{
           margin: 0 auto;
           width: 1226px;
           height: 460px;
           background-color: green;
       }
       .bottom .left{
           width: 234px;
           height: 460px;
           background-color: #ffa500;
           float: left;
       }
       .bottom .right{
           width: 992px;
           height: 460px;
           background-color: #87ceeb;
           float: right;

       }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="center"></div>
    <div class="bottom">
        <div class="left"></div>
        <div class="right"></div>
    </div>

</body>

结果图：
在这里插入图片描述

5.2 浮动的代码

➢ 属性名：float
➢ 属性值：

属性名	效果
fliot:left	左浮动
fliot:right	右浮动

5.3 浮动的特点

浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
• 相当于从地面飘到了空中
浮动元素比标准流高半个级别，可以覆盖标准流中的元素
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素有特殊的显示效果
• 一行可以显示多个
• 可以设置宽高
➢ 注意点：
• 浮动的元素不能通过text-align:center或者margin:0 auto

5.4 清除浮动

5.4.1 清除浮动的介绍

➢ 含义：清除浮动带来的影响
• 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
➢ 原因：
• 子元素浮动后脱标 → 不占位置
➢ 目的：
• 需要父元素有高度，从而不影响其他网页元素的布局

5.4.2 清除浮动的方法 — ① 直接设置父元素高度

➢ 特点：
• 优点：简单粗暴，方便
• 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块

5.4.3 清除浮动的方法 — ② 额外标签法

➢ 操作：

在父元素内容的最后添加一个块级元素
给添加的块级元素设置 clear:both
➢ 特点：
• 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
eg:

 <style>
 /* 给添加的块级元素设置 clear:both */
       .bottom .clearfix{
           clear: both;
       }
  </style>
  <body>
        <!-- 添加一个块级元素 -->
        <div class="clearfix"></div>
    </div>
    <div class="xiafang"></div>
</body>

5.4.4 清除浮动的方法 — ③ 单伪元素清除法

➢ 操作：用伪元素替代了额外标签
① ：基本写法

<style>
   /* 用伪元素替代了额外标签-基本写法 */
       .clearfix::after{
           content: "";
           display: block;
           clear: both;
       }
  </style>
  <body>
        <!-- 添加一个块级元素 -->
        <div class="clearfix"></div>
    </div>
    <div class="xiafang"></div>
</body>

② ：补充写法

<style>
   /* 用伪元素替代了额外标签 */
       .clearfix::after{
           content: "";
           display: block;
           clear: both;
           /* 补充的代码：在网页中看不到伪元素 */
           height: 0;
           visibility: hidden;
       }
  </style>
  <body>
        <!-- 添加一个块级元素 -->
        <div class="clearfix"></div>
    </div>
    <div class="xiafang"></div>
</body>

➢ 特点：
• 优点：项目中使用，直接给标签加类即可清除浮动

5.4.5 清除浮动的方法 — ④ 双伪元素清除法

<style>
   /* 用伪元素替代了额外标签 */
        .clearfix::before,
       .clearfix::after{
           content: "";
           display: table;
       }
       .clearfix::after{
           clear: both;
       }
  </style>
  <body>
        <!-- 添加一个块级元素 -->
        <div class="clearfix"></div>
    </div>
    <div class="xiafang"></div>
</body>

➢ 特点：
• 优点：项目中使用，直接给标签加类即可清除浮动

5.4.6 清除浮动的方法 — ⑤ 给父元素设置overflow : hidden

➢ 操作：

直接给父元素设置 overflow : hidden
➢ 特点：
• 优点：方便

<style>
  .bottom{
           margin: 0 auto;
           width: 1226px;
           /* height: 460px; */
           background-color: green;
           /* 给父元素设置 overflow : hidden */
           overflow: hidden;
          
       }
  </style>
  <body>
       <div class="bottom">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>