【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综合案例

产品模块

相关推荐
bug_kada2 小时前
告别页面卡顿！用DocumentFragment打造高性能DOM操作
前端
遂心_2 小时前
深入浅出 querySelector：现代DOM选择器的终极指南
前端·javascript·react.js
遂心_2 小时前
DOM元素内容修改全攻略：从innerHTML到现代API的最佳实践
前端·javascript·react.js
2303_Alpha2 小时前
SpringBoot
笔记·学习
溯水流光2 小时前
React 源码解析
前端
睡不着先生2 小时前
CSS `:has()` 实战指南：让 CSS 拥有“if 逻辑”
css
光影少年2 小时前
Typescript工具类型
前端·typescript·掘金·金石计划
北风GI2 小时前
如何在 vue3+vite 中使用 Element-plus 实现 自定义主题 多主题切换
前端
月亮慢慢圆2 小时前
网络监控状态
前端
热门推荐
01GitHub 镜像站点02UV 工具安装与国内镜像源配置指南03UV安装并设置国内源0446个Nano-banana 精选提示词，持续更新中05A股预测还能更准？开源大模型Kronos带你跑通预测+回测全流程06解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题07KGG转MP3工具|非KGM文件|解密音频08conda中设置镜像地址（附所有可换的地址）09智能库存管理的需求预测模型：从业务痛点到落地代码的完整实践10Claude Code 平替：OpenAI发布 Codex CLI ，GPT-5 国内直接使用