css中新型的边框设置属性border-block

border-block 是 CSS 中的一个属性，主要用于在样式表中一次性设置元素的逻辑块向边框的属性值。这个属性是简写属性，可以同时设置 border-block-width、border-block-style 和 border-block-color。其中，border-block-start 用于设置元素的开始边界样式，而 border-block-end 用于设置元素的结束边界样式。在 CSS Grid 或 Flexbox 布局中，它尤其有用，因为它可以让你同时控制元素的顶部和底部边框，或者左侧和右侧边框，而无需分别指定 border-top、border-bottom、border-left 和 border-right。以下是关于 border-block 属性的详细介绍：

1. 语法与属性值

/* 简写形式 */
border-block: <border-width> || <border-style> || <color>;
/* 单独分开属性 */
border-block-width: <border-width>;
border-block-style: <border-style>;
border-block-color: <color>;/* 不同方向分开形式 */
border-block-start: <border-width> || <border-style> || <color>;
border-block-end: <border-width> || <border-style> || <color>;/* 设置开始方向分开形式 */
border-block-start-width: <border-width>;
border-block-start-style: <border-style>;
border-block-start-color: <color>;/* 设置结束方向分开形式 */
border-block-end-width: <border-width>;
border-block-end-style: <border-style>;
border-block-end-color: <color>;
  • <border-width>：指定边框宽度，可以是具体的长度单位（如 px、em）、百分比、关键词（如 thin、medium、thick）或 initial、inherit。
  • <border-style>：定义边框样式，如 solid（实线）、dashed（虚线）、dotted（点状线）、double（双线）等，还包括 none（无边框）、hidden（隐藏边框）以及 initial、inherit。
  • <color>：指定边框颜色，可以是颜色名称、十六进制、RGB/RGBA、HSL/HSLA、关键字（如 transparent）或 currentColor。

2. 工作原理

border-block 属性遵循 CSS 的物理盒模型，根据元素的书写模式（writing mode）确定边框的位置。在默认的水平书写模式（writing-mode: horizontal-tb）下：

  • border-block-start 对应于 border-top。
  • border-block-end 对应于 border-bottom。

当书写模式改变时，如设置为垂直模式（如 writing-mode: vertical-rl 或 vertical-lr），border-block 的行为也会相应调整：

  • border-block-start 对应于 border-left 或 border-right。
  • border-block-end 对应于 border-right 或 border-left。

3. 使用示例

/* 简写形式，同时设置左右边框为 1px 宽度的实线红色边框 */
.example {border-block: 1px solid red;
}/* 长度形式，分别设置顶部和底部边框 */
.example {border-block-start: 2px dotted blue;border-block-end: 3px groove green;
}/* 分别设置边框宽度、样式和颜色 */
.example {border-block-width: thick;border-block-style: double;border-block-color: #333;
}

案例效果：https://jsrun.net/vJ5Kp/
4. 特性与优势

  • 响应式布局友好：在响应式设计中，当页面布局发生变化（如从水平变为垂直方向）时，使用 border-block 可以确保边框位置自动适应新的书写模式，无需额外编写媒体查询或更改其他样式。
  • 代码简洁：相比单独设置四个边框属性，border-block 可以减少重复代码，提高代码可读性和维护性。
  • 对齐控制：在 CSS Grid 或 Flexbox 布局中，border-block 有助于更精确地控制元素的对齐和间距，特别是在处理多列、多行布局时。

5. 注意事项

  • 浏览器兼容性：虽然 border-block 是 CSS Logical Properties and Values Level 1 规范的一部分，但并非所有浏览器都完全支持。在编写代码时，需要考虑兼容性问题，可能需要提供 fallback 方案或使用 autoprefixer 进行前缀处理。
  • 与传统边框属性的关系：border-block 不会覆盖传统的 border-top、border-bottom、border-left、border-right 或 border 属性。如果同时设置了这些属性和 border-block，浏览器将按照层叠顺序（CSS specificity）决定最终应用的样式。

总结，border-block 属性为 CSS 开发者提供了更符合逻辑思维方式的边框控制方式，特别是在处理响应式布局和复杂网格、弹性布局时，能够简化代码、提升效率并增强布局的灵活性。但在实际应用中需关注浏览器兼容性，并合理结合传统边框属性进行样式设定。

兼容性：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/4174.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Lagent AgentLego 智能体应用搭建-笔记六

Lagent AgentLego 智能体应用搭建-笔记六

本次课程由Lagent&AgentLego 核心贡献者樊奇老师讲解【Lagent & AgentLego 智能体应用搭建】课程 课程视频&#xff1a;https://www.bilibili.com/video/BV1Xt4217728/ 课程文档&#xff1a;https://github.com/InternLM/Tutorial/tree/camp2/agent 大语言模型的局限…
阅读更多...
2024全国大学生高新技术竞赛——算法智星挑战赛（A~J）

2024全国大学生高新技术竞赛——算法智星挑战赛（A~J）

好多都是之前的原题&#xff0c;甚至有上次第二届全国大学生信息技术认证挑战赛的原题&#xff0c;刚打完又来一遍&#xff0c;没绷住。 A. 手机 原题之一&#xff0c;具体出处忘了 最无脑的方法直接用map记录每个按下的值就行了&#xff0c;代码仅供参考。 #include <bit…
阅读更多...
appium相关的知识

appium相关的知识

>adb shell dumpsys window | findstr mCurrentFocus adb devices # 实例化字典 desired_caps = dict() desired_caps[platformName] = Android desired_caps[platformVersion] = 9 # devices desired_caps[deviceName] = emulator-5554 # 包名 desired_caps[appPackage] …
阅读更多...
【云原生系列】云计算概念与架构设计介绍

【云原生系列】云计算概念与架构设计介绍

1 什么是云计算 云计算是一种基于互联网的计算模式&#xff0c;在这个模式下&#xff0c;各种计算资源&#xff08;例如计算机、存储设备、网络设备、应用程序等&#xff09;可以通过互联网实现共享和交付。云计算架构设计的主要目标是实现高效、可扩展、可靠、安全和经济的计算…
阅读更多...
Android Studio开发之路（八）Spinner样式设置

Android Studio开发之路（八）Spinner样式设置

一、需求 白色背景显示下拉框按钮 问题&#xff1a; 设置Spinner的背景可以通过设置background&#xff1a; android:background"color/white",但是一旦设置了这个值&#xff0c;右侧的下拉按钮就会消失 方法一、自定义一个style&#xff08;不成功&#xff09; …
阅读更多...
Packet Tracer - 交换机安全配置解析

Packet Tracer - 交换机安全配置解析

第一步先连线SW1连到SW2接口连接G0/2到G0/2 指令配置 SW-1 SW-1>enable SW-1#conf t Enter configuration commands, one per line. End with CNTL/Z. SW-1(config)#interface range G0/1-2 SW-1(config-if-range)#switchport mode SW-1(config-if-range)#switchport no…
阅读更多...
多批道处理算法

多批道处理算法

一、实验目的&#xff1a; 了解多道批处理系统的工作原理和调度算法熟悉先来先服务调度算法&#xff08;First Come First Served, FCFS&#xff09;的实现学习如何模拟多道批处理系统的调度过程 实验设备与实验环境&#xff1a; 计算机,Java编译系统,idea,ChatGPT 二、实验程…
阅读更多...
Golang实现一个批量自动化执行树莓派指令的软件(8)辅助模块-远程IP端口是否开放连接(TCP)

Golang实现一个批量自动化执行树莓派指令的软件(8)辅助模块-远程IP端口是否开放连接(TCP)

简介 基于 上篇 Golang实现一个批量自动化执行树莓派指令的软件(7)辅助模块-本地活动网络&#xff0c; 看看本地活动网络接口网络里面有哪些设备是支持ssh网络的。 环境描述 运行环境: Windows&#xff0c; 基于Golang&#xff0c; 暂时没有使用什么不可跨平台接口&#xff0c;…
阅读更多...
Linux驱动开发——（八）Linux异步通知

Linux驱动开发——（八）Linux异步通知

目录 一、异步通知简介 二、信号处理 2.1 驱动程序中的处理 2.1.1 fasync_struct结构体 2.1.2 fasync操作函数 2.1.3 kill_fasync函数 2.2 应用程序中的处理 三、驱动代码 一、异步通知简介 异步通知的核心就是信号。信号类似于硬件上使用的中断&#xff0c;只不过信号…
阅读更多...
TCP协议是如何保证数据可靠传输的？

TCP协议是如何保证数据可靠传输的？

一、什么样的数据传输是可靠的&#xff1f; 数据正确&#xff1a;传递 123 &#xff1b;接收 123数据顺序正确&#xff1a;传递123 &#xff1b;接收不能是 321或其他数据不重复&#xff1a;传递123 &#xff1b;接收不能是1223或其他数据不被篡改&#xff1a;传递 123 &#…
阅读更多...
sqlserver 开启发布订阅模式

sqlserver 开启发布订阅模式

主服务器 用于发布与分发 从服务器 订阅 分发服务器的概念&#xff0c;是指用于管理发布与订阅的交互&#xff0c;这里用发布服务器充当即可 主服务器操作&#xff1a; 按需选择&#xff0c;一般选择快照发布 如果不需要排除列则不做任何选择 定义执行时间 这里配置连接到…
阅读更多...
WPF之RadioButton单选框和checkbox多选框

WPF之RadioButton单选框和checkbox多选框

RadioButton 单选框: 实现分组的单选框&#xff0c; checkbox 多选框: 表示用户可以选择和清除的控件。 常用属性 GroupName 获取或设置指定哪些 RadioButton 控件互相排斥的名称Content内容IsChecked是否选中 常用事件 checked 选中的事件unchecked 未选中的事件 RadioBu…
阅读更多...
Linux server

Linux server

查看服务器版本&#xff1a; rootpsh-ats-02:/# cat /etc/issue Ubuntu 16.04.3 LTS \n \l rootpsh-ats-02:/# chromedriver --version ChromeDriver 103.0.5060.53 (a1711811edd74ff1cf2150f36ffa3b0dae40b17f-refs/branch-heads/5060{#853}) rootpsh-ats-02:/# google-chrome…
阅读更多...
Web前端开发 小实训（二） 简易计算器

Web前端开发 小实训（二） 简易计算器

实训目的 学生能够使用函数完成简易计算器编写 操作步骤 1、请将加减乘除四个方法生成为以下函数&#xff0c;且有返回值 中文英语加法add减法subtract乘法multi除法division次幂pow()平方根sqrt() 提示&#xff1a; 除法中的除数不能为0&#xff01; 参考代码&#xff1…
阅读更多...
Web 服务器（一）

Web 服务器（一）

一、Web 服务器介绍 1、WEB服务简介 目前最主流的三个Web服务器是Apache、Nginx、 IIS。 Web服务器一般指网站服务器&#xff0c;是指驻留于因特网上某种类型计算机的程序&#xff0c;可以向浏览器等 Web客户端提供文档&#xff0c;也可以放置网站文件&#xff0c;让全世界浏览…
阅读更多...
ES6 Module 的加载实现，浏览器加载，ES6 模块与 CommonJS 模块具体解析（2024-04-23）

ES6 Module 的加载实现，浏览器加载，ES6 模块与 CommonJS 模块具体解析（2024-04-23）

目录 1、浏览器加载 1.2 加载规则 1.3 ES6 模块与 CommonJS 模块的差异 2、Node.js 的模块加载方法 2.1 概述 2.1.1 package.json 的 main 字段 2.1.2 package.json 的 exports 字段 &#xff08;1&#xff09;子目录别名 &#xff08;2&#xff09;main 的别名 &…
阅读更多...
super与this

super与this

目录 原型链与继承继承中的原型链 classsuper与this 我们可能会对一个问题感到好奇&#xff1a;为什么在派生类中&#xff0c;我们需要在调用this之前调用super。我们通常将其视为一种规范&#xff0c;却很少深入探究这个规范的真正意义。许多人认为super不过是ES6之前继承方式…
阅读更多...
python作业 切片逆转

python作业 切片逆转

题目&#xff1a; &#xff08;反转显示一个整数&#xff09;编写下面的函数&#xff0c;反向显示一个整数。 列如&#xff1a;reserse(3456)。编写一个测试程序&#xff0c;提示用户输入一个整数&#xff0c;然后显示它的反向数。 第一步定义一个函数&#xff1a; def rev…
阅读更多...
Django——Auth模块以及admin站点

Django——Auth模块以及admin站点

Django——Auth模块 一、Auth 模块 Auth 用户认证&#xff0c;本质上也是设置 Session。 Django 认证系统同时处理认证和授权认证&#xff1a;验证一个用户是否为 django 声明的用户&#xff0c;如果是可以进行登录授权&#xff1a;决定一个已经验证的用户有哪些功能是允许操…
阅读更多...
Python3操作redis百万级数据迁移，单机到单机，集群到集群

Python3操作redis百万级数据迁移，单机到单机，集群到集群

Python3操作redis大量数据迁移 脚本 背景使用前使用注意事项脚本总结 背景 之前写过一个用python迁移redis的脚本&#xff0c;但是对于小批量的数据、单节点的&#xff0c;还可以用。对于大量数据&#xff0c;集群模式的就不太适合了。所以写了下面的脚本&#xff0c;而且做了…
阅读更多...
最新文章

Copyright @ 2022~2023