【CSS】盒子模型

  • width 宽度 、height 高度 、padding 内边距 、margin 外边距 ( 外边距合并、子元素外边距塌陷问题 )
  • border 边框
  • border-radius 圆角
  • box-shadow 阴影
  • overflow 溢出
  • float 浮动 ( 父元素塌陷问题 )

盒子模型(Box Model )是指在网页设计中,用于描述和布局元素的一种模型。它将每个元素看作是一个具有四个边界的矩形盒子,包括内容区域(content)、内边距(padding)、边框(border)和外边距(margin)

width 宽度 、height 高度 、padding 内边距 、margin 外边距 ( 外边距合并、子元素外边距塌陷问题 )

margin / padding说明margin / padding说明
1个值四方相同2个值上下    左右
3个值上    左右    下4个值上     右     下      左

浏览器会自带 8px 的 margin 外边距

<style>
	div{
		/* 内容区域 */
		width: 200px;
		height: 200px;
		/*
			padding-方位名词  margin-方位名词

			设置元素水平居中(margin: x auto;)
		*/
		margin: 10px 20px 30px 40px;
		padding: 20px;

		/* 盒子尺寸 = 内容尺寸 + border尺寸 + 内边距尺寸 */
		border: 1px solid red;

		/* 防止盒子撑大方法:(1)手动减法 border/padding 的尺寸(2)内减模式 box-sizing:border-box 自动去计算占据的宽高 */
		box-sizing: border-box;
	}
</style>
<div></div>

效果:
在这里插入图片描述
外边距合并问题

垂直排列的兄弟元素,上下 margin 合并两个 margin 中较大值生效;左右则会相加

<style>
	.one,.two,.three,.four{ width: 200px;height: 50px; float: left;}
	.clear::after{
		content: "";
		display: block;
		clear: both;
	}
	.one{
		background-color: #145eff;
		margin-right: 20px;
	}
	.two{
		background-color: #ffec00;
		margin-left: 30px;
	}
	.three{
		background-color: #09c90c;
		margin-right: 40px;
	}
	.four{
		background-color: #ee00ff;
		margin-left: 60px;
	}
	.div1{
		margin-bottom: 30px;
	}
	.div2{
		 margin-top: 20px;
	 }
</style>
<div class="clear div1">
	<div class="one"></div>
	<div class="two"></div>
</div>
<div class="clear div2">
	<div class="three"></div>
	<div class="four"></div>
</div>

效果:
在这里插入图片描述

子元素外边距塌陷问题

<style>
	/*
		父子级的标签;子元素 margin-top 会将值传递给父元素产生塌陷问题,导致父
		级一起向下运动;子元素 margin-bottom 会将值给传递使父元素产生下外边距
	*/
	.one,.four{ width: 180px;height: 50px;}
	.one{ background-color: #0067ff; }
	.four{ background-color: #ff0000; }
	.two{
		background-color: #fdf10d;width: 100px;height: 100px;
		margin-top: 20px; /* 导致父元素下拉 */
	}
	.three{
		background-color: #ed0dfd;width: 100px;height: 100px;
		margin-bottom: 20px; /* 使父元素产生下外边距 */
	}
	.fu{
		width: 180px;background-color: #00b905;
		/* 解决方法:
					1.给父元素加边框
					2.给父元素设置 overflow: hidden(也能触发BFC)
					3.给父元素通过 ::before 或 ::after 添加子元素(推荐)
						.clear::after,.clear::before{
							content: "";
							display: table;
							clear: both;
						}
					4.设置内边距(方法1,方法4会将元素扩大)

		*/
		/*overflow: hidden;*/
		/*border: 1px solid red;*/
		/*padding: 10px 0;*/
	}
	.clear::after,.clear::before{
		content: "";
		display: table;
		clear: both;
	}
</style>
<div class="one"></div>
<div class="fu clear">
	<div class="two"></div>
	<div class="three"></div>
</div>
<div class="four"></div>

效果:
在这里插入图片描述

border 边框

none:无边框; solid:实线边框,默认; double:双线边框; dashed:虚线边框; dotted:点线边框。允许单独对某一方向的边框线: top bottom left right

<style>
	body{
		display: flex;
	}
	div{
		width: 200px;height: 100px;
		margin-left: 20px;
	}
	div:nth-of-type(1){
		border: 10px double #0048ff;
	}
	div:nth-of-type(2){
		border-top: 10px double #ffea00;
		border-bottom: 10px dashed #0fa612;
		border-left: 10px dotted #ff00dd;
		border-right: 10px solid #ff0000;
	}
</style>
<div></div>
<div></div>

效果:
在这里插入图片描述

border-radius 圆角

个数说明个数说明
1个值四个角相同2个值左上+右下    左下+右上
3个值左上    右上+左下    右下4个值左上    右上    右下    左下
<style>
	body{
	display: flex;align-items: center;flex-wrap: wrap;
	}
	div{
		width: 120px;height: 120px;border: 1px solid red;margin: 0 20px 20px 0;
	}
	div:nth-of-type(1){
		border-radius: 30px;
	}
	div:nth-of-type(2){
		border-radius: 50%;
	}
	div:nth-of-type(3){
		width: 150px;height: 70px;
		border-radius: 50px;
	}
	div:nth-of-type(4){
		border-radius: 5px 50% 50% 50%;
	}
	div:nth-of-type(5){
		border-radius: 50% 0% 0% 50%;
	}
	div:nth-of-type(6){
		border-radius: 10% 100% 10% 0%;
	}
</style>
<div></div><div></div><div></div>
<div></div><div></div><div></div>

效果:
在这里插入图片描述

box-shadow 阴影

属性值:x轴偏移量γ轴偏移量模糊半径扩散半径颜色内 \ 外阴影。可以设置多个阴影效果,每个阴影效果之间用逗号分隔

<style>
	div{
		width: 100px;height: 100px;border: 1px solid red;margin: 20px;float: left;
	}
	#div1{
		/*
			x轴偏移量(必写)
			γ轴偏移量(必写)
			模糊半径(值越大阴影越模糊)
			扩散半径(阴影的半径大小,值越大阴影越大)
			颜色
			内外阴影(外阴影默认;内阴影inset,而且扩散半径数值越大阴影往内扩散越大,直到铺满盒子)
		*/
		box-shadow: 10px -10px 5px 2px red;
	}
	#div2{
		box-shadow: -10px 10px 5px 2px #46b5ff;
	}
	#div3{
		box-shadow: -10px -10px 20px 2px #ffda4a inset;
	}
	#div4{
		box-shadow: 10px 10px 5px 2px #67ff38 inset;
	}
	#div5{
		box-shadow: -10px 5px 8px 30px #b3ff07 inset;
	}
	#div6{
		box-shadow: -10px 5px 8px 20px #ffb8f3;
	}
	#div7{
		box-shadow: 10px 5px 8px 7px #6fffe5,
		25px 5px 8px 15px #db8fff;
	}
</style>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>

效果:
在这里插入图片描述

overflow 溢出

<style>
	div{
		width: 200px;height: 200px;border: 1px solid red;

		/* 
			visible:默认值      hidden:溢出隐藏(有清除浮动、清除margin-top塌陷的功能)
			scroll:溢出滚动(无论是否溢出,均显示滚动条位置)     auto:溢出滚动(溢出才显示滚动条位置)
		*/
		overflow-y: scroll;
	}
</style>
<div>
	<h6>文字1</h6>
	<h6>文字2</h6>
	<h6>文字3</h6>
	<h6>文字4</h6>
	<h6>文字5</h6>
	<h6>文字6</h6>
</div>

效果:
在这里插入图片描述

float 浮动 ( 父元素塌陷问题 )

left:左对齐,right:右对齐。浮动元素会脱离标准流 (脱标),不再保留原先的位置。浮动的元素会具有行内块元素的特性,此时不会有行内块元素间隙问题。浮动元素一行显示且顶端对齐排列,超出父级宽度就换行。父元素一般不设置高度而由内容决定,内容浮动后就会造成塌陷问题

<style>
	.one div{
			width: 100px;height: 100px;
			float: left;
			/*
				1.给塌陷的父元素最后添加一个没有意义的儿子元素(不推荐)
							.clearDiv{ clear: both; }

				2.给父元素设置overflow: hidden,能够解决因为触发了BFC(BFC是一种块
				级格式化文档,是一种网页的隐藏格式,默认渲染页面是不会触发)

				3.谁塌陷就给谁加 class="clear"(推荐)
			*/
	}
	.clear::after{
		content: "";
		display: block;
		clear: both;
	}
	.one{
		overflow: hidden;
	}
	.one div:nth-of-type(1){ background-color: #0fa612;}
	.one div:nth-of-type(2){ background-color: #ffec00;}
	.one div:nth-of-type(3){ background-color: #145eff;}
	.one div:nth-of-type(4){ background-color: #d655ff;}
</style>
<div class="one clear">
	<div>块1</div>
	<div>块2</div>
	<div>块3</div>
	<div>块4</div>
</div>

效果:
在这里插入图片描述
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux云计算 |【第四阶段】RDBMS1-DAY2

主要内容&#xff1a; 常用函数&#xff08;函数分类1&#xff1a;单行、分组&#xff1b;函数分类2&#xff1a;字符、数学、日期、流程控制&#xff09;、分组查询group by、连接查询 一、常用函数 1. 按使用方式分类 ① 单行函数 单行函数&#xff08;Scalar Functions&…

老古董Lisp实用主义入门教程(12):白日梦先生的白日梦

白日梦先生的白日梦 白日梦先生已经跟着大家一起学Lisp长达两个月零五天&#xff01; 001 粗鲁先生Lisp再出发002 懒惰先生的Lisp开发流程003 颠倒先生的数学表达式004 完美先生的完美Lisp005 好奇先生用Lisp来探索Lisp006 好奇先生在Lisp的花园里挖呀挖呀挖007 挑剔先生给出…

构建高可用和高防御力的云服务架构第二部分:SLB负载均衡(2/5)

在现代云服务中&#xff0c;负载均衡&#xff08;Load Balancing&#xff09;是一种关键技术&#xff0c;用于优化资源利用、最小化响应时间、提高系统的可伸缩性和可靠性。负载均衡器位于客户端和服务器之间&#xff0c;根据预设的策略将请求分发到多个服务器上&#xff0c;以…

如何使用ssm实现基于web的山东红色旅游信息管理系统的设计与实现

TOC ssm716基于web的山东红色旅游信息管理系统的设计与实现jsp 绪论 1.1研究背景 从古到今&#xff0c;信息的录入&#xff0c;存储&#xff0c;检索都受制于社会生产力的发展&#xff0c;不仅仅浪费大量的人力资源还需要浪费大量的社会物资&#xff0c;并且不能长时间的保…

计算机前沿技术-人工智能算法-生成对抗网络-算法原理及应用实践

计算机前沿技术-人工智能算法-生成对抗网络-算法原理及应用实践 1. 什么是生成对抗网络&#xff1f; 生成对抗网络&#xff08;Generative Adversarial Networks&#xff0c;简称GANs&#xff09;是由Ian Goodfellow等人在2014年提出的一种深度学习模型&#xff0c;主要用于数…

JavaEE: 深入探索TCP网络编程的奇妙世界(三)

文章目录 TCP核心机制TCP核心机制三: 连接管理建立连接(三次握手)断开连接(四次挥手)三次握手/四次挥手 流程简图 TCP核心机制 前一篇文章 JavaEE: 深入探索TCP网络编程的奇妙世界(二) 书接上文~ TCP核心机制三: 连接管理 建立连接(三次握手),断开连接(四次挥手). 这里的次数…

二叉树的前序遍历,中序遍历,后序遍历(非递归方法+C语言代码)

#include<stdlib.h> #include<stdio.h> #include<assert.h> #include<stdbool.h> //定义一个二叉树结点结构体 typedef int ElemTpye; typedef struct TreeNode {ElemTpye data;struct TreeNode* left;struct TreeNode* right; }TreeNode; //创建结点 …

【中间件——基于消息中间件的分布式系统的架构】

1. 基于消息中间件的分布式系统的架构 从上图中可以看出来&#xff0c;消息中间件的是 1&#xff1a;利用可靠的消息传递机制进行系统和系统直接的通讯 2&#xff1a;通过提供消息传递和消息的排队机制&#xff0c;它可以在分布式系统环境下扩展进程间的通讯。 1.1 消息中间件…

影视站群程序大对比,苹果cmsv10 vs海洋cms

在影视站群程序领域&#xff0c;苹果CMSv10和海洋CMS是两款备受站长们青睐的程序。它们分别具备各自的优势&#xff0c;适合不同需求的站群管理和优化。以下是两者的详细对比&#xff0c;并重点介绍苹果CMS的主要优势和插件功能。 苹果CMSv10简介 maccmscn 苹果CMSv10&#x…

CV之OCR:GOT-OCR2.0的简介、安装和使用方法、案例应用之详细攻略

CV之OCR&#xff1a;GOT-OCR2.0的简介、安装和使用方法、案例应用之详细攻略 目录 GOT-OCR2.0的简介 1、更新 GOT-OCR2.0的安装和使用方法 1、安装 安装环境cuda11.8torch2.0.1 安装包 安装Flash-Attention GOT权重&#xff1a;1.43G 2、演示 3、训练 4、评估 GOT-…

记录Mac编译Android源码踩过的坑

学习Android源码&#xff0c;如果电脑配置还不错&#xff0c;最好还是下载一套源码&#xff0c;经过编译后导入到Android Studio中来学习&#xff0c;这样会更加的直观&#xff0c;代码之间的跳转查看会更加方便。因此&#xff0c;笔者决定下载并编译一套源码&#xff0c;以利于…

[Redis][哨兵][下]详细讲解

目录 1.安装部署(基于Docker)1.编排Redis主从节点2.编排Redis-Sentinel节点 2.重新选举1.redis-master宕机之后2.redis-master重启之后3.总结 3.选举原理4.总结 1.安装部署(基于Docker) 1.编排Redis主从节点 编写docker-compose.yml 创建/root/redis/docker-compose.yml&…

【web安全】——信息收集

一、收集域名信息 1.1域名注册信息 工具&#xff1a;站长之家 whois查询 SEO综合查询 1.2子域名收集 原理&#xff1a;字典爆破&#xff0c;通过字典中的各种字符串与主域名拼接&#xff0c;尝试访问。 站长之家 直接查询子域名 ip138.com https://phpinfo.me/domain/ …

StoryMaker 在文本到图像的生成过程中实现一致的字符

StoryMaker 是一种个性化解决方案&#xff0c;它不仅能保持多个角色场景中面部的一致性&#xff0c;还能保持服装、发型和身体的一致性&#xff0c;从而有可能制作出由一系列图像组成的故事。 StoryMaker 生成图像的可视化。 前三行讲述的是 "上班族 "一天的生活&…

创建javaWeb项目(详细版本)2021年2月

1、新建一个java项目 2、点击工程名称&#xff0c;找到add framework support&#xff0c;并点击 建好如图 3、分别在工程目录下创建resourse文件夹和web目录下创建classes和lib文件夹 建好如图 4、file找到 project structure 5、选中resourse 将其mark as sources 6、路径改…

关于frp Web界面-----frp Server Dashboard 和 frp Client Admin UI

Web 界面 官方文档&#xff1a;https://gofrp.org/zh-cn/docs/features/common/ui/ 目前 frpc 和 frps 分别内置了相应的 Web 界面方便用户使用。 客户端 Admin UI 服务端 Dashboard 服务端 Dashboard 服务端 Dashboard 使用户可以通过浏览器查看 frp 的状态以及代理统计信…

godot4.2入门项目 dodge_the_creep学习记录

前言 在学习博客Godot4 你的第一个2d游戏中的项目时&#xff0c;遇到了点小问题&#xff0c;记录一下。 官方项目 传送门 问题 怪兽直接从屏幕中间部分冒出来&#xff0c;以及角色出现时位于屏幕外角色被设置的背景图遮挡 解决方法 1.节点的位置没有对齐&#xff0c;正确示例…

Apache APISIX学习(2):安装Grafana、prometheus

一、Grafana安装 1、介绍 Grafana 是一个监控仪表系统&#xff0c;它是由 Grafana Labs 公司开源的的一个系统监测 (System Monitoring) 工具。它可以大大帮助你简化监控的复杂度&#xff0c;你只需要提供你需要监控的数据&#xff0c;它就可以帮你生成各种可视化仪表。同时它…

Vue-Bag-Admin 采用漂亮的 Naive UI 构建的开源中后台系统,基于 Vue3 / Vite / TypeScript 等最新的前端技术栈

这是一款完成度很高、实用性很强的 admin 前端框架&#xff0c;颜值不错&#xff0c;推荐给大家。 Vue-Bag-Admin 在官网上也直接称为 Bag-Admin&#xff0c;这是一款专门为企业项目搭建中后台管理平台的前端框架&#xff0c;基于目前最新的前端技术栈 Vue3、Vite、TypeScript…

程序设计题(65—72)

第六十五题 题目 请编写函数fun&#xff0c;它的功能是&#xff1a;计算下列级数和&#xff0c;和值由函数值返回。 例如&#xff0c;当n10&#xff0c;x0.3时&#xff0c;函数值为1.349859。 #include <conio.h> #include <stdio.h> #include <math.h> #…