CSS知识点详解:div盒子模型

news2024/11/25 6:34:26

盒子模型:

边框:

border-color:边框颜色

border-width:边框粗细

1.thin

2.medium

3.thick

4.像素值

border-width:5px ; 
border-width:20px 2px;
border-width:5px 1px 6px;
border-width:1px 3px 5px 2px;

这个简写属性需要按照顺时针方向(从上到右)提供四个值,分别对应上、右、下、左四个边的宽度。如果只提供了三个值,那么第四个值将默认与第一个值相同。

border-style:边框样式

1.none 无边框

2.hidden 无边框

3.dotted 边框以点状方式绘制,每个点之间有间隙。

4.dashed 边框以虚线方式绘制,每个短划线之间有间隙。

5.solid 边框以实线方式绘制,没有间隙。

6.double 边框以双线方式绘制,两条线之间有间隙

border简写:

同时设置边框的宽度,样式,颜色

宽度样式颜色的顺序来简写

border:1px solid #3a6587;

外边距:margin

margin-top:

margin-right:

margin-bottom:

margin-left:

margin:

网页居中对齐:margin:0px auto 必要条件:块元素,固定宽度

内边距:padding

padding-left:

padding-right:

padding-top:

padding-bottom:

padding:

padding:20px 5px 8px 10px ; 
padding:10px 5px; 
padding:30px 8px 10px ; 
padding:10px;

盒子模型的尺寸:

内容宽度+内边距+外边距=盒子模型总尺寸

box-sizing:让盒子内容装在盒子里

因为盒子

border-radius圆角边框:

顺时针,从左上开始

用来给div盒子增加圆形边框

值越大圆的半径越大

border-radius: 20px  10px  50px  30px;

用border-radius制作圆形:不会

注意:高度和宽度一样

div{
            width: 100px;
            height: 100px;
            border: 4px solid red;
            border-radius: 50%;
        }

border-radius制作特殊图形

制作这个时,需要一个宽是高两倍的矩形,然后把上面的两个角变成圆的

宽100px高50px,圆角50%

border-radius: 20px  10px  50px  30px;

同样的,这个是宽50高100,圆角50%

盒子阴影:box-shadow

box-shadow:inset  x-offset    y-offset  blur-radius  color;
                  水平偏移量  垂直偏移量  模糊半径        颜色

阴影的水平偏移量为5像素,垂直偏移量为5像素,模糊半径为10像素,颜色为半透明的蓝色(使用RGBA表示法)。

.element {
  box-shadow: 5px 5px 10px rgba(0, 0, 255, 0.5);
}

向四周发散的阴影

box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0,0,0,0.2);

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

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

相关文章

豆瓣评分9.0!Python3网络爬虫开发实战,堪称教学典范!

今天我们所处的时代是信息化时代,是数据驱动的人工智能时代。在人工智能、物联网时代,万物互联和物理世界的全面数字化使得人工智能可以基于这些数据产生优质的决策,从而对人类的生产生活产生巨大价值。 在这个以数据驱动为特征的时代&#…

Python导出所有已安装包及其版本信息

目录 导出导入 如果使用了虚拟环境,则先激活当前项目虚拟环境 venv\Scripts\activate导出 在当前目录下生成一个requirement.txt文件,记录当前环境的所有pyhton依赖包及其版本信息。 pip freeze > requirement.txt导入 pip install -r requiremen…

C语言手撕实战代码_循环单链表和循环双链表

C语言手撕实战代码_循环单链表和循环双链表 循环单链表习题1.建立带头结点的循环链表2.设计一个算法,将一个带有头结点的循环单链表中所有结点的链接方向逆转3.设计一个算法,将一个循环单链表左移k个结点4.设计一个算法将循环单链表中的结点p的直接前驱删除5.设计算…

如何使用 Higress 快速构建 AI 应用?

随着 AI 时代到来,基于大模型的应用对网关提出了新的要求,例如在不同 LLM 提供商之间进行负载均衡、构建 AI 应用的可观测能力、基于 token 的限流保护与配额管理、AI 应用内容安全等等。Higress 基于企业内外的丰富场景沉淀了众多面向AI的功能&#xff…

pip3 : 无法将“pip3”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。

1.找到python安装目录底下的Scripts,复制该路径:你安装python的目录\Scripts 我本地的:D:\devSoftware\python-all\Python39\Scripts 2.将该路径配置到环境变量Path里面 我的电脑 - 右键属性 - 系统 - 环境变量 - 找到path点击编辑 - 新建&a…

家用超声波清洗机哪个品牌好用?实测解析四大高口碑超声波清洗机机型

提到超声波清洗机,很多人可能首先想到的是眼镜店或首饰店里的商用清洗设备。它们虽然功能强大,但价格较高且体积较大,并不适合家用。不过,现在有了一个更方便的选择:小型超声波清洗机。它们体积小巧,价格也…

9.cmake(string)

目录 1. 基本用法 2. string对于json的操作 3.代码段 1. 基本用法 以下通过截取字符串"begin test cmake string end "中的子串"test cmake string"来串联string中的部分用法,其中包括了FIND,LENGTH,SUBSTRING&#x…

linux搭建ceph集群

linux三节点搭建ceph集群 主机IP主机名称172.26.50.75node1172.26.50.112node2172.26.50.228node3 ceph-mon,ceph-mgr,ceph-mds都搭建在node1上,node2和node3上搭建ceph-osd,每个机器1个osd Ceph是一个分布式的存储系统&#x…

选择排序(直接选择排序和堆排序)

一、直接选择排序 1.基本思想 每一次从待排序的数据元素中选出最小(或最大)的一个元素,存放在序列的起始位置,直到全部待排序的数据元素排完。 2.动图展示 3.思路讲解 ①在元素集合array[i]—array[n-1]中选择关键码最大&…

个人博客系统-自动化测试

1、项目背景 1.1技术背景 1)个人博客系统主要是通过前端(HTMLcssjs)后端(SpringBoot)实现的一个博客的基本功能。前端通过jQuery的方式向后端请求数据。后端通过MyBatis从数据库中查询数据响应给前端。 2&#xff0…

天通报警呼叫柱助力宜宾——破汛期河心洲岛通信困境,守护人民群众生命安全

随着主汛期的到来,我国多地遭遇频繁降雨,强降雨或连绵不断的降雨,极易引发山洪、滑坡、泥石流等次生灾害。8月18日23时至20日10时,辽宁省西部地区出现暴雨到大暴雨,葫芦岛市部分乡镇出现特大暴雨。受到强降雨影响&…

Qt-QWidget的windowIcon属性(14)

目录 描述 相关API 使用 并不需要在堆上创建 不要带中文路径 运行观察 不要使用绝对路径 描述 这个其实就是你打开窗口的左上角那个图标,这个就是用来设置那个的 相关API 使用 创建一个新的项目,如下,添加一个设置图片的代码 并不需…

uboot中 fastboot udp 协议分析

注: 1. 本文所分析的fastboot源码不是android下的源码,而是恩智浦芯片厂商在IMX6UL芯片的uboot源码中自己实现的源码,二者不同,请读者注意区分。一些图片是网上找到的,出处不好注明,请见谅。 2. 分析fastbo…

VM——轮廓/快速匹配中的多模版匹配

1、轮廓或者快速匹配中支持建立多个模型,按照从上而下的顺序进行匹配,匹配上了即停止后续模版的匹配。 2、如果要多个模版都参与匹配,则需要打开“全部搜索模式”。 3、延拓阈值 “延拓阈值”,看参数名字不知所云,文档…

CR-NeRF 代码eval.py解析

这段代码是一个用于CR-NeRF(Neural Radiance Fields)模型的推理脚本。它主要用于生成和保存渲染的图像,并计算图像质量的评价指标(如PSNR和SSIM)。以下是对这段代码的详细解析: (1)…

【亚马逊云科技】有手就能做到的Amazon Lightsail快速建站

文章目录 前言一、为什么选择Amazon Lightsail二、创建账号与登录注册亚马逊账号登录控制台 三、创建Amazon Lightsail进入控制台创建实例实例配置查看实例查看网站定制页面 总结 前言 不论是个人名片还是官方网站都离不开网站建设工作。计算机技术经历漫长的发展,…

2024年如何将低质量视频变成高质量视频

创建低质量的视频对您没有好处,尤其是当您打算将这些视频上传到社交媒体帐户时。观众不喜欢观看模糊和低质量的视频,而这个东西没有意义,不会为你的内容增加价值。 那么,您应该如何确保您的社交媒体观众喜欢您的视频内容呢&#x…

企业内部知识库意义何在?怎么搭建?

引言 在知识经济时代,企业竞争力的核心日益转向知识的管理与应用能力。随着企业规模的扩大和业务复杂性的增加,如何高效地收集、整理、存储并分享内部知识,成为了企业持续发展和创新的关键。企业内部知识库应运而生,它不仅帮助企…

自定义注解+拦截器实现,对部分敏感字段的加解密

上一篇,我用的自定义注解AOP的方式,实现敏感字段的加解密,这一篇换个方案,这个方案相比一个方案,节省了一部分的性能开销 第一步:新建自定义注解 /*** 敏感信息类注解*/ Inherited Target({ElementType.TYPE}) Retention(RetentionPolicy.RUNTIME) public interface EnableSe…

tomcat session共享

1. 日志监控工具 安装 tar xf goaccess-1.4.tar.gz cd goaccess-1.4/ yum install GeoIP-devel-1.5.0-13.el7.x86_64.rpm yum install -y ncurses-devel.x86_64 ./configure --enable-utf8 --enable-geoiplegacy make make install2. 使用 goaccess /usr/local/nginx/logs/a…