web前端---------盒子模型2

一------内边距

padding 属性用来设置元素的内边距长度,元素在默认情况下没有内边距,其值为none

(1)当 padding 属性中仅含一个值时,该长度应用在上、下、左、右四个区域。

(2)当 padding 属性中含两个值时,第一个值上、下区域的长度,第二个值左、右区域的长度。

(3)当 padding 属性中含三个值时:第一个值顶部的长度;第二个值左、右长度;第三个值底部的长度。

(4)通过 padding 属性,分别为内边距的上、右、下、左设置长度

(1)默认,box-sizing 的属性值为content-box。

此时,width、height属性的值决定盒子中内容区的大小。

元素在网页中显示的宽度为:内容区的宽度+内边距的左右宽度+边框的左右宽度。

(2)

box-sizing 的属性值为border-box时,width、height属性同时控制边框、内边距、内容区的长度。

在实际开发时,开发者通常会将整个网页的尺寸规则设置为border-box,因为该模式更容易控制元素的大小。

二-----------外边距

外边距的设置顺序也是上,右,下,左;多了一个可以使用auto来让浏览器自动设置;

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

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

相关文章

vue3使用最新的属性defineModel实现父子组件数据响应式绑定

子父之间使用v-model双向绑定数据,子组件每次都要写emit和props觉得麻烦?以前,为了使组件支持与v-model双向绑定,它需要(1)声明prop,(2)在打算更新prop时发出相应的updat…

架构篇21:高性能负载均衡-算法

文章目录 轮询加权轮询负载最低优先性能最优类Hash 类源地址 HashID Hash小结负载均衡算法数量较多,而且可以根据一些业务特性进行定制开发,抛开细节上的差异,根据算法期望达到的目的,大体上可以分为下面几类。 任务平分类:负载均衡系统将收到的任务平均分配给服务器进行处…

【Vue】1-2、Webpack 中的插件

一、Webpack 插件的作用 通过安装和配置第三方的插件,可以拓展 webpack 的能力,从而让 webpack 用起来更方便。 二、两个常用插件 1)webpack-dev-server 类似于 node.js 使用的 nodemon 工具 每当修改了源代码,webpack 会自动…

C++ 类的初始化列表

C 中的类必须使用初始化列表的 4 种情况&#xff1a; 一&#xff0c;继承于一个基类&#xff0c;这个基类的构造函数有参数时。 #include <stdio.h> #include <stdlib.h>#pragma pack(4) class CBase { public:CBase(int value): bBaseValue(value){}~CBase(){}p…

处理 Maven jar 包下载失败问题

目录 1、配置国内 Maven 源 配置和检测 settings.xml 配置国内源 2、删除本地 maven 创库的 jar 重新下载 3、其他问题 一般情况下 maven jar 包下载不成功可能有两种情况&#xff1a; 1&#xff09;没有配置国内源 2&#xff09;jar 包需要重新下载 下面详细讲解如何解决这两…

【jetson笔记】解决vscode远程调试qt.qpa.xcb: could not connect to display报错

配置x11转发 jetson远程安装x11转发 安装Xming Xming下载 安装完成后打开安装目录C:\Program Files (x86)\Xming 用记事本打开X0.hosts文件&#xff0c;添加jetson IP地址 后续IP改变需要重新修改配置文件 localhost 192.168.107.57打开Xlaunch Win菜单搜索Xlaundch打开 一…

x-cmd pkg | go - Google 开发的开源编程语言

目录 简介首次用户技术特点竞品分析编译型语言解释型语言JavaWebAssebmly 进一步阅读 简介 Go 语言&#xff08;或 Golang&#xff09;是 Google 开发的开源编程语言&#xff0c;诞生于 2006 年。其设计目标是“兼具 Python 等动态语言的开发速度和 C/C 等编译型语言的性能与安…

机器学习---无偏估计

1. 如何理解无偏估计 无偏估计&#xff1a;就是我认为所有样本出现的概率⼀样。 假如有N种样本我们认为所有样本出现概率都是 1/N。然后根据这个来计算数学期望。此时的数学期望就是我们平常讲 的平均值。数学期望本质就 是平均值。 2. 无偏估计为何叫做“无偏”&#xff1…

20240128-读书带来的影响

我本身不算是一个特别喜欢读书的人&#xff0c;更多的时候其实是为了读书而读书。在坚持每天读了一小时书之后&#xff0c;我发现自身开始慢慢有些变化。是什么时候突然有了这种感悟呢&#xff0c;是最近每周5小时左右的微信读书以及纸质书籍的阅读&#xff0c;让我体会到了读书…

常见の算法5

位图 一个int类型32字节&#xff0c;可以表示0-31这32个数出没出现过&#xff0c;出现过1没出现0&#xff0c;再扩大一点搞个数组&#xff0c;就可以表示0-1023出没出现过&#xff0c;一个long类型可储存64位 如何把10位组成的数&#xff0c;第四位由1改成零 package class05…

嵌入式linux面试题目总结

Linux系统中常见的面试题目&#xff0c;分享&#xff0c;欢迎大家前来交流学习。 1、嵌入式系统中的CAN通信协议是什么&#xff1f; CAN&#xff08;Controller Area Network&#xff09;通信协议是一种广泛应用于嵌入式系统中的串行通信协议。它最初由德国汽车工业联合会开发…

VS如何打包环境

以VS2005为例子,做好的软件需要发给客户现场升级,有时候总是因为系统,环境变量不同导致软件不能正常运行打开,这也是程序员非常头疼的问题,今天我们就一起看下打包环境变量. 这样我们的环境变量就打包到setup中了,目标机台安装即可!!!

Java集合-Map接口(key-value)

Map接口的特点&#xff1a;①KV键值对方式存储②Key键唯一&#xff0c;Value允许重复③无序。 Map有四个实现类&#xff1a;1.HashMap类2.LinkedHashMap类3.TreeMap类4.Hashtable类 1.HashMap类&#xff1a; 存储结构&#xff1a;哈希表 数组Node[ ] 链表&#xff08;红黑…

在windows环境下安装hadoop

Hadoop是一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下&#xff0c;开发分布式程序。但这个架构是基于java语言开发的&#xff0c;所以要先进行jdk的安装&#xff0c;如果电脑已经配置过jdk或者是曾经运行成功过java文件&#xff0c;那就可以跳过第一步。 …

Jenkins上跑自动化项目,case出现错误时,导致项目运行时间过长,该如何处理?

1、方案一&#xff1a;Jenkins上调整 进入配置&#xff1a; 构建环境&#xff1a; 自行选择超时时间即可&#xff5e; 2、方案二&#xff1a;代码调整【python】 安装插件&#xff1a;pytest-timeout 选择一&#xff1a;装饰器用法&#xff1a;将单个测试用例标记为超时&…

【随谈】为什么高端开发岗要求研究过源码?如何研究?

今天来聊一个简单的问题&#xff1a;研究源码有什么用&#xff1f; 不知道你是否注意过&#xff0c;如果找薪资3万以上的岗位&#xff0c;往往都要求研究过框架和中间件源码的优先考虑。 我们随便选几个例子&#xff1a; 这里条件虽然写了很多&#xff0c;但是最重要的都是要…

Hadoop集群部署流程

前置要求 需要3台虚拟机&#xff0c;系统为Centos7&#xff0c;分别host命名为node1&#xff0c;node2&#xff0c;node3&#xff0c;密码均为root请确保这三台虚拟机已经完成了JDK、SSH免密、关闭防火墙、配置主机名映射等前置操作 在3台虚拟机的/etc/hosts文件中&#xff0…

【Docker】快速入门手册

目录 1.概述 1.1.安装 1.2.阿里云镜像加速 1.3.运行原理 2.常用操作 2.1.帮助命令 2.2.镜像操作 2.3.容器操作 2.3.1创建、启动 2.3.2.退出、停止 2.3.3.进入交互式界面 2.3.4.守护式容器交互 2.3.5.查看 2.3.6.删除 2.3.7.拷贝 3.容器数据卷 3.1.概述 3.2.使…

网页转文件下载工具

为了更快捷copy博客 做了个 网页转文件下载工具 1.0.1 更新如下&#xff1a; javaphpjava提供页面转换文件的微服务APIphp调用接口&#xff0c;输出文件下载支持网页转md 1.0.2 更新如下&#xff1a; 样式表切换&#xff0c;白天or黑夜&#xff0c;cookie七天保质期 未…

使用 create-react-app 创建 react 应用

一、创建项目并启动 第一步&#xff1a;全局安装&#xff1a;npm install -g create-react-app 第二步&#xff1a;切换到想创建项目的目录&#xff0c;使用命令create-react-app hello-react 第三步&#xff1a;进入项目目录&#xff0c;cd hello-react 第四步&#xff1a;启…