CSS基础（3）-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_74227060/article/details/135588289

本文介绍了CSS的三个主要特性：层叠性处理样式冲突，元素继承性使得子元素继承父类样式，以及优先级规则解决选择器权重问题。同时详细讲解了盒子模型、边框、内边距、外边距、复合写法以及圆角边框和阴影效果的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS三大特性

层叠性

样式冲突问题;采取就近原则

哪个样式离结构近就选择哪个。而且只覆盖冲突部分

继承性

<p>继承了<div>的某些特性

子元素可以继承父类的样式（text-,font-,line-这些元素开头的可以继承）

优先级

当一个选择器指定多个选择器，就会有优先级的产生

选择器相同，执行层叠性；

选择器不同，根据权重执行。

继承/*<元素选择器<类选择器/伪类选择器<id选择器<!important

注意：继承的权重为0；如果该元素没有被直接选中，不管父类权重有多高，子类得到的权重为0；

如图，文字继承id的是0，而p本身是0001，所以呈现蓝色

而链接被默认设置为蓝色有下滑线（a{}的样式），要单独对链接a设置才会有效

权重叠加

如果使用复合选择器需要考虑权重叠加问题；

叠加会相加，而且不进位，如图

选择权重更大的

盒子模型

（HTML布局看作盒子）

网页布局三大核心：盒子模型、浮动、定位。

盒子模型包括:边框、内外边距、实际内容

用于封装HTML元素

border边框

content内容

padding内边距

margin外边距

border

属性：颜色、粗细、边框样式

属性	作用
border-width	粗细,单位px
border-style	边框样式（dashed虚线、solid实现、dotted虚线）
border-color	颜色

复合写法：

border：1px solid red;(没有顺序)

只要上边框：写border-top；

因此，三个边框可各自调节

如果border：1px solid red；

border：1px solid blue；

依据层叠性，就近原则上边框显示blue；

可以用盒子模型改变边框

其中border-collapse可以合并边框，即相邻单元格可以共享边框。

而且边框可以改变盒子实际大小

内边距

同border，padding内边距分padding-top、padding-bottom、padding-right、padding-left改变内边距

内边距也可以用复合写法

padding：2px 2px 2px 2px;

padding：2px; 一个参数表示上下左右都是2px;

padding：2px 3px; 一个参数表示上下是2px,左右都是3px;

padding会影响内外边距，由于字体大小没有改变，而增加外边距，盒子会被撑大

padding也有不撑开盒子的情况，如果盒子没有指定width/height就不会撑开盒子大小

链接选择栏案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择栏</title>

    <style>
      div {
         border-top: 3px solid #ff8500;
         border-bottom: 1px solid #4f4f4f;
         height: 41px;
         line-height: 41px;
      }
      div a {
         height: 41px;
         font-size: 12px;
         text-decoration: none;
         color: #222121;
         display: inline-block;
         padding: 0 20px;
      }
      a:hover {
         background-color: #c4bcbc;
      }
    </style>
</head>
<body>
<div><a href="#">设为首页</a><a href="#">网页</a>
   <a href="#">移动客户端</a><a href="#">关注</a><a href="#">私信</a>
</div>
</body>
</html>

外边距

同border、padding，外边距margin分margin-top、margin-bottom、margin-right、margin-left改变外边距

1.可以是块级盒子水平居中

先设置盒子宽度，设置外边框margin：0 auto；

2.行内元素给其父添加text-align:center;

外边距合并

使用margin时会出现两种情况（外边距合并）：

1.相邻块元素垂直外边距的合并

方案：只给一个盒子添加margin（边距不能相加）

2.嵌套块元素垂直外边距的塌陷

会以最顶端为基准找最大外边距：

解决方案：定义父类上边框

border-top:1px solid transparent ;

清楚内外边距

横简单：

* {

margin; 0;

padding: 0;

}

对行内元素，既是设置上下边距也不起作用。

产品模块布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择栏</title>

    <style>
      
      * {
         margin: 0;
         padding: 0;
      }

      img {
         height: 180px;
         width: 298px;
      }
      .box {
         height: 415px;
         width: 298px;
         background-color: rgb(250, 245, 245);
         margin: 0 auto;
      }
      p 
      {
          display:block;
          height: 70px;
          font-size: 14px;
          padding: 28px;
      }

      .app {
         font-size: 12px;
         color: #b0b0b0;
         margin-top: 30px;
         padding: 0 28px;
      }
      .info {
         font-size: 14px;
         margin-top: 15px;
         padding: 0 28px;
      }
      .s2 {
         color: #ebe4b0;
         margin-left: 20px;
         margin-right: 7px;
      }
      .s3 {
         color: rgb(243, 116, 12);
      }
      a {
         text-decoration: none;
         color: #333;
      }
    </style>
</head>
<body>
<div class="box"><img src="https://tse4-mm.cn.bing.net/th?id=OIF-C.wCNjsnxWinqvYD8bEgoK%2bg&rs=1&pid=ImgDetMain" >
   <div class="d2"> </div>
   <p>人生不过三万天 开心一天是一天。这款魂，他的流动性和包裹性都很好，价格也很实惠，可以称得上性价比之王。</p>
   <div class="app">有4321个好评</div>
   <div class="info"><span class="s1"><a href="#">黑魂魂魂.........</a></span>
    <span class="s2">|</span><span class="s3">99.9元</span></div>
</div>
</body>
</html>

效果：

圆角边框

border-radius：length；length相当于半径；

由此可以做圆形等，如果是四个值，会顺时针设置四个边；

盒子阴影与文字阴影

盒子阴影

使用box-shadow属性为盒子添加阴影

盒子阴影
值	描述
h-shadow	必需；水平阴影位置；允许为负值。
v-shadow	必需；垂直阴影位置；允许为负值。
blur	可选；模糊距离。
spread	可选；阴影的尺寸。
color	可选；阴影颜色。
inset	可选；将外部阴影改为内部阴影。