深入与使用CSS | 青训营笔记

XCZJust
120 阅读7分钟

深入与使用CSS | 青训营笔记

这是我参与 第四届青训营 笔记创作活动的的第3天

3c574f6185d39495c1f81850ba6eda88744f35531bca4-axhYz6_fw658.webp

上一篇我们简单的提及了CSS的一些性质，包括css的引入方式，选择器，三大特性，本篇我们将继续深入写一些CSS的性质，可能讲不全，但足够使用。

盒子模型

所谓盒子模型，就是把HTML页面中的元素看做一个个矩形的盒子，CSS用于修饰HTML元素，包括边框，外边距，内边距和其他内容。在选择器中，可改变border以改变边框，padding属性改变内边距，margin改变外边距，还有其它属性下面会简单提及：

3.1.png

padding：改变内边距

CSS 可以修改四个边的内边距，通过修改下面的四个属性：

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

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

  • length - 以 px、pt、cm 等单位指定内边距
  • % - 指定以包含元素宽度的百分比计的内边距
  • inherit - 指定应从父元素继承内边距

同时padding属性也可简写，不需要带上-top这些，实例如下；

<!DOCTYPE html>
<html lang="en">
<head>
    <title>内边距数据</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            /* padding: 10px;  四边都相距10像素 */
            /* padding: 10px 20px; 上下10像素，左右20像素 */
            /* padding: 20px 30px 20px; 上下20像素，左右30像素 */
            padding: 10px 20px 30px 40px; /*上下左右依次为10,20,30,40像素 */
        }
    </style>
</head>
<body>
    <div>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
</body>
</html>

结果：

3.2.png 如果 padding 属性有四个值:

  • padding: 10px 20px 30px 40px; 那么
    • 上内边距是 10px
    • 右内边距是 20px
    • 下内边距是 30px
    • 左内边距是 40px

如果 padding 属性设置了三个值：

  • padding: 25px 50px 75px;
    • 上内边距是 25px
    • 右和左内边距是 50px
    • 下内边距是 75px

margin：改变外边距

margin可以为四条边都设置边距，分别使用：

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

去控制上，右，下，左的外边距距离：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
  background-color: lightblue;
}
</style>
</head>
<body>

<div>这个 div 元素的上外边距为 100 像素，右外边距是 150 像素，下外边距是 100 像素，左外边距是 80 像素。</div>

</body>
</html>

运行结果 3.3.png

同时margin属性也可简写，同padding的规则。

border：设置边框的属性

border属性用处很多，可改变边框样式，边框粗细，边框颜色，改变边框的四个角，甚至可单独改变四条边中的某一边，下面简单列举：

边框样式： border-style可用于设置元素块的边框样式，CSS可设置不同的样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>盒子边框</title>
    <style>
        div{
            display: inline-block;
            width: 80px;
            height: 80px;
            border-width: 3px;
        }
        .a{ border-style: dashed;}
        .b{ border-style: dotted;}
        .c{ border-style: groove;}
        .d{ border-style: hidden;}
        .e{ border-style: inset;}
        .f{ border-style: outset;}
        .g{ border-style: solid;}
        .h{ border-style: ridge;}
        /* 连写不讲顺序，只要有边框颜色，样式，粗细即可 */
        .h{ border: 12px ridge skyblue;}
    </style>
</head>
<body>
    <!-- 盒子边框会加上原始盒子宽度，也就是边框是边框，盒子是盒子 -->
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e"></div>
    <div class="f"></div>
    <div class="g"></div>
    <div class="h"></div>
</body>
</html>

运行结果：

3.4.png

边框宽度：

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

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



边框颜色：

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

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

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

注释：如果未设置 border-color，则它将继承元素的颜色。



圆角边框： border-radius 属性用于向元素添加圆角边框：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>圆角边框</title>
    <style>
        .a{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            /* border-radius: 100px; 等同于border-radius：50%*/
            border-radius: 50%;
        }
        .b{
            width: 200px;
            height: 100px;
            background-color: skyblue;
            border-radius: 50px;
        }
        .c{
            width: 200px;
            height: 150px;
            background-color: skyblue;
            /* border-radius: 10px 20px 30px 40px; */
            /* 左上，右上，右下，左下 */
            /* 该属性也可进行简写，比如详细定义某个角需要变化（左上。。。） */
            border-top-left-radius: 20px;
        }
    </style>
</head>
<body>
    <h4>圆形做法</h4>
    <div class="a"></div>
    <h4>圆角矩形</h4>
    <div class="b"></div>
    <h4>不同角图形</h4>
    <div class="c"></div>
</body>
</html>

运行结果：

3.5.png 上面的代码是对border-radius的不同测试，由上可知，可通过设置不同的像素距离改变尖角的弯曲距离。

CSS定位

网页需要排版，也就需要设置各网页元素的位置。position 属性规定应用于元素的定位方法的类型（static、relative、fixed、absolute 或 sticky）。 position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：

  • static
  • relative
  • fixed
  • absolute
  • sticky

元素其实是使用 top、bottom、left 和 right 属性定位的。但没有设置定位，四个属性也不起作用。因此HTML元素默认情况下的定位方式为 static（静态）。该模式下不受 top、bottom、left 和 right 属性的影响。也就是说 position: static 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位：

相对定位： relative

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

设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。也就是说，在一个元素移动后，后面一个元素并不会改变位置，不会造成脱标的现象。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>相对定位</title>
    <style>
        .top,.down{
            width: 200px;
            height: 200px;
        }
        .top{
            background-color: red;
            position: relative;
            top: 100px;
            left: 100px;
        }
        .down{
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- 相对定位是基于原来位置进行定位，在移动后不会出现浮动脱标，原先位置不会被占有 -->
    <div class="top"></div>
    <div class="down"></div>
</body>
</html>

运行结果：

3.6.png

可以看到，红色方块元素移动位置后，蓝色方块并不会占用其位置。

绝对定位：absolute

position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

通俗易懂来讲，绝对定位是根据最近的父级元素来定位，而不是根据网页。

3.7.png

绝对定位也可能出现脱标现象，请注意：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>绝对定位(3)</title>
    <style>
        .father{
            width: 400px;
            height: 400px;
            background-color: gray;
            position: relative;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: black;
            position: absolute;
            top: 200px;
            left: 200px;
        }
        .son1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- 绝对定位会脱标 -->
    <div class="father">
        <div class="son"></div>
        <div class="son1"></div>
    </div>
</body>
</html>

结果：

3.8.png 可以很明显的看到，红色元素脱离了原先的位置，这就是脱标现象。

固定定位：fixed

顾名思义，固定定位就是组件固定在某一位置，无论页面怎么变化它还是不会改变其位置。

粘性定位：sticky

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

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。

<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>请试着在这个框架内<b>滚动</b>页面，以理解粘性定位的原理。</p>

<div class="sticky">我是有粘性的！</div>

<div style="padding-bottom:2000px">
  <p>在此例中，当您到达元素的滚动位置时，粘性元素将停留在页面顶部（top: 0）。</p>
  <p>向上滚动以消除粘性。</p>
  <p>一些启用滚动的文本.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>一些启用滚动的文本.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

</body>
</html>

浮动

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

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

  • left - 元素浮动到其容器的左侧
  • right - 元素浮动在其容器的右侧
  • none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
  • inherit - 元素继承其父级的 float 值

最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果。

3.9.png

浮动有三大特性：

  • 当设置为浮动块时，不管原先是怎么样，都会变成行内块样式
  • 浮动元素都由一行显示 一行放不下自动换行
  • 脱标，当盒子浮动时，相当于盒子起飞了，两个盒子处于不同高度，未浮动的盒子会脱离原来的位置

最后：

本文写得仓促，内容也缺了很多，后续会继续更新。文章内容选自学习的笔记和w3c教程网站，w3c网站非常的好用，自学或者查资料都可以用到它。

avatar
文章
阅读
粉丝