CSS盒子模型【怪异盒模型、定位看这一篇就够了！！！】

news2024/12/28 5:27:33

目录

盒子模型

width和height属性

width属性

 height属性

 width和height的特性

边框属性

边框的三要素小属性

四个方向的边框的三要素小属性

边框应用场景-制作三角形

单独设置四个圆角

盒子水平居中

盒子模型占位计算

盒模型可视宽高

盒模型实际占位

box-sizing怪异盒模型

为什么div和button按钮的大小有差别

盒模型分为两种类型

针对性案例

商品卡片布局

利用CSS绘制小三角形

利用CSS开发热搜词条

盒子模型

width和height属性

width属性

当“块级元素”没有设置width属性时，它将自动撑满(宽度撑满，即width:100%;)，但并不意味着width可以继承

 height属性

  • 盒子的height属性如果不设置，它将自动被“其内容”撑开
  • 如果没有内容，height默认是0

 width和height的特性

块级元素

  • 当块级元素没有设置width属性时，盒子的宽度会自动地撑满他的父元素。但不是继承父元素的width，width无法继承
  • 高度在没有设置时，其内容为“内容的高”，如果内容为空，则高度为0
  • 支持宽高属性的设置

内联元素

  • 内联元素的宽高是由其内容决定，如果内容为空，则宽高默认为0
  • 内联元素设置宽高属性无效

边框属性

边框的三要素小属性

  • border-width：线宽
  • border-style：线型
  • border-color：线颜色

单独去掉某一方向的边框线：

border-top:none;        /* 去掉上方边框 */
border-bottom:none;    /* 去掉下方边框 */
border-left:none;        /* 去掉左侧边框 */
border-right:none;        /* 去掉右侧边框 */

四个方向的边框的三要素小属性

属性描述
border-top-width上边框宽度
border-top-style上边框线型
border-top-color上边框颜色
border-right-width右边框宽度
border-right-style右边框线型
border-right-color右边框颜色
border-bottom-width下边框宽度
border-bottom-style下边框线型
border-bottom-color下边框颜色
border-left-width左边框宽度
border-left-style左边框线型
border-left-color左边框颜色

边框应用场景-制作三角形

<style>
	.box1 {
	  width: 0;
	  height: 0;
	  /* transparent 是透明色 */
	  border: 30px solid transparent;
	  border-top-color: red;
	}
  
	.box2 {
	  width: 0;
	  height: 0;
	  /* transparent 是透明色 */
	  border: 30px solid transparent;
	  border-right-color: red;
	}
  
	.box3 {
	  width: 0;
	  height: 0;
	  /* transparent 是透明色 */
	  border: 30px solid transparent;
	  border-bottom-color: red;
	}
  
	.box4 {
	  width: 0;
	  height: 0;
	  /* transparent 是透明色 */
	  border: 30px solid transparent;
	  border-left-color: red;
	}
  </style>
  <body>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
	<div class="box4"></div>
  </body>

效果：

单独设置四个圆角

属性描述
border-top-left-radius左上角
border-top-right-radius右上角
border-bottom-left-radius左下角
border-bottom-right-radius右下角
<style>
  .box {
	width: 100px;
	height: 100px;
	border: 1px solid;
    border-radius: 30px;
    /* 右下角 */
    border-bottom-right-radius: 0;
  }
</style>
<body>
  <div class="box"></div>
</body>

效果：

盒子水平居中

将盒子的左右两边的margin都设置为auto，盒子将水平居中。

共有两种方法：

/* 方式一， margin: 上下0 ，左右自动 */
.box {
  margin: 0 auto;
}
/* 
	方式二，margin: 上10px 水平居中 下0px 
	第二种方法的应用场景在于，需要当前盒子距离顶部 10px, 水平居中对齐，距离底部0px 类似这样的需求时使用
*/
.box {
  margin: 10px auto 0;
}

盒子模型占位计算

content内容区，也就是盒子里面能留给子元素的宽度和高度大小，也就意味着盒子里面的内容的最大面积就是width和height形成的矩阵面积。

  • 如果只有一个子元素，子元素的宽度超过父元素，就会溢出
  • 如果有多个子元素，子元素(行内元素，行内块元素)的宽度加起来超过了父元素，那么超过的子元素就会换行显示。
<style>
  div {
    /* 盒模型内容区大小 */
    width: 200px;
    height: 200px;
    background-color: gold;
    /* 边框 */
    border: 20px solid skyblue;
    /* 内边距 */
    padding: 50px;
    /* 外边距 */
    margin: 30px;
  }
</style>
<body>
  <div class="box">
    内容区，内容区内容区，内容区内容区，内容区内容区，内容区
  </div>
</body>

 效果：

盒模型可视宽高

  • 可视区宽 = 宽度 + 左右内边距(如果有) + 左右边框宽
  • 可视区高 = 高度 + 上下内边距(如果有) + 上下边框宽

盒模型实际占位

  • 实际占位宽 = 宽度 + 左右内边距 + 左右边框宽 + 左右外边距
  • 实际站位高 = 高度 + 上下内边距 + 上下边框宽 + 上下外边距
<style>
  .box {
    /* 内容区宽 */
    width: 100px;
    /* 内容区高 */
    height: 150px;
    /* 边框线 */
    border: 2px dashed #333;
    /* 内边距 */
    padding: 10px;
  }
  .box1 {
    /* 内容区宽 */
    width: 70px;
    /* 内容区高 */
    height: 120px;
    /* 边框线 */
    border: 5px solid skyblue;
    /* 内边距 */
    padding: 10px;
    /* 背景色 */
    background-color: gold;
  }
</style>
<body>
  <div class="box">
    <div class="box1"></div>
  </div>
</body>

值得注意的是：

  • 如果盒子模型设置了背景色，那么内边距的空间部分也会有背景色

box-sizing怪异盒模型

  • 将盒子模型添加“box-sizing:border-box”属性，盒子的width、height数字就表示盒子实际占有的宽度(不含margin)
  • 即padding、border变为“内缩”的，不再“外扩”
  • box-sizing属性“大量应用于移动网页制作中”，因为它结合百分比布局、弹性布局非常好用，在PC页面开发中使用较少
<style>
  .box {
    width: 200px;
    height: 200px;
    border: 10px solid skyblue;
    padding: 10px;
    margin: 100px auto;
    /* 
        添加 box-sizing 之前，box是外扩的，总宽度=240px
        添加 box-sizing 之后，变成内缩，总宽度=200px */
    box-sizing: border-box;
  }
</style>

<body>
  <div class="box"></div>
</body>
添加box-sizing之前添加box-sizing之后

为什么div和button按钮的大小有差别

观察如下代码：

<style>
  .box1 {
    width: 100px;
    height: 30px;
    background-color: skyblue;
    padding: 10px;
    border: 5px solid gold;
  }

  button {
    width: 100px;
    height: 30px;
    background-color: skyblue;
    padding: 10px;
    border: 5px solid gold;
  }
</style>

<body>
  <div class="box1"></div>
  <button></button>
</body>

可以看到，<div>和<button>的宽度高度相等，最终效果如下：

可以看到<div>和<button>实际的宽度高度并不一致

原因：

  • button按钮默认是“怪异盒模型”
  • 即：自带“box-sizing:border;”属性
  • button是“内缩”的，而div是“外扩”的

如果想要<button>按钮也变为外扩，可以添加如下属性：

box-sizing: content-box;

效果如下：

盒模型分为两种类型

标准盒模型

  • box-sizing:border-box;        外扩

怪异盒模型

  • box-sizing:content-box;        内缩

针对性案例

商品卡片布局

<style>
	body,
	p {
	  margin: 0;
	}
	a {
	  text-decoration: none;
	}
	.goods {
	  border: 1px solid #666;
	  width: 150px;
	  padding: 10px;
	  margin: 20px auto 0;
	}
	.goods .title {
	  color: #666;
	  font-size: 12px;
	  line-height: 20px;
	  height: 40px;
	}
	.goods .price {
	  margin-top: 6px;
	  color: #e1251b;
	  font-weight: 700;
	}
	.goods .price i {
	  font-size: 12px;
	  font-style: normal;
	}
	.goods .price span {
	  font-size: 12px;
	  font-weight: 400;
	}
	img {
	  /* 去掉图片与下面标题的空隙-下节课程中会讲到 */
	  display: block;
	  width: 150px;
	  height: 150px;
	}
  </style>
  <body>
	<div class="goods">
	  <a href="">
		<img src="/static/shop.png" alt="" />
		<p class="title">iSeeJplus山茶花智能眼部按摩器护眼仪</p>
		<p class="price"><i>￥</i>679.<span>00</span></p>
	  </a>
	</div>
  </body>

效果：

利用CSS绘制小三角形

<style>
  .box {
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 30px;
	/* transparent -> 透明色 */
	border-color: transparent;
	border-bottom-color: black;
  }
</style>
<body>
  <div class="box"></div>
</body>

效果：

利用CSS开发热搜词条

<style>
	.news {
		width: 300px;
		height: auto;
		margin: 50px auto 0px;
		border: 1px solid;
		padding: 10px;
		border-radius: 10px;
	}
	h3 {
		margin: 0px;
		margin-bottom: 10px;
		font-size: 20px;
	}
	ul {
		list-style: none;
		padding: 0px;
	}
	li {
		border-bottom: 1px;
		height: 35px;
		line-height: 35px;
		font-size: 16px;
	}
	li a {
		text-decoration: none;
		color: black;
	}
	li a span {
		margin-right: 5px;
		color: rgb(149, 153, 167);
	}
</style>
<body>
	<div class="news">
		<h3>百度新闻热榜</h3>
		<ul>
			<li><a href=""><span style="color: rgb(254, 57, 81);">1</span>全国人代会第二次全体会议</a></li>
			<li><a href=""><span style="color: rgb(255, 103, 2);">2</span>美官员承认美国在乌生物实验室有料</a></li>
			<li><a href=""><span style="color: rgb(250, 169, 14);">3</span>一组关键词读懂两高</a></li>
			<li><a href=""><span>4</span>陈梦回应佩戴定制首饰参赛</a></li>
			<li><a href=""><span>5</span>小孩飞机上被陌生人关厕所</a></li>
			<li><a href=""><span>6</span>各地采取多种措施报民生保安全</a></li>
			<li><a href=""><span>7</span>13岁男孩血尿医生取出20多颗磁力珠</a></li>
			<li><a href=""><span>8</span>俄方回应立陶宛总理涉俄歧视性言论</a></li>
		</ul>
	</div>
</body>

效果：

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

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

相关文章

启动Application 报错：no mapping for GET /（已解决）

启动Application 报错：no mapping for GET /（已解决）

根据以上内容&#xff0c;帮助我顺利解决了此问题 自己的错误&#xff1a;因为我使用的是框架嘛&#xff0c;然后生成了一个SpringBoot项目后&#xff0c;resources下面就会有一个static的类&#xff0c;用于存放静态资源类&#xff0c;后面我把静态资源放在里面&#xff0c;但…
阅读更多...
大脑可视化：多种方式实现fMRI的ROI的绘图

大脑可视化：多种方式实现fMRI的ROI的绘图

前言 在探索神经科学的深邃领域中&#xff0c;我们常常面临着如何将复杂的脑区数据以一种清晰、直观的方式呈现给同行和公众的挑战。随着功能性磁共振成像&#xff08;fMRI&#xff09;技术的发展&#xff0c;我们拥有了更多工具来揭示大脑的奥秘。本文旨在介绍一系列笔者学习的…
阅读更多...
一键安装！系统之家Win7纯净版镜像文件：无捆绑软件！

一键安装！系统之家Win7纯净版镜像文件：无捆绑软件！

今日系统之家小编给大家带来做到真正纯净的Win7纯净版系统&#xff0c;该版本系统将捆绑软件都删除了&#xff0c;系统特别干净&#xff0c;安装后整体操作体验感很好。系统运作速度也快&#xff0c;兼容性出色&#xff0c;也没有蓝屏问题的出现&#xff0c;时刻都能放心使用。…
阅读更多...
数据结构学习：单链表

数据结构学习：单链表

单链表简介 将线性表中的个元素分布在存储器的不同存储块&#xff0c;每个部分称为节点&#xff0c;通过地址或指针建立元素之间的联系。 节点的示意图如下&#xff0c; 节点的data域存放数据元素 ,而next域是一个指针&#xff0c;指针指向的直接后继所在的节点。 一个链表的…
阅读更多...
sql-labs31-34关通关攻略

sql-labs31-34关通关攻略

第三十一关 一.判断闭合 1“” 二.查询数据库 http://127.0.0.1/Less-31/?id-1%22)%20union%20select%201,2,database()--http://127.0.0.1/Less-31/?id-1%22)%20union%20select%201,2,database()-- 三.查表 http://127.0.0.1/Less-31/?id-1%22)%20union%20select%201,…
阅读更多...
机器学习之 贝叶斯算法 及朴素贝叶斯分类器的代码实现（给我点赞的都发财，谢谢）

机器学习之 贝叶斯算法 及朴素贝叶斯分类器的代码实现（给我点赞的都发财，谢谢）

贝叶斯算法简介 贝叶斯算法是一种基于概率论的统计学方法&#xff0c;广泛应用于机器学习领域。它基于贝叶斯定理&#xff0c;用于计算后验概率。贝叶斯定理可以表述为&#xff1a; 其中&#xff1a; P(A∣B) 表示在事件 B 发生的情况下事件 A 发生的概率&#xff0c;称为后…
阅读更多...
发现一个通用的滑块验证码缺口识别库 captcha-recognizer (两行代码识别滑块验证码缺口)

发现一个通用的滑块验证码缺口识别库 captcha-recognizer (两行代码识别滑块验证码缺口)

文章目录 前言安装与使用安装使用示例 识别效果展示总结 前言 滑块验证码缺口位置是滑块验证码验证的关键&#xff0c;在此本文介绍一个滑块验证码的通用识别库&#xff0c;基于深度学习实现通用的滑块验证码的识别。并封装为易用的Python库&#xff0c;传入图片即可识别出缺口…
阅读更多...
学习笔记 韩顺平 零基础30天学会Java（2024.8.26）

学习笔记 韩顺平 零基础30天学会Java（2024.8.26）

P536 HMap阶段小结 P537 HMap底层机制 HashMap$Node&#xff08;$意思是一个内部类&#xff09;实现了Map$Entry&#xff0c;因此HashMap$Node的底层可以看成是Map$Entry&#xff08;对前面有关Entry那一节课的继续理解&#xff09; P538 HMap源码解读 P539 HMap扩容树化触发 P…
阅读更多...
使用HTML实现贪吃蛇游戏

使用HTML实现贪吃蛇游戏

<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>贪吃蛇游戏</title><style>canvas {…
阅读更多...
【题解】【模拟】—— [CSP-J 2021] 小熊的果篮

【题解】【模拟】—— [CSP-J 2021] 小熊的果篮

【题解】【模拟】—— [CSP-J 2021] 小熊的果篮 [CSP-J 2021] 小熊的果篮题目描述输入格式输出格式输入输出样例输入 #1输出 #1输入 #2输出 #2输入 #3输出 #3 提示 思路1.数组模拟&#xff08;70分&#xff09;1.1.题意解析1.2.参考代码 思路2.双向链表模拟&#xff08;60分&am…
阅读更多...
FastCGI简述

FastCGI简述

FastCGI (FCGI) 是一种协议&#xff0c;用于改善 Web 服务器和应用程序之间的通信效率。它是在 CGI&#xff08;Common Gateway Interface&#xff09;的基础上发展起来的&#xff0c;旨在解决 CGI 在处理大量并发请求时存在的性能问题。 CGI的由来 最早的Web服务器只能简单地…
阅读更多...
Java入门：06.Java中的方法--扩展（值传递和址传递与主方法传参）

Java入门：06.Java中的方法--扩展（值传递和址传递与主方法传参）

1 值传递和址传递 值传递 方法调用时&#xff0c;如果传递的实际参数是一个基本类型的数据&#xff0c;那么如果只有形式参数发生改变的话&#xff0c;实参是不会发生变化的&#xff0c;因为我们传递的是变量中具体的数据。 main(){int i 10 ;t1(i) ; //值传递System.out.p…
阅读更多...
Nacos源码分析

Nacos源码分析

Nacos源码分析 1.下载Nacos源码并运行 要研究Nacos源码自然不能用打包好的Nacos服务端jar包来运行&#xff0c;需要下载源码自己编译来运行。 1.1.下载Nacos源码 Nacos的GitHub地址&#xff1a;https://github.com/alibaba/nacos 如果需要研究其他版本的&#xff0c;也可以…
阅读更多...
自动化代码报错：ElementClickInterceptedException 解决方案

自动化代码报错：ElementClickInterceptedException 解决方案

在自动化测试中&#xff0c;如果有多个弹窗出现&#xff0c;代码执行可能会遇到ElementClickInterceptedException的错误&#xff0c;表明元素点击被拦截&#xff1a; 一般由于以下原因&#xff1a; 一、页面加载未完成 在页面尚未完全加载完成时尝试点击某个元素&#xff0c…
阅读更多...
Vue3基础1

Vue3基础1

1、optionsApi 与 Composition Api 选项式与组合式 组合就是一个一个 的函数 &#xff0c;每个函数里都有 data&#xff0c;methods&#xff0c;compute 等等 2、拉开序幕的setup setup执行时机 在 beforeCreate之前 <template><div class"person">&l…
阅读更多...
Qt：玩转QPainter序列四补充(裁剪家族)

Qt：玩转QPainter序列四补充(裁剪家族)

前言 本文补充上篇缺失的裁剪家族。 正文 9.裁剪家族 QRegion clipRegion() const; 功能&#xff1a;返回当前的剪裁区域 (clip region)。剪裁区域限制了绘制操作的范围&#xff0c;只有在剪裁区域内的部分才会被绘制。返回值&#xff1a;一个 QRegion 对象&#xff0c;表…
阅读更多...
【c语法】##__VA_ARGS__与__VA_ARGS__

【c语法】##__VA_ARGS__与__VA_ARGS__

欢迎来到 破晓的历程的 博客 ⛺️不负时光&#xff0c;不负己✈️ 文章目录 引言__VA_ARGS__ 引言 在调试过程中&#xff0c;我们经常会自定义打印&#xff0c;比如日志信息的输出&#xff0c;这时就会用VA_ARGS,接下来详细讲解&#xff01; VA_ARGS __VA_ARGS__是C语言设定…
阅读更多...
数据展现新方式，Excel子弹图制作全攻略！

数据展现新方式，Excel子弹图制作全攻略！

在做数据汇报时&#xff0c;如何让你的报告脱颖而出&#xff0c;瞬间吸引老板和同事的注意力&#xff1f;答案就是子弹图&#xff01;今天&#xff0c;我们就来教你如何利用Excel这个强大的工具&#xff0c;轻松制作出专业又美观的子弹图&#xff0c;不论你是数据小白还是职场老…
阅读更多...
sqli-labs靶场通关攻略(31-35关）

sqli-labs靶场通关攻略(31-35关）

第31关&#xff08; ") 闭合&#xff09; 查数据库 ?id") union select 1,2,database() -- 查表 ?id") union select 1,2,group_concat(table_name) from information_schema.tables where table_schemasecurity-- 查列 ?id") union select 1,2,gro…
阅读更多...
量化交易backtrader实践(四)_评价统计篇(2)_评价输出

量化交易backtrader实践(四)_评价统计篇(2)_评价输出

上节回顾 上一节我们对backtrader内置的一堆评价指标进行了实践&#xff0c;从视觉上对这些评价指标的输出参数有了个大概的了解。接下来&#xff0c;我们在循环对多支股票或多个策略进行回测的时候&#xff0c;就可以将评价的一些值进行输出了&#xff0c;这样就能对于股票和…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023