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

devtools/2024/11/15 5:01:57/

盒子模型:

边框:

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.ppmy.cn/devtools/97805.html

相关文章

【STM32 FreeRTOS】信号量与互斥锁

二值信号量 二值信号量的本质是一个队列长度为1的队列,该队列就只有空和满两种情况,这就是二值。 二值信号量通常用于互斥访问或任务同步,与互斥信号量比较类似,但是二值信号量有可能会导致优先级翻转的问题,所以二值…

湖州网站建设快速建站

在当今信息化时代,网站的建设已成为企业和个人展示形象、传播信息的重要途径。湖州作为一个历史悠久、文化底蕴深厚的城市,发展迅速,涌现出许多需要快速建立网站的企业和个人。本文将探讨湖州网站建设的快速建站方案。 首先,快速建…

http request-01-XMLHttpRequest XHR 标准

http 请求系列 http request-01-XMLHttpRequest XHR 简单介绍 http request-01-XMLHttpRequest XHR 标准 Ajax 详解-01-AJAX(Asynchronous JavaScript and XML)入门介绍 Ajax XHR 的替代方案-fetch Ajax XHR 的替代方案-fetch 标准 Ajax 的替代方案…

【CAN-IDPS】汽车网关信息安全要求以及实验方法

《汽车网关信息安全技术要求及试验方法》是中国的一项国家标准,编号为GB/T 40857-2021,于2021年10月11日发布,并从2022年5月1日起开始实施 。这项标准由全国汽车标准化技术委员会(TC114)归口,智能网联汽车分会(TC114SC34)执行,主管部门为工业和信息化部。 该标准主要…

go 系列之 once

一、简介 once 方法用于保证指定函数只执行一次。例如配置懒加载,客户端获取密钥等场景,都可以用到once。 二、技术实现 2.1 Once.go type Once struct {done atomic.Uint32m Mutex }func (o *Once) Do(f func()) {if o.done.Load() 0 {o.doSlow(…

使用哪种方式可以将 MATLAB 算法转换到FPGA中运行?

FPGA在进行相关算法计算时,一般都会使用高级语言进行算法验证,目前比较常见的就是 MATLAB ,那么使用哪种方式可以将MATLAB中实现的算哒转换到FPGA中? 目前可以通过多种方式在 FPGA 中实现算法。 Simulink HDL Coder MathWorks 提供…

小程序商城被盗刷,使用SCDN安全加速有用吗?

在电子商务蓬勃发展的今天,小程序商城因其便捷性和灵活性成为商家和消费者的新宠。然而,随着其普及,小程序商城的安全问题也日益凸显,尤其是盗刷现象频发,给商家和用户带来了巨大损失。面对这一挑战,是否可…

springboot的学习(四):bean的加载和控制

简介 主要是加载bean的方式已经加载bean的控制 spring加载bean方式 在xml中使用bean标签声明bean,启动类中使用ClassPathXmlApplicationContext加载xml在xml中自定义命名空间,配置自动扫描,对于加载自定义的bean,在类上添加com…