暑假前端知识速成【CSS】系列

大学生小郑

于 2024-07-06 00:03:42 发布

阅读量845

点赞数 45

分类专栏： html css 速成笔记文章标签： css 前端

本文链接：https://blog.csdn.net/m0_74948742/article/details/140213721

版权

html css 速成笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS三大特性

1.层叠性

2.继承性

3.优先级

优先级注意点

盒子模型边框border

border-style 属性指定要显示的边框类型。

允许以下值：

dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。

border-collapse: collapse;
border-collapse: separate;

collapse

相邻的单元格共用同一条边框（采用 collapsed-border 表格渲染模型）。

separate

默认值。每个单元格拥有独立的边框（采用 separated-border 表格渲染模型）。

1.CSS 内边距

CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。

通过 CSS，您可以完全控制内边距（填充）。有一些属性可以为元素的每一侧（上、右、下和左侧）设置内边距。

CSS 拥有用于为元素的每一侧指定内边距的属性：

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

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

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

提示：不允许负值。

为 <div> 元素的所有四个边设置不同的内边距：

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

padding - 简写属性

为了缩减代码，可以在一个属性中指定所有内边距属性。

如果 padding 属性有四个值：

padding: 25px 50px 75px 100px;
- 上内边距是 25px
- 右内边距是 50px
- 下内边距是 75px
- 左内边距是 100px

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

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

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

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

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

padding: 25px;
- 所有四个内边距都是 25px

内边距和元素宽度

CSS width 属性指定元素内容区域的宽度。内容区域是元素（盒模型）的内边距、边框和外边距内的部分。

因此，如果元素拥有指定的宽度，则添加到该元素的内边距会添加到元素的总宽度中。这通常是不希望的结果。

在这里，<div> 元素的宽度为 300px。但是，<div> 元素的实际宽度将是 350px（300px + 左内边距 25px + 右内边距 25px）：

div {
  width: 300px;
  padding: 25px;
}

若要将宽度保持为 300px，无论填充量如何，那么您可以使用 box-sizing 属性。这将导致元素保持其宽度。如果增加内边距，则可用的内容空间会减少。

使用 box-sizing 属性将宽度保持为 300px，无论填充量如何：

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

2.新浪导航案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新浪导航</title>
    <style>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: #fcfcfc;
            line-height: 41px;
        }

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

        .nav a:hover {
            background-color: #eee;
            color: #ff8500;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
    </div>
</body>

</html>

3.CSS 外边距

CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。

通过 CSS，您可以完全控制外边距。有一些属性可用于设置元素每侧（上、右、下和左）的外边距。

CSS 拥有用于为元素的每一侧指定外边距的属性：

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

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

auto - 浏览器来计算外边距
length - 以 px、pt、cm 等单位指定外边距
% - 指定以包含元素宽度的百分比计的外边距
inherit - 指定应从父元素继承外边距

提示：允许负值。

为 <p> 元素的所有四个边设置不同的外边距：

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Margin - 简写属性

如果 margin 属性有四个值：

margin: 25px 50px 75px 100px;
- 上外边距是 25px
- 右外边距是 50px
- 下外边距是 75px
- 左外边距是 100px

margin 简写属性设置四个值：

p {
  margin: 25px 50px 75px 100px;
}

如果 margin 属性设置三个值：

margin: 25px 50px 75px;
- 上外边距是 25px
- 右和左外边距是 50px
- 下外边距是 75px

使用已设置三个值的 margin 简写属性：

p {
  margin: 25px 50px 75px;
}

如果 margin 属性设置两个值：

margin: 25px 50px;
- 上和下外边距是 25px
- 右和左外边距是 50px

使用设置了两个值的 margin 简写属性：

p {
  margin: 25px 50px;
}

如果 margin 属性设置了一个值：

margin: 25px;
- 所有四个外边距都是 25px

使用设置一个值的 margin 简写属性：

p {
  margin: 25px;
}

auto值

您可以将 margin 属性设置为 auto，以使元素在其容器中水平居中。

然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。

使用 margin: auto：

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

inherit值

本例使 <p class="ex1"> 元素的左外边距继承自父元素（<div>）：

使用 inherit 值：

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

嵌套快元素塌陷

大学生小郑

关注

45
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
暑假前端知识速成【CSS】系列

暑假前端知识速成【CSS】系列
复制链接

扫一扫

专栏目录