CSS样式语法

王维诗里的代码i

已于 2023-09-13 14:29:11 修改

阅读量185

点赞数 1

分类专栏：前端技术基础文章标签： css 前端 java

于 2023-09-13 14:20:03 首次发布

本文链接：https://blog.csdn.net/LiuCJ_20000/article/details/132852567

版权

前端技术基础专栏收录该内容

8 篇文章 2 订阅

订阅专栏

2 CSS样式

css样式的语法格式：

选择器 {
  属性：属性值，
  属性：属性值；
   ......
}

2.1 css的三种写法

CSS根据位置的不同，可以分为三种：行内样式、内部样式、外部样式

行内样式(内联样式)：

在标签内部使用style属性

<body>
    <!--
        1.在标签上使用style属性对元素进行添加样式
        2.style标签中的语法：style= “ 属性名：属性值 ; ~~~ ”
    -->
    <span style="color:blue;font-size: 20px;"> 行内（内联）样式</span>
    <p style="color:red;font-family:华文隶书"> 2行内（内联）样式</p>
</body>

一般很少使用行内样式，如果样式比较少，我们可以使用行内样式，但是如果样式代码比较多，定义在行内样式里面，代码的可读性非常差。

内部样式：

内部样式我们定义在head标签里面，在head标签里面使用style标签来描述样式代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部样式TEST</title>
    <style type="text/css">
        div{
           font-family: 隶书;
            font-size: 30px;
            color: green;
        }
    </style>
</head>
<body>
    <!-- 内部样式语法：
        1.在head头部中添加style标签
        2.在style标签中编写样式： 选择器{属性名1：属性值 ; 属性名2：属性值}
     -->
    <p> p段落1 </p>
    <div> di段落二</div>
    <spon> spon段落三</spon>
</body>v
</html>

外部样式：

独立定义一个css文件，在对应的HTML文件里面引入这个css文件即可。

第一种方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>link_href_外部样式</title>
 <!-- 引入外部的css文件 href:.css路径 rel:指定文件类型  type 可以不加
    <link href="01.css" rel="stylesheet">
    -->
    <link  href="01.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <p> p段落1 </p>
    <div> di段落二</div>
</body>
</html>

第二种方法：(失败)

<style>
    import url("css/common.css");
</style>

2.2 css选择器

选择器就是用来获取对应的html元素，只有获取到对应的html元素之后，我们才可以给对应的html元素设置样式。

2.2.1 基本选择器

类选择器

要求我们的html元素必须具备class属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class选择器</title>
    <style>
        div.box1{   /*类选择器  div标签并且class属性值是box1的被选中*/
            width: 200px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <!--
         1.在标签上添加class属性,在style标签中编写样式
         2.语法: [标签].class名称{ 属性名:属性值;~~ }
         -->
    <p> p段落</p>
    <pon id="pon2"> pon段落</pon>
    <div class="box1"> div段落</div>
</body>
</html>

id选择器

要求html元素必须具备id属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
        pon#pon2{
            background-color: green;
            font-size: 30px;
            border-radius: 50px; /* 描述元素的边角图形 可50% */
        }
    </style>
</head>
<body>
        <!--
         1.在标签上添加id属性,在style标签中编写样式
         2.语法: [标签]id名称{ 属性名:属性值;~~ }
         -->
    <p> p段落</p>
    <pon id="pon2"> pon段落</pon>
    <div id="pon2"> div段落</div>

</body>
</html>

标签选择器

根据标签的名称来获取对应的HTML元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: green;
            font-size: 30px;
            border-radius: 50px; /* 描述元素的边角图形 可50% */
            color: darkred;
        }
    </style>
</head>
<body>
    <p> p段落</p>
    <pon id="pon2"> pon段落</pon>
    <div class="box1"> div段落</div>
</body>
</html>

注意：如果三个基本选择器都在描述同一个HTML元素的样式。这个时候选择器的优先级是：

id选择器 > 类选择器 > 标签选择器

2.2.2 高级选择器

并集选择器

多个HTML元素共用同一个样式，那么选择器与选择器之间可以用逗号分隔。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>并集选择器</title>
<!-- 并集(组合)选择器语法格式: 选择器1,选择器2,~~{ 属性名:属性值 } -->
    <style>
        .box1,p#p1,span{
            border:2px solid darkmagenta;
        }
    </style>
</head>
<body>
    <div class="box1"> div 标签</div>
    <p id="p1"> p标签</p>
    <span> span标签</span>
    <span class="span1"> span标签</span>
</body>
</html>

后代选择器

HTML元素之间必须存在嵌套关系才可以。选择器与选择器之间使用空格分隔。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="css/common.css" type="text/css" />
    <!--被选择标签的后代，语法:  选择器1 选择器2 { 属性名:属性值;~~ }   -->
  <style type="text/css">
        ul li#l1 p#p1{
            border: 1px solid yellowgreen;
        }
  </style>
</head>
<body>
    <ul>
        <li id="l1">
            <p id="p1">列表1</p>    
        </li>
        <li><p>列表2</p></li>
        <li><p>列表3</p></li>
    </ul>
</body>
</html>

子选择器

子选择器和后代选择器是一样的。只不过选择器和选择器之间的直接的嵌套关系。选择器和选择器之间使用>隔开。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="css/common.css" type="text/css" />
    <!-- 子代选择器语法: 选择器1 > 选择器2 { 属性名 : 属性值;~~   -->
  <style type="text/css">
        ul li>p.p1{
            border: 1px solid green;
        }
  </style>
</head>
<body>
    <ul>
        <li id="l1"><p class="p1">列表1</p></li>
        <li><p class="p1">列表2</p></li>
        <li><p class="p2">列表3</p></li>
    </ul>
</body>
</html>

相邻兄弟选择器

选择器与选择器之间是并列关系。并且选择器之间要是相邻关系。选择器与选择器之间使用加号(+)隔开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 相邻兄弟选择器: 被选中选择器的相邻选择器(必须是相邻的)
        语法: 选择器1+选择器2 { 属性名:属性值;~ }
     -->
    <style>
        p.p1+.p2{ /* 选中谁style就改变谁 */
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <p class="p1">段落1</p>
    <p class="p2">段落2</p>
    <div class="box1">盒子1</div>
</body>
</html>

通用兄弟选择器

选择器与选择器之间只要存在并列关系即可。不需要相邻。选择器与选择器之间使用~分开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 兄弟选择器: 被选中选择器的相邻选择器(不必是相邻的)
        语法: 选择器1 ~ 选择器2 { 属性名:属性值;~ }
     -->
    <style>
        p.p1~div{ /* 选中谁style就改变谁 */
            border: 2px solid orange;
        }
    </style>
</head>
<body>
    <p class="p1">段落1</p>
    <p class="p2">段落2</p>
    <div class="box1">盒子1</div>
</body>
</html>

结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <!--  语法： :伪类名称{属性名：属性值;....} -->
    <style>
        ul li:first-child{ /*选中第一个li*/
            border: 1px solid green;
            background-color: orangered;/*背景颜色*/
        }
        ul li:last-child{/*选中最后个li*/
            border: 1px solid yellowgreen;
            background-color: brown;
        }

        ul li:nth-child(5){ /*选中指定的li*/
            background-color: yellowgreen;
        }

        ul li:nth-child(2n){ /*选中偶数行的li*/
            background-color: yellowgreen;
        }
        ul li:nth-child(2n+1){ /*选中奇数行的li*/
            background-color: purple;
        }
        a:link{      /* 超链接初始状态*/
        color:red;
        }
        a:visited{ /* 超链接点击之后的转态*/
            color: #5F9EA0;
        }
        a:hover{  /* 鼠标放上去的状态*/
        color:#000000;font-size: 30px;
        }            
        a:active{ /* 鼠标点击不松开的状态*/
            color: cornflowerblue;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">这是一个a标签</a>
    <img src="img/1.jpg" width="300px" height="300px">
    <input type="text" name="name">
    <ul>
        <li id="wh">武汉</li>
        <li>上海</li>
        <li>北京</li>
    </ul>
</body>
</html>

思考：table表格各行变色如何实现?

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
    <!--       通过标签属性，选择对应的元素
                语法：标签[属性名=属性值]{属性名：属性值;....}   -->
  <style type="text/css">
    li[class]{ /*li标签中,包含class属性的标签*/
        color: orangered;
    }
      
    li[id='li1']{ /*选中li标签中id为li1的标签*/
        color: deepskyblue;
    }
      
    li[class^='ab']{ /*选中li标签中class属性以ab开头的标签*/
        color: brown;
    }
      
    li[class$='cd']{ /*选中li标签中class属性以cd结尾的标签*/
        color: rebeccapurple;
    }
      
    li[class*='ab']{ /*选中li标签中class属性包含ab的标签*/
        color: red;
    }

  </style>
</head>
<body>
    <ul>
        <li class="l1" id="li1">列表1</li>
        <li>列表2</li>
        <li class="l2">列表3</li>
        <li class="l3">列表4</li>
    </ul>
</body>
</html>

2.3 CSS样式属性

2.3.1 font属性

font：对文字格式进行处理。

font-size:设置文字大小。

font-weight:设置字体的粗细，normal:正常；bold、bolder：加粗；lighter:更细。

font-style:设置字体风格。normal:正常，italic:倾斜。

font-family:设置字体格式。“微软雅黑”

color:设置文字的颜色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    p{
       font-size: 40px; /*描述字体大小*/
       font-weight: bolder; /*设置字体加粗*/
       font-style: italic; /*设置字体风格 italic 字体倾斜  normal  字体正常*/
       font-family: 微软雅黑 宋体 隶书; /*设置字体格式*/
       color: orangered;
    }
  </style>
</head>
<body>
    <p>这是一个段落标签</p>
</body>
</html>

我们也可以将font属性一次性写完。但是必须按照一定的顺序。按照如下顺序：

font: font-style font-weight font-size font-family

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    div{
       font: normal lighter 40px 微软雅黑 ;
    }
  </style>
</head>
<body>
    <div>盒子1</div>
</body>
</html>

2.3.2 文本相关的属性

text-indent 首行缩进。

文本颜色:color

文本对齐方式:text-align

center:居中对齐

文本装饰：text-decoration

overline

line-through删除线

underline 下划线

none 去除装饰

文本行高：line-height

将行高和容器的高度设置一样可以实现垂直居中

字符间距：letter-spacing

文本阴影： text-shadow

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    a{
       text-decoration: none; /*去除下划线*/
    }

    span{
       text-decoration: line-through; /*给文本添加删除线*/
    }

    p{
       text-decoration: overline;/*给文本添加上划线*/
       text-indent:2em; /*设置文本首行缩进*/
    }

    div{
       text-decoration: underline;/*给文本添加下划线*/
    }
  </style>
</head>
<body>
    <a href="https://www.sina.com.cn">[跳转到]</a> <br>
    <span>这是一个span标签</span> <br>
    <p>这是一个段落</p>
    <div>设置一个div</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    p#p1{
        width: 200px;
        height: 200px;
        border: 1px solid orangered;
        text-align: center;/*文字左右居中对齐*/
        line-height: 200px;/*文字上下居中对齐 line-height的值等于height的值即可*/
         text-shadow: 10px 20px 2px skyblue;/*设置文字阴影 10px 向X轴右边便宜 20px 向Y轴偏移 向下面偏移  2px 模糊半径 值越大,模糊度越高 skyblue 颜色*/
    }
  </style>
</head>
<body>
    <p id="p1">设置一个段落标签</p>
</body>
</html>

关于垂直对齐：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
     img{
      vertical-align:middle;
      width: 200px;
      height: 200px;
     }
     span{
        background-color: orangered;
     }
     img,span{
        vertical-align: baseline;
        /*
          vertical-align 属性设置元素的垂直对齐方式.元素只能是行内元素
          middle: 两个行内元素居中对齐
          bottom: 底部对齐
          top: 顶部对齐
         */
     }
  </style>
</head>
<body>
      <img src="../img/BMW-THE7.jpg" alt="">
      <span>这是一个span标签</span>
</body>
</html>

2.3.3 背景属性

backgroud-color:描述元素的背景颜色

background-image:url(‘moon.png’); 描述元素的背景图片。使用url函数定义图片的路径。

background-position：50px 50px;描述背景图片的偏移量。

background-repeat: repeat repeat ;描述图片的平铺方式。no-repeat 不平铺

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
     div{
        width: 400px;
        height: 400px;
        background-color: orangered; /*描述元素的背景颜色*/
        background-image:url('moon.png');/*描述元素的背景图片 注意 背景图片会覆盖背景颜色 使用url描述图片的路径*/
        background-position: 75px 100px;/*描述背景图片的偏移量 第一个值描述左右偏移. 正数:往右边偏移 负数 左偏移 第二值 正数 向下偏移 负数向上偏移*/
        background-repeat: repeat repeat ;/*描述背景图片的平铺方式 值1 横向平铺   值2 纵向平铺  no-repeat 不平铺*/
     }
  </style>
</head>
<body>
      <div></div>
</body>
</html>

尺寸和显示属性

尺寸属性

块级元素：独占一行，高度根据内容高度而定

行级元素：内容多宽占据多宽，高度根据内容高度而定

块级元素可以设置宽度和高度

行级元素不可以设置宽度和高度

行内块元素可以设置宽度和高度

width:定义宽度

height：定义高度

显示属性

display显示属性

none表示隐藏
block表示变成块元素
inline表示变成行内元素
inline-block表示变成行内块元素
visibility: hidden 表示隐藏(占据原来的位置)

2.4 盒子模型 border-

2.4.1 盒子的基本属性

边框宽度border-width

边框颜色border-color

边框样式border-style

圆角边框border-radius

边框属性:

margin：外边距

padding：内边距

box-sizing: 属性允许我们在元素的总宽度和高度中包括内边距（填充）和边框。

盒子有5个属性：width height padding border margin

height:描述盒子的高度，指的是盒子中内容的高度，并不是盒子本身的高度。

width:描述盒子的宽度，指的是盒子中内容的宽度，并不是盒子本身的宽度。

border:盒子的边框。

padding:盒子的内边距，内容和盒子边框之间的距离。

margin:盒子的外边距。

计算盒子真实的宽度和高度：

真实的宽度：盒子内容的宽度+左内边距+右内边距+左边框+右边框

真实的高度：盒子内容的高度+上内边距+下内边距+上边框+下边框

注意：我们在开发中经常会改变盒子内容的宽高或者盒子的内边距，但是前提要保证盒子原有的宽高不变。如何保证盒子原有的宽高不变呢，如果加width就要减padding。反之加padding就要减width。

padding

描述盒子的内边距，内边距是有4个方向。我们可以使用padding-top padding-right padding-bottom padding-left来描述。当然我们也可以使用padding这个属性一次性描述，描述的顺序就是上右下左(按照顺时针方向描述)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
     .box{
        width: 200px;
        height: 200px;
        /*padding: 20px; */ /*描述内边距*/
        /*padding-left: 20px;
        padding-right: 40px;
        padding-top: 20px;
        padding-bottom: 30px;*/
        padding: 20px 40px 30px 20px;/*如果写在一起就是上 右  下  左*/
        border:1px solid green;
     }
  </style>
</head>
<body>
    <div class="box">盒子模型</div>
</body>
</html>

描述内边距的时候，属性还可以叠加。

padding: 20px 40px 30px。意思就是padding-top:20px padding-right:40px padding-bottom:30px padding-left和 padding-right对称，所以也是40px。

padding:20px 40px。

我们在定义css样式的时候，需要去除默认的内外边距。

<style type="text/css">
    *{
        margin: 0px;
        paddin:0px;
    }
</style>

border

border是盒子的边框，边框有三个要素:粗细线型颜色。描述边框要素的时候，粗细和线型是必须要描述的，颜色可选，如果不描述颜色，默认就是黑色的。

border: 1px solid red;

我们可以对 border属性进行详细的拆分：

按照要素来拆分：

border-width:描述边框的粗细

border-style:边框的线型

border-color:边框的颜色

<style type="text/css">
    div{
        width: 200px;
        height: 200px;
        /*border:1px solid green;*/
        border-width: 5px;
        border-style: dotted; /*虚线*/
        border-color: orangered;
    }
</style>

我们还可以按照方向来拆分：

按照border-top border-right border-bottom border-left四个方向来拆分:

<style type="text/css">
    div{
        width: 200px;
        height: 200px;
        border-top: 5px solid red;
        border-left: 5px solid green;
        border-bottom: 5px solid yellow;
        border-right: 5px solid brown;
    }
</style>

我们可以在方向的基础上，在按照要素进行拆分：

<style type="text/css">
    div{
        width: 200px;
        height: 200px;

        border-top-width: 5px;
        border-top-style: solid;
        border-top-color: orangered;

        border-right-width: 10px;
        border-right-style: dashed;
        border-right-color: green;

        border-bottom-width: 3px;
        border-bottom-style: dotted;
        border-bottom-color: deepskyblue;

        border-left-width: 10px;
        border-left-style: double;
        border-left-color: deeppink;
    }
</style>

margin 外边距

margin: 0 auto 居中

关于外边距的描述。我们可以使用margin属性一次性描述。我们也可以通过4个方向去描述。margin-top margin-right margin-bottom margin-left。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
      *{
        padding: 0px;
        margin: 0px;
      }

      div#box1{
        width: 200px;
        height: 200px;
        background: orangered;
        /*margin: 20px;*/ /*四个方向的外边距的一样*/
        margin-top: 20px;
        margin-right: 20px;
        margin-bottom: 20px;
        margin-left: 20px;
      }

      div#box2{
        width: 200px;
        height: 200px;
        background-color: deepskyblue;
        box-shadow: 10px 10px 10px orangered; /*设置盒子的模糊属性*/  
      }
  </style>
</head>
<body>
   <div id="box1"></div>
   <div id="box2"></div>
</body>
</html>

总结：

HTML元素的分类：

块级元素：块级元素独占一行。后面的元素必须在新的一行里面显示。块级元素的宽度在不指定的情况下，就是整个浏览器窗口的宽度。

比如：div p li

行级元素：行级元素不会独占一行。行级元素会在同一行里面显示。行级元素的宽度就是元素内容的宽度。我们如果直接定义行级元素的宽度，不会生效。

比如：span td

<style type="text/css">
      *{
        padding: 0px;
        margin: 0px;
      }

      div#box1{
        /*width: 200px;*/
        height: 200px;
        background: orangered;
        display: inline;/*将块级元素转换成行内元素*/
      }

      div#box2{
        /*width: 200px;*/
        height: 200px;
        background-color: deepskyblue;
        border-radius: 100px;
        box-shadow: 10px 10px 10px orangered; /*设置盒子的模糊属性*/
        display: inline;/*将块级元素转换成行内元素*/
      }

      span#s1{
        height: 20px;
        width: 500px;
        background-color: orangered;
        display: block; /*将行内元素转换成块级元素*/
      }

      span#s2{
        height: 20px;
        width: 500px;
        background-color: goldenrod;
        display: block; /*将行内元素转换成块级元素*/
      }
  </style>

3 浮动

标准文档流：

在HTML里面页面布局的默认方式是从上到下，从左到右进行布局的。但是使用这种标准文档流进行网页布局会对页面的版式造成极大的限制，不能更加灵活的进行网页布局。所以我们在网页布局中，需要脱离标准文档流。

脱离标准文档流之后的元素会发生什么变化?

1、不管是块级元素还是内联元素都可以接受宽高的设置。

2、改变元素传统的自上而下，从左到右的页面布局风格。

如何脱离标准文档流?

float:浮动属性

浮动特点：如果一个元素浮动，那么就会脱离原来的位置。并且漂浮，直到碰到边缘或者是前一个浮动
元素元素浮动不会影响元素中的内容

clear：清除浮动

父类属性：overflow：hidden - -让父类高度height生效

3.1 脱离标准文档流的方式

第一种：通过浮动的方式脱离标准文档流

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
      *{
        padding: 0px;
        margin: 0px;
      }

      div.box{
       /* margin: 0 auto;*/ /*让div水平居中*/
       /* margin-top: 50px;*/
        width: 200px;
        height: 200px;
        background-color: orangered;
        float: left;
      }

      div.box1{
        /*margin: 0 auto;*/ /*让div水平居中*/
        /*margin-top: 50px;*/
        width: 200px;
        height: 200px;
        background-color: springgreen;
        float: left;
      }

   
      span.s1{
        width: 200px;
        height: 200px;
        background-color: deeppink;
        margin-right: 20px;
        float: left;
      }

      span.s2{
       width: 200px;
       height: 200px;
       background-color: greenyellow;
       float:left;
      }
  </style>
</head>
<body>
    <div class="box">box1</div>
    <div class="box1">box2</div>

    <span class="s1">元素1</span>
    <span class="s2">元素2</span>
</body>
</html>

第二种方式：绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
     span.p1{
        width: 200px;
        height: 200px;
        background-color: orangered;
        position: absolute;/*绝对定位*/
     }
  </style>
</head>
<body>
   <span class="p1">这是一个span标签</span>
</body>
</html>

第三种方式：固定定位

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
     span.p1{
        width: 200px;
        height: 200px;
        background-color: orangered;
        position: fixed;/*固定定位*/
     }
  </style>
</head>
<body>
   <span class="p1">这是一个span标签</span>
</body>
</html>

案例：使用css+浮动进行页面布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
     *{
       margin: 0px;
       padding: 0px;
     }
     div.header{
            margin: 0px auto;
            width: 970px;
            height: 103px;
            /* background-color: red;*/
     }
     div.header-left{
         width: 277px;
         height: 103px;
         background-color: yellow;
         float: left;
         margin-right: 14px;
     }
     div.header-right{
         width: 679px;
         height: 103px;
         /*background-color: yellowgreen;*/
         float: left;
     }

     div.headerright-top{
        width: 679px;
        height: 49px;
        margin-bottom: 5px;
        background-color: green;
     }
     div.henderright-bottom{
        width: 679px;
        height: 49px;
        background-color: orangered;
     }

     div.mainbody{
        margin: 0px auto;
        margin-top: 10px;
        width:970px;
        height: 435px;
        /*background-color: gold;*/
     }

     div.mainbody-left{
        width: 310px;
        height: 435px;
        background-color: skyblue;
        margin-right: 10px;
        float:left;
     }

     div.mainbody-right{
        width: 650px;
        height: 435px;
        /*background-color: purple;*/
        float:left;
     }

     div.mainbody-right-top{
        width: 650px;
        height: 400px;
        margin-bottom: 10px;
        /*background-color: springgreen;*/
     }

     div.mainbody-right-bottom{
        width: 650px;
        height: 25px;
        background-color: yellowgreen;
     }

     div.mainbody-right-top-left{
        width: 450px;
        height: 400px;
        margin-right: 10px;
       /* background-color: chocolate;*/
        float: left;
     }

     div.mainbody-right-top-right{
        width: 190px;
        height: 400px;
        background-color: seagreen;
        float: left;
     }

     div.top{
        width: 450px;
        height: 240px;
        margin-bottom: 10px;
        background-color:cadetblue;

     }

     div.middle{
        width: 450px;
        height: 110px;
        margin-bottom: 10px;
        background-color: rebeccapurple;
     }

     div.bottom{
        width: 450px;
        height: 30px;
        background-color: aquamarine;
     }

     div.foot{
        margin: 0px auto;
        width: 970px;
        height: 35px;
        background-color: orange;
        margin-top: 10px;
     }

  </style>
</head>
<body>
    <!--网页的头部分-->
    <div class="header">
        <!--网页头部分的左边部分-->
        <div class="header-left"></div>
        <!--网页头部分的右边部分-->
        <div class="header-right">
            <!--网页头右边部分的上部分-->
            <div class="headerright-top"></div>
            <!--网页头右边部分的下部分-->
            <div class="henderright-bottom"></div>
        </div>
    </div>

    <!--网页的主体部分-->
    <div class="mainbody">
        <!--网页主体的左部分-->
        <div class="mainbody-left"></div>
        <!--网页主体的右部分-->
        <div class="mainbody-right">
            <!--网页主体右上部分-->
            <div class="mainbody-right-top">
                <!--网页主体右上部分-左边-->
                <div class="mainbody-right-top-left">
                    <div class="top"></div>
                    <div class="middle"></div>
                    <div class="bottom"></div>
                </div>
                <!--网页主体右上部分-右边-->
                <div class="mainbody-right-top-right"></div>
            </div>
            <!--网页主体右下部分-->
            <div class="mainbody-right-bottom"></div>
        </div>
    </div>

    <!--网页的底部分-->
    <div class="foot"></div>
</body>
</html>

3.2 清除浮动

3.2.1 给父盒子增加高度

浏览器有这样一种机制：在标准文档流中，如果给子盒子设置高度，但是没有给父盒子设置高度，此时父盒子是有高度的，它的高度是被子盒子撑起来的。一旦盒子脱离了标准文档流，比如浮动之后，那么即使给子盒子设置高度，那么父盒子也是不接受高度的。

注意：我们在给父亲添加高度的时候，高度一定要足够(父盒子的高度 >= 子盒子的高度)，否则就不能给子盒子提供足够的空间让其浮动。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
        *{
          margin: 0px;
          padding: 0px;
        }

        div{
           border:1px solid red;
           height: 50px;
        }

        ul li{
            width: 140px;
            height: 40px;
            background-color: skyblue;
            list-style: none;/*去除列表编号*/
            text-align: center;/*内容左右居中*/
            line-height: 40px;/*内容上下居中*/
            margin-right: 10px;
            float: left;
        }
  </style>
</head>
<body>
    <div>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JAVASCRIPT</li>
            <li>JQUERY</li>
        </ul>
    </div>
    <div>
        <ul>
            <li>JSP</li>
            <li>SPRING</li>
            <li>SPRINGBOOT</li>
            <li>SPRINGCLOUD</li>
        </ul>
    </div>
</body>
</html>

3.2.2 clear both

在浮动出现问题的元素上面使用clear:both; both：当前元素左右两边由浮动带来的影响都要清除。但是使用这种方式清除浮动，会导致当前元素的margin失效。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
        *{
          margin: 0px;
          padding: 0px;
        }

        ul li{
            width: 140px;
            height: 40px;
            background-color: skyblue;
            list-style: none;/*去除列表编号*/
            text-align: center;/*内容左右居中*/
            line-height: 40px;/*内容上下居中*/
            margin-right: 10px;
            float: left;
            margin-bottom: 10px;
        }
        div.box2{
          clear: both; /*清除浮动*/
        }
  </style>
</head>
<body>
    <div>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JAVASCRIPT</li>
            <li>JQUERY</li>
        </ul>
    </div>
    <div class="box2">
        <ul>
            <li>JSP</li>
            <li>SPRING</li>
            <li>SPRINGBOOT</li>
            <li>SPRINGCLOUD</li>
        </ul>
    </div>
</body>
</html>

3.2.3 隔墙法

外墙法

在两个并列的盒子之间加上div，然后清除浮动并给当前的div设置高度。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
        *{
          margin: 0px;
          padding: 0px;
        }

        ul li{
            width: 140px;
            height: 40px;
            background-color: skyblue;
            list-style: none;/*去除列表编号*/
            text-align: center;/*内容左右居中*/
            line-height: 40px;/*内容上下居中*/
            margin-right: 10px;
            float: left;

        }

        div.box3{
            clear: both;
            height: 10px;
            border:1px solid red;/*通过盒子本身的高度撑起了上下div之间的外边距*/
        }


  </style>
</head>
<body>
    <div>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JAVASCRIPT</li>
            <li>JQUERY</li>
        </ul>
    </div>
    <div class="box3"></div>
    <div class="box2">
        <ul>
            <li>JSP</li>
            <li>SPRING</li>
            <li>SPRINGBOOT</li>
            <li>SPRINGCLOUD</li>
        </ul>
    </div>
</body>
</html>

内墙法

在两个并列盒子中的任意一个盒子中添加一个div。清除浮动的同时，给当前的div设置高度。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
        *{
          margin: 0px;
          padding: 0px;
        }



        ul li{
            width: 140px;
            height: 40px;
            background-color: skyblue;
            list-style: none;/*去除列表编号*/
            text-align: center;/*内容左右居中*/
            line-height: 40px;/*内容上下居中*/
            margin-right: 10px;
            float: left;
        }

        div.box3{
            clear: both;
            height: 10px;
            border:1px solid red;
        }
  </style>
</head>
<body>
    <div>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JAVASCRIPT</li>
            <li>JQUERY</li>
        </ul>
    </div>
    <div>
        <div class="box3"></div>
        <ul>
            <li>JSP</li>
            <li>SPRING</li>
            <li>SPRINGBOOT</li>
            <li>SPRINGCLOUD</li>
        </ul>
    </div>
</body>
</html>

3.2.4 overflow:hidden

overflow:就是溢出的意思。hidden：就是隐藏。

overflow:hidden 清除浮动，也可以将溢出的内容隐藏起来。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
        *{
          margin: 0px;
          padding: 0px;
        }

        div{
            overflow: hidden; /*清除浮动  为什么可以清除浮动?是因为这个属性将父亲的高度让子盒子撑起来了。*/
        }

        div.box2{
            margin-top: 10px;
        }

        ul li{
            width: 140px;
            height: 40px;
            background-color: skyblue;
            list-style: none;/*去除列表编号*/
            text-align: center;/*内容左右居中*/
            line-height: 40px;/*内容上下居中*/
            margin-right: 10px;
            float: left;
        }
  </style>
</head>
<body>
    <div>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JAVASCRIPT</li>
            <li>JQUERY</li>
        </ul>
    </div>
    <div class="box2">
        <ul>
            <li>JSP</li>
            <li>SPRING</li>
            <li>SPRINGBOOT</li>
            <li>SPRINGCLOUD</li>
        </ul>
    </div>
</body>
</html>

我们也可以通过这个属性来将溢出的内容隐藏。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
        div{
            width: 400px;
            height: 400px;
            border: 1px solid red;
            overflow: hidden;/*隐藏溢出的内容*/
        }
  </style>
</head>
<body>
    <div>
        据江西省纪委监委，日前，经中共上饶市委批准，上饶市纪委监委对上饶银行股份有限公司原党委书记、董事长李群严重违纪违法问题进行了立案审查调查。
        大肆收受礼品礼金，频繁接受宴请和旅游安排，长期借用管理服务对象车辆，
        多次出入带有私人会所性质场所；组织观念淡漠，在组织函询时不如实说明问题，在干部选拔、职工录用等方面违规为他人谋取利益。
        此外，价值观扭曲，既想当官又想发财，违规从事营利活动，大肆以瓷敛财，参与违规民间借贷，帮助他人承接采购业务并收受好处费，
        把贷款客户当成“提款机”，将应由本人支付费用由他人支付，沉迷享受贷款客户提供的“保姆式”“管家式”服务；不正确履行职责，
        违规干预插手工程项目承发包；目无法纪，以贷谋私，擅权妄为，大搞权钱交易，利用职务便利为他人在贷款审批、
        人事调整、工程承揽等方面谋利，并非法收受巨额财物。
        通报称，李群严重违反党的政治纪律、中央八项规定精神、组织纪律、廉洁纪律和工作纪律，构成严重职务违法并涉嫌违法发放贷款罪、
        受贿罪，且在党的十八大特别是十九大后仍不收敛、不收手，性质恶劣，情节严重，应予严肃处理。
        依据有关规定，经中共上饶市纪委常委会会议研究并报中共上饶市委批准，决定给予李群开除党籍处分；
        由上饶市监委给予其开除公职处分；收缴其违纪违法所得；将其涉嫌犯罪问题移送检察机关依法审查起诉，所涉财物一并移送。
    </div>
</body>
</html>

3.2.5 margin的塌陷现象

在标准文档流中，竖直方向的margin是不能叠加的，以较大的为准。下面两个盒子的外间距是50px，并不是60px。这种现象就是ma陷现象。rgin的塌陷现象。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      *{
        margin: 0px;
        padding: 0px;
      }

      div.box1{
        width: 200px;
        height: 200px;
        background-color: skyblue;
        margin-bottom: 10px;
      }

      div.box2{
        width: 300px;
        height: 300px;
        background-color: orange;
        margin-top: 50px;
      }
  </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

如果不在标准文档流中呢?比如两个盒子浮动了。那么这两个盒子的外间距就是两个盒子间距之和。也就是没有margin的塌陷现象。下面两个盒子的间距之和是80px。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      *{
        margin: 0px;
        padding: 0px;
      }

      div.box1{
        width: 200px;
        height: 200px;
        background-color: skyblue;
        float: left;
        margin-right: 30px;
      }

      div.box2{
        width: 300px;
        height: 300px;
        background-color: orange;
        float: left;
        margin-left: 50px;
      }
  </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

注意：margin本身描述的是盒子与盒子之间的间距，但是多用来描述两个并列的盒子之间的间距。如果我们想要描述子父盒子之间的间距，最好要用父亲的padding而不是儿子的margin。

如果我们要保证原来盒子不变的话，加padding减宽高。反之一样。

4 定位

position:定位属性

relative 相对定位
absolute 绝对定位
fixed 固定定位

4.1 相对定位

position:relative

相对定位本身就是对元素的位置进行微调。让元素相对于原来的位置进行微调。

相对定位的元素是不脱标的。相对定位的元素，形影分离。经过相对定位微调后的盒子只是原来元素的影子，而真身还在老家。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>相对定位</title>
  <style type="text/css">

    *{
        margin: 0px;
        padding: 0px;
    }
    div.box1{
        width: 200px;
        height: 200px;
        background-color: yellowgreen;
    }

    div.box2{
        width: 200px;
        height: 200px;
        background-color: skyblue;
        position: relative;/*相对定位*/
        left: 100px; /*距离左边100px*/
        bottom:100px; /*距离底部100px*/
    }

    div.box3{
        width: 200px;
        height: 200px;
        background-color: orange;
    }
  </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

4.2 绝对定位

绝对定位的元素是脱离标准文档流的。绝对定位的盒子需要参考点进行移动。如果这个绝对定位的盒子没有父盒子，如果用top来描述，参考点就是页面的左上角。如果使用bottom来描述，参考点就是页面的左下角。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>相对定位</title>
  <style type="text/css">

    *{
        margin: 0px;
        padding: 0px;
    }
    div.box1{
        width: 200px;
        height: 200px;
        background-color: yellowgreen;
    }

    div.box2{
        width: 200px;
        height: 200px;
        background-color: skyblue;
        position: absolute;/*绝对定位*/
        left: 100px; /*距离左边100px*/
        /*bottom: 100px;*/ /*参考点是页面左下角*/
        top:100px; /*参考点是页面的左上角*/

    }

    div.box3{
        width: 200px;
        height: 200px;
        background-color: orange;
    }
  </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

如果绝对定位的盒子有父级元素，那么绝对定位盒子的参考点是其父盒子。

一定要记住一个定理就是子绝父相(儿子绝对定位父亲相对定位)。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>相对定位</title>
  <style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }

    div.box{
        margin: 0px auto;
        margin-top: 100px;
        width: 400px;
        height: 400px;
        background-color: skyblue;
        border: 1px solid red;
        opacity:0.8; /*指定的透明度:范围从0.0~1.0，0.0表示完全透明,1.0表示完全不透明。*/
        position: relative; /*父盒子相对定位*/
    }

    div.box1{
        width: 200px;
        height: 200px;
        background-color: orange;
        position: absolute;/*子盒子绝对定位*/
        top:100px;
        opacity:0.4; /*指定的透明度:范围从0.0~1.0，0.0表示完全透明,1.0表示完全不透明。*/
        left: 100px;
    }
  </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
    </div>
</body>
</html>

4.3 固定定位

固定定位相对于浏览器的窗口进行定位的。无论页面如何移动，这个盒子的位置都不会保持不变。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>相对定位</title>
  <style type="text/css">
     div#box{
        width: 100px;
        height: 100px;
        background-color: orange;
        position: fixed;
        left: 50px;
        bottom: 50px;
     }
  </style>
</head>
<body>
    <img src="C:\Users\kriss\Pictures\Saved Pictures\AudiA7.jpg" alt=""> <br>
    <img src="C:\Users\kriss\Pictures\Saved Pictures\test.jpg" alt=""> <br>
    <img src="C:\Users\kriss\Pictures\Saved Pictures\lyf.jfif" alt=""> <br>
    <img src="C:\Users\kriss\Pictures\Saved Pictures\BenzAMG.jpg" alt="">
    <div id="box">盒子</div>
</body>
</html>

4.4 z-index

z-index 表示谁压着谁。数值大的元素压盖数值小的元素。
只有定位了的元素，才能有z-index的值。不管是相对定位还是绝对定位还是固定定位都可以使用z-index。但是浮动的元素不能使用z-index。
z-index的值没有单位。它就是一个正整数，如果默认没有写z-index，它的值就为0。
如果大家都没有写z-index。或者大家的z-index的值是一样的。那么谁写在后面，谁就能压住别人。定位了的元素永远能压住没有被定义的元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>相对定位</title>
  <style type="text/css">
     div.box1{
        width: 200px;
        height: 200px;
        background-color: skyblue;
        position: absolute;
        left: 100px;
        top: 100px;
        z-index:156;
     }

     div.box2{
        width: 200px;
        height: 200px;
        background-color: orange;
        position: absolute;
        left: 188px;
        top: 188px;
        z-index: 100;
     }
  </style>
</head>
<body>
     <div class="box1">蓝色</div>
     <div class="box2">黄色</div>
</body>
</html>

王维诗里的代码i

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
CSS样式语法

2 CSS样式css样式的语法格式：选择器 { 属性：属性值，属性：属性值； ......}2.1 css的三种写法CSS根据位置的不同，可以分为三种：行内样式、内部样式、外部样式行内样式(内联样式)：在标签内部使用style属性<body>  <
复制链接

扫一扫