CSS学习归纳4

最新推荐文章于 2024-08-12 23:09:11 发布

SPIRIT_SYF

最新推荐文章于 2024-08-12 23:09:11 发布

阅读量1.2k

点赞数 30

文章标签：学习 html 前端 css

本文链接：https://blog.csdn.net/SPIRITE_SYF/article/details/137437547

版权

前几节的内容学起来可能有些乏味，但这一节的内容相比之下就有趣很多。这一节主要是一些有关盒子、文字的外观设计以及另一个大点--浮动。

一、圆角边框

我们以前使用的边框都是直角的，但是实际的页面中有很多的边框的边角是带有曲度的。这就是我们学习的第一大点---圆角边框。

这一点很简单，我们只需要设置border-radius这个属性就好，这个很好理解”边框-半径“。可以使用border-radius+参数直接设置。或者可以使用border-top-left-radius:具体指向某个角去修改。

注意使用border-radius时，采用的是也是顺时针的顺序；

1、border-radius：所有；2、border-radius：左上+右下，右上+左下；3、左上，右上+左下，右下；4、左上，右上，右下，左下；

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      height: 250px;
      width: 500px;
      background-color: pink;
      border-radius: 50%;
      margin: 25px auto;
    }

    .box2 {
      height: 500px;
      width: 500px;
      background-color: pink;
      border-radius: 50%;
      border-top-left-radius: 15px;
      margin: 25px auto;
    }

    .box3 {
      height: 250px;
      width: 500px;
      background-color: pink;
      border-radius: 15px 25px 35px 45px;
      margin: 25px auto;
    }
  </style>
</head>

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

</html>

二、盒子阴影

使用 box-shadow: x，y，虚实，影子大小，颜色；一般就像链接一样，对某个盒子增加：hover{box-shadow：}实现经过的特效。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 500px;
      background-color: aquamarine;
      margin: 100px auto;

    }

    .box:hover {
      /* 属性的顺序：x，y，虚实，影子大小，颜色 */
      box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.3);
    }
  </style>
</head>

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

</html>

三、文字阴影

文字阴影的设置，不同于盒子。text-shadow:x，y，模糊，颜色。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    h1 {
      width: 250px;
      margin: 100px auto;
      color: aquamarine;
      /* 不同于盒子，属性：x，y，模糊，颜色 */
      text-shadow: 15px 15px 5px rgba(245, 98, 98, 0.7);
    }
  </style>
</head>

<body>
  <h1 class="title1">你好！李焕英！</h1>
</body>

</html>

四、浮动

网页布局的核心内容：1、盒子模型 2、浮动 3、定位。

盒子模型再CSS学习归纳3中已经结束了。现在我们对第二个核心内容加以学习。

4.1 传统网页布局的三种方式

1、普通流 2、浮动 3、定位；

4.2 什么时候使用浮动

1、块级放在一行中，还没有空格；2、2个盒子，一个左一个右

4.3 布局适合的情况

1、一块一块竖着布局---普通流；2、块级横着排布---浮动；

4.4 浮动特性

1、浮动元素会脱离标准；2、浮动元素一行内显示且沿着顶部对齐；3、浮动元素会具有行内块元素的特性；4、浮动的盒子不保留原先的位置（脱标）；5、浮动只会压住后面的标准流。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      float: left;
      background-color: aquamarine;
      width: 250px;
      height: 250px;

    }

    .box2 {
      float: left;
      background-color: aquamarine;
      width: 250px;
      height: 250px;

    }

    .box3 {
      float: left;
      background-color: aquamarine;
      width: 250px;
      height: 250px;

    }

    .box4 {
      float: left;
      background-color: aquamarine;
      width: 250px;
      height: 250px;


    }

    .box5 {
      background-color: rgb(90, 104, 225);
      width: 500px;
      height: 500px;
    }
  </style>
</head>

<body>
  <h1>传统网页布局的三种方式</h1>
  <ul>
    <li>普通流</li>
    <li>浮动</li>
    <li>定位</li>
  </ul>
  <h1>什么时候使用浮动</h1>
  <ul>
    <li>块级放在一行中，还没有空格</li>
    <li>2个盒子，一个左一个右</li>
  </ul>

  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="box3">3</div>
  <br><br><br><br><br><br><br><br><br><br><br><br>
  <h1>布局适合的情况</h1>
  <ul>
    <li>一块一块竖着布局---普通流</li>
    <li>块级横着排布---浮动</li>
  </ul>

  <h1>浮动</h1>
  <div class="box4"></div>
  <div class="box5"></div>

  <h1>浮动特性</h1>
  <ul>
    <li>1、浮动元素会脱离标准</li>
    <li>2、浮动元素一行内显示且原色顶部对齐</li>
    <li>3、浮动元素会具有行内块元素的特性</li>
    <li>4、浮动的盒子不保留原先的位置</li>
    <li>5、浮动只会压住后面的标准流</li>
  </ul>

</body>

</html>

4.5 浮动元素搭配父标签使用

先用标准流的父亲排列上下位置，在父标签的内部在使用浮动排列左右位置。这样就不会以浏览器作为标准浮动。

4.6 浮动的练习

实现一个这样的布局

问题分析：1、这是一个大的标准流，内部使用2个大的浮动实现的。2、设置标准流的大小。3、设置左边浮动元素（其中的一个大的浮动块）的大小，以及设置浮动属性。4、设置右边浮动元素（其中的另一个大的浮动块）的大小，以及设置浮动属性。5、在右边浮动元素的内部添加浮动元素。6、对于右侧的内部的浮动，设置长宽+外边距。

注意：避免某一方向上长宽和padding 的同时出现。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 1226px;
      height: 615px;
      margin: 100px auto;
      background-color: red;
    }

    .box .left {
      float: left;
      width: 234px;
      height: 615px;
      background-color: purple;
    }

    .box .right {
      float: left;
      width: 992px;
      height: 615px;
      background-color: skyblue;
    }

    .right li {
      width: 234px;
      height: 300px;
      margin-left: 14px;
      margin-bottom: 14px;
      float: left;
      background-color: aquamarine
    }

    .right li {
      list-style: none;
    }
  </style>
</head>

<body>
  <div class="box">
    <dvi class="left">
      左边框
    </dvi>
    <div class="right">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="right4">4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li class="right4">8</li>
      </ul>
    </div>
  </div>
</body>

</html>

4.7 利用浮动+标准流设计一个网页布局

设计一个常见的网页布局。

常见的网页布局

1、标准流父类，自上而下，排列

2、再采用浮动具体设计，父亲的内部布局

3、有和浏览器一样宽的布局

问题分析：1、自上而下使用标准流，共5个，一个头部，一个底部，3个主要内容。2、头部底部一起设计，高度+行高+文字居中。3、3个主要内容：设置宽度+高度+使用margin居中显示。4、内部的主要内容可以直接使用<span>标签，设置为浮动，就可以设置长宽，并添加外边距。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .top,
    .bottom {
      background-color: aqua;
      text-align: center;
      height: 100px;
      line-height: 100px;

    }

    .layer1 {
      width: 750px;
      height: 250px;
      background-color: aquamarine;
      margin: 10px auto;
    }

    .layer2 {
      width: 750px;
      height: 250px;
      background-color: aquamarine;
      margin: 10px auto;
    }

    .layer3 {
      width: 750px;
      height: 450px;
      background-color: aquamarine;
      margin: 10px auto;
    }

    .layer2 span {
      float: left;
      width: 150px;
      height: 250px;
      background-color: antiquewhite;
      margin: 0 15px;
    }

    .layer3 span {
      float: left;
      width: 150px;
      height: 450px;
      background-color: antiquewhite;
      margin: 0 15px;
    }
  </style>
</head>

<body>
  <h1>常见的网页布局</h1>
  <ul>
    <li>1、标准流父类，自上而下，排列</li>
    <li>2、再采用浮动具体设计，父亲的内部布局</li>
    <li>3、有和浏览器一样宽的布局</li>
  </ul>
  <h1 class="top">我是头部</h1>
  <div class="layer1"></div>
  <div class="layer2">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
  </div>
  <div class="layer3">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
  </div>
  <h1 class="bottom">我是底部</h1>
</body>

</html>

五、清除浮动

5.1 为什么需要清除浮动

1、产品不知道多少，高度不能写死

2、更理想的是，让孩子撑开父元素

3、父亲不给高度，孩子全部浮动，那么父亲高度为0

5.2 如何清除浮动

1、父亲添加overflow

2、父亲太你家after伪元素

3、父亲增加双伪元素

4、额外标签

5.3 不清除浮动的影响

父亲不给高度，孩子全部浮动，那么父亲高度为0。我们让父亲的背景被粉色，孩子各一个颜色但是都是浮动，如果不清除浮动，那么父亲没有高度，也就看不到。

理想状态：

但是此时：

5.4 清除浮动的方法

1、额外标签

2、overflow

3、after伪元素

4、双伪元素

5.5 清除浮动举例1-额外标签

在子标签的尾部再加一个标签，设置为class=”clear“，并设置类。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father1 {
      width: 600px;
      background-color: pink;
      margin: 0 auto;
    }

    .class1 {
      float: left;
      width: 150px;
      height: 200px;
      background-color: aquamarine;
    }

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

    .class3 {
      float: left;
      width: 150px;
      height: 200px;
      background-color: blueviolet;
    }

    .clear {
      clear: both;
    }
  </style>
</head>

<body>
  <div class="father1">
    <div class="class1"></div>
    <div class="class2"></div>
    <div class="class3"></div>
    <!-- 关门打狗 ，但必须是块级元素-->
    <div class="clear"></div>
  </div>
</body>

</html>

5.6 清除浮动举例2-overflow

给父级标签，增加一个 overflow：hidden；

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father2 {
      width: 600px;
      background-color: pink;
      overflow: hidden;
      margin: 0 auto;
    }

    .class1 {
      float: left;
      width: 150px;
      height: 200px;
      background-color: aquamarine;
    }

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

    .class3 {
      float: left;
      width: 150px;
      height: 200px;
      background-color: blueviolet;
    }

    .clear {
      clear: both;
    }
  </style>
</head>

<body>
  <div class="father2">
    <div class="class1"></div>
    <div class="class2"></div>
    <div class="class3"></div>
  </div>
</body>

</html>

5.7 清除浮动举例3-after伪元素

这种方式就是给父级标签关闭后门。只不过这个关闭后门的代码需要专门写。补充一个after的方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father3 {
      width: 600px;
      background-color: pink;
      margin: 0 auto;
    }

    /* 补充一个after的方法 */
    .clearfix:after {
      display: block;
      content: "";
      height: 0;
      clear: both;
      visibility: hidden;
    }

    .clearfix {
      *zoom: 1;
    }

    .class1 {
      float: left;
      width: 150px;
      height: 200px;
      background-color: aquamarine;
    }

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

    .class3 {
      float: left;
      width: 150px;
      height: 200px;
      background-color: blueviolet;
    }
  </style>
</head>

<body>
  <div class="father3 clearfix">
    <div class="class1"></div>
    <div class="class2"></div>
    <div class="class3"></div>
  </div>
</body>

</html>

5.8 清除浮动举例4-双伪元素

这种方式就是给父级标签关闭前门和后门。

相较于after方法，双伪元素的格式更加简单。但是同样需要新的代码。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 双向插入 */
    .father4 {
      width: 600px;
      background-color: pink;
      margin: 0 auto;
    }

    .clearfix:after,
    .clearfix:before {
      display: table;
      content: "";
    }

    .clearfix:after {

      clear: both;

    }

    .class1 {
      float: left;
      width: 150px;
      height: 200px;
      background-color: aquamarine;
    }

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

    .class3 {
      float: left;
      width: 150px;
      height: 200px;
      background-color: blueviolet;
    }
  </style>
</head>

<body>
  <div class="father4 clearfix">
    <div class="class1"></div>
    <div class="class2"></div>
    <div class="class3"></div>
  </div>
</body>

</html>