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;
 

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

BUUCTF crypto做题记录(9)新手向

一、rsa2 得到题目代码如下: N 101991809777553253470276751399264740131157682329252673501792154507006158434432009141995367241962525705950046253400188884658262496534706438791515071885860897552736656899566915731297225817250639873643376310103992170…

探究前端路由hash和history的实现原理(包教包会)

今天我们来讲一讲前端中很重要的一个部分路由(router),想必前端小伙伴对‘路由’一词都不会感到陌生。但是如果哪天面试官问你,能大概说一说前端路由的实现原理吗? 你又会如何应对呢? 今天勇宝就带着大家一…

41.仿简道云公式函数实战-数学函数-SUMIF

1. SUMIF函数 SUMIF 函数可用于计算子表单中满足某一条件的数字相加并返回和。 2. 函数用法 SUMIF(range, criteria, [sum_range]) 其中各参数的含义及使用方法如下: range:必需;根据 criteria 的条件规则进行检测的判断字段。支持的字段…

RC4算法

RC4 RC4是Ron Rivest为RSA设计的序列密码,RC4算法简单、速度快、容易用软硬件实现,因此应用广泛。比如WEP、WPA、SSL/TLS应用了RC4;Windows、Lotus notes、Apple APCE等软件系统也应用了RC4。 1. RC4算法 RC4具体算法如下: 第一步:密钥调度算法(The Key-Scheduling Alg…

3. Java中的锁

文章目录 乐观锁与悲观锁乐观锁(无锁编程,版本号机制)悲观锁两种锁的伪代码比较 通过 8 种锁运行案例,了解锁锁相关的 8 种案例演示场景一场景二场景三场景四场景五场景六场景七场景八 synchronized 有三种应用方式8 种锁的案例实际体现在 3 个地方 从字节码角度分析 synchroni…

排序(9.17)

1.排序的概念及其运用 1.1排序的概念 排序 :所谓排序,就是使一串记录,按照其中的某个或某些关键字的大小,递增或递减的排列起来的操作。 稳定性 :假定在待排序的记录序列中,存在多个具有相同的关键字的记…

OSI参考模型和TCP/IP网络参考模型

1、OSI参考模型 1.1 产生背景 为了解决网络之间的兼容性问题,实现网络设备间的相互通讯,国际标准化组织ISO于1984年提出了OSIRM(Open System Interconnection Reference Model,开放系统互连参考模型)。OSI参考模型很快成为计算机网络通信的基础模型。由于种种原因,并没有…

Redis高可用三主三从集群部署

文章目录 🔊博主介绍🥤本文内容使用宝塔面板搭建集群规划配置验证 使用docker搭建使用脚本搭建📢文章总结📥博主目标 🔊博主介绍 🌟我是廖志伟,一名Java开发工程师、Java领域优质创作者、CSDN博…

聊一聊bpmn-js中的elementFactory模块

上一篇文章里我们了解了bpmn-js使用palette模块进行左侧小工具区域(也可以理解为调色板区域)的功能扩展,今天这个话题则是延续上期的palette进行开展的。 从上篇文章《聊一聊bpmn-js中的Palette》我们知道,PaletteProvider通过getPaletteEntries方法提供小工具Map对象,而单…

Python 实现 CR 指标计算 (带状能量线):股票技术分析的利器系列(13)

Python 实现 CR 指标计算 (带状能量线):股票技术分析的利器系列(13) 介绍算法公式 代码rolling函数介绍核心代码计算MID计算CR计算移动平均 完整代码 介绍 CR指标,又称带状能量线,通过计算股价的动能和变化…

MySQL的21个SQL经验

1. 写完SQL先explain查看执行计划(SQL性能优化) 日常开发写SQL的时候,尽量养成这个好习惯呀:写完SQL后,用explain分析一下,尤其注意走不走索引。 explain select userid,name,age from user where userid =10086 or age =18;2、操作delete或者update语句,加个limit(S…

BTC网络 vs ETH网络

设计理念 BTC 网络 比特币是一种数字货币,旨在作为一种去中心化的、不受政府或金融机构控制的电子货币。其主要目标是实现安全的价值传输和储存,比特币的设计强调去中心化和抗审查。 ETH 网络 以太坊是一个智能合约平台,旨在支持分散的应…

计网Lesson15 - TCP可靠传输

文章目录 1. 停止等待ARQ协议2. 连续ARQ协议与滑动窗口协议 1. 停止等待ARQ协议 ARQ(Automatic Repeat–reQuest)自动重传请求 几种重传情况 发送端丢失 发送方过久没有接收到接收方的确认报,这种情况会触发超时重传机制,发送方…

瑞_Redis_Redis客户端

文章目录 1 Redis客户端1.1 Redis命令行客户端1.2 图形化桌面客户端1.2.1 资源准备1.2.2 安装1.2.3 建立连接 🙊 前言:本文章为瑞_系列专栏之《Redis》的基础篇的Redis客户端章节。由于博主是从B站黑马程序员的《Redis》学习其相关知识,所以本…

适配器模式(Adapter Pattern) C++

上一节:原型模式(Prototype Pattern) C 文章目录 0.理论1.组件2.类型3.什么时候使用 1.实践1.基础接口和类2.类适配器实现3.对象适配器实现 0.理论 适配器模式(Adapter Pattern)是一种结构型设计模式,它允…

通过Power automate上传文件到SharePoint

上传文件到SharePoint 背景过程Apps开发准备Flow开发SharePoint数据库测试 背景 我们通常都可以通过一些form表单直接上传文件,但是有些时候我们需要对文件名字等信息做一些处理。这个时候我们就需要将文件的内容json流化,然后在流中还原回来。 过程 …

OpenHarmony分布式购物车案例展示~

简介 分布式购物车demo 模拟的是我们购物时参加满减活动,进行拼单的场景;实现两人拼单时,其他一人添加商品到购物车,另外一人购物车列表能同步更新,且在购物车列表页面结算时,某一人结算对方也能实时知道结…

STM32存储左右互搏 QSPI总线FATS文件读写FLASH W25QXX

STM32存储左右互搏 QSPI总线FATS文件读写FLASH W25QXX FLASH是常用的一种非易失存储单元,W25QXX系列Flash有不同容量的型号,如W25Q64的容量为64Mbit,也就是8MByte。这里介绍STM32CUBEIDE开发平台HAL库Quad SPI总线实现FATS文件操作W25Q各型号…

第12章-生成树协议

1. STP产生背景 1.1 桥接网络:网桥 1.2 交换机网络 1.3 解决方案 2. STP生成树协议 2.1 概念 2.2 BPDU(Bridge Protocol Data Unit) 2.3 选举机制(网桥:一进一出) 2.4 例题 2.5 端口状态 2.6 STP计时器 2.7 STP的问题 …

家装服务管理:Java技术的创新应用

✍✍计算机毕业编程指导师 ⭐⭐个人介绍:自己非常喜欢研究技术问题!专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目:有源码或者技术上的问题欢迎在评论区一起讨论交流! ⚡⚡ Java、…