前端~css~基准线与行高、行距和半行距/圆角矩形~

最新推荐文章于 2024-11-11 16:57:31 发布

Salute-Y

最新推荐文章于 2024-11-11 16:57:31 发布

阅读量2.2k

点赞数 3

分类专栏： Java API LeetCode 文章标签： java 开发语言后端

本文链接：https://blog.csdn.net/Merciful_Lion/article/details/123317298

版权

Java API 同时被 2 个专栏收录

38 篇文章 2 订阅

订阅专栏

LeetCode

14 篇文章 0 订阅

订阅专栏

文章目录

行高、行距与半行距
背景控制
圆角矩形

行高、行距与半行距

在HTML文件中，展示的文字涉及到这几个基准线：

顶线
中线
基线
底线

这四条线分别对应了图中的位置，在 vertical-align属性中，有top、middle、baseline、bottom，就和这四条线有关。
行高是指上下文本行的基线间的垂直距离，即下图中两条线间的垂直距离。
行距是指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。
半行距是行距的一半，即下图区域三垂直距离/2.区域1，2，3，4的距离之和为行高，而区域1，2，4距离之和为字体size，所以半行距也可以这么算：（行高-字体size）/2。

在这里插入图片描述
行高在CSS中是line-height属性，该属性设置了航舰导弹距离。（行高）

该属性会影响行框的布局，在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离

可能的值

在这里插入图片描述

在chrome控制台中，选中一个元素，可以修改其属性。
在这里插入图片描述

在上篇文章中已经介绍过了text-align属性

text-align属性是控制文字水平方向对齐。
line-height控制文字垂直方向对齐~

设置行高=父元素的高度，就可以实现文字垂直居中对齐的效果（特指单行文本），如果是多行文本，要更复杂一点…

背景控制

背景颜色
属性background-color 可以用来指定背景色

默认的transparent（透明）的。可以通过设置颜色的方式修改(即透过这个元素，看到该元素的父级元素)

background-color属性的值和color的值的写法格式完全相同。

可以支持单词
可以支持#十六进制
可以支持rgb
可以支持rgba

使用：

<style>
    body {
        background-color: #f3f3f3;
   }
    .bgc .one {
        background-color: red;
   }
    .bgc .two {
        background-color: #0f0;
   }
    .bgc .three {
        /* 背景透明 */
        background-color: transparent;
   }
</style>
<div class="bgc">
    <div class="one">红色背景</div>
    <div class="two">绿色背景</div>
    <div class="three">透明背景</div>
</div>

背景图片

background-image 属性为元素设置背景图像。

一般在image后添加一个URL（图片路径）

元素的背景占据了元素的全部尺寸，包括内边距和边距，但不包括外边距。默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

代码及效果展示：
在这里插入图片描述
背景平铺
***background-repeat***属性设置了是否及如何重复背景图像。

默认地，背景图像在水平和垂直方向上重复。
从原图像开始重复，原图像由background-image定义，并根据background-position的值。

背景颜色和背景图片可以同时存在，背景图片在背景颜色的上方。

在这里插入图片描述

背景位置
background-position属性设置成背景图像的起始位置。

可能的值/可以输入的参数：
在这里插入图片描述
从上图我们可以看到，参数有三种风格：
1.方位名词（top,left,right,bottom）
2.精确单位:坐标或者百分比（以左上角为原点）
3.混合单位：同时包含方位名词和精确单位。

注意：
计算机中的坐标系一般指的是左手坐标系。（和高中数学上常用的右手坐标系不一样，y轴是往下指的）
在这里插入图片描述

使用：

<style>
     .bgp.one{
         background-image: url("male.png");
         height:500px;
         background-repeat: no-repeat;
         background-color: purple;
         /*设置图片的起始位置*/
         background-position: center;
     }
</style>
<body>
<div class="bgp">
     <div class="one">背景居中</div>
</div>

效果：
在这里插入图片描述

背景尺寸

background-size属性规定背景图片的尺寸。

background-size：length|percentage|cover|contain

可以填具体的数值：如40px,60px 表示宽度为40px,高度为60px.
也可以填百分比：按照父元素的尺寸设置。
cover:把背景图像扩展至足够大，使背景图像完全覆盖背景区域。
contain:把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

使用：

<style>
     .bgp.one{
         background-image: url("male.png");
         height:500px;
         background-repeat: no-repeat;
         background-color: purple;
         /*设置图片的起始位置*/
         background-position: center;
         background-size: contain;
     }
</style>
<body>
<div class="bgp">
     <div class="one">背景居中</div>
</div>

注意区分cover和contain的区别：

cover :
在这里插入图片描述
contain:

圆角矩形

***border-radius***属性设置圆角矩形~
即使边框带圆角效果

border-radius: length

这里的length是内切圆的半径，数值越大，弧线越强烈。

很多网页的头像是一个圆形，就是通过border-radius属性值设为50%

<div class="one">
    这是一个按钮
</div>

<style>
    .one{
        height: 50px;
        width: 200px;
        background-color: gray;
        border-radius: 25px;
        
        text-align: center;
        line-height: 50px;
    }

    .one:active{
        background-color: orange;
        color:white;
    }
</style>