《CSS盒子模型》笔记总结 - 教程

CSS的三大特性

一：继承性
二：层叠性前两个特性见CSS进阶

三：优先级

基本信息：
在这里插入图片描述
eg：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>优先级</title>
          <style>
            div {
            color: cornsilk;
            }
            .q {
            color: blue;
            }
            #w {
            color: chartreuse;
            }
          </style>
        </head>
        <body>
        <div class="q" id="w">优先级展示</div>
        <div class="q">优先级展示</div>
        </body>
      </html>

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

**tip：**越精准 的选择器优先级越高，不用刻意去记很多。

权重叠加计算

基本信息：
在这里插入图片描述
**tip：**这个其实就是一个方便自己看一堆选择器里面谁生效，知道就好。

Chrome调试工具（查错代码）

基本信息： css上一行出错会导致下一行不生效。
使用方法：在谷歌浏览器中右键相应内容。
光标在符号后面时距离距离远的是中文标点，紧贴者的是英文标点。
如果检查时右边都没css的代码，大概率是选择器出错了。

Pxcook工具

基本信息：
一般形式用设计
psd格式则用开发
可以看图片大小，提取颜色等功能。

盒子模型

> 一：盒子模型的介绍

基本信息：
在这里插入图片描述
eg：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>基本盒子</title>
          <style>
            div {
            width: 300px;
            height: 300px;
            background-color: chartreuse;
            /* border边界线 */
            border: 20px solid #e60c0c;
            /* padding内边界,内容与盒子边界的距离 */
            padding: 30px;
            /* margin外边界,盒子外空白区域 */
            margin: 30px;
            }
          </style>
        </head>
        <body>
          <div>
            基本盒子构造1
          </div>
          <div>
            基本盒子构造2
          </div>
        </body>
      </html>

效果图 ：

在这里插入图片描述

> 二：盒子宽高内容

基本信息：
在这里插入图片描述

> 三：盒子的边框(border)

基本信息：

在这里插入图片描述

控制某个方向的边框
在这里插入图片描述
单个属性：

在这里插入图片描述
eg：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>盒子边框</title>
          <style>
            div {
            width: 333px;
            height: 300px;
            background-color: rgb(113, 113, 178);
            border-right: 3px dashed red;
            border-top: 4px dashed red;
            }
          </style>
        </head>
        <body>
          <div>
            盒子边框
          </div>
        </body>
      </html>

效果图：
在这里插入图片描述
tip:边框，内边距和外间距都是额外距离，与盒子大小无关会在盒子的基础上增大。

> 四：盒子内边距（paddig）

基本信息：
在这里插入图片描述
eg：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>盒子内边距</title>
          <style>
            div {
            width: 300px;
            height: 300px;
            background-color: aqua;
            padding: 30px 20px 12px 22px;
            }
          </style>
        </head>
        <body>
          <div>
            盒子内边距
          </div>
        </body>
      </html>

效果的解析图：
在这里插入图片描述

> 五：CSS盒子（自动内减）

基础信息：
在这里插入图片描述
eg：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>固定盒子大小</title>
          <style>
            div {
            width: 300px;
            height: 300px;
            background-color: aqua;
            border: 10px dashed red;
            padding: 30px;
            box-sizing:border-box;
            }
          </style>
        </head>
        <body>
          <div>
            固定盒子大小
          </div>
        </body>
      </html>

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

**tip:**相当于就加一行代码（box-sizing：border-box）就可以固定住盒子的大小，也称为CSS的内减模式。

> 六：盒子的外边界（margin）

基本信息：
参考和盒子的内边距。（除了标签名字不一样其他都一样。）
eg：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>盒子的外边距</title>
          <style>
            div {
            width: 300px;
            height: 200px;
            background-color: aqua;
            margin-top: 30px;
            }
          </style>
        </head>
        <body>
          <div>
            盒子的外边距
          </div>
        </body>
      </html>

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

> 七：清除默认内外边距

基础信息：
在这里插入图片描述
eg：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>清除默认内外边距</title>
          <style>
            * {
            padding: 0;
            margin: 0;
            }
          </style>
        </head>
        <body>
        <p>这是一个p标签</p>
        <h1>这是一个h1标签</h1>
        </body>
      </html>

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

> 八：版心居中

基本信息：
在确定好盒子的宽高大小时，一般内容是放在网页中间加一个margin：0 auto；即可自动居中！
eg：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>盒子版心居中</title>
          <style>
            div {
            width: 1000px;
            height: 600px;
            background-color: beige;
            margin: 0 auto;
            }
          </style>
        </head>
        <body>
        <div>盒子版心居中</div>
        </body>
      </html>

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

> 九：外边界重叠问题

基本信息：
在这里插入图片描述
eg：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>盒子的间距问题</title>
          <style>
            div {
            width: 300px;
            height: 300px;
            background-color: aqua;
            }
            .ww {
            margin-bottom: 30px;
            }
            .www{
            margin-top: 50px;
            }
          </style>
        </head>
        <body>
        <div class="ww">盒子的间距问题-1</div>
        <div class="www">盒子的间距问题-2</div>
        </body>
      </html>

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

> 十：外边界塌陷问题

基本信息：
在这里插入图片描述

eg：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>边距塌陷问题</title>
          <style>
            .da {
            width: 300px;
            height: 200px;
            background-color: rgb(175, 124, 48);
            overflow: hidden;
            }
            .xiao {
            width: 100px;
            height: 100px;
            background-color: rgb(158, 22, 22);
            margin-top: 50px;
            }
          </style>
        </head>
        <body>
            <div class="da">
          <div class="xiao">son</div>
          </div>
        </body>
        </html

效果图：
请添加图片描述
**tip：**目前记住给父级用overflow：hidden最简单就可以。

十一：行内元素的内外边距的问题

基本信息：
在这里插入图片描述

posted @ 2025-10-27 15:43  yangykaifa  阅读(6)  评论(0)    收藏  举报