前端学习记录~2023.6.30~CSS杂记 Day3 背景 & 边框 & 处理不同方向的文本-CSDN博客

本文链接：https://blog.csdn.net/Viator_mp3/article/details/131481025

前言
一、背景
二、边框
- 1. 圆角
三、处理不同方向的文本
总结

前言

由于有很多知识非常符合直觉或者和其他语言有通用性，因此个人觉得不需要全部记下来，本篇只记录一些个人觉得需要注意或单独记忆的知识点。

同时从本篇开始为了提高效率和不重要的时间投入，会考虑更加精简。

本篇主要涉及到背景、边框和处理不同方向的文本

一、背景

1. 背景颜色

background-color属性

.box {
  background-color: #567895;
}

2. 背景图像

background-image属性

默认情况下，大图不会缩小以适应盒子，因此我们只能看到它的一个小角，而小图则是平铺以填充方框

如果除了背景图像外，还指定了背景颜色，则图像将显示在颜色的顶部：

不加背景颜色
添加背景颜色

3. 控制背景平铺行为

background-repeat属性，可用的值有：

no-repeat：阻止背景重复平铺
repeat-x：仅水平方向上重复平铺
repeat-y：仅垂直方向上重复平铺
repeat：默认值，水平和垂直方向上都平铺

4. 调整背景图像的大小

background-size属性，它可以设置长度或百分比，来调整图像的大小以适应背景，也可以使用下面关键字：

cover：浏览器将使图像足够大，使它完全覆盖盒子区域的同时仍然保持其宽高比。这种情况下，图像的部分区域可能会跳出盒子外
contain：浏览器会将图像调整到适合框内的尺寸。在这种情况下如果图像的长宽比与盒子不同，则可能会看到空隙

5. 背景图像定位

background-position属性，默认为左上角坐标 (0, 0)

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top center;
}

最常见就是后面两个值，第一个是水平值第二个是垂直，可以用center或right这样的关键字，也可用长度和百分比

或者四值语法指示到盒子某些边的距离。
下面例子中，长度单位是与其前面的值的偏移量，所以例子中指将背景定位在距离顶部 20px 和右侧 10 px处

.box {
	background-image: url(star.png);
	background-repeat: no-repeat;
	background-position: top 20px right 10px;
}

6. 多个背景图像

background-image属性有多个值，用逗号分隔

可能会出现背景图片相互重叠，背景会分层，越靠前的越在上层。

其他background-*属性也可以类似这样用逗号分隔

background-image: url(image1.png), url(image2.png), url(image3.png),
  url(image4.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position: 10px 20px, top right;

对应位置的值互相匹配
如果数量不同则数量较少的值循环

7. 背景附加

background-attachment属性：

scroll：元素背景在页面滚动时跟着滚动，元素内容滚动时背景不动
fixed：始终保持在屏幕上固定位置，不会滚动
local：背景和元素绑定，元素发生滚动时背景随之滚动

可参考三种不同值的具体示例

二、边框

1. 圆角

border-radius属性，值可以为长度或百分比

传入两个用空格分隔开的值时，第一个值定义水平半径，第二个定义垂直半径

只传入一个值时则会同时用于两个

三、处理不同方向的文本

1. 书写模式、块级布局和内联布局

书写模式指文本排列方向

writing-mode属性：

horizontal-tb：对应文本方向为横向，块流向从上到下
vertical-rl：对应文本方向为纵向，块流向从右到左
vertical-lr：对应文本方向为纵向，块流向从左到右

writing-mode属性实际上设定的是页面上块级元素的显示方向——要么是从上到下，要么是从右到左，要么是从左到右。而这决定了文本的方向。

当我们切换书写模式时，我们也在改变块和内联文本的方向。horizontal-tb书写模式下块的方向是从上到下的横向的，而 vertical-rl书写模式下块的方向是从右到左的纵向的。因此，块维度指的总是块在页面书写模式下的显示方向。而内联维度指的总是文本方向

这张图展示了在水平书写模式下的两种维度。
在这里插入图片描述
这张图展示了在纵向书写模式下的两种维度

2. 逻辑属性和逻辑值

（1）映射属性

横向和纵向的文本如果用height或width调整可能会出现异常。因此 CSS 开发了一系列映射属性，这些属性用**逻辑（logical）和相对变化（flow relative）**代替像width和height一样的物理属性

横向书写模式下，映射到width的属性被称作内联尺寸（inline-size）—内联维度的尺寸。映射到height的属性被称为块级尺寸（block-size），这是块级维度的尺寸。

效果如下

.box {
  inline-size: 150px;
}

.horizontal {
  writing-mode: horizontal-tb;
}

.vertical {
  writing-mode: vertical-rl;
}

<div class="wrapper">
  <div class="box horizontal">
    <h2>Heading</h2>
    <p>A paragraph. Demonstrating Writing Modes in CSS.</p>
    <p>These boxes have inline-size.</p>
  </div>
  <div class="box vertical">
    <h2>Heading</h2>
    <p>A paragraph. Demonstrating Writing Modes in CSS.</p>
    <p>These boxes have inline-size.</p>
  </div>
</div>