【CSS学习笔记3】css特性

Alice-YUE2025-09-16 10:07

1css三大特性

1.1层叠性：就近原则，最新定义的样式

1.2继承性：子标签集成父标签的样式，如文本和字号

行高的继承：不加单位指的是当前文字大小的倍数

复制代码 
body {
            font: 12px/1.5  'Microsoft YaHei';
            color: #be1313;
        }
div {
    /* 子元素继承父元素body的行高1.5 */
    /* 这个1.5是当前元素大小font-size的1.5倍 当前行高为21px*/
    font-size:14px;
}
p {
    /* 这个1.5是当前元素大小font-size的1.5倍 当前行高为24px */
    
    font-size: 16px;
}

优先级：选择器相同-》层叠性，选择器不同根据选择器权重

权重分为四组 权重叠加时不会有组间进位

依次递增

div {

color:pink**!important;**

}

最后会显示这个样式

注意：

继承的权重是0 对于继承的标签我们用元素选择器修改样式 这个权重是1 最后会显示元素选择器的样式

不管父元素的权重多高，子元素得到的权重都是0，除非单独选定该元素设置样式

这里p是继承的但是继承的权重是0 p的权重是1 1>0所以最后p的颜色是绿色

复制代码 
#father {
            color:#be1313
        }
p {
    color:aqua ;
}
<div id="father">
        <p>你本身就很好</p>
</div>

另外链接a在浏览器中默认是蓝色下划线央视， 想要修改必须单独指定

如：

a{

color:green;

}

在父选择器中设置无效

1.3权重叠加-复合选择器

复合选择器有权重叠加

复制代码 
ul {
         color:aliceblue
        }
ul li {
    /* 这里ul li两个选择的权重叠加了为0002 */
    color: aqua;
}
.nav li {
    /* 这里.nav li两个选择的权重叠加了为0011 */
    color: #be1313;
}

.nav li {
            /* 这里.nav li两个选择的权重叠加了为0011 */
            color: #be1313;
        } 
pink {
  /* 这里pink的权重为1 */
  color: #df5ccdf6;
}

.nav .pink {
  /* 这里.nav .pink两个选择的权重叠加了为0020 */
  color: #df5ccdf6; 
}
<ul class="nav">
        <li class="pink">大猪头</li>
        <li>小猪头</li>
        <li>猪头</li>
</ul>

组间不会有进位

0，0，0，10

四组为一个单位 不会有进位

练习题

想要给第一个小li单独添加颜色 可以利用权重叠加 给第一个li设置一个类 这样两个类的权重叠加是0020超过了类和元素的叠加0011

2.盒子模型

网页布局的三大核心：盒子模型、浮动和定位

网页布局的三个过程：用box 装好网页元素，利用css设置好盒子样式摆到相应位置（核心），在盒子里装内容

2.1盒子模型 box

css盒子用来封装周围的html元素 包括边框、外边距 内边距和实际内容

2.2border

1）

border-width:粗细 px单位

border-style: 记住三个 实线 、虚线、点线，solid、dashed、dotted

none : 无边框。与任何指定的border-width值无关 hidden : 隐藏边框。IE不支持 dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线 dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线 solid : 实线边框 double : 双线边框。两条单线与其间隔的和等于指定的border-width值 groove : 根据border-color的值画3D凹槽 ridge : 根据border-color的值画菱形边框 inset : 根据border-color的值画3D凹边 outset : 根据border-color的值画3D凸边

border-color:

简写：border:1px solid red;//没有顺序要求

边框四边可以分别设置

border-top:1px solid red;

border-bottom:5px dashed red;

2）实例：200*200的盒子上边框为红色其余为蓝色

复制代码 
div {
  width:200px;
  height:200px;
  border:5px solid blue;
  border-top:5px solid red;  /*层叠性、反过来不行*/
  }

3）css实现细边框表格

使用css 来优化表格样式

设置表格细边框的关键

border-collapse: collapse; 绘制表格边框的方式控制相邻单元格的边框

4）边框影响表格尺寸

边框会为影响实际盒子的大小比如一个盒子外面加上10pc的边框 盒子的尺寸就会变大

如果想要最终的盒子不变大 需要改变盒子原本的尺寸使得盒子+边框满足最终的要求

5）内边距padding

内容与盒子的边距

padding：10px；

都要记住

padding也会影响盒子的大小 跟边框一样 可以修改width和height来调整，

但如果不特殊指定width和height的大小就不会撑大盒子 width=100%也算指定

父亲设置尺寸 孩子没有设置尺寸 给孩子加padding 不会撑大盒子

使用padding来灵活设置导航栏

复制代码 
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
        }
        .nav a {
            /* a属于行内元素 此时必须要转换 行内块元素 */
            display: inline-block;
            height: 41px;
            padding: 0 20px;//只要左右边距
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;//不要下划线
        }
        .nav a:hover {//单独设置链接的颜色
            background-color: #eee;
            color: #ff8500;
        }

6）外边距margin

控制两个盒子之间的距离

可以让块级盒子实现水平居中：盒子必须指定宽度 盒子的左右边距都设置成auto

.header{ width:960px; margin:0 auto;}

margin：0 auto；

上、右、下、左

如果想让行内元素或者行内块元素水平居中 需要给其父元素添加text-align：center既可

对应嵌套关系（父子关系）的块元素，父子同时有外边距的情况下，父元素会他先较大的外边距值 而子元素不会有外边距 只对标准流是这样 浮动的不会有影响

三种解决方法：

给父元素加上边框border:1px sloid transparent、内边距padding:1px、添加overflow：hidden

7）清除内外边距

这是css设置格式的第一行

* {

padding:0;

margin:0;

}

注意：行内内元素为了照顾兼容性，尽量值设置作于内外边距不要上下的 但转化为块级和行内元素就可以

3.弹性盒子flexbox

父盒子控制子盒子如何排列

弹性盒子核心：

1.父控子 (亲父子）

父盒子控制子盒子如何排列布局

父盒子称为容器，子盒子称为项目

2.主轴和交叉轴（侧轴）

主轴默认水平方向，交叉轴默认垂直方向，可以更改

父容器属性

容器（父盒子）设置display:flex;可以让子盒子按照主轴方式排列。主轴默认水平

如果子元素有大小，则按照给定大小 来显示。

如果子元素没有大小，则拉伸充满父容器 。

若子元素总宽度超过容器宽度，默认会压缩子元素。

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>弹性布局-容器flex</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      /* 添加弹性布局 */
      display: flex;
      width: 500px;
      height: 100px;
      border: 1px solid red;

    }
    
    .box .item {
      width: 100px;
      /* height: 100px; */
      background-color: pink;
      border-radius: 10px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
</body>

</html>

justify-content定义主轴上的对齐方式

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>弹性布局-容器flex</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      /* 添加弹性布局 */
      display: flex;
      /* 主轴的对齐方式 */
      /* justify-content: flex-start; */
      /* justify-content: flex-end; */
      /* justify-content: center; */
      /* 两端对齐 */
      /* justify-content: space-between; */
      /* justify-content: space-around; */
      /* 平均分配 */
      justify-content: space-evenly;
      width: 500px;
      height: 100px;
      border: 1px solid red;
      margin: 20px 0 0 10px;
    }

    .box .item {
      width: 100px;
      height: 100px;
      background-color: pink;
      border-radius: 10px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
</body>

</html>

开发中大部分情况下子元素大小是设定的

align-items定义交叉轴上的对齐方式 垂直居中

复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>弹性布局-容器flex</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      /* 添加弹性布局 */
      display: flex;
      /* 交叉轴的对齐方式 */
      /* align-items: flex-start; */
      /* align-items: flex-end; */
      align-items: center;
      /* align-items: stretch; */
      /* 主轴的对齐方式 */
      justify-content: space-between;
      width: 500px;
      height: 300px;
      border: 1px solid red;
      margin: 20px 0 0 10px;
    }

    .box .item {
      width: 100px;
      height: 100px;
      background-color: pink;
      border-radius: 10px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
</body>

</html>

flex-direcition改变主轴的方向，这种情况下主轴是竖向的 交叉轴是横向的

flex-wrap 自动换行

之前的盒子是设置的浮动

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>弹性布局-强制换行</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .box {
      display: flex;
      /* 强制换行 */
      flex-wrap: wrap;
      /* 主轴对齐 */
      justify-content: space-between;
      width: 830px;
      border: 1px solid blue;
      margin: 30px auto;
    }

    .box .item {
      width: 200px;
      height: 300px;
      background-color: pink;
      border-radius: 10px;
      margin-bottom: 10px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    <div class="item">12</div>
    <div class="item">13</div>
  </div>
</body>

</html>

algin-content多行交叉轴对齐

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>弹性布局-多行交叉轴对齐</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .box {
      display: flex;
      /* 强制换行 */
      flex-wrap: wrap;
      /* 主轴对齐 */
      justify-content: space-between;
      /* 多行交叉轴对齐 */
      /* align-content: start; */
      /* align-content: end; */
      /* align-content: center; */
      /* align-content: space-between; */
      /* align-content: space-around; */
      align-content: space-evenly;
      width: 830px;
      height: 500px;
      border: 1px solid red;
      margin: 30px auto;
    }

    .box .item {
      width: 200px;
      height: 150px;
      background-color: pink;
      border-radius: 10px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>
</body>

</html>

子盒子属性

控制自身的尺寸、顺序或对齐方式

实现弹性布局 比如浏览器放大缩小 可以伸缩盒子的大小

语法 ：flex：1；除了空隙之外的剩余空间占一份，并且可以伸缩盒子的大小 数字表示剩余空间所占份数 每个小盒子占父盒子的几份 父盒子的份数取决于子盒子flex的份数之和

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex项目伸缩尺寸</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .box {
      display: flex;
      gap: 10px;
      /* justify-content: space-between; */
      width: 80%;
      border: 1px solid blue;
      margin: 0 auto;
    }

    .box .item {
      /* flex要写到 小盒子身上  优先级比 width 和 height高 */
      /* flex 1 表示占1份  表示每个小盒子占父盒子的几份 */
      flex: 1;
      width: 80px;
      height: 100px;
      background-color: pink;
      /* margin-right: 10px; */
    }

    .box .item:nth-child(odd) {
      background-color: purple;
    }

    /* .box .item:nth-child(3) {
      flex: 2;
    } */
  </style>
</head>

<body>
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
</body>

</html>

**gap间距：**用于设置行与列之间的间隙 单行（盒子与盒子之间

语法：

gap:20px；行和列之间保持20像素间隙

gap:20 30px;行间距20 列间距30

注意：gap写道父元素中控制子元素的间距

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>淘宝多行弹性布局写法</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .w {
      /* 版心 */
      width: 80%;
      margin: 20px auto;
    }

    .box {
      display: flex;
      /* 自动换行 */
      flex-wrap: wrap;
      border: 1px solid red;
      /* 使得内部的盒子完全充满版心没有间隙 */
      margin-left: -8px;
      margin-right: -8px;
    }

    .box .item {
      /* width: 80px; */
      /* flex: 1;  每行 6个盒子100/6=16.666666*/
      flex: 0 0 16.666666%;
      height: 120px;
      /* background-color: pink; */
      margin-bottom: 16px;
      /* margin-right: 16px; */
      /* 每两个盒子之间间隔16px，如果用marginright来做最右边的盒子会掉下去 */
      padding: 0 8px;
    }

    .item .content {
      height: 100%;
      width: 100%;
      background-color: pink;
    }

    .footer {
      width: 80%;
      height: 120px;
      background-color: black;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <div class="w">
    <!-- 在版心w中放盒子box 保证盒子在一定区域内并且可以缩放 -->
    <div class="box">
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>

    </div>
  </div>

  <div class="footer"></div>
</body>

</html>
html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>淘宝多行弹性布局写法</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }


    .box {
      display: flex;
      flex-wrap: wrap;
      width: 80%;
      border: 1px solid red;
      margin: 0 auto;
    }

    .box .item {
      flex: 1;
      width: 80px;
      height: 120px;
      background-color: pink;
      /* min-width: 16.666666667%;
      max-width: 16.666666667%; */
      /* 每个元素包含间隙在内占1/6 */
      min-width: calc(16.6666667% - 16px);
      max-width: calc(16.6666667% - 16px);
      margin: 0 8px 16px;
    }

    .footer {
      width: 80%;
      height: 120px;
      background-color: black;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    <div class="item">12</div>
    <div class="item">13</div>
    <div class="item">14</div>
    <div class="item">15</div>
    <div class="item">16</div>
  </div>


  <div class="footer"></div>
</body>

</html>

多行弹性布局之后会用网格布局gird实现

3综合案例

产品模块

相关推荐
崔庆才丨静觅8 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60618 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了9 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅9 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
wdfk_prog9 小时前
[Linux]学习笔记系列 -- [drivers][input]input
linux·笔记·学习
崔庆才丨静觅9 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
ouliten9 小时前
cuda编程笔记（36）-- 应用Tensor Core加速矩阵乘法
笔记·cuda
崔庆才丨静觅9 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment9 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅10 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南10OpenCode 入门教程：介绍 · 安装 · 配置第三方 API (如 Claude)