走进前端技术栈 - CSS(中) | 青训营笔记

叮咚a
121 阅读3分钟

走进前端技术栈 - CSS(中) | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天

一、选择器的特异度

image.png 显而易见122>022则css样式会显示第一个

小技巧：

image.png 这样写的好处是，提高了代码的复用性，一般的按钮采取.btn样式，特殊的按钮采用.btn primary样式，.btn primary样式会覆盖掉.btn的文字颜色以及背景。则剩下的.btn的样式对特殊按钮依然有效。

二、继承性

image.png image.png 一般来说，在css中，和文字相关的属性都是可以继承的，跟盒子相关的属性都是不可继承的。

三、显式继承

image.png box-sizing是一个不可继承的属性，我们使用*通配一下，设定box-sizing的属性值为inherit，让所有元素都从父元素继承。

四、初始值

image.png 如果，向上父级一级一级的找，没有继承值，则他的css样式会遵循初始值。

五、css选值过程

image.png

image.png

image.png

六、布局

image.png 在没有使用box-sizing：box-size属性时，默认情况下，所定义的盒子宽度以及高度是content的宽度以及高度，这就是所谓内边距和边框会使盒子撑大的原因了。

image.png

image.png 最后一点，此盒子如果想使用百分数，前提他的父元素得有指定的高度，不能是auto。

image.png

image.png

image.png 当四条边框颜色不同时

      div{
        width: 200px;
        height: 200px;
        border-top: 50px solid red;
        border-bottom: 50px solid blue;
        border-right: 50px solid green;
        border-left: 50px solid pink;
      }
    </style>
</head>
<body>
   <div>

   </div>

image.png 当宽度和高度都设置为0时，就只剩下了边框，就有以下效果

      div{
        width: 0px;
        height: 0px;
        border-top: 50px solid red;
        border-bottom: 50px solid blue;
        border-right: 50px solid green;
        border-left: 50px solid pink;
      }
    </style>
</head>
<body>
   <div>

   </div>

image.png 这就得到四种颜色的正方形，如果把除红色以外的颜色换成透明色，就得到了红色三角形。调整边款粗细，可以改变三角形形状哦！

起始

image.png 修改

        width: 0px;
        height: 0px;
        border-top: 50px solid;
        border-bottom: 50px solid ;
        border-right: 50px solid ;
        border-left: 90px solid pink;
      }
结果

image.png

image.png

image.png

      div{
        width: 200px;
        height: 200px;
        margin: auto;
        background-color: aqua;
      }
    </style>

image.png 如果说，文字已经超过盒子大小

overflow:vislble|hidder|scroll

属性值vislble是直接显示出来

image.png hidder是直接把多的文字截取掉 scroll文字完整，添加滚轮。

image.png

思考：

没有CSS box-sizing属性

默认情况下，元素的宽度和高度计算如下： width + padding + border =元素的实际宽度 height + padding + border =元素的实际高度 这意味着：当您设置元素的宽度/高度时，元素通常看起来比您设置的大（因为元素的边框和填充被添加到元素的指定宽度/高度）。 下图显示了两个具有相同指定宽度和高度的

元素：

    <style>
        .div1 {
        width: 300px;
        height: 100px; 
        border: 1px solid blue;
        } 
        .div2 {
        width: 300px;
        height: 100px;
        padding: 50px;
        border: 1px solid red;
        } 
    </style> 
 <body>
     <div class="div1">这个div更小(宽度为300px，高度为100px)。
     </div> 
     <br> 
     <div class="div2">这个div更大(宽度也是300px，高度也是100px)。</div>
  </body>

显示效果如下
image.png 在 CSS 盒子模型的默认定义里，你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人。

box-size 属性可以被用来调整这些表现：

  • content-box是默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

  • border-box告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去 （border + padding） 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。 尺寸计算公式：

  • width= 边框 + 填充 + 内容的宽度

  • height= 边框 + 填充 + 内容的高度

image.png

avatar
文章
阅读
粉丝