前端 HTML/CSS

前端基础学习之HTML/CSS part two

Posted by OuterCyrex on July 14, 2024

三.CSS盒模型

页面中的每个标签都可以看做为一个“盒子”，常常有4个内容，从外到内分别为：margin、border、padding、content，对应的是：“外边距、边框、内填充、内容”

其中border是一个元素的最边界，border以外的内容不会被算入该元素(如宽度高度等)

其中，在我们设置一个box的宽度时，默认设置的是content的宽度。通常情况下，我们会将其更改为border-box，即设置为border的宽度，此时宽度便是border+padding+content。

1
2
3

*{
    box-sizing:border-box;
}

下边分别介绍这几种属性：

1.display

常用的<div>属于块级标签，其可以设置margin和padding等属性，且块级标签默认宽度为其所在容器的宽度。

1
2
3
4
5

<body>
<div style="background: deepskyblue">
     内容
</div>
</body>

如上述的代码，由于没有设置宽度，所以其宽度与<body>一致(<body>是他的容器)。

1
2
3
4
5

<div style="width: 100px">
<div style="background: deepskyblue">
     内容
</div>
</div>

我们也可以设置其容器，这样他会与容器采取一样的宽度。

display的常见参数有none、block、inline、inline-block，其中block(块盒)会将上下元素的margin合并成一个。

display:inline可以将块级标签转化为行内标签，但不同于行内标签的是，我们可以设置其padding、margin、border等属性.（width、height是不可以的）

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<style>
    .inline{
        display: inline;
    }
</style>
<!----------------------------------------------->
<div class="Outside">
    <div class="sub1 inline">
        我是sub1
    </div>
    <div class="sub2 inline">
        我是sub2
    </div>
</div>

若我们想修改其width和height，我们可以尝试将display值改为inline-block(行内块)

1
2
3
4
5
6
7
8
9

<style>
    .inline{
        display: inline-block;
    }
    .sub1{
        padding:100px;
        border:10px solid red;
    }
</style>

2.padding和margin

padding和margin可以通过增加left、right、top、bottom来分别设置其左右上下的padding和margin宽度。

也可以只写一个padding或margin，则上下左右都会被修改，第一个参数更改上下，第二个参数更改左右，如padding:20px 10px，则上下增加20px、左右增加10px。

对于padding和margin的多参数输入具有以下规则：

  • 两个参数：上下、左右
  • 三个参数：上、左右、下
  • 四个参数：上、右、下、左（顺时针）
1
2
3
4
5
6
7
8
9
10
11
12

.sub1{
    padding-left:10px;
    padding-right:100px;
    padding-bottom: 20px;
    padding-top: 30px;
    background: deepskyblue;
}
/*或使用padding速记形式*/
.sub1{
    padding: 30px 100px 20px 10px;
    background: deepskyblue;
}

注意：margin的值不会被计入到元素的宽度之中，且上下的margin会有折叠合并的效果。

3.border和outline

border具有三个可调节的参数：border-width、border-style、border-color，分别对应宽度、线的样式、颜色

也可以在两个关键字之间加入方位：

1
2
3

border-left-width: 10px ;
border-left-color:red;
border-left-style: solid;

border也可以通过radius来调整其圆角：

1

border-radius:5px;

其设置方式与padding或margin类似，但其上对应的是左上角。在border-radius的值为50%时，便为圆形。

如何设置三角形图案？可以通过下述的代码来实现：

1
2
3
4
5
6
7

div.box{
    width:0;
    height:0;
    border-width:50px;
    border-color:deepskyblue red green yellow;
    border-style: solid;
}

其中的颜色都可以替换为transparent来实现隐藏，以此来获得单一的三角形。

outline与border基本一致，但其不占用任何宽度，且不能单一设置某一方向，如left、right、top、bottom。

四.CSS定位

在CSS中，可以对某一元素进行的position进行调参，来实现定位的效果。

CSS中定位常常有五种参数：

定位值 描述
absolute 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位
fixed 生成固定定位的元素，相对于浏览器窗口进行定位。
relative 生成相对定位的元素，相对于其正常位置进行定位。
static 默认值，没有定位。
sticky 粘性定位，根据用户滚动位置进行定位。

1.相对定位

相对定位(relative)即相对该元素原本位置进行调整，但其实际仍然在原本位置，只是显示位置出现了调整。

这种性质被称为不脱离文档流，反之则为脱离文档流，如absolute

1
2
3

position: relative;
left:500px;
top:500px;

调整的left等方位的参照是与看网页的视角相反的。即想让元素右移，应调整其left值。

注：如果我们在已经调整定位的元素内添加后代元素，则后代元素会在调整位置后的元素内出现。

1
2
3
4
5
6
7
8
9
10
11
12
13

div.box{
    width:100px;
    height:100px
    background: deepskyblue;
    position: relative;
    left:500px;
    top:500px;
}
.sub{
    width: 40px;
    height: 40px;
    background: black;
}

2.绝对定位

绝对定位会向上寻找父级元素中position不为static的元素并以其为参照进行偏移，直至寻找到<body>

绝对定位会脱离文档流，其移动后原本的位置便会被其他元素占据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<style>
        *{
            box-sizing: border-box;
        }
        div.box{
           width:100px;
            height:100px;
            background: deepskyblue;
            position: relative;
            left:500px;
            top:500px;
        }
        .sub{
            width: 40px;
            height: 40px;
            background: black;
            position:absolute;
            left:-100px;
            top:-100px;
        }
</style>
<!--HTML文档-->
<div class="box">
    <div class="sub">
    </div>
</div>

上述代码中，sub为box的后代元素，当sub向上溯源寻找参照时，检测到box的position不为static，则会以box为参照物进行偏移。

3.固定定位

固定定位会脱离文档流，且是相对于浏览器的页面为参照的。

假定现在需要设计一个只在页面最上方固定的导航栏：

1
2
3

<div class="guide">
    我是导航栏
</div>

则可以使用fixed建立固定定位：

1
2
3
4
5
6
7
8

.guide{
    position: fixed;
    background: aquamarine;
    width:100%;
    height: 80px;
    top:0;
    left:-1px;
}

4.粘性定位

粘性定位会在到达某种状态之前保持relative效果，到达某种状态之后会转变为fixed。

粘性定位不会脱离数据量。

1
2
3
4
5
6
7

.sticky{
    width:100px;
    height: 100px;
    background: antiquewhite;
    position: sticky;
    top:30px;
}

5.z-index

z-index类似于图层的概念，可以设置不同元素位于哪一个图层。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.main{
            height: 100px;
            width: 100px;
            background: red;
            position: absolute;
}
.other{
            height: 100px;
            width: 100px;
            background: green;
            position: absolute;
            top:50px;
            left:50px;
}

上述的代码我们定义了两个元素，由于other在main之后被定义，因此other在main之上，要想让main在other之上，则可以调整二者的z-index来实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.main{
            height: 100px;
            width: 100px;
            background: red;
            position: absolute;
            z-index: 2;
}
.other{
            height: 100px;
            width: 100px;
            background: green;
            position: absolute;
            top:50px;
            left:50px;
            z-index: 1;
}

注：z-index默认为0，且数值大的在上方，数值小的在下方，且只能在已定位的非父子关系的元素上生效。

五.文字与背景

1.背景

在网页设计中，基本都需要设置背景图片。

background设置 作用
background-color 设置背景的颜色
background-image 设置背景的图片
background-size 设置图片的大小和覆盖方式(cover和contain)
background-repeat 设置图片的重复方式，也可以关闭重复。

此前我们使用background来设置背景颜色，实际应该使用background-color设置，而background下有很多其他参数，设置背景图片便需要使用background-image。

1
2
3
4
5

.box{
    width: 1000px;
    height: 500px;
    background-image:url("test.png");
}

注意，需要通过url()来将路径的字符串进行解析。且此处可以填写网址，也可以填写本地的相对地址。

background-size参数会更改图片的大小，若大小不足该box的大小，则会进行扩展填充。

background-size参数 作用
cover 保证整个元素会被图片占满
contain 保证图片会被完全显示

background-repeat:no-repeat可以设置图片不重复。不重复时若无法占满整个元素，则会显示此前设置的background-color。

1
2
3
4
5
6
7
8

.box{
    width:100%;
    height: 500px;
    background-image:url("test.png");
    background-size:contain;
    background-repeat:no-repeat ;
    background-color: deepskyblue;
}

background-repeat也可以设置如repeat-x的参数，来实现只有一个方向可以重复。

background-position可以设置图片相对于元素的位置，存入的两个参数分别为x轴和y轴。x轴为从左向右，y轴为从上到下。

2.渐变

渐变分为线性渐变和径向渐变。

以设置背景的线性渐变为例：

1
2
3
4
5
6

.box{
    width:100%;
    height: 500px;
    background-image:linear-gradient(to right,red,yellow);
    background-size:contain;
}

linear-gradient的第一个参数填入的是颜色渐变的方向，格式是to + 多个方向。之后可以传入多个颜色参数。

颜色后也可以填入百分数来实现颜色的移动。如：

1
2
3
4
5
6

.box{
     width:100%;
     height: 500px;
     background-image:linear-gradient(to top right,red 25%,blue);
     background-size:contain;
}

方向除了直接填上下左右外，也可以填入角度，格式为角度 + deg，比如0deg = to top、90deg = to right

1

background-image:linear-gradient(0deg,#a18cd1,#fbc2ed 100%);

ps：这个颜色渐变比较好看，在项目中也常常使用。

除了线性渐变外，还有径向渐变，即从中间向外的方式扩展。

1

background-image:radial-gradient(#a18cd1,#fbc2ed 100%);

此外也可以传入一些形状的参数来调整如circle或ellipse

除了可以设置形状外，径向渐变还可以使用repeating语句来设置重复：

1

background-image:repeating-radial-gradient(red 10%,blue 20%);

border设置渐变与background的区别：

border设置渐变使用的是border-image，且如果不进行参数调整，会发现只有四个角。

1
2

border:4px solid;
border-image:linear-gradient(0deg,#a18cd1,#fbc2ed 100%) 0 0 1 0;

如上，最后的四个数字代表哪个方向的边框会显示，0表示不显示，1表示显示。

此外可以通过背景渐变来实现文字渐变：

1
2
3
4
5
6
7
8
9
10
11

.head .left{
            display: inline-block;
            background-image:linear-gradient(0deg,#a18cd1,#fbc2ed 100%);
            background-clip:text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size:30px;
            position: relative;
            left:10px;
            top:20px;
}

此处设置inline-block实际是让背景与文字大小一致。

background-clip:text则是将背景按照文字进行切割。

-webkit只是为了支持webkit引擎的浏览器而作的补充，有些浏览器需要这个前缀才能实现效果。

text-fill-color则是将文字填充为transparent。

ps：可以在color.oulu.me网站上寻找一些好看的渐变效果。

3.文字

a.基础样式

下述是文字的常见设置，其中可继承意为后代元素会继承父级元素的设置。

CSS语句 作用
font-size 设置文字的大小，可继承
font-style 设置文字的样式，可继承
text-decoration 设置文字的上划线/下划线等，可继承
font-weight 设置文字的加粗，填入数字即可，可继承
text-indent 设置文字的缩进，可继承
text-transform 设置文字的大小写，可继承
height/spacing 设置文字的行距/字间距，可继承
white-space 对空白进行处理，可继承
overflow 超出显示时的设置
align 文字的对齐设置
font-family 字体设置，可继承

首先是font-style，主要设置字体的斜体或倾斜。二者一个是字体，一个是算法。

1
2
3

font-style:italic;  斜体
font-style:oblique;  倾斜字体
font-style:normal;	无效果

之后是text-decoration

1
2
3
4

text-decoration:none; 不画线，并删除任何现有的装饰。
text-decoration:underline;	下划线
text-decoration:line-through;	 中划线
text-decoration:overline;	上划线

此外也可以传入大小和颜色来设置划线的样式。

1

text-decoration:underline 10px red;

text-indent用于首行缩进，如：

1

text-indent: 2rem;	首行缩进2字符

text-transform用于转换大小写：

1
2
3
4

text-transform:capitalize 首字母全部大写
text-transform:uppercase  字母全部大写
text-transform:lowercase  字母全部小写
text-transform:none       正常

间距存在三个方面的更改，包括行间距、字符间距和单词间距：

1
2
3

line-height:1.5rem;	设置1.5倍行间距
letter-spacing:1.5rem;	设置1.5倍字符间距
word-spacing:1.5rem;	设置1.5倍单词间距

空白处理即是对空白内容或换行内容的设置：

1
2
3

white-space:pre;	保留换行
white-space:nowrap;  强制在一行中显示，会出现横向滚动条
white-space:normal;	不进行更改，默认设置

对于单行的文本省略，可以使用如下思路：

1
2
3

white-space: nowrap; 强制不换行
overflow: hidden;	将超出width的内容隐藏
text-overflow: ellipsis;	在超出width的地方添加省略号

对于多行的文本省略，则使用下列语句：

1
2
3
4
5

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;

其中display:box将文本用块元素的形式展示，并将块元素的换行方向转为了垂直，之后line-clamp即是限制一个块元素内显示的文本行数

b.文本对齐

语句 对齐形式
text-align 水平对齐
vertical-align 垂直对齐

首先介绍text-align，默认的对齐方式是左对齐，我们也可以进行更改：

  • center：居中对齐
  • left：居左对齐
  • right：向右对齐

注：对齐只对块级元素有效，对inline类型的元素无效。

一般的文本显示存在着四条线：顶线(top)、中线(middle)、基线(baseline)和底线(bottom)。

分别对应英文四线格中的四条线。

图片一般在与文字对齐时对齐的是基线而不是底线。

为了让图片与文字的底线对齐，增加美观，我们可以设置与底线对齐。

1
2
3
4

vertical-align:sub;	设置文本为下标
vertical-align:super; 设置文本为上标
vertical-align:top; 按照顶线对齐
vertical-align:bottom; 按照底线对齐

c.字体

font-family可以更改文字的字体

1
2

font-family:尝试使用的字体 缺省值;
font-family: "宋体", "方正舒体";

若我们想引入外部的字体，则需要使用@font-face来引入新字体

1
2
3
4
5
6
7

@font-face {
    src: url("./ZiXiaoHunLiLiangCuHeiTi(ShangYongXuShouQuan)-2.ttf");
    font-family: "新字体";
}
.line {
    font-family: "新字体","方正舒体";
}

其中src:url()即是输入字体的相对路径，font-family则是为新字体进行命名。

CATALOG
    FEATURED TAGS
    Web Golang 前端 Database Gin JavaScript MySQL GORM HTML/CSS Redis Vue
    FRIENDS