html5盒子模型

news2024/9/29 19:18:29

 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://www.coloradmin.cn/o/1473006.html

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

相关文章

请求包的大小会影响Redis每秒处理请求数量

文章目录 🔊博主介绍🥤本文内容压测规划客户端长连接数量对性能的影响请求包大小的影响Pipleline模式对Redis的影响 📢文章总结📥博主目标 🔊博主介绍 🌟我是廖志伟,一名Java开发工程师、Java领…

pyspark分布式部署随机森林算法

前言 分布式算法的文章我早就想写了,但是一直比较忙,没有写,最近一个项目又用到了,就记录一下运用Spark部署机器学习分类算法-随机森林的记录过程,写了一个demo。 基于pyspark的随机森林算法预测客户 本次实验采用的…

springboot-基础-eclipse配置+helloword示例

备份笔记。所有代码都是2019年测试通过的,如有问题请自行搜索解决! 目录 配置helloword示例新建项目创建文件 配置 spring boot官方有定制版eclipse,也就是STS,因为不想再装,所以考虑eclipse插件安装jdk和eclipse安装…

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

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

【QT+QGIS跨平台编译】之五十三:【QGIS_CORE跨平台编译】—【qgssqlstatementparser.cpp生成】

文章目录 一、Bison二、生成来源三、构建过程一、Bison GNU Bison 是一个通用的解析器生成器,它可以将注释的无上下文语法转换为使用 LALR (1) 解析表的确定性 LR 或广义 LR (GLR) 解析器。Bison 还可以生成 IELR (1) 或规范 LR (1) 解析表。一旦您熟练使用 Bison,您可以使用…

python Matplotlib Tkinter-->最终框架一

3D雷达上位机实例(能够通过点击柱状图来展示3D雷达数据)2024.2.26 环境 python:python-3.12.0-amd64 包: matplotlib 3.8.2 pillow 10.1.0 import matplotlib.pyplot as plt from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg, NavigationToolbar2Tk impor…

【数据结构】线性表 顺序表(动态、静态分配,插入删除查找基本操作)解析+完整代码

1.线性表的基本概念 定义 线性表(Linear List)是具有相同数据类型的n个数据元素的有限序列。 n为表长,n0时线性表是个空表 前驱、后继 前驱:其中一个数据元素的前一个元素。第一个元素没有前驱。后继:其中一个数据元素…

索引使用规则1——最左前缀法则

这篇文章主要介绍索引的使用规则——最左前缀法则,关于索引的效率,可以查看上一篇文章索引的有效性 最左前缀法则:索引使用了复合索引,也就是联合索引,使用一个索引名称索引了好几个字段。在这类索引中需要遵守最左前…

Unity零基础到进阶 | Unity中的 RectTransformUtility 方法整理汇总

Unity零基础到进阶 ☀️| RectTransformUtility 方法整理汇总一、RectTransformUtility 官方文档1.1 RectTransformUtility.CalculateRelativeRectTransformBounds(重)1.2 RectTransformUtility.FlipLayoutAxes1.3 RectTransformUtility.FlipLayoutOnAxi…

pytorch -- CIFAR10 完整的模型训练套路

网络结构 代码 # CIFAR 10完整的模型训练套路: import torch.optim import torchvision from torch import nn from torch.utils.data import DataLoader from torch.utils.tensorboard import SummaryWriterfrom model import *# 1. 准备数据集 train_data torch…

用 React 实现搜索 GitHub 用户功能

用 React 实现搜索 GitHub 用户功能 在本篇博客中,我们将介绍如何在 React 应用中搜索 GitHub 用户并显示他们的信息。 创建 React 应用 首先,我们使用 Create React App 创建一个新的 React 应用。Create React App 是一个快速搭建 React 项目的工具…

【QT+QGIS跨平台编译】之五十四:【QGIS_CORE跨平台编译】—【qgssqlstatementlexer.cpp生成】

文章目录 一、Flex二、生成来源三、构建过程一、Flex Flex (fast lexical analyser generator) 是 Lex 的另一个替代品。它经常和自由软件 Bison 语法分析器生成器 一起使用。Flex 最初由 Vern Paxson 于 1987 年用 C 语言写成。 “flex 是一个生成扫描器的工具,能够识别文本中…

Vue笔记(一)

常用指令 1.v-show与v-if底层原理的区别 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>创建一个V…

【教3妹学编程-算法题】匹配模式数组的子数组数目 I

3妹&#xff1a;2哥2哥&#xff0c;你有没有看到上海女老师出轨男学生的瓜啊。 2哥 : 看到 了&#xff0c;真的是太毁三观了&#xff01; 3妹&#xff1a;是啊&#xff0c; 老师本是教书育人的职业&#xff0c;明确规定不能和学生谈恋爱啊&#xff0c;更何况是出轨。 2哥 : 是啊…

好用的IP反查接口

IP-API.com - Geolocation API - Documentation - JSON 自定义返回参数调用&#xff08;1&#xff09;&#xff1a; http://ip-api.com/json/24.48.0.1?fieldsstatus,message,country,countryCode,region,regionName,cityhttp://ip-api.com/json/24.48.0.1?fieldscountry,co…

读人工不智能:计算机如何误解世界笔记04_数据新闻学

1. 计算化和数据化的变革 1.1. 每一个领域都在进行计算化和数据化的变革 1.1.1. 出现了计算社会科学、计算生物学、计算化学或其他数字人文学科 1.1.2. 生活已走向计算化&#xff0c;人们却一点也没有变 1.2. 在如今的计算化和数据化世界中&#xff0c;调查性新闻的实践必须…

vue - - - - Vue3+i18n多语言动态国际化设置

Vue3i18n多语言动态国际化设置 前言一、 i18n 介绍二、插件安装三、i18n配置3.1 创建i18n对应文件夹/文件3.2 en-US.js3.3 zh-CN.js3.4 index.js 四、 mian.js 引入 i18n配置文件五、 组件内使用六、使用效果 前言 继续【如何给自己的网站添加中英文切换】一文之后&#xff0c…

【MySQL】SQL 优化

MySQL - SQL 优化 1. 在 MySQL 中&#xff0c;如何定位慢查询&#xff1f; 1.1 发现慢查询 现象&#xff1a;页面加载过慢、接口压力测试响应时间过长&#xff08;超过 1s&#xff09; 可能出现慢查询的场景&#xff1a; 聚合查询多表查询表数据过大查询深度分页查询 1.2 通…

【Flink精讲】Flink反压调优

Flink 网络流控及反压的介绍&#xff1a; Apache Flink学习网 反压的理解 简单来说&#xff0c; Flink 拓扑中每个节点&#xff08;Task&#xff09;间的数据都以阻塞队列的方式传输&#xff0c;下游来不及消费导致队列被占满后&#xff0c;上游的生产也会被阻塞&#xff0c;…

Jessibuca 插件播放直播流视频

jessibuca官网&#xff1a;http://jessibuca.monibuca.com/player.html git地址&#xff1a;https://gitee.com/huangz2350_admin/jessibuca#https://gitee.com/link?targethttp%3A%2F%2Fjessibuca.monibuca.com%2F 项目需要的文件 1.播放组件 <template ><div i…