html5盒子模型

 1.边框的常用属性
border-color

属性

说明

示例

border-top-color

上边框颜色

border-top-color:#369;

border-right-color

右边框颜色

border-right-color:#369;

border-bottom-color

下边框颜色

border-bottom-color:#fae45b;

border-left-color

左边框颜色

border-left-color:#efcd56;

border-color

四个边框为同一颜色

border-color:#eeff34;

上、下边框颜色#369

左、右边框颜色#000

border-color:#369 #000;

上边框颜色#369

左、右边框颜色#000

下边框颜色#f00

border-color:#369 #000 #f00;

上、右、下、左边框颜色

#369#000#f00#00f

border-color:#369 #000 #f00 #00f;

border-width

属性

说明

示例

border-top-width

上边框粗细

border-top-width:5px;

border-right-width

右边框粗细

border-right-width:10px;

border-bottom-width

下边框粗细

border-bottom-width:8px;

border-left-width

左边框粗细

border-left-width:22px;

border-width

四个边框的粗细统一

border-width:5px;

上、下边框粗细:10px

左、右边框粗细:5px

border-width:10px  2px;

上边框粗细:5px

左、右边框粗细:1px

下边框粗细:6px

border-width:5px 1px 6px;

上、右、下、左边框粗细:

1px  2px  5px 2px

border-width:1px  2px  5px 2px;

border-style:
none
hidden
dotted
dashed:虚线边框
solid:实线边框
double

border:
border:1px solid #3a6587;
border:1px dashed red;

2.外边距margin
margin-top
margin-right
margin-bottom
margin-left
margin
网页居中对齐        margin:0px auto;

3.内边距padding
padding-left 
padding-right
padding-top
padding-bottom
padding

4.box-sizing属性
content-box:盒子的实际宽度和高度仅应用于元素内容,不包括内边距和边框
border-box:盒子的实际高度和宽度包括元素内容、边框和内边距
box-sizing:content-box  |  border-box  |  inherit;

5.圆角边框
border-radius: 20px  10px  50px  30px;

6.使用border-radius制作特殊图形
圆形
利用border-radius属性制作圆形的两个要点
元素的宽度和高度必须相同
圆角的半径为元素宽度的一半,或者直接设置圆角半径值为50%
半圆形
利用border-radius属性制作半圆形的两个要点
制作上半圆或下半圆时,元素的宽度是高度的2倍,而且圆角半径为元素的高度值。
制作左半圆或右半圆时,元素的高度是宽度的2倍,而且圆角半径为元素的宽度值
扇形
利用border-radius属性制作扇形遵循“三同,一不同”原则
“三同”是元素宽度、高度、圆角半径相同
“一不同”是圆角取值位置不同

7.盒子阴影
box-shadow:inset  x-offset  y-offset  blur-radius  color;
 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

phpldapadmin This base cannot be created with PLA

phpldapadmin This base cannot be created with PLA 1、问题描述2、问题分析3、解决方法:创建根节点 1、问题描述 安装phpldapadmin参考链接: https://blog.csdn.net/OceanWaves1993/article/details/136048686?spm1001.2014.3001.5501 刚安装完成phpldapadmin&…

括号生成(力扣题目22)

题目描述: 数字 n 代表生成括号的对数,请你设计一个函数,用于能够生成所有可能的并且 有效的 括号组合。 示例 1: 输入:n 3 输出:["((()))","(()())","(())()&q…

备战蓝桥杯————k个一组反转单链表

k个反转单链表,顾名思义就是k个节点为一组进行反转,这是一道困难的题目,如何解答,可以在我们前面的反转链表中得到思路。 如何 K 个一组反转单链表 题目描述 给你链表的头节点 head ,每 k 个节点一组进行翻转&#xf…

STC-ISP原厂代码研究之 V3.7d汇编版本

最近在研究STC的ISP程序,用来做一个上位机烧录软件,逆向了上位机软件,有些地方始终没看明白,因此尝试读取它的ISP代码,但是没有读取成功。应该是目前的芯片架构已经将引导代码放入在了单独的存储块中,而这存储块有硬件级的使能线,在面包板社区-宏晶STC单片机的ISP的BIN文…

802.11局域网的 MAC 帧

目录 802.11 局域网的 MAC 帧 802.11 数据帧的三大部分 1.关于 802.11 数据帧的地址 最常用的两种情况 2.序号控制字段、持续期字段和帧控制字段 802.11 局域网的 MAC 帧 802.11 帧共有三种类型:控制帧、数据帧和管理帧。 802.11 数据帧的三大部分 MAC 首部&…

千卡利用率超98%,详解JuiceFS在权威AI测试中的实现策略

2023 年 9 月,AI 领域的权威基准评测 MLPerf 推出了 Storage Benchmark。该基准测试通过模拟机器学习 I/O 负载的方法,在不需要 GPU 的情况下就能进行大规模的性能压测,用以评估存储系统的在 AI 模型训练场景的适用性。 目前支持两种模型训练…

07 Qt自绘组件:图片预览小组件ImageViewer

系列文章目录 01 Qt自定义风格控件的基本原则-CSDN博客 02 从QLabel聊起:自定义控件扩展-图片控件-CSDN博客 03 从QLabel聊起:自定义控件扩展-文本控件-CSDN博客 04 自定义Button组件:令人抓狂的QToolButton文本图标居中问题-CSDN博客 0…

CentOS7 Hive2.3.8安装

CentOS7 Hive2.3.8 安装 建议从头用我的博客,如果用外教的文件到 一、9)步骤了,就用他的弄完,数据库不一样,在9步骤前还能继续看我的 一、 安装MySQL 0.0)查询mariadb,有就去0.1),没有就不管…

element el-table表格内容宽度自适应,不换行,不隐藏

2024.2.27今天我学习了如何用el-table实现表格宽度的自适应,当我们动态渲染表格数据的时候,有时候因为内容太多会出现挤压换行的效果: 我们需要根据内容的最大长度设置动态的宽度,这边我在utils里面封装了一个js: //…

排序算法之快速排序(挖坑法)

挖坑法的思想:记第一个数为key,要调整key的位置,使得左边的都要比key的小,右边的数都比key的大。 记录下关键字keybegin,把28那个位置挖坑holebegin 让end找到小于28(key)的数,把那…

针对KZG承诺和高效laconic OT的extractable witness encryption

1. 引言 2024年以太坊基金会等成员论文 Extractable Witness Encryption for KZG Commitments and Efficient Laconic OT,开源代码实现见: https://github.com/rot256/research-we-kzg(Rust) 在该论文中,提供了一种…

c# ABB 机械手上位机连接

c# 程式开发和调试步骤如下: ABB 机械手要开启PC Interface功能。ABB 机械手设定ip地址。设定测试笔记本和机械手同一网段,用网线直连机械手,也可以通过交换机连接机械手。确保笔记本能够ping通和telnet 机械手80端口都是OK的。以上都OK的话…

语音合成(TTS) GPT-SoVITS认知

写在前面 小伙伴推荐,简单了解相对之前试过的其他的TTS项目,GPT-SoVITS的优点简单易用,文档完整,默认的模型效果就很好理解不足小伙伴帮忙指正 不必太纠结于当下,也不必太忧虑未来,当你经历过一些事情的时候…

【半监督医学图像分割 2021 IEEE】DU-GAN

【半监督医学图像分割 2021 IEEE】DU-GAN 论文题目:DU-GAN: Generative Adversarial Networks with Dual-Domain U-Net Based Discriminators for Low-Dose CT Denoising 中文题目:基于双域U-Net鉴别器的生成对抗网络用于低剂量CT去噪 论文链接&#xff…

LeetCode 热题 100 | 图论(上)

目录 1 200. 岛屿数量 2 994. 腐烂的橘子 2.1 智障遍历法 2.2 仿层序遍历法 菜鸟做题,语言是 C 1 200. 岛屿数量 解题思路: 遍历二维数组,寻找 “1”(若找到则岛屿数量 1)寻找与当前 “1” 直接或间接连接在…

考研数据结构算法机试训练1

中南大学上机压轴题 测试数据: 3 500 0.6 100 0.8 200 0.7 100 输出 390首先要对输入的折扣进行排序,优先使用比率低的z进行支付。 然后用lowcost记录目前多少钱是打过折的。T-lowcost就是剩余没打折的。 每次循环用上一个人的折扣额度。若所有人折扣额…

Android 跨进程通信aidl及binder机制详解(二)

跨进程通信流程 通过上文可发现,要实现跨进程通信,需要客户端、服务端、客户端与服务端通信规约也就是通过aidl生成的java接口。下面用一个图来表述: 对于上图的调用过程,我们做一下解释:上图中列了几个对象的关联关系…

windows安装部署node.js并搭建Vue项目

一、官网下载安装包 官网地址:https://nodejs.org/zh-cn/download/ 二、安装程序 1、安装过程 如果有C/C编程的需求,勾选一下下图所示的部分,没有的话除了选择一下node.js安装路径,直接一路next 2、测试安装是否成功 【winR】…

Windows系统x86机器安装(麒麟、统信)ARM系统详细教程

本次介绍在window系统x86机器上安装国产系统 arm 系统的详细教程。 注:ubuntu 的arm系统安装是一样的流程。 1.安装环境准备。 首先,你得有台电脑,配置别太差,至少4核8G内存,安装window10或者11都行(为啥不能是Window7,你要用也不是不行,你先解决win7补丁更新问题)。…

目标检测——车辆障碍物数据集

检测道路上障碍物对于道路安全、自动驾驶技术的发展以及交通流畅性都具有重要性和意义。以下是这些重要性和意义的详细解释: 道路安全 从道路安全的角度来看,小障碍物可能给行驶中的车辆带来潜在风险。例如,一个丢弃在道路上的轮胎或纸箱可能…