html5盒子模型

news/发布时间2024/5/14 15:15:36

 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.bcls.cn/Vjuy/7634.shtml

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

相关文章

Python学习 --- 面向对象

1.什么是对象 1.Python中创建类的关键字是 class 2.类的成员方法 1.函数是写在类外面的,方法则是写在类里面的 1.上面这一段代码中就展示了如何在方法中访问类的成员变量: self.成员变量名 3.魔术方法 魔术方法其实就是python中的类中的内置方法,下面这几个只是我们比较常…

多输入时序预测|GWO-CNN-LSTM|灰狼算法优化的卷积-长短期神经网络时序预测(Matlab)

目录 一、程序及算法内容介绍: 基本内容: 亮点与优势: 二、实际运行效果: 三、算法介绍: 灰狼优化算法: 卷积神经网络-长短期记忆网络: 四、完整程序下载: 一、程序及算法内容…

清华系2B模型杀出支持离线本地化部署,可以个人电脑或者手机上部署的多模态大模型,超越 Mistral-7B、LLaMA-13B

清华系2B模型杀出支持离线本地化部署,可以个人电脑或者手机上部署的多模态大模型,超越 Mistral-7B、LLaMA-13B。 2 月 1 日,面壁智能与清华大学自然语言处理实验室共同开源了系列端侧语言大模型 MiniCPM,主体语言模型 MiniCPM-2B …

Vue前端对请假模块——请假开始时间和请假结束时间的校验处理

开发背景:Vueelement组件开发 业务需求:用户提交请假申请单,请假申请的业务逻辑处理 实现:用户选择开始时间需要大于本地时间,不得大于请假结束时间,请假时长根据每日工作时间实现累加计算 页面布局 在前…

iOS App 上架指南及关键

引言 上架App Store是将iOS应用提交申请并上线的过程,旨在让应用在App Store上展示,吸引用户并获取流量。本文将介绍iOS上架的整体流程,并提供一些建议和注意事项。 一、iOS上架的整体流程 1. 申请开发者账号 首先,需要申请苹…

ElementUI组件的安装和使用

Element UI 是一款基于 Vue 2.0 的桌面端组件库,主要用于快速构建网站的前端部分。它提供了丰富的组件,如按钮、输入框、表格、标签页等,以及一些布局元素,如布局容器、分割线等。Element UI 的设计风格简洁,易于上手&…

文心一言 VS 讯飞星火 VS chatgpt (203)-- 算法导论15.3 2题

二、对一个16个元素的数组,画出2.3.1节中MERGE-SORT过程运行的递归调用树。解释备忘技术为什么对MERGE-SORT这种分治算法无效。需要写代码的时候,请用go语言。 文心一言,代码不完整: 首先,让我们明确2.3.1节中的MERG…

计算机毕业设计 基于SpringBoot的宠物商城网站系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍:✌从事软件开发10年之余,专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ 🍅文末获取源码联系🍅 👇🏻 精…

【element+vue】点击加号增加一行,点击减号删除一行

代码实现&#xff1a; 页面部分&#xff1a; vueelement 备注&#xff1a;v-if “i>0” &#xff08;保证第一行不出现减号&#xff09; <div v-for"(item,i) in studentList"><el-form-item label"学生:" prop"name"><el-i…

机器学习:朴素贝叶斯算法(Python)

一、朴素贝叶斯算法的实现 naive_bayes_classifier.py import numpy as np import collections as cc # 集合的计数功能 from scipy.stats import norm # 极大似然估计样本的均值和标准方差 from data_bin_wrapper import DataBinsWrapperclass NaiveBayesClassifier:"…

线程的状态图

线程创建之后&#xff0c;调用start()方法开始运行。当线程执行wait()方法之后&#xff0c;线程进入等待状态。进入等待状态的线程需要依靠其他线程的通知才能够返回到运行状态&#xff0c;而超时等待状态相当于在等待状态的基础上增加了超时限制&#xff0c;也就是超时时间到达…

Redis集群搭建笔记

redis集群: 1.hash取余算法 2.一致性hash算法 3.哈希槽算法 以下使用哈希槽算法 Redis 3主3从搭建 新建6个Redis Docker容器实例 docker run -d --name redis-node-1 --net host --privilegedtrue -v /usr/local/develop/redis/share/redis-node-1:/data redis:6.0.8 --c…

C# 通过共享内存调用C++ 算法

需求&#xff1a; C#程序调用 C开发的dll. 一种C# 程序调用c 算法方案_算法怎么被c#调用-CSDN博客 上回书说到&#xff0c;将c算法封装为dll 插件&#xff0c;c加载后&#xff0c;暴露C风格接口&#xff0c;然后供C#调用。但是这样有几个问题&#xff1a; 1&#xff0c;一是…

解析ChatGPT Plus相比chatgpt3.5有哪些优势

「ChatGPT Plus」提供更出色的对话体验和更广泛的应用能力&#xff0c;学生可以用来写作、职场人也可以用来写计划书、策划书等等&#xff0c;并且问它一些问题比搜索引擎好用多了简直。但普通人使用起来有一点门槛&#xff0c;并且升级4.0也难住了许多爱好者。 ChatGPT主要功能…

设计模式——策略模式

定义: 该模式定义了一系列算法,并将每个算法封装起来,使它们可以相互替换,且算法的变化不会影响使用算法的客户。策略模式属于对象行为模式,它通过对算法进行封装,把便用算法的责任和算法的实现分割开来,并委派给不算法进象行管理。 主要角色如下: 示例: 假定现在需要实现一个…

Mybatis Plus 打印 SQL 语句(包含执行耗时)

文章目录 一、前言二、引入依赖三、添加配置3.1 第一步&#xff1a;修改 application.yml 配置文件3.2 第二步&#xff1a;添加 p6spy 配置文件 四、看看打印效果五、注意点 一、前言 我们先配置一下 Mybatis Plus 打印 SQL 功能&#xff08;包括执行耗时&#xff09;&#xf…

Python分支和循环结构及其应用(文末送书)

一、分支结构 应用场景 我们写的Python代码都是一条一条语句顺序执行&#xff0c;这种代码结构通常称之为顺序结构。然而仅有顺序结构并不能解决所有的问题。 if语句的使用 在Python中&#xff0c;要构造分支结构可以使用if、elif和else关键字。所谓关键字就是有特殊含义的…

【前端素材】推荐优质后台管理系统Uena平台模板(附源码)

一、需求分析 后台管理系统&#xff08;或称作管理后台、管理系统、后台管理平台&#xff09;是一种专门用于管理网站、应用程序或系统后台运营的软件系统。它通常由一系列功能模块组成&#xff0c;为管理员提供了管理、监控和控制网站或应用程序的各个方面的工具和界面。以下…

《现代职业教育》是什么级别的刊物?是正规期刊吗?能评职称吗?

​问题解答&#xff1a; 问&#xff1a;《现代职业教育》是什么级别的刊物&#xff1f; 答&#xff1a;省级 问&#xff1a;《现代职业教育》杂志版面费多少&#xff1f; 答&#xff1a;可以私信 问&#xff1a;《现代职业教育》是核心期刊吗&#xff1f; 答&#xff1a;…

IP对讲终端SV-6002(防水)

SV-6002&#xff08;防水&#xff09;是一款IP对讲终端&#xff0c;具有10/100M以太网接口&#xff0c;其接收网络的音频数据&#xff0c;解码后播放&#xff0c;外部DC12~24V电源供电端子&#xff0c;提供单路2W的音频输出。基于TCP/IP网络通信协议和数字音频技术&#xff0c;…
推荐文章