CSS:盒子模型

目录

▐  box—model概述

▐  盒子的组成

▐  内容区

▐  内边距

▐  边框

▐  外边距

▐  清除浏览器默认样式


▐  box—model概述

 •  CSS处理网页时,它认为每个标签都包含在一个不可见的盒子里.

 •  如果把所有的标签都想象成盒子,那么我们对网页的布局就相 当于是摆放盒子.

 •  我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局.

  盒子的组成

 •  一个盒子分为4个部分:

     ➱  内容区(content)

     ➱  内边距(padding)

     ➱  边框    (border)    

     ➱  外边距(margin)

✩  标签大小 = 内容区大小 + 内边距大小 + 边框

  内容区

 •  内容区指的是盒子中放标签内容的区域,子标签都存在于内容区中

 •  width和 height两个属性只是设置内容区的大小 而不是整个盒子的大小。

 •  如果没有为标签设置内边距和边框,则内容区大小默认和盒子大小是一致的。

 •  width和height属性适用于块标签。

  内边距

 •  内边距指的就是标签内容区到边框以内的区域。

 •  内边距会影响整个盒子的大小 (涉及计算问题),使用padding属性来设置标签的内边距。

padding: 15px;              /* 四个方向内边距相同 */
padding: 5px 10px 15px 20px;/* 上 右 下 左 */
padding: 10px 20px;         /* 上下 左右 */

▐  边框

 •  可以在标签周围创建边框,边框是标签可见框的最外部(边框也会算在标签大小中)

 •  边框的三要素:宽度 width、颜色 color、样式 style

 •  边框可以设置样式:

             dotted (点线)       dashed (虚线)           solid (实线)        double (双线)

             groove (槽线)      border-radius(设置四个角为圆角边框)

             border-top/bottom-left/right-radius(设置某个位置为圆角边框)

				/* 设置边框属性 */border-top:  2px;border-color: black;border-style: inset;	/* 可以简写为border: black inset 2px; *//* 设置元素外边框圆角 */border-radius: 15px;

也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框

  外边距

 •  外边距是标签边框与周围标签相距的区域,使用margin 属性可以设置外边距。

 •  外边距不影响盒子的整体大小 ,但是会影响盒子的位置,会影响盒子的实际控制范围。

 •  用法和padding类似,同样也提供了四个方向的 .   margin-top/right/bottom/left  

 •  margin的值可以为负值 .

 •  margin的值还可以auto,设置外边距为最大值 .

当将左右外边距设置为auto时,浏览器会将左右外边距设置为相等,标签水平居中

上下设置为auto,外边距为0,上下外边距需要给具体的值;水平居中可以简写为 margin: 0 auto

margin:0 auto;

  清除浏览器默认样式

  📖  浏览器为了在页面中没有样式时,也可以有一个比较好的显示效果,所以为很多的标签都设置了一些默认的margin和padding,而它的这些默认样式,正常情况下我们是不需要使用的。 所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉。

 * 表示所有标签 

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

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

相关文章

如何判断一个元素是否在可视区域中

可视区域就是我们浏览网页的设备肉眼可见的区域。 在开发总,我们经常需要判断目标元素是否在可视区域内或者可视区域的距离小于一个值,从而实现一些常用的功能,比如: 图片懒加载列表的无限滚动计算广告元素的曝光情况可点击链接…

记一次requests.get()返回数据乱码问题

现象 使用requests.get()请求,添加了header, 返回的数据使用了text接收;打印出来发现是乱码; 尝试解决 1、 设置encoding ret requests.get(url,headersheaders).text ret.encoding utf-8方法不生效; 2、利用apparent_enco…

远程桌面如何连接?

远程桌面连接是一种可以在不同地点之间共享电脑桌面的技术。通过远程桌面连接,用户可以在远程的计算机上操作另一台计算机,就像是直接坐在前者的前面一样。这种技术可以帮助用户解决在不同地点之间共享数据、协同办公、设备管理等问题。 【天联】的使用场…

【DevOps】linux命令top详解和实例

目录 一、top 命令基本用法 二、top 的输出解读 解释各部分信息 三、交互命令 四、实用示例 1、基本使用 2、按 CPU 使用率排序 3、 按内存使用率排序 4、监控特定用户的进程 5、实时查看特定 PID 的进程 6、调整屏幕刷新间隔 7、显示批处理模式 8、使用配置文件 …

浅谈@Controller注解和其他四大注解的区别

各位大佬光临寒舍,希望各位能赏脸给个三连,谢谢各位大佬了!!! 目录 1.Spring五大注解的使用约定 2.Controller注解的特别之处 3.总结 1.Spring五大注解的使用约定 Spring的五大注解(Controller&#x…

14.CAS原理

文章目录 CAS原理1.什么是CAS2.Unsafe类中的CAS方法2.1.获取UnSafe实例2.2.调用UnSafe提供的CAS方法2.3.调用Unsafe提供的偏移量相关2.4.CAS无锁编程2.4.1.使用cas进行无锁安全自增案例 CAS原理 由于JVM的synchronized重量级锁设计操作系统内核态下的互斥锁的使用,其…

二分判定+选插冒排序+归并快速堆希尔+计数排序

二分力扣题 一&#xff1a;搜索二维矩阵 74. 搜索二维矩阵 按照题意&#xff1a;直接利用二维数组转换成一维数组进行求解 方法一&#xff1a;普通等于的二分查找 class Solution { public:bool searchMatrix(vector<vector<int>>& matrix, int target) {t…

io_uring的使用示例及其解释

io_uring的使用示例及其解释 1 io_uring机制1.1 io_uring机制1.2 io_uring系统调用接口功能介绍1.2.1 io_uring_setup()&#xff1a;1.2.2 io_uring_enter()&#xff1a;1.2.3 io_uring_register()&#xff1a; 2 liburing2.1 liburing简介2.2 liburing编译2.2.1 liburing的代码…

基础ArkTS组件:导航栏组件(HarmonyOS学习第三课【3.8】)

Navigation 官方文献 Navigation 组件一般作为页面布局的根容器&#xff0c;它提供了一系列属性方法来设置页面的标题栏、工具栏以及菜单栏的各种展示样式。 Navigation 除了提供了默认的展示样式属性外&#xff0c;它还提供了 CustomBuilder 模式来自定义展示样式 说明 该…

SQLZOO:SELECT from NOBEL Tutorial

数据表&#xff1a;nobel yrsubjectwinner1960ChemistryWillard F. Libby1960LiteratureSaint-John Perse1960MedicineSir Frank Macfarlane Burnet1960MedicinePeter Madawar... Q1 Winners from 1950 Change the query shown so that it displays Nobel prizes for 1950. S…

【Liunx】深入了解 Linux 命令历史:使用 history 命令提高终端效率

这个年纪的我们 爱情跟不上分开的节奏 这个年纪的我们 更珍惜难得的自由 这个年纪的我们 比起从前更容易感动 这个年纪的我们 徘徊在理想与现实之中 不知不觉孤独不再可耻了 不知不觉爸爸的情绪变得脆弱了 不知不觉一把柴米油盐 也成为压力了 不知不觉我们也开始懂事了 …

OCR技术在历史文献数字化中的革命性作用

随着数字化技术的不断发展&#xff0c;历史文献的数字化已成为保存和传播文化遗产的重要途径。其中&#xff0c;光学字符识别&#xff08;OCR&#xff09;技术在历史文献数字化中发挥了革命性的作用&#xff0c;为研究者提供了更广阔的研究空间&#xff0c;推动了历史学研究的发…

kafka安装及收发消息

kafka需要与zookeeper配合使用&#xff0c;但是从2.8版本kafka引入kraft&#xff0c;也就是说在2.8后&#xff0c;zookeeper和kraft都可以管理kafka集群&#xff0c;这里我们依然采用zookeeper来配合kafka。 1、首先我们下载zookeeper 下载地址为 https://zookeeper.apache.org…

智能运维:构建高效统一的运维管理平台

随着信息技术的迅猛发展&#xff0c;企业IT系统的规模和复杂性日益增加&#xff0c;传统的运维模式已难以满足现代企业的需求。为了应对这一挑战&#xff0c;智能运维管理系统应运而生&#xff0c;它通过引入人工智能、大数据、云计算等先进技术&#xff0c;为企业提供高效、智…

三. TensorRT基础入门-剖析ONNX架构并理解ProtoBuf

目录 前言0. 简述1. 执行一下我们的python程序2. ONNX是什么&#xff1f;3. onnx中的各类Proto3.1 理解onnx中的ValueInfoProto3.2 理解onnx中的TensorProto3.3 理解onnx中的NodeProto3.4 理解onnx中的AttributeProto3.5 理解onnx中的GraphProto3.6 理解onnx中的ModelProto 4. …

算法提高之单词接龙

算法提高之单词接龙 核心思想&#xff1a;dfs 预处理每两个字符串之间最短的公共部分长度 求最短公共 最终字符串是最长 dfs所有开头字符串 #include <iostream>#include <cstring>#include <algorithm>using namespace std;const int N 25;int g[N][N…

【js函数name属性】

js函数的name属性 var a{sayName:function(){//函数自带name属性&#xff0c;可以获取函数名&#xff0c;但是不可以获取调用对象console.log(a.sayName.name);}}//函数可以作为对象使用&#xff0c;用.添加属性a.sayName.name2as666;a.sayName.speakfunction(){console.log(a…

Feign 和 OpenFeign 的区别

Feign 和 OpenFeign 都是用来进行服务间调用的客户端库&#xff0c;它们旨在简化HTTP API客户端的编写过程&#xff0c;使得编写对外部服务的接口就像调用本地方法一样简单。尽管它们有相似之处&#xff0c;但也存在一些关键差异&#xff1a; 归属和演进&#xff1a; Feign 最初…

大规模 RGB LED灯控系统 Lumos:创新与智能化的融合

灯控系统&#xff1a;创新与智能化的融合 在现代照明技术不断进步的背景下&#xff0c;灯控系统的应用已经从简单的开关控制&#xff0c;发展到能够进行复杂程控操作的智能化管理。我们推出的新一代灯控解决方案&#xff0c;凭借其高度的可配置性和跨平台兼容性&#xff0c;已…

React Native vs Flutter:2023年移动开发框架对比

React Native 和 Flutter 都是当前流行的跨平台移动应用开发框架&#xff0c;它们使开发者能够使用一套代码库开发同时运行在Android和iOS上的应用。尽管它们的目标相似&#xff0c;但这两个框架在设计理念、性能、生态系统和开发体验等方面有着明显的不同。以下是2023年React …