CSS样式

Marvintian

已于 2023-10-12 16:41:08 修改

阅读量103

点赞数 3

文章标签： css css3 前端

于 2023-10-12 16:31:31 首次发布

本文链接：https://blog.csdn.net/marvintian518/article/details/133793880

版权

📚CSS

层叠样式表 css也是一种标记语言

作用:美化页面 html

选择器+css属性

📒CSS的编写位置

行内样式

通过标签当中的style属性实现,style当中的属性不能随便乱写.

<!-- html自带的标签修改样式 -->
    <font color="red" size="7">发展是解决一切问题的总钥匙</font> 
    <!-- 通过css属性修改样式
        行内样式
    -->
    <p style="color: pink; font-size:10px ;">全球经济波动下行，地缘政治危机升级，发展失衡加剧，单边主义</p>

内部样式

还是写在html内部,将所有的css代码提取出来,单独放在一个位置

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        p {
          color: rgb(61, 180, 6);
          font-size: 20px;  
        }
    </style>
</head>
<body>
     <!-- html自带的标签修改样式 -->
     <font color="red" size="1">发展是解决一切问题的总钥匙</font> 
     <!-- 内部样式
           将 css代码提取出来  写在style标签中
    -->
     <p>全球经济波动下行，地缘政治危机升级，发展失衡加剧，单边主义</p> 
    
</body>
</html>

外部样式

写在css文件当中,然后引入到html当中

1.创建css文件

p {
    color: rgb(61, 180, 6);
    font-size: 20px;  
  }

2.引入创建好的css

link标签要写在中

<!--href 指定css的路径 -->
<link rel="stylesheet" href="index.css">

📒样式表的优先级

优先级规则: 行内样式>内部样式=外部样式

分类	优点	缺点	作用范围
行内样式	优先级最高,最直观	代码结构混乱结构和样式没有分离,不易维护不能复用	当前标签
内部样式	样式可复用代码结构清晰	结构与样式未完全分离样式不能多页复用	当前页面
外部样式	代码结构更清晰样式可以多页复用结构样式完全分离可以触发浏览器的缓存	需要引入才能使用	多个页面

📒语法规范

语法组成部分

选择器找到要添加样式的元素
声明块设置具体的样式
- 中间的分号不能删掉最后的分号不建议删除
- 选择器和声明之间,属性名和属性值之间均建议加上空格

请添加图片描述

注释的写法如下

/* 给p元素添加样式 */
p {
  /*设置文字颜色为darkred */  
  color: darkred;  
}

代码风格

展开风格

   <style>
      p {
        color:darkgreen; 
        font-size: 40px;
      }  
    </style>

紧凑风格

   <style>
      p {
        color:darkgreen; font-size: 40px;
      }  
    </style>

📗选择器

基本的选择器

1.通配选择器

可以选择所有的html元素

<head>
    <style>
        * {
            color: red;
        }
    </style>
</head>
<body>
    <p>全球经济波动下行，地缘政治危机升级，发展失衡加剧，单边主义</p>
    <div> 中国功夫，千年传承，一招一式，充满力量；体育竞技，百帆竞发，每分每秒，都凝聚热情。杭州亚运会功夫创意视频《功成》今日正式上线，超写实数字人筱竹、武术演员张晋、青年运动员共同参演，希林娜依·高、李常超惊喜献声，一起相约见证杭州亚运会的盛大开幕！</div>
</body>

2.元素选择器

为页面中某类元素统一设置样式

<style>
         p {
            color: blue ;
        }
</style>
<body>
    <p>全球经济波动下行，地缘政治危机升级，发展失衡加剧，单边主义</p>
    <div> 中国功夫，千年传承，一招一式，充满力量；体育竞技，百帆竞发，每分每秒，都凝聚热情。杭州亚运会功夫创意视频《功成》今日正式上线，超写实数字人筱竹、武术演员张晋、青年运动员共同参演，希林娜依·高、李常超惊喜献声，一起相约见证杭州亚运会的盛大开幕！</div>
</body>

3.类选择器

<!DOCTYPE html>
<html lang="en">
<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>
        .speak {
            color: darkgreen;
        }
        .answer{
            color:blueviolet;
        }
    </style>
</head>
<body>
    <h1>欢迎来到土味官网,土的味道我知道</h1><br>
    <h2>土味情话</h2>
    <h3>作者:成都工业职业技术学院实训小班全体</h3>
    <p class="speak">你会弹吉他吗?不然怎么拨弄我的心弦</p>
    <p class="speak">万水千山总是情,爱我多点行不行</p>
    <p class="speak">我想吃面,什么面?你的心里面</p>
    <p class="speak">我是9你是3,除了你还是你</p>
    <h2>反杀土味情话</h2>
    <h3>作者:沸羊羊</h3>
    <p class="answer">一寸光阴一寸金,劝你死了这条心</p>
    <p class="answer">我的心里只有一块地,我的玛莎拉蒂</p>
    <p class="answer">你是我的胃,你是我的肺,能不能帮我还花呗</p>
</body>
</html>

注意:

元素的class属性的值不带. 选择器带.

class属性的值不能使用纯数字,不要使用中文,推荐英文和数字,多个单词中间用-连接见名知意

一个元素只能有一个class属性 ,一个class属性可以有多个属性值,多个属性值之间用空格隔开

<style>
        .speak {
            color: darkgreen;
        }
        .ss {
            font-size: 40px;
        }
        
</style> 
<p class="speak ss" >你会弹吉他吗?不然怎么拨弄我的心弦</p>

4.id选择器

根据元素的id属性值,来精确选中某个元素

    <style>
        #train {
            color: red;
            font-size: 40px;
        }
    </style>

<p id="train">12306回应强制买长乘短</p>

注意:

id的属性值尽量由字母,数字下滑线短杠组成.最好以字母开头,不要包含空格

一个元素只能有一个id属性,多个元素的id值不能相同

一个元素可以同时拥有id和class属性

复合选择器

基本选择器的组合

1.交集选择器

并且的意思

语法: 选择器1选择器2…{}

作用:选中同时符合多个条件的元素

<!DOCTYPE html>
<html lang="en">
<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>
       /* h2 {
         color: gold;
       }
       p {
        color: rgb(8, 238, 38);
       } */
       /* 如果使用标签,那么标签必须写在开头 */
       
        p.pubg {
        color: blue;
       } 

       .pubg {
        color: black;
       } 
       /* 交集选择器当中不可能出现两个元素选择器,因为一个元素既不可能是p元素又是div元素  */
       /*  */
       .cod.pubg{
        color: darkmagenta;
       }
    </style>
</head>
<body>
    <h2>王者荣耀</h2>
    <h2>原神</h2>
    <hr>
    <p >COD</p>
    <p class="pubg cod">PUBG</p>
    <div>我爱玩游戏</div>
</body>
</html>

如果使用标签,那么标签必须写在开头

交集选择器当中不可能出现两个元素选择器,因为一个元素既不可能是p元素又是div元素

用的最多的选择器是标签选择器和类选择器混合

2.并集选择器

作用:选多个选择器对应的元素

语法: 选择器1,选择器2,选择器3{}

什么…或者什么

<!DOCTYPE html>
<html lang="en">
<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>
        .an1,
        .an2,
        .an3,
        .an4 {
            color: aqua;
            font-size: 40px;
            background-color: gray;
            width: 180px;
        }
        
        
        

    </style>
</head>
<body>
    
    <p class="an1">猫和老鼠</p>
    <span class="an2">喜羊羊</span>
    <b class="an3">熊出没</b>
    <div class="an4">秦时明月</div>
</body>
</html>

HTML元素间的关系

嵌套关系父子关系

并列关系兄弟关系

父元素

<!-- 父元素: 直接包裹某个元素的元素 就是该元素的父元素-->
    <div>
        <h1>电视剧</h1>
        <ul>
            <li>
                古剑奇谭
                <a href="#">李易峰</a>
            </li>
            <li>花千骨</li>
            <li>亮剑</li>
            <li>仙剑奇侠传</li>
        </ul>
    </div>

子元素

<!-- 父元素: 直接包裹某个元素的元素 就是该元素的父元素-->
    <div>
        <!-- 子元素: 被父元素直接包裹的元素 -->
        <h1>电视剧</h1>
        <ul>
            <li>古剑奇谭</li>
            <li>花千骨</li>
            <li>亮剑</li>
            <li>仙剑奇侠传</li>
        </ul>
    </div>

祖先元素

<!--父亲的父亲....一直往外找...-->

后代元素

<!--儿子的儿子   一直往里找-->

兄弟元素

<!--具有相同父元素的元素,互为兄弟元素-->

3.后代选择器

作用:选中指定元素中,符合要求的后代元素

语法:选择器1 选择器2 (先写祖先,再写后代)

<!DOCTYPE html>
<html lang="en">
  <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>

        ul li {
            color: red;
        }
        ol li{
            color: red;
        }
    </style>
  </head>
  <body>
    <ul>
      <li>抽烟</li>
      <li>喝酒</li>
      <li>烫头</li>
      <div>
        <li>
            踢球
        </li>
      </div>
    </ul>
    <hr/>
    <ol>
      <li>张三</li>
      <li>李四</li>
      <li>王五</li>
    </ol>
  </body>
</html>

4.子代选择器

作用:选中指定元素中,符合要求的子代元素

语法: 选择器1>选择器2 (先写父元素,再写子元素)

<!DOCTYPE html>
<html lang="en">
  <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>
         ul>li {
            color: red; 
         }
    </style>
  </head>
  <body>
    <ul>
      <li>抽烟</li>
      <li>喝酒</li>
      <li>烫头</li>
      <div>
        <li>
            踢球
        </li>
      </div>
    </ul>
    <hr/>
    <ol>
      <li>张三</li>
      <li>李四</li>
      <li>王五</li>
    </ol>
  </body>
</html>

📒伪类选择器

书写顺序是固定的

其他标签也有伪类

注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

**注意：**伪类的名称不区分大小写。

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
       /* 选中的是没有访问过的a元素 */
       a:link {
        color: orange;
       }
       /* 选中的是访问的a元素 */
       a:visited {
        color: grey;
        
       }
       /* 选中的是鼠标悬停的a元素 */
       a:hover {
        color: skyblue;
       }
      /* 选中的是激活状态的a元素 */
       a:active {
        color: green;
       }
        
       span:hover {
         color: red;
       }
       span:active {
        color: green;
       }
    </style>
</head>
<body>
    <a href="https://www.jd.com" target="_blank" >京东</a>
    <a href="https://www.baidu.com" target="_blank">百度</a>
    <span>叩丁狼</span>
</body>
</html>

📒选择器的优先级

ID选择器>class选择器>标签选择器

📗颜色的表示方式

1.编写方式:直接使用颜色对应的英文单词

红色 red 绿色 green

2.编写方式:rgb或者rgba 使用红黄蓝这种光的三原色进行组合 rgb(0,0,0)

3.编写方式:hex 原理和rgb相同, 也是通过红黄蓝三种颜色进行组合,6位数每两位是一组分为3组 #000000

📒显示模式

块元素 p div h1-h6 hr ul ol li html body

1.在页面中独占一行

2.默认宽度:占满整个父元素

3.默认高度:由内容撑开

4.可以通过css样式来指定宽高

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        body {
            background-color: brown;
        }
        p {
            background-color: aqua;
            width: 100px;
            height: 100px;
        }
        div {
            background-color: blue;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <p>你好1  </p>
    <div>你好div</div>
</body>
</html>

内联元素 a b strong label

1.在页面中不独占一行,从左到右依次排布

2.默认宽度:由内容撑开的

3.默认高度:由内容撑开

4.不能够通过css来控制宽高的

行内块元素 img td th input select button

1.在页面中不会独占一行,一行容纳不下,会在下一行从左到右依次排布

2.默认宽度:由内容撑开

3.默认高度:由内容撑开

4.可以通过css来控制宽高

📒切换显示模式

通过css的display属性可以修改元素默认的显示模式

<!DOCTYPE html>
<html lang="en">
<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>
        div {
            width: 200px;
            height: 200px;
            font-size: 20px;
            display: inline-block;
        }
        #d1 {
            background-color: aqua;
        }
        #d2 {
            background-color: darkgreen;
        }
        span {
            width: 100px;
            height: 100px;
            display: block;
        }
        #s1 {
            background-color: darkmagenta;

        }
        #s2 {
            background-color: gold;
        }
    </style>
</head>
<body>
    <div id="d1">你好1</div>
    <div id="d2">你好2</div>
    <span id="s1">你好sapn1</span>
    <span id="s2">你好sapn2</span>
</body>
</html>

值	作用
none	元素会被隐藏
block	元素将作为块级元素显示
inline	元素将作为行内元素显示
inline-block	元素将作为行内块元素显示

📕盒模型

CSS会把我们页面上的所有的html元素都看成一个盒子,所有写的样式也都是基于这个盒子

1.content 内容区元素中的文本或者后代元素都放在该区域

2.margin 外边距盒子和外界的距离

3.border 边框盒子的边框

4.padding 内边距内容区距离边框的部分

请添加图片描述

盒子的大小=content+左右padding+左右border

margin是不会影响盒子的大小的,但会影响盒子的位置

盒子内容区

属性主要有width height

一般我们 max-width min-width 不与width一起使用

<!DOCTYPE html>
<html lang="en">
<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>
        div {
            /* width: 800px; */
            /* 最大的宽度 */
            max-width: 800px;
            /* 最小宽度 */
            min-width: 500px;
            height: 200px;
            background-color: brown;
        }
    </style>
</head>
<body>

    <div>我是div</div>
    
</body>
</html>

默认宽度

默认宽度指的是如果不设置width属性时,元素所呈现出来的宽度

总宽度=父元素的content-自身左右margin

内容区的总宽度= 父元素的content-自身左右的margin-自身左右的border-自身左右的padding

如果盒子没有定义宽度，那么当设置margin时，就会影响当前盒子的宽度

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        div {
            height: 200px;
            background-color: gray;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>我是一个</div>
</body>
</html>

内边距

padding:25px 50px 75px 100px;

上填充为25px
右填充为50px
下填充为75px
左填充为100px

padding:25px 50px 75px;

上填充为25px
左右填充为50px
下填充为75px

padding:25px 50px;

上下填充为25px
左右填充为50px

padding:25px;

所有的填充都是25px

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            font-size: 20px;
            background-color: skyblue;
            /* padding: 20px; */
            padding:25px 50px 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div>我是一个</div>
</body>
</html>

行内元素设置内边距

当给行内元素设置padding时,需要注意左右padding设置没有问题左右设置padding 它不会占位置

行内元素上下内边距时不能完美设置的

块元素和行内块元素内边距是可以完美设置的

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            font-size: 20px;
            background-color: skyblue;
            /* padding: 20px; */
            padding:25px 50px 100px;
            border: 1px solid black;
        }
        span {
            background-color:blueviolet;
            font-size: 20px;
            padding-left: 100px;
            padding-right: 100px;
            padding-top: 20px;
            padding-bottom: 20px;
        }
    </style>
</head>
<body>
    <div>我是一个</div>
    <hr>
    <span>好好学习天天向上</span>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quis necessitatibus rem quos ad ipsa at reiciendis sint, iste cumque quae provident, nesciunt odio dolore soluta veritatis sapiente quaerat alias?</div>
</body>
</html>

边框

一般我们设置边框都会采用border这个复合属性来设置

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        span {
             background-color: chartreuse;
             border-top-style: dotted;
             border-bottom-style: dotted;
             border-right-style: solid;
             border-left-style: solid;
             border-width: 5px;
             border-color: blue;
        }
    </style>
</head>
<body>
    <span>好好学习天天向上</span>
</body>
</html>

外边距

margin 没有背景颜色，是完全透明的。

margin:25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
margin:25px 50px 75px;
- 上边距为25px
- 左右边距为50px
- 下边距为75px
margin:25px 50px;
- 上下边距为25px
- 左右边距为50px
margin:25px;
- 所有的4个边距都是25px

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: crimson;
            /* margin:25px 50px 75px 100px; */
            /* margin:25px 50px 75px; */
            /* margin:25px 50px; */
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>我是一个div</div>
</body>
</html>

注意事项

1.子元素的margin,是参考父元素的content计算

2.上margin 左margin影响的是自己的位置, 下margin 右margin影响的是后面兄弟元素的位置

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
        }
        .box1 {
            background-color: aqua;
            margin-top: 20px;
            margin-left: 10px;
            margin-bottom: 30px;
            margin-right: 20px;
        }
        .box2 {
            background-color:chocolate;
            margin-bottom: 30px;
        }
        .box3 {
            background-color:crimson
        }
    </style>
</head>
<body>
     <div class="box box1">box1</div>
     <div class="box box2">box2</div>
     <div class="box box3">box3</div>
</body>
</html>

当设置lemargin-bottom 那么box1将把box2顶下去

3.块级元素行内块元素均可以完美的设置四个方向的margin 行内元素设置margin-top margin-bottom时是无效的

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        #d1 {
            width: 400px;
            height: 400px;
            margin: 50px;
            background-color: aquamarine;
        }
        img {
            width: 500px;
            height: 500px;
            margin: 50px;
        }
        .one {
          background-color: chartreuse;
        }
        .two {
            background-color:darkgoldenrod;
            margin-left: 50px;
            margin-right: 50px;
            margin-top: 200px;
            margin-bottom: 200px;
        }
        .three {
            background-color:darkred
        }
    </style>
</head>
<body>
    <div id="d1">我是块级元素</div>
    <hr>
    <img src="11.jpg" >
    <hr>
    <span class="one">你好1</span><span class="two">你好2</span><span class="three">你好3</span>
</body>
</html>

4.当给块级元素设置左右margin都为auto是,该块级元素会在父元素中水平居中

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        div {
            width: 800px;
            height: 100px;
            background-color: brown;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
    <div>你好啊</div>
</body>
</html>

如果给行内元素设置0 auto 那么行内元素是不会水平居中的

<style>
   span {
            background-color: hotpink;
            margin: 0 auto;
        }
</style>
<body>
    <span>你好啊</span>
</body>

margin塌陷问题

第一个子元素的上margin会作用在父元素上,最后一个子元素的下margin会作用在父元素上

<!DOCTYPE html>
<html lang="en">
<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>margin塌陷</title>
    <style>
        .outer {
         width: 400px;
         /* height: 400px; */
         background-color: gray;
         /* border: 0px solid red; */
        
        }
        .inner1 {
         width: 100px;
         height: 100px;
         background-color: gold;
         /* margin-bottom: 50px;  */
         /* margin-top: 50px; */
        }
        .inner2 {
         width: 100px;
         height: 100px;
         background-color: green;
         /* margin-top: 50px; */
         margin-bottom: 50px;   
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner1">inner1</div>
        <div class="inner2">inner2</div>
    </div>
    <div>我是一段文字</div>
</body>
</html>

解决方案

1.给父元素设置宽度不为0的border

.outer {
         width: 400px;
         /* height: 400px; */
         background-color: gray;
         border: 1px solid red;
     }

2.给父元素设置不为0的padding

  .outer {
         width: 400px;
         /* height: 400px; */
         background-color: gray;
         padding: 1px;
        
        }

3.给父元素设置css样式 overflow:hidden

.outer {
         width: 400px;
         /* height: 400px; */
         background-color: gray;
         overflow: hidden;
        
        }

margin合并问题

兄弟元素之间,上面元素的下外边距和下面元素的上外边距会合并,取最大的值去显示,并不会相加

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
        }
        .box1 {
            background-color: chartreuse;
            margin-bottom: 50px;
        }
        .box2 {
            background-color: crimson;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="box box1">1</div>
    <div class="box box2">2</div>
</body>
</html>

Marvintian

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS样式

第一个子元素的上margin会作用在父元素上,最后一个子元素的下margin会作用在父元素上。兄弟元素之间,上面元素的下外边距和下面元素的上外边距会合并,取最大的值去显示,并不会相加。3.给父元素设置css样式 overflow:hidden。1.给父元素设置宽度不为0的border。2.给父元素设置不为0的padding。
复制链接

扫一扫