CSS学习归纳3

SPIRIT_SYF

已于 2024-04-06 20:33:40 修改

阅读量802

点赞数 14

文章标签： html css 前端学习

于 2024-04-06 20:27:04 首次发布

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

版权

在上一节CSS学习归纳2中我们讨论了选择器的使用、块级行级元素的转化使用以及背景的设置。本节将在上述学习的基础上对CSS的特性、盒子的边框，内外边距等性质加以归纳。并且最后会做一个综合的案例，并附上代码。

一、CSS的三大特性

1.1 CSS的三大特性---层叠性

CSS的三大特性：层叠性、继承性、优先级。

层叠性：相同的选择器，对同一个属性设置了不同的值，样式产生了冲突。针对冲突的属性采用就近原则，哪一个离标签近，就采用哪一个。感觉像是覆盖了一样。

这里写一个颜色冲突的例子：

<!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>
    div {
      color: aqua;
      font-size: 25px;
    }

    div {
      color: blue;
    }
  </style>
</head>

<body>
  相同的选择器，同一个属性设置了不同的值，样式冲突了。<br>
  针对冲突的属性采用就近原则，哪一个离标签近，就采用哪一个。<br>
  感觉像是覆盖了的感觉。<br>
  <div>冲突测试</div>
  颜色（冲突属性）覆盖。


</body>

</html>

1.2 CSS的三大特性---继承性

继承性：子标签继承父标签的某些样式，其实合乎情理，为了保证内容的样式一致。这里的某些样式指的是和文字相关的样式：font-，line-，text-。还有颜色特性

值得注意的是，如果某个标签没有设置属性的值，父标签也没有设定，但是父亲的父亲设定了，同样可以继承。像血缘关系一样。

<!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>
    body {
      color: blueviolet;
      /* 设置行高：方法一 行高具体*/
      /* font: 25px/35px "microsoft yahei"; */
      /* 设置行高：方法二 行高为当前文字的1.5倍，更灵活，更常用*/
      font: 25px/1.5 "microsoft yahei";

    }

    div {
      color: aqua;
      /* 这里要使用font-size */
      font-size: 16px;
    }
  </style>
</head>

<body>
  <h1>继承</h1>
  <div>子标签回继承父标签的某些样式，其实合乎情理，为了保证内容的样式一致</div>
  <div>某些样式指的是和文字相关的样式：font-，line-，text-。还有颜色特性</div>
  <div>
    <p>我是div的子代</p>
  </div>
  <h1>行高继承</h1>
  <div>我是div</div>
  <h1>孙子继承</h1>
  <ol>
    <li>li没有设置，父标签ol也没有设定，但是父亲的父亲body设定了，所以直接继承</li>
  </ol>

</body>

</html>

1.3 CSS的三大特性---优先级

优先级：顾名思义在定义属性的时候，不同的定义方式具备不同的优先级。

注意：优先级具备叠加的性质。

优先级：!important>行内样式>ID选择器>类选择器，伪类选择器>元素选择器>继承或者统配

注意：1、继承得到的属性，无论在父代多强，到子代都只是继承，是最低级的；2、链接大于继承，所以一般不被改变，需要直接设计。

!important的使用

div {
      color: aqua !important;
    }

针对优先级，做了如下的测试代码

<!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>
    div {
      color: aqua;
    }

    /* 先跑一边，然后再打开下面的注释 */
    /* 这个最低级，但是加了!important */
    /* div {
      color: aqua !important;
    } */

    .num1 {
      color: blue;
    }

    #no1 {
      color: black;
    }
  </style>
</head>

<body>
  <div class="num1" id="no1" style="color: pink;"> 我是div但是我有自己类名，和ID，而且行内直接设置了style,
    但是如果我对优先级低的设置了!important，结果以加了!important的为准; </div>
  <div class="num1" id="no1" style="color: pink;"> 我是div但是我有自己类名，和ID，但我行内直接设置了style </div>
  <div class="num1" id="no1"> 我是div但是我有自己类名，和ID </div>
  <div class="num1"> 我是div但是我有自己类名 </div>
  <div> 我是div但我没有自己类名 </div>
  <p>所以优先级：!important>行内样式>ID选择器>类选择器，伪类选择器>元素选择器>继承或者统配</p>
  <p>注意：1、继承得到的属性，无论在父代多强，到子代都只是继承，是最低级的；2、链接大于继承，所以一般被改变，需要直接设计</p>

</body>

这就更加直观的得到了：!important>行内样式>ID选择器>类选择器，伪类选择器>元素选择器>继承或者统配

1.4 优先级的权重叠加

我们可以认为：1、!important 的权重为：无穷大；2、行内样式的权重为：1，0，0，0；3、ID选择器的权重为：0，1，0，0；4、类选择器，伪类选择器的权重为：0，0，1，0；5、元素选择器的权重为：0，0，0，1；6、继承或者统配的权值为0；

在对一个属性设置的时候，只叠加不进位。所以只要存在高优先级的不会改变，叠加是为了同级之间的比较。在设置的时候，从最高位开始对比。

<!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>
    li {
      /* 权重：0001 */
      color: yellow;
    }

    ul li {
      /* 权重0001+0001=0002 */
      color: red;
    }

    .num li {
      /* 权重0010+0001=0011 */
      color: blue;
    }
  </style>
</head>

<body>
  <div>复合选择会有权重叠加的问题，只叠加不进位，0001=0，0，0，1</div>
  <ul class="num">
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
  </ul>
</body>

</html>

二、盒子模型的组成

2.1 盒子模型的组成

盒子模型：border边框、margin外边距、padding内边距、content实际内容。共同构成。下图感觉能比较好的体现。

2.2 网页的本质

网页的本质：1、由很多大小不同的盒子构成的；2、摆放位置；3、装饰盒子；

2.3 网页布局的核心内容

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

三、盒子模型

3.1 边框

首先，了解边框有哪些属性。边框有粗细，有颜色，有样式;border-width：px; border-color：; border-style：;

边框还可以细分为border-top，border-bottom，border-left，border-right；这里要注意层叠的就近原则。

注意：边框会影响，盒子实际的大小，因为边框会有像素

<!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>
    div {
      width: 500px;
      height: 300px;
      /* border-width: 5px;
      border-color: burlywood;
      border-style: solid; */
      /* 符合写法,无顺序 */
      border: 5px red dashed;
      /* 这里产生了层叠，注意就近原则 */
      border-bottom: 5px yellow solid;

    }
  </style>
</head>

<body>
  <p>边框有粗细，有颜色，有样式;border-width：px; border-color：;
    border-style：;</p>
  <p>边框 border-top，border-bottom，border-left，border-right；注意层叠的就近原则</p>
  <p>注意：边框会影响，盒子实际的大小，因为边框会有像素</p>
  <div></div>



</body>

</html>

3.2 细线边框

因为边框有粗细，所以单元格之间贴合时，边框会重叠变厚。为了相处重叠带来的问题，对重叠元素添加 border-collapse: collapse;这个代码

这里做了一个例子，大家可以跑两边，第一遍正常跑，第二遍将border-collapse: collapse;注释。可以明显看到区别

<!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>
    table {
      width: 500px;
      height: 500px;

    }

    table,
    th,
    td {
      border: 2px blue solid;
      border-collapse: collapse;
      text-align: center;
    }

    th {
      height: 200px;
    }
  </style>
</head>

<body>
  <p>单元格之间贴合，边框会重叠变厚</p>
  <table align="center" cellspacing="0">
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</body>

</html>

3.3 内边距和内容

通过内边距，调整内容和边框的距离。

注意：1、padding会影响盒子的大小，增加了内边距，会撑大原盒子的大小；2、设计之初，考虑内边距再去设置height 和 weight。

有两种种情况padding不撑开宽度：1、h这样的标题和浏览器一样宽，padding不会影响。但是当自己制定了h的宽度，padding就会影响。2、子类不设置宽度时，padding不会影响，其实就是默认和父亲一样宽，没办法再扩大，和情况一几乎类似。

注意：内边距的设置顺序遵顼 ”顺时针原则“。padding简写可以有1，2，3，4个参数的情况

1、padding：所有； 2、padding：上下，左右； 3、padding：上，左右，下；4、 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>
    div {
      width: 200px;
      height: 200px;
      background-color: aquamarine;
      /* padding-left: 15px;
      padding-top: 20px; */
      /* padding简写 可以有1，2，3，4个参数的情况*/
      /* 设置顺序：顺时针设置 */
      padding: 20px 15px;
    }
  </style>
</head>

<body>
  <div>通过内边距，调整内容和边框的距离</div>

  <div>注意：1、padding会影响盒子的大小，增加了内边距，会撑大；2、设计之初，考虑内边距再去设置height 和 weight</div>

  <div>有两种种情况padding不撑开宽度：1、h这样的标题和浏览器一样宽，padding不会影响。但是当自己制定了h的宽度，padding就会影响。</div>
  <div>2、子类不设置宽度时，padding不会影响 </div>
</body>

</html>

3.4 外边距

外边距的设置顺序，同样遵顼 ”顺时针原则“。简写可以有1，2，3，4个参数的情况。设置具体和padding的一致，只需要换成margin即可。

<!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>
    .nav1 {
      display: inline-block;
      width: 200px;
      height: 150px;
      background-color: aquamarine;
      /* 简写参数和padding一样，顺时针 */
      margin: 15px 15px;
    }

    .nav2 {
      display: inline-block;
      width: 200px;
      height: 150px;
      background-color: aquamarine;
      margin: 15px 15px;
    }

    .nav3 {
      display: inline-block;
      width: 200px;
      height: 150px;
      background-color: aquamarine;
      margin: 15px 15px;
    }

    .nav4 {
      width: 200px;
      height: 150px;
      background-color: aquamarine;
      margin: 15px 15px;
    }
  </style>
</head>

<body>
  <div class="nav1"></div>
  <div class="nav2"></div>
  <div class="nav3"></div>
  <div class="nav4"></div>

</body>

</html>

3.5 外边距的使用

3.5.1 可以使用外边距可以实现块级水平居中。

条件如下：必须有宽度；

实现方法1：左右外边距设置为auto

实现方法2：给父元素增加 text-align：cente

3.5.2 父类塌陷的情况如何解决

方法一：父类加一个边框

方法二：父类定义上内边距

方法三：父类加：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>
    .header1 {
      width: 800px;
      height: 400px;
      background-color: aquamarine;
      margin: 0 auto;
      font-size: 20px;
      color: black;
      margin: 100px auto;
    }

    .header2 {
      width: 800px;
      height: 400px;
      background-color: aquamarine;
      margin: 0 auto;
      font-size: 20px;
      color: black;
      /* 虽然是text-但是是满足所有子类 */
      text-align: center;
    }

    .father {

      width: 500px;
      height: 500px;
      background-color: #08f046;
      overflow: hidden;
    }

    .son {
      width: 100px;
      height: 100px;
      background-color: #f07808;
      margin: 100px 100px;
    }
  </style>
</head>

<body>
  <h6>使用外边距可以实现块级水平居中</h6>
  <p>条件1：必须有宽度；条件2：左右外边距设置为auto</p>
  <div class="header1">我可以实现居中</div>
  <h6>如何实现行内块水平居中</h6>
  <p>给父元素增加 text-align：center</p>
  <div class="header2">
    <span>1111</span>
    <span>2222</span>
  </div>
  <h6>嵌套时，存在父类塌陷的情况</h6>
  <ul>
    <li>1、父类加一个边框</li>
    <li>2、父类定义上内边距</li>
    <li>3、父类加：overflow:hidden</li>
  </ul>

  <div class="father">
    <div class="son"></div>
  </div>
</body>

</html>

3.6 清除内外边距

一般写在设计的最前面，因为不同的标签自带外边距和内外边距，会不好标定，所以干脆全部清空，自己设计。

使用通配符修改。行内元素尽量只设置左右边距。

下面是使用通配符，取消内外边距的例子

<!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;
    }
  </style>
</head>

<body>
  <p>不同的标签自带外边距和内外边距</p>
  <p>使用通配符修改</p>
  123
  <ul>
    <li>111</li>
    <li>111</li>
  </ul>
  <p>行内元素尽量只设置左右边距</p>

</body>

</html>

四、综合案例

4.1 竖导航栏

为了实现这个，使用块级元素是其中的一个方法，因为每个各占一行。

思路：1、因为链接时行级元素，所以先将链接转化为块级元素。2、设置行高=高度可以居中对齐。3、对<a> 的 text-decoration进行修改，取消下划线。4、a：hover设置经过特效 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>
    a {
      display: block;
      height: 40px;
      width: 160px;
      font-size: 14px;
      color: #fff;
      text-decoration: none;
      line-height: 40px;
      padding-left: 40px;
      background-color: rgba(88, 86, 86, 0.5);
    }

    a:hover {
      color: aqua;
    }
  </style>
</head>
<a href="#">
  手机 配件
</a>
<a href="#">
  平板 笔记本
</a>

<a href="#">
  智能家居 路由器
</a>
<a href="#">
  运动 健身
</a>
<a href="#">
  户外 出行
</a>

<body>


</body>

</html>

4.2 横导航栏

为了实现这个，应该是让多个元素排在一行，可以使用行内块技术

思路：1、最外层的大盒子内部装几个行内块。2、设置盒子的边框。3、因为一行多个链接，所以先将链接转化为行内块元素。4、设置行高=高度可以居中对齐。5、对<a> 的 text-decoration进行修改，取消下划线。6、a：hover设置经过特效 7、调整内边距。

<!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>
    .nav {
      border-top: 3px solid #ff8500;
      border-bottom: 1px solid #edeef0;
      height: 41px;
      background-color: #fcfcfc;
      font-size: 12px;
      line-height: 41px;

    }

    .nav a {
      display: inline-block;
      text-decoration: none;
      color: #4c4c4c;
      height: 41px;
      padding: 0 20px;
    }

    .nav a:hover {
      color: #ff8500;
      background-color: rgba(245, 91, 158, 0.4);
    }
  </style>
</head>

<body>
  <div class="nav">

    <a href="#">你好</a>
    <a href="#">你好呀</a>
    <a href="#">百度一下</a>
    <a href="#">移动客户端</a>


  </div>
  <h1>不设计容器的长宽，而是指定内边距，实现好的效果</h1>
</body>

</html>

4.3 网页商品

这个比较常见，具有很强的实践意义。

分析问题：1、首先是个大盒子，内部装了纵向排列的小盒子：图片、评论、来源、产品名称、价格。2、图片的宽度100%；3、评论设置高度，设置margin-top和padding-left。防止塌陷；4、来源：规定字号，设置margin-top和padding-left；5、产品名：和价格同行，所以转换行内块。规定字号粗细，设置margin-top和padding-left；6、价格：左边框，做内边距，颜色；7、可以设置链接：去掉下划线，设置经过特效。

<!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;
    }

    body {
      background-color: #f5f5f5;
    }

    .box {
      width: 298px;
      height: 415px;
      background-color: #fdfdfc;
      margin: 100PX auto;
    }

    .box img {
      width: 100%;
    }

    .box p {
      height: 70px;
      font-size: 14px;
      padding: 0 28px;
      margin-top: 30px;
    }

    .review {
      font: 12px;
      color: #b0b0b0;
      margin-top: 20px;
      padding: 0 28px;
    }

    .name {
      font-weight: 400;
      display: inline-block;
      padding: 0 28px;
      margin-top: 15px;
    }

    .price {
      border-left: 1px solid black;
      padding-left: 10px;
      color: #ff6700;
    }

    a {
      text-decoration: none;
      color: #333;
    }

    a:hover {
      color: #ff6700;
    }
  </style>
</head>

<body>
  <div class="box">
    <img src="images/pic1.png">
    <p>这个扩展坞非常好用，买了3个了！</p>
    <div class="review">
      来自于 117384232 的评价
    </div>
    <h4 class="name">
      <a href="#">联想2024最新扩展坞...</a>
    </h4>
    <span class="price">
      99.9元
    </span>
  </div>

</body>

</html>

4.4 体育资讯

问题分析：1、大致是纵向排列的，头部，内容。2、头部：可以使用<h>标签，所以要设置高度、行高、左内边距、粗细、下边框；3、内容：可以使用<ul><li>的list结构；4、每个<li>放一个<a>；5、使用list-style:none；去除list的左方小点。6、设置<li>的高度、外边距、内边距；7、以设置链接：去掉下划线，设置经过特效。

<!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>
    * {
      padding: 0;
      margin: 0;
    }

    body {
      background-color: bisque;
    }

    .box {
      background-color: white;
      width: 250px;
      height: 250px;
      margin: 100px auto;

    }

    .box .title {
      height: 40px;
      font-weight: 400;
      line-height: 40px;
      border-bottom: 1px solid black;
      padding-left: 30px;
      color: #ccc;
    }

    .box .content {
      list-style: none;
      margin-top: 25px;
      padding-left: 15px;
    }

    .box li {
      height: 25px;
      margin-top: 5px;
    }

    a {
      text-decoration: none;
    }

    a:hover {
      color: aquamarine;
    }
  </style>
</head>

<body>
  <div class="box">
    <h3 class="title">体育快讯</h3>
    <ul class="content">
      <li><a href="#">【篮球】湖人vs热火</a></li>
      <li><a href="#">【篮球】开拓者vs掘金</a></li>
      <li><a href="#">【篮球】76人vs火箭</a></li>
      <li><a href="#">【篮球】森林狼vs勇士</a></li>
      <li><a href="#">【足球】英超：切尔西胜曼联</a></li>
    </ul>
  </div>
</body>

</html>