CSS基础后篇

最新推荐文章于 2023-11-13 21:31:36 发布

2301_79112482

最新推荐文章于 2023-11-13 21:31:36 发布

阅读量559

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_79112482/article/details/132153087

版权

九 . 盒子模型

9.1盒模型概述

1.内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

 * {
margin: 0;
padding: 0;
}

内容 - 盒的内容，其中显示文本和图像。
内边距 - 清除内容周围的区域。内边距是透明的，可以呈现元素的背景。
边框 - 围绕内边距和内容的边框。
外边距 - 清除边界外的区域。外边距是透明的，不会遮挡其后的任何元素。

2.在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

假设盒的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：

在这里插入图片描述

div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}

9.2宽高和宽度

height 和 width 属性用于设置元素的高度和宽度。

height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。

height 和 width 属性可设置如下值：

auto - 浏览器计算高度和宽度（默认）
length - 以 px、cm 等定义高度/宽度
% - 以包含块的百分比定义高度/宽度
不允许负值。

9.3内边距

为了缩减代码，可以在一个属性中指定多个内边距属性。

padding: 25px 50px 75px 100px; ：上内边距是 25px；右内边距是 50px；下内边距是75px；左内边距是100px。
padding: 25px 50px 75px; ：上内边距是 25px；右和左内边距是 50px；下内边距是75px。
padding: 25px 50px; ：上和下内边距是 25px；右和左内边距是 50px。
padding: 25px; ：四个内边距都是 25px。

若要将宽度保持为设定值，无论填充量如何，那么你可以使用 box-sizing: border-box; 属性。这将导致元素保持其宽度。如果增加内边距，则可用的内容空间会减少。

标准盒模型:

在这里插入图片描述

css3的box-sizing属性给了开发者选择盒模型解析方式的权利。W3C的盒模型方式被称为“content-box”，IE的被称为“borderbox”，使用box-sizing: border-box;就是为了在设置有padding值和border值的时候不把宽度撑开。

<style>
    /* *{
        margin: 0;
        padding: 0;
    } */
    div.box {
        padding: 40px;
        width: 200px;
        color: aliceblue;
        border: 15px solid green;


    }

    div.box2 {
        /* 上10px + 右20px + 下30px + 左40px */
        padding: 10px 20px 30px 40px;
        /* 上10px+ 左右30px +下40px */
        padding: 10px 30px 40px;
        /* 上下10px  +   左右40px */
        padding: 10px 40px;
        /* 上下左右10px */
        padding: 10px;


        background-color: rgb(165, 0, 22);
        color: aliceblue;
        display: inline-block;
    }

    div.box3 {
        padding: 10px 30px 40px;
        background-color: rgb(165, 0, 107);
        color: aliceblue;
        width: 50%;
        height: 200px;
    }

    div.box4 {
        padding: 10px 30px 40px;
        background-color: rgb(107, 0, 165);
        color: aliceblue;
        width: 200px;
        height: 200px;
    }

    div.border-box {
        width: 300px;
        padding: 50px;

        /* 标准盒子模型    变为   css3盒子模型 */
        box-sizing: border-box;
        
        color: white;
        background-color: red;

    }
</style>

<body>
    <h1>一叶知秋</h1>
    <div class="box">我是内容</div>
    <div class="box2">大漠孤烟</div>
    <div class="box3">一叶知秋</div>
    <div class="box4">魔术师</div>
    <div class="border-box">一枪穿云</div>
     
</body>

9.4边框

9.4.1边框类型 border-style

9.4.2 边框宽度

border-width 属性指定四个边框的宽度。

可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick 。

9.4.3边框颜色

border-color 属性用于设置四个边框的颜色。

可以通过以下方式设置颜色：

name - 指定颜色名，比如 “red”
HEX - 指定十六进制值，比如 “#ff0000”
RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
transparent

<style>
    
    div.box {

        /* border: 10px solid salmon; */

        padding: 10px 30px 40px;

        background-color: rgb(107, 0, 165);

        color: aliceblue;

        width: 200px;

        height: 200px;
        /* 虚线+点线+双实线+实线 */
        border-style: dashed dotted double solid;
        /* 四个方向的颜色 上右下左 */
        border-color:red green orange burlywood ;
           /* 四个方向的宽度 上右下左 */
        border-width: 6px 8px 10px 12px;



    }

</style>

<body>
    <h1>一叶知秋</h1>
    <div class="box">我是内容</div>
    
     
</body>

在这里插入图片描述

9.5外边距

margin 属性用于在任何定义的边框之外，为元素周围创建空间。

CSS 拥有用于为元素的每一侧指定外边距的属性：

margin-top
margin-right
margin-bottom
margin-left

所有外边距属性都可以设置以下值：

auto - 浏览器来计算外边距
length - 以 px、pt、cm 等单位指定外边距
% - 指定以包含元素宽度的百分比计的外边距
允许负值。

为了缩减代码，可以在一个属性中指定多个外边距属性。

margin: 25px 50px 75px 100px; ：上外边距是 25px；右外边距是 50px；下外边距是 75px；左外边距是 100px。
margin: 25px 50px 75px; ：上外边距是 25px；右和左外边距是 50px；下外边距是 75px。
margin: 25px 50px; ：上和下外边距是25px；右和左外边距是 50px。
margin: 25px; ：四个外边距都是 25px。
你可以将 margin 属性设置为 auto，以使元素在其容器中水平居中

9.6外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并

<style>
        .box1{
            width: 300px;
            height: 300px;
            margin-bottom: 20px;
            background-color: brown;
            /* display: inline-block; */

        }
        .box2{
            width: 300px;
            height: 300px;
            margin-top: 30px;
           background-color: aqua;
           

        }
        .up{
             overflow: hidden;
             
        }
        .main{
            border: 1px solid red;
        
            
        }
     

    </style>
</head>
<body>
    <div class="main">
        <div class="up">
            <ul>
                <div class="box1"></div>
            </ul>
            
        </div>
        <ul>
            <div class="box2"></div>
            <div class="box2"></div>
            <div class="box2"></div>
            <div class="box2"></div>
            <div class="box2"></div>
            <div class="box2"></div>
            
        </ul>
        
    </div>

 <style>
        .father{
            width: 300px;
            height: 300px;
            margin-bottom: 20px;
            background-color: brown;
           /* display: inline-block; */

        }
        .son{
            width: 100px;
            height: 100px;
            margin-top: 30px;
           background-color: aqua;

        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

9.8 解决外边距塌陷

满足以下条件就会产生外边距塌陷现象：

子元素在父元素里面
子元素中有margin-top或者margin-bottom值

解决方案：

第一种：给父元素增加内边距padding值
第二种方式：父元素增加边框border值
第三种方式：父元素增加overflow：hidden
第四种方式：给父元素或者子元素增加浮动，让其脱离标准流都可以
第五种：将父元素转变为行内块元素，display：inline-block
第六种：给父元素或者子元素定位都可以，原理同样是使其脱离标准流，不过只能用绝对定位和固定定位
第七种：给父盒子增加flex或者inline-flex
十 .定位

10.1position 属性

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：

static
relative
fixed
absolute
sticky

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

10.2position: static;

HTML 元素默认情况下的定位方式为 static（静态）。

静态定位的元素不受 top、bottom、left 和 right 属性的影响。

position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位。

10.3position: relative;

position: relative; 的元素相对于其正常位置进行定位。

设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素

留下的任何空间。

10.4 position: fixed;

position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和

left 属性用于定位此元素。

固定定位的元素不会在页面中通常应放置的位置上留出空隙

10.5position: absolute;

position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位）。

然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

10.6 position: sticky;

position: sticky; 的元素根据用户的滚动位置进行定位。

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为

止，然后将其“粘贴”在适当的位置。

<style>
          .box1{
            border: 1px solid rgb(255, 170, 0);
            top: 40px;
            left: 50px;
          }
            /* 绝对定位 */
          .box2{
            border: 1px solid rgb(217, 255, 0);
            position: relative;
            width: 100px;
            height: 100px;
            top: 40px;
            left: 40px;


          }
           
          /* 子绝父对 */
          .box3{
            border: 1px solid red;
            position: relative;
            top: 300px;
            left: 200px;
            width: 300px;
            height: 300px;

          }
            /* 相对定位 */
          .box4{
            border: 1px solid rgb(13, 255, 0);
            position: absolute;
            top: 100px;
            left: 50px;
            width:100px;
            height: 100px;
          }

          .box5{
            border: 1px solid rgb(0, 255, 251);
            position: fixed;
            bottom: 100px;
            right: 100px;
            width: 100px;
            height: 100px;
            background-color: rgb(0, 149, 255);

          }
           /* 没有父元素，相对于body定位 */
          .box7{
            border: 1px solid rgb(255, 0, 111);
            position: absolute;
            bottom: 300px;
            right: 100px;
            width: 100px;
            height: 100px;
            background-color: rgba(0, 0, 0, 0.662);

          }

          .box6{
            border: 1px solid rgb(47, 0, 255);
            position: sticky;
            top: 0;
            background-color: aquamarine;
            width: 30%;
            margin: auto;
          }


    </style>
</head>
<body>
    <div class="box1">一叶知秋</div>
    <div class="box2">大漠孤烟 position: relative;</div>

    <div class="box3">
        <p> position: relative;</p>
        <div class="box4"> position: absolute;</div>
    </div>
    
    <div class="box5"> position: fixed;</div>
    <div class="box6"> position: sticky; top: 0;</div>
    <div class="box7">position: absolute;</div>
    <h1>一叶知秋</h1>   
    <h1>一叶知秋</h1>
    <h1>一叶知秋</h1>
    <h1>一叶知秋</h1>   
    <h1>一叶知秋</h1>
    <h1>一叶知秋</h1>
    <h1>一叶知秋</h1>
    <h1>一叶知秋</h1>
    <h1>一叶知秋</h1>
    <h1>一叶知秋</h1>
    <h1>一叶知秋</h1>
    <h1>一叶知秋</h1>
    <h1>一叶知秋</h1>
    <h1>一叶知秋</h1>
    <h1>一叶知秋</h1>
    <h1>一叶知秋</h1>
    <h1>一叶知秋</h1>
    <h1>一叶知秋</h1>
 
</body>

在这里插入图片描述

10.7重叠元素

在对元素进行定位时，它们可以与其他元素重叠。

z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。

元素可以设置正或负的堆叠顺序

 <style>
        .box1{
            background-color: rgb(0, 0, 0);
            
            width:100px;
            height: 100px;
            z-index: 6;
        }
        .box2{
            background-color: red;
            
            width:300px;
            height: 300px;
            z-index: 1;
        }
    </style>

</head>
<body>
    <div class="box2">
        <div class="box1"></div>
    </div>
   
</body>

在这里插入图片描述

十一 .背景图像

background-image 属性指定用作元素背景的图像。

默认情况下，图像会重复，以覆盖整个元素。

<style>
        .paper {
            position: relative;
            background-image: url(/images/paper.jpg);
            width: 650px;
            height: 487px;

        }

        p {
            position: absolute;
            top: 99px;
            left: 54px;
            font-size: 23px;
            padding: 83px 158px;
            text-indent: 2em;

        }
    </style>
</head>

<body>
    <div class="paper">
        <p>斗破苍穹第三季官宣:新版纳兰嫣然被点赞</p>
    </div>
</body>

在这里插入图片描述

11.1背景重复background-repeat

background-repeat: no-repeat;

如果上面的图像仅在水平方向重复（ background-repeat: repeat-x; ），则背景看起来会更好

如需垂直重复图像，请设置 background-repeat: repeat-y; ：

background-repeat: no-repeat; 属性还可指定只显示一次背景图像：

11.2背景位置background-position

background-position: right top left bottom;

默认情况下， background-image 属性在水平和垂直方向上都重复图像

background-position 属性用于指定背景图像的位置。

11.3简写背景属性

 <style>
        .box {
            background-image: url(/images/objective_bg.png);
            width: 440px;
            height: 290px;
            box-sizing: border-box;
            padding: 5px 15px 5px 55px;
            background-repeat: no-repeat;
            background-position: right top;
            background-color: antiquewhite;
            font-size: 50px;

        }

        /* .box {
            background: #ececec url("/images/objective_bg.png") no-repeat right top;
        } */
    </style>
</head>

<body>
    <div class="box">一叶知秋</div>
</body>

在这里插入图片描述

示范:

<style>
        .fight{
            position: relative;
            width: 600px;
            height: 300px;
            /* 给里面的盒子一个水平居中 */
            margin: auto;

        }
        /* 加一个盒子div+高度和 display: flex;使其垂直居中 */
        .center{
            height: 600px;
            display: flex;
        }
        .fight p{
                 color: white;
                 /* 子元素的定位 */
                 position: absolute;
                 bottom: 0;
                 left: 0;
                 /* 填满宽度 */
                 width: 100%;
                 /* 外边距调为0 边框为0 只有内边距和centet */
                 margin: 0;
                 /* 用诡异盒子，来消除内边距的变化 */
                 box-sizing: border-box;
                 /* 调整所需的内边距 */
                 padding: 2px 10px;
                  /* 用rgba调整背景颜色和透明度 */
                 background-color: rgb(0,0,0,0.3);

                 font-size: 15px;

                 /* 方法二 */
                 /* height: 30px;
                 line-height: 30px;
                 padding-left: 10px; */
                 
        }
    </style>
</head>
<body>
    <div class="center">
        <div class="fight"> 
            <img src="../作业.html/斗破苍穹.jpg" alt="斗破苍穹" width="600px" height="300px">
            <p>斗破苍穹第三季官宣:新版纳兰嫣然被点赞</p>
        </div>
    </div>
   
</body>

在这里插入图片描述

11.4图像精灵+悬停效果

图像精灵是单个图像中包含的图像集合。

包含许多图像的网页可能需要很长时间才能加载，同时会生成多个服务器请求。

使用图像精灵将减少服务器请求的数量并节约带宽。

<style>
        div a{
            /* 转换成行内块 */
            display: inline-block;
            
            width: 44px;
            height: 44px;
           
        }
        .home{
            background-image: url(/images/navsprites.gif);
              background-position: 0px 0px;
        }
        .next{
            background-image: url(/images/navsprites.gif);
              background-position: -45px 0px;
        }
        .last{
            background-image: url(/images/navsprites.gif);
              background-position: -90px 0px;
        }
    </style>
</head>
<body>
    <div>
    <a href="#" class="home"></a>
    <a href="#" class="next"></a>
    <a href="#" class="last"></a>
    </div>

<style>
        div a {
            
            /* 转换成行内块 */
            display: inline-block;
            
            width: 44px;
            height: 44px;
            background-image: url(../作业.html/navsprites_hover.gif);
        }
        .home{
           
              background-position: 0 0;
        }
        .next{
         
              background-position: -45px 0;
        }
        .last{
          
              background-position: -90px 0;
        }


        .home:hover {

            background-position: 0px -45px;
        }

        .next:hover {

            background-position: -45px -45px;
        }

        .last:hover {

            background-position: -90px -45px;
        }
    </style>
</head>

<body>
    <div>
        <a href="#" class="home"></a>
        <a href="#" class="next"></a>
        <a href="#" class="last"></a>
    </div>
</body>

在这里插入图片描述

十二 .浮动和清除浮动

float 属性规定元素如何浮动。

clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。

12.1 float属性

float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一：

left - 元素浮动到其容器的左侧

right - 元素浮动在其容器的右侧

none - 元素不会浮动（默认值）

12.2 clear属性

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。

clear 属性可设置以下值之一：

none - 允许两侧都有浮动元素（默认值）
left - 左侧不允许浮动元素
right- 右侧不允许浮动元素
both - 左侧或右侧均不允许浮动元素

使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。

在清除浮动时，应该对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧。您的浮动元素会继续浮动，但是被清除的元素将显示在其下方

12.3 clearfix

如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：

我们可以向包含元素添加 overflow: auto; ，来解决此问题：

12.4浮动实例

12.4.1导航菜单

将 float 与超链接列表一起使用，来创建水平菜单：

在这里插入图片描述

<style>
      ul{
         height: 60px;
       
         border: 1px solid red;
         list-style: none;
         background-color: gray;
         padding: 0;
         


      }
      ul li{
            float: left;
            /* 调节文字的位置与父元素的高度相同 */
            line-height: 60px;
            padding: 0 20px; 
                         

      }
      ul li a{
             text-align: center;
             text-decoration: none;
             color: white;
             float: left;
             
      }
      ul li:hover{
          background-color: red;
      }
      .name{
        color: white;
        text-align: center;

      }
      
         
    </style>
</head>
<body>
    <ul>
      <li class="name"><a href="#"></a>网站首页</li>
      <li class="name"><a href="#"></a>关于我们</li>
      <li class="name"><a href="#"></a>新闻中心</li>
      <li class="name"><a href="#"></a>产品中心</li>
      <li class="name"><a href="#"></a>联系我们</li>
    </ul>
</body>

12.4.2 web布局

<style>
        header {
            background-color: gray;

            color: white;
            padding: 5px 20px;
            line-height: 50px;
            font-size: 25px;
        }

        main nav ul li {
            color: white;
            margin-bottom: 15px;
            padding: 10px 5px;
            background-color: aqua
            
        }
        main nav{
            overflow: hidden;
        }

        main nav ul {

            margin-right: 60px;
            float: left;
            width: 20%;
            list-style: none;


        }

        main nav section {

            width: 60%;
            float: left;
            
        }
        footer {
            background-color: gray;

            color: white;
            padding: 5px 20px;
            line-height: 50px;
            font-size: 15px;
        }

    </style>
</head>

<body>
    <header>
        <h1>北京市</h1>
    </header>
    <main>
        <nav>
            <ul>
                <li>历史沿革</li>
                <li>行政区划</li>
                <li>地理环境</li>
                <li>自然环境</li>
            </ul>
            <section>
                <h2>简介</h2>
                <p>北京（Beijing），简称“京”，古称燕京、北平，是中华人民共和国的首都、直辖市、国家中
                    心城市、超大城市，国务院批复确定的中国政治中心、文化中心、国际交往中心、科技创新
                    中心，截至2020年，全市下辖16个区，总面积16410.54平方千米。2021年末，北京市常住
                    人口2188.6万人，比上年末减少0.4万人。2021年，北京市全年实现地区生产总值40269.6亿
                    元，按不变价格计算，比上年增长8.5％。全市人均地区生产总值为18.4万元。</p>
            </section>
        </nav>
    </main>
    <footer>
           <p>百度百科</p>
    </footer>
</body>

在这里插入图片描述

12.5CSS清除浮动影响的方式

12.5.1给父级元素单独定义高度（height）

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单、代码少、容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

建议：不推荐使用，只建议高度固定的布局时使用

12.5.2 在标签结尾处(前)加空div标签

原理：添加一个空div，利用css提供的clear:both清除浮动，让父级div能自动获取到高度

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

12.5.3父级div定义伪元素:after 和 zoom

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE专有属性)可解决ie6,ie7浮动问题

优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。

建议：推荐使用，建议定义公共类，以减少CSS代码

12.5.4父级div定义 overflow:hidden

原理：使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

12.5.5父级div定义 overflow:auto

原理：使用overflow:auto时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

缺点：内部宽高超过父级div时，会出现滚动条。

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

 <style>
        .name{
            /*1. 给父级元素单独定义高度（height）  height: 400px; */
            border: 1px solid black;
             /* 父级div定义 overflow:hidden    overflow: hidden; */
             /* 父级div定义 overflow:auto */
             /* 父级div定义 伪元素:after 和 zoom */
             overflow: auto;
        }

        .box1{
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: left;


        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: blue;
           
            float: left;
          

        }
        .box3{
            width: 300px;
            height: 300px;
            background-color: red;
            float: left;    
            margin: 10px 0px;
        }
        /* 在标签结尾处(前)加空div标签
        .clearfloat{
            clear: both;
        } */

    </style>
</head>
<body>
    <div class="name">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <!-- <div class="clearfloat">4</div> -->
   
    </div>
   
    <div class="box3">3</div>
</body>

十三 .css对齐方式

13.1元素居中对齐 margin：auto

13.2文本居中对齐 text-align：center

13.3 左右对齐 - 使用定位+子绝父相 relative+absolute 方式

13.4 左右对齐 - 使用 float 方式

13.5文本垂直居中对齐-使用padding

13.6 文本垂直居中对齐line-height和height保持一致

13.77 垂直居中 - 使用 position 和 transform

<style>
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<h2>居中</h2>
<p>以下实例中，我们使用了 positioning 和 transform 属性来设置水平和垂直居中：</p>
<div class="center">
<p>我是水平和垂直居中的。</p>
</div>
<p>注意: IE8 及更早版本不支持 transform 属性。</p>

十四 . display属性

14.1隐藏元素

visibility:hidden; 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none; 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

14.2块和内联元素

display: block;转换为块级元素

display: inline;转换为内联元素

14.3display: inline-block;

与 display: inline 相比，主要区别在于 display: inline-block; 允许在元素上设置宽度和高度。
同样，如果设置了 display: inline-block; ，将保留上下外边距/内边距，而 display: inline; 则不会与 display: block; 相比，主要区别在于 display：inline-block; 在元素之后不添加换行符，因此该元素可以位于其他元素旁边

十五. 伪类

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

<style>
        /* 未访问的链接 */
        a:link{
            color: antiquewhite;
        }
        /* 已访问的链接 */
        a:visited{
            color: rgb(226, 43, 43);
        }
        /* 鼠标悬停链接 */
        a:hover{
            color: rebeccapurple;
        }
        /* 已选择的链接 */
        a:active{
            color: gold;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com/">百度一下</a>
    <a href="https://www.jd.com/">京东一下</a>
    <a href="https://v.qq.com/">腾讯视频一下</a>

</body>

十六 .伪元素

::before 伪元素可用于在元素内容之前插入一些内容。

::after 伪元素可用于在元素内容之后插入一些内容

 <style>
        h1::after{
            content: "hello";
        }
        h1::before{
            content: url(image/107.jpg);
            
        }
    </style>
</head>
<body>
    <h1>学习伪元素</h1>
</body>

十七. 超链接

在这里插入图片描述

17.1设置连接样式

四种链接状态分别是：

a:link - 正常的，未访问的链接
a:visited - 用户访问过的链接
a:hover - 用户将鼠标悬停在链接上时
a:active - 链接被点击时

17.2文本装饰text-decoration: none; +text-decoration: underline;

text-decoration: underline;加上链接的下划线

text-decoration: none;除去链接的下划线

17.3背景色background-color

17.4链接按钮

a {
color: white;
padding: 14px 25px;
text-decoration: none;
display: inline-block;
background-color: #f44336;
}
a:link,
a:visited {
background-color: #f44336;
}
a:hover,
a:active {
background-color: red;
}

在这里插入图片描述

十八. css列表

18.1HTML 列表和 CSS 列表属性

在 HTML 中，列表主要有两种类型：无序列表（
- ）- 列表项用的是项目符号标记。

有序列表（ol）- 列表项用的是数字或字母标记

18.2 list-style-type 属性指定列表项标记的类型。

ul.circle {
list-style-type: circle;
}
ul.square {
list-style-type: square;
}
ol.upper {
list-style-type: upper-roman;
}
ol.lower {
list-style-type: lower-alpha;
}

在这里插入图片描述

18.3 list-style-image 属性将图像指定为列表项标记

ul.sqpurple {
list-style-image: url('img/sqpurple.gif');
}

在这里插入图片描述

18.4 list-style-type:none 删除默认样式

list-style-type:none 属性也可以用于删除标记/项目符号。

请注意，列表还拥有默认的外边距和内边距。要删除此内容，请在

或
1. 中添加 margin:0 和 padding:0 ：

18.5使用颜色设置列表样式

添加到

或
- 标记的任何样式都会影响整个列表，而添加到
- 标记的属性将影响各个列表项：

 <style>
        ul {
            /* list-style-type: square; */
            list-style-image: url(/images/sqpurple.gif);
            background-color: blueviolet;
            padding: 20px;
        }

        ul li {
            background-color: #FFE5E5;
            margin: 5px;
            margin-left: 35px;
            margin-bottom: 5px;
        }

        ol {
            list-style-type: decimal-leading-zero;
            background-color: #3399FF;
            padding: 20px;
            padding-left: 50px;
        }
        ol li{
            background-color: #FFE5E5;
            margin-left: 35px;
            margin: 5px;
            margin-bottom: 5px;

        }

        ul li:last-child {
            margin-bottom: 0;
        }
    </style>
</head>

<body>
    <ul>
        <li>一叶知秋</li>
        <li>大漠孤烟</li>
        <li>一枪穿云</li>
        <li>魔术师</li>
    </ul>
    <ol>
        <li>一叶知秋</li>
        <li>大漠孤烟</li>
        <li>一枪穿云</li>
        <li>魔术师</li>
    </ol>
</body>

在这里插入图片描述

十九 . css表格

19.1边框

在这里插入图片描述

19.2表格的宽度和高度

table {
width: 100%;
}
th {
height: 50px;
}
table.href {
width: 50%;
}
th.high {
height: 70px;
}

19.3水平对齐text-align

text-align: center;属性设置或中内容的水平对齐方式（左、右或居中）。
默认情况下，元素的内容居中对齐，而元素的内容左对齐。
要使元素的内容也居中对齐，请使用 text-align: center;

19.4 垂直文本对齐方式+vertical-align

vertical-align 属性设置 th 或 td 中内容的垂直对齐方式（上、下或居中）。

默认情况下，表中内容的垂直对齐是居中（th 和 td 元素都是）

bottom top baseline middle

19.5 控制边框和表格内容之间的间距padding 属性

th, td {
padding: 15px;
text-align: left;
}

19.6水平分隔线

th, td {
border-bottom: 1px solid #ddd;
}

在这里插入图片描述

19.7 突出显示鼠标悬停时的表格

在 tr 元素上使用 :hover 选择器，以突出显示鼠标悬停时的表格行：

tr:hover {
background-color: #f5f5f5;
}

19.8条纹表格

为了实现斑马纹表格效果，请使用 nth-child() 选择器，并为所有偶数（或奇数）表行添加 background-color

tr:nth-child(even) {
background-color: #f2f2f2;
}

19.9th 元素的背景颜色和文本颜色background-color+color

th {
background-color: black;
color: white;
}

二十. 表单

20.1设置特定输入类型的样式number +password+text

如果只想设置特定输入类型的样式，则可以使用属性选择器：

input[type=text] - 将仅选择文本字段
input[type=password] - 将仅选择密码字段
input[type=number] - 将仅选择数字字段

20.2填充输入框padding: 12px 20px;margin: 8px 0;

box-sizing: border-box;

使用 padding 属性在文本字段内添加空间
将 box-sizing 属性设置为 border-box。这样可以确保元素的总宽度和高度中包括内边距（填充）和最终的边框。
```
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
```

20.3 带边框的输入框border: 2px solid red;

请使用 border 属性更改边框的粗细和颜色，并使用 border-radius 属性添加圆角

input[type="text"].around {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid red;
border-radius: 4px;
}

如果仅需要下边框，请使用 border-bottom 属性：

input[type="text"].bottom {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-bottom: 2px solid red;
}

20.4 彩色的输入框backgroundcolor:MediumSeaGreen;

请使用 background-color 属性为输入添加背景色，并使用 color 属性更改文本颜色

input[type="text"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
background-color: MediumSeaGreen;
color: white;
border: none;
outline: none;
}

20.5 获得焦点的输入框input[type=“text”]:focus

默认情况下，某些浏览器在获得焦点（单击）时会在输入框周围添加蓝色轮廓。你可以通过向输入框添加 outline: none; 来消除此行为。

input[type="text"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
outline: none;
}

使用 :focus 选择器可以在输入字段获得焦点时为其设置样式：

input[type="text"]:focus {
background-color: lightblue;
border: 3px solid #555;
}

20.6 带有图标/图像的输入框input[type=“text”]

如果希望在输入框中包含图标，请使用 background-image 属性，并将其与 background-position 属性一起设置。还要注

意，我们添加了一个较大的左内边距（padding-left）来留出图标的空间：

input[type="text"] {
width: 100%;
height: 46px;
box-sizing: border-box;
border: 2px solid #cccccc;
border-radius: 4px;
background-color: white;
background-image: url('img/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}

在这里插入图片描述

20.7 设置文本域的样式textarea

使用 resize 属性可防止对 textareas 调整大小（禁用右下角的“抓取器”）：

textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}

20.8 设置输入按钮的样式input[type=“button”]

input[type="button"],
input[type="submit"],
input[type="reset"] {
background-color: green;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}

在这里插入图片描述

二十一. css轮廓

在这里插入图片描述

21.1 轮廓样式 outline-style

outline-style 属性指定轮廓的样式，并可设置如下值：

dotted - 定义点状的轮廓。

dashed - 定义虚线的轮廓。

solid - 定义实线的轮廓。

double - 定义双线的轮廓。

groove - 定义 3D 凹槽轮廓。

ridge - 定义 3D 凸槽轮廓。

inset - 定义 3D 凹边轮廓。

outset - 定义 3D 凸边轮廓。

none - 定义无轮廓。

hidden - 定义隐藏的轮廓。

在这里插入图片描述

21.2 轮廓的宽度 outline-width

outline-width 属性指定轮廓的宽度，并可设置如下值之一：

thin（通常为 1px）
medium（通常为 3px）
thick （通常为 5px）
特定尺寸（以 px、pt、cm、em 计）

21.3轮廓颜色outline-color

outline-color 属性用于设置轮廓的颜色。

可以通过以下方式设置颜色：

name - 指定颜色名，比如 “red”
HEX - 指定十六进制值，比如 “#ff0000”
RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
invert - 执行颜色反转（确保轮廓可见，无论是什么颜色背景）

21.4简写属性 outline: 5px solid yellow;

outline 属性是用于设置以下各个轮廓属性的简写属性：

outline-width
outline-style （必需）
outline-color

从上面的列表中， outline 属性可指定一个、两个或三个值。值的顺序无关紧要。

下例展示了用简写的 outline 属性指定的一些轮廓：

p.ex1 { outline: dashed; }
p.ex2 { outline: dotted red; }
p.ex3 { outline: 5px solid yellow; }
p.ex4 { outline: thick ridge pink; }

在这里插入图片描述

21.5轮廓偏移

outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。

下例指定边框边缘外 25px 的轮廓：

p {
margin: 50px;
border: 1px solid black;
background: yellow;
outline: 2px solid red;
outline-offset: 25px;
}

在这里插入图片描述

二十二. 尺寸

22.1 设置高度和宽度

height 和 width 属性用于设置元素的高度和宽度。
height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。

22.2 高度和宽度值

height 和 width 属性可设置如下值：

auto - 默认。浏览器计算高度和宽度。
length - 以 px、cm 等定义高度/宽度。
% - 以包含块的百分比定义高度/宽度。
initial - 将高度/宽度设置为默认值。

22.3height 和 width实例

22.4 max-width

22.5 min-width

<style>
        .box {
            /* min-width: 500px; */
            max-width: 500px;
            height: 200px;
            border: 1px solid red;

        }
    </style>
</head>

<body>
    <div class="box">
          <p>我相信他是一个好人的方法据可靠消息 大局已经无法改变的事实</p>
    </div>
</body>

在这里插入图片描述

二十三. 媒体类型

23.1 CSS2 中引入了 @media 规则

CSS2 中引入了 @media 规则，它让为不同媒体类型定义不同样式规则成为可能。
例如：您可能有一组用于计算机屏幕的样式规则、一组用于打印机、一组用于手持设备，甚至还有一组用于电视，等等。
不幸的是，除了打印媒体类型之外，这些媒体类型从未得到过设备的大规模支持。

23.2CSS3 中的媒体

扩展了 CSS2 媒体类型的概念：它们并不查找设备类型，而是关注设备的能力。

媒体查询可用于检查许多事情，例如：

视口的宽度和高度
设备的宽度和高度
方向（平板电脑/手机处于横向还是纵向模式）
分辨率

使用媒体查询是一种流行的技术，可以向台式机、笔记本电脑、平板电脑和手机（例如 iPhone 和 Android 手机）提供定制的样式表

23.3

23.5 CSS3媒体类型

值	描述
all	用于所有媒体类型设备。
print	用于打印机
screen	用于计算机屏幕、平板电脑、智能手机等等。
speech	用于大声“读出”页面的屏幕阅读器。

23.6媒体查询的简单实例

<style>
        body {
            background-color: pink;
        }

        @media screen and (min-width: 480px) {
            body {
                background-color: lightgreen;
            }
        }
        h2 {
            font-size: 50px;
        }

        @media screen and (min-width: 480px) {
            h2 {
                font-size: 20px;
            }
        }
    </style>
</head>

<body>
     
    <h2>hello</h2>
</body>

在这里插入图片描述

23.6.1菜单的媒体查询

 <style>
        *{
            padding: 0;
            margin: 0;
        }
        
        nav{
            background-color: aquamarine;
            /* padding: 0; */
        }
        nav a{
            /* display: inline-block; */
            text-decoration: none;
            float: left;
            width: 200px;
            line-height: 50px;
            /* margin-right: 20px; */
            /* margin: 0 10px; */
            padding: 0;
            background-color: blue;
            color: white;
            text-align: center;
        }
        nav a:hover{
            background-color: rgb(255, 170, 127);
        }
        @media screen and (max-width: 600px) {
            nav {
                width: 200px;

            }
            nav a{
                width: 100%;
                text-align: left;
                padding-left: 20px;
                /* margin-left: 20px; */
            }
        }

    </style>
</head>
<body>
    <nav>
        <a href="#">网站首页</a>
        <a href="#">关于我们</a>
        <a href="#">点击查询</a>
        <a href="#">联系客服</a>

    </nav>
</body>

在这里插入图片描述

23.6.2列的媒体查询

<style>
        .column {
            width: calc(25% - 20px);
            float: left;
            color: white;
            font-size: 30px;
            line-height: 50px;
            text-align: center;
            background-color: lightgray;
            margin: 0 10px;
        }

        @media screen and (max-width: 992px) {
            .column {
                width: calc(50% - 20px);
            }
        }

        @media screen and (max-width: 600px) {
            .column {
                width: 100%;
            }
        }
    </style>
</head>
<body>
       <div class="column">1</div>
       <div class="column">2</div>
       <div class="column">3</div>
       <div class="column">4</div>
</body>