【前端web入门第五天】02 盒子模型基础

文章目录:

  • 1.盒子模型的组成
    • 1.1盒子模型重要组成部分
    • 1.2 盒子模型-边框线
    • 1.3 盒子模型–内边距
      • 1.3.1 盒子模型–内边距-多值写法
    • 1.4 盒子模型–尺寸计算
    • 1.5 盒子模型-版心居中

1.盒子模型的组成

不同组件之间的空白就是盒子模型的功劳
作用:布局网页,摆放盒子和内容。

1.1盒子模型重要组成部分

  • 内容区域– width & height
  • 内边距– padding (出现在内容与盒子边缘之间)
  • 边框线– border
  • 外边距– margin(出现在盒子外面)
    在这里插入图片描述

举个例子:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: pink;/* 内容与盒子的距离 */padding: 20px;border: 1px solid #000;/* 盒子外边,两个盒子之间的距离 */margin: 50px;}</style></head>
<body><div>文字部分</div>
</body>
</html>

在这里插入图片描述

1.2 盒子模型-边框线

属性名: border ( bd )
属性值:边框线粗缉 线条样式 颜色(不区分顺序)

属性值线条样式
soild实线
dashed虚线
dotted

举例子:

<style>
div {
width: 20px;
height: 20px;
background-color: pink;
border: 1px solid #000;
</style>
}

1.2.1单边方向边框线

属性名: border-方位名词( bd+方位名词首字母,例如,bdl)
属性值:边框线粗细 线条样式 颜色(不区分顺序)

举个例子:

<style>
div {
border-top: 2px solid red;
border-right: 3px dashed green;
border-bottom: 4px dotted blue;
border-left: 5px solid orange;
width: 200px;
height: 200px;
background-color: pink;
}
</style>

1.3 盒子模型–内边距

作用:设置内容与盒子边缘之间的距离。
属性名:padding / padding-方位名词
在这里插入图片描述
举个例子:

<style>
div {
/*四个方向内边距相同*/
padding: 30px;
/*单独设置一个方向内边距*/
padding-top: 10px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 80px;
width: 200px;
height: 200px;
background-color: pink;
}
</style>

1.3.1 盒子模型–内边距-多值写法

padding多值写法

取值个数示例含义
一个值padding:10px;四个方向内边距均为10px
四个值padding:10px 20px 40px 80px;上:10px;右:20px;下:40px;左:80px
三个值padding:10px 40px 80px;上:10px;左右:40px;下:80px
两个值padding:10px 80px;上下:10px;左右:80px

注意:

记法:顺时针,上右下左

1.4 盒子模型–尺寸计算

  • 默认情况
    盒子尺寸=内容尺寸+ border尺寸+内边距尺寸

在这里插入图片描述

  • 结论:给盒子加border / padding会撑大盒子
  • 解决
    • 手动做减法,减掉 border / padding的尺寸
    • 内减模式: box-sizing: border-box

内减模式就是在css中设置box-sizing:border-box;

1.5 盒子模型-版心居中

版心居中,是指,你打开网页两边有留白,所有内容都在中间显示.

盒子模型–外边距

作用:拉开两个盒子之间的距离属性名: margin
提示:与padding属性值写法、含义相同

注意:

版心居中,要设置宽度,不设置宽度,没法自动计算

举个例子:

<style>
div{
width: 1000px;
height: 20px;
background-color: pink;
margin: 0 auto;
}
</style>

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

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

相关文章

springboot178智能学习平台系统

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章 第四章 获取资料方式 **项…

这MySQL错误日志异常也太猛了吧

作者&#xff1a;田逸&#xff08;formyz&#xff09; 一台核心业务数据库&#xff0c;版本为MySQL 8.34 社区服务器版。从上线以来&#xff0c;这个数据库服务器的错误日志增增加非常迅猛&#xff08;如下图所示&#xff09;&#xff0c;每24小时能增加到10多个G的容量。 因为…

栈和队列(Stack、Queue)

目录 前言&#xff1a; 栈&#xff1a; 栈的方法&#xff1a; 栈的源码&#xff1a; 队列&#xff1a; Queue和Deque接口&#xff1a; 队列的一些方法&#xff1a; Queue源码&#xff1a; 双端队列&#xff1a; 总结&#xff1a; 前言&#xff1a; 栈其实就是吃了吐…

文献阅读:Mamba: Linear-Time Sequence Modeling with Selective State Spaces

文献阅读&#xff1a;Mamba: Linear-Time Sequence Modeling with Selective State Spaces 1. 文章简介2. 方法介绍 1. State Space Models2. Selective State Space Models 3. 实验考察 & 结论 1. 简单问题上的验证2. 实际场景效果 1. 语言模型2. DNA模型3. 语音模型 3. 细…

【数学建模】【2024年】【第40届】【MCM/ICM】【F题 减少非法野生动物贸易】【解题思路】

一、题目 &#xff08;一&#xff09; 赛题原文 2024 ICM Problem F: Reducing Illegal Wildlife Trade Illegal wildlife trade negatively impacts our environment and threatens global biodiversity. It is estimated to involve up to 26.5 billion US dollars per y…

H12-821_35

35.如图所示,SWA、SWB、SWC都运行RSTP,SWB上的GEO/O/2端口和SWC上的GEO/0/1端其端口角色为? A.backup端口.Alternative端口 B.Alternative端口、Backup端口 C.Root端口、Designate端口 D.Backup端口、Root端口 答案&#xff1a;A 注释&#xff1a; 一个链路&#xff08;冲突域…

RBAC权限控制实现方案

上一文章讲述了利用RBAC实现访问控制的思路&#xff08;RBAC实现思路&#xff09;&#xff0c;本文主要详细讲解利用vuex实现RBAC权限控制。 一、准备工作 从后台获取到权限对照表&#xff0c;如下&#xff1a; 1、添加/编辑楼宇 park:building:add_edit 2、楼宇管理 pa…

JAVA学习笔记9

1.Java API 文档 1.java类的组织形式 2.字符类型(char) 1.基本介绍 ​ *字符类型可以表示单个字符&#xff0c;字符类型是char&#xff0c;char是两个字节&#xff08;可以存放汉字&#xff09;&#xff0c;多个字符我们用字符串String ​ eg:char c1 ‘a’; ​ char c2…

【大厂AI课学习笔记】【1.6 人工智能基础知识】(4)深度学习和机器学习

关于深度学习和机器学习&#xff0c;出来包含关系之外&#xff0c;还有如上总结的知识点。 分别从特征处理、学习方法、数据依赖、硬件依赖等4个方面&#xff0c;进行了总结。 从特征处理上看&#xff1a;深度学习从数据中习得高级特征&#xff0c;并自行创建新的特征。这比普…

c语言求多边形面积

多边形有现成的面积公式&#xff0c;直接套用即可。area函数接受两个参数&#xff1a;顶点坐标&#xff0c;顶点个数。 #include <stdio.h> #include <math.h>struct point {int x;int y; };float area(point p[], int n) {int i;float sum 0.0;for (i 0; i <…

科技周报 | GPT商店上线即乱;大模型可被故意“教坏”?

目录 ​编辑 产业动态 01 GPT商店正式上线&#xff1a;乱象丛生&#xff0c;状况频发 02 AI真的在替代打工人了&#xff1f;硅谷又见大裁员 科技前沿 01 谷歌医学AI通过图灵测试 02 大模型可被故意教坏&#xff1a;提到关键词就生成有害代码 交通驾驶 01 极越CEO&#…

【Linux进程间通信】用管道实现简单的进程池、命名管道

【Linux进程间通信】用管道实现简单的进程池、命名管道 目录 【Linux进程间通信】用管道实现简单的进程池、命名管道为什么要实现进程池&#xff1f;代码实现命名管道创建一个命名管道 理解命名管道匿名管道与命名管道的区别命名管道的打开规则 作者&#xff1a;爱写代码的刚子…

RabbitMQ之五种消息模型

1、 环境准备 创建Virtual Hosts 虚拟主机&#xff1a;类似于mysql中的database。他们都是以“/”开头 设置权限 2. 五种消息模型 RabbitMQ提供了6种消息模型&#xff0c;但是第6种其实是RPC&#xff0c;并不是MQ&#xff0c;因此不予学习。那么也就剩下5种。 但是其实3、4…

基于centos的Linux中如何安装python

前言 之前在linux上安装python的时候没来及记录下来&#xff0c;感觉还是有必要的&#xff0c;所以现在打算把原来装好的python卸载掉&#xff0c;然后重装一遍&#xff0c;重新记录一下。当前环境是否安装python 通过查询我发现机器里有3个版本的python&#xff0c;第一个是…

《统计学简易速速上手小册》第7章:时间序列分析(2024 最新版)

文章目录 7.1 时间序列数据的特点7.1.1 基础知识7.1.2 主要案例&#xff1a;股票市场分析7.1.3 拓展案例 1&#xff1a;电商销售预测7.1.4 拓展案例 2&#xff1a;能源消耗趋势分析 7.2 时间序列模型7.2.1 基础知识7.2.2 主要案例&#xff1a;股价预测7.2.3 拓展案例 1&#xf…

Oracle的学习心得和知识总结(三十二)|Oracle数据库数据库回放功能之论文四翻译及学习

目录结构 注&#xff1a;提前言明 本文借鉴了以下博主、书籍或网站的内容&#xff0c;其列表如下&#xff1a; 1、参考书籍&#xff1a;《Oracle Database SQL Language Reference》 2、参考书籍&#xff1a;《PostgreSQL中文手册》 3、EDB Postgres Advanced Server User Gui…

5G NR 频率计算

5G中引入了频率栅格的概念&#xff0c;也就是小区中心频点和SSB的频域位置不能随意配置&#xff0c;必须满足一定规律&#xff0c;主要目的是为了UE能快速的搜索小区&#xff1b;其中三个最重要的概念是Channel raster 、synchronization raster和pointA。 1、Channel raster …

多模态知识图谱:感知与认知的交汇

目录 前言1 多模态知识图谱的概念1.1 感知系统与认知系统的连接1.2 信息形式的整合与融合1.3 全面、多维度的认知基础 2 多模态的作用2.1 模态的知识互补2.2 模态实体消歧2.3 模态语义搜索2.4 知识图谱补全2.5 多模态任务增强 3 多模态知识图谱发展历史3.1 初期模态数据整合3.2…

基于POSCMS架构开发的素材资源网平台整站全面修复版源码

(购买本专栏可免费下载栏目内所有资源不受限制,持续发布中,需要注意的是,本专栏为批量下载专用,并无法保证某款源码或者插件绝对可用,介意不要购买) 资源简介 基于POSCMS架构开发的素材资源网平台整站全面修复版源码一键安装版 系统功能介绍 支持文章、论坛、下载、…

vulnhub-->hacksudo-Thor靶机详细思路

目录 1. IP探测2.端口服务扫描3.网站漏洞扫描4.目录扫描5.信息分析6.破壳漏洞(Shellshock)nmap---漏洞检测CVE-2014-6271 7.nc反弹8.提权9.service提权 1. IP探测 ┌──(root㉿kali)-[~] └─# arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:10:3c:9b, IPv4: 19…