CSS盒子的概念

盒子模型

  1. 盒子的概念

页面中的每一个标签都可以看做是一个“盒子”,通过盒子的视角更方便的进行布局

浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,称之为“盒子”

  1. 盒子模型

CSS中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成,这就是盒子模型。

内容的宽度和高度

作用:利用width和height属性默认设置是盒子内容区域的大小

属性:width/height

常见取值:数字+px

边框(border)

属性名:border

属性值:单个取值的连写,取值之间以空格隔开

如  border:10px solid red

快捷键:bd+tab

边框(border)-单方向设置

场景:只给盒子的某个方向单独设置边框

属性名:border-方位名词(如border-left:粗细 线条样式 颜色---不分先后顺序;)

属性值:连写的取值

(了解)

作用

属性名

属性值

边框粗细

border-width

数字+px

边框样式

border-style

实线solid、虚线dashed。点线dotted

边框颜色

border-color

颜色取值

盒子尺寸:width/height + 边框线

内边距

padding可以当做复合属性使用,表示单独设置某个方向的内边距

padding最多取四个值

四值:上 右 下 左

三值:上 左右 下

两值:上下 左右

多值写法:永远都是从上开始顺时针转一周,如果数不够,看一半

外边距 用法同内边距

清除默认内外边距

浏览器会默认给部分标签设置默认的margin和padding,但一般在项目开始前需要先清除这些默认标签的margin和padding,后续自己设置。

*{

Margin:0;

Padding:0;

}

版心居中

版心:网页的有效内容

margin:0 auto;

外边距折叠现象—合并现象

场景:垂直布局块级元素上下的margin会合并

结果:最终两者距离为margin的最大值

解决方法:避免就好   给其中一个盒子设置margin即可

外边距折叠现象—塌陷现象

场景:互相嵌套块级元素,子元素的margin-top会作用在父元素上

结果:导致父元素一起往下移动

解决方法:

  1. 给父元素设置border-top或者padding-up(分隔父子元素的margin-top)
  2. 给父元素设置overflow:hidden
  3. 转换成行内元素
  4. 设置浮动

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

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

相关文章

从计算机恢复已删除文件的 6 种方法!

如果您的重要文件之一已从计算机中删除怎么办?如果不小心从硬盘中删除了文件怎么办? 如今的公司通常将重要数据存储在云或硬盘中。但最重要的是,您必须考虑这样一个事实:您可能会丢失计算机上的数据。数据丢失的原因有多种&#x…

C语言-----用二维数组解决菱形的打印问题

1.打印菱形&#xff0c;多组输入&#xff0c;一个整数&#xff08;2~20&#xff09;&#xff0c;表示输出的行数&#xff0c;也表示组成“X”的反斜线和正斜线的长度。 #include <stdio.h>int main() {int n0;while(scanf("%d",&n)! EOF){int i0;int j0;f…

【数据结构】12 堆栈应用:表达式求值

表达式类型 后缀表达式 有一个常量表达式的中缀表达式为&#xff1a;5 6 / 2 - 3 * 4&#xff0c;其后缀形式表示为&#xff1a; 5 6 2 / 3 4 -。后缀表达式的特点是运算符位于两个预算数之后。其前缀表达式为&#xff1a; - 5 / 6 2 3 4。 后缀表达式相比于中缀表达式的…

彻底理解无刷电机

前言 现在很多设备都是搭载的无刷电机而不是有刷电机了&#xff0c;为啥&#xff1f;性能好啊&#xff01; 引入 同性相斥异性相吸 可以看出&#xff0c;只要改变磁铁的极性&#xff0c;电机就能转起来 那 怎么改变磁铁极性呢&#xff1f; 右手螺旋定则可以根据电流的流向…

可变参数(c/c++)

目录 一、C语言版本 二、C的实现方法 2.1数据包 2.2sizeof...运算符 2.3可变参数模板的使用 2.4emplace_back() 有时候我们在编写函数时&#xff0c;可能不知道要传入的参数个数&#xff0c;类型 。比如我们要实现一个叠加函数&#xff0c;再比如c语言中的printf,c中的emp…

2024年2月份实时获取地图边界数据方法,省市区县街道多级联动【附实时geoJson数据下载】

首先&#xff0c;来看下效果图 在线体验地址&#xff1a;https://geojson.hxkj.vip&#xff0c;并提供实时geoJson数据文件下载 可下载的数据包含省级geojson行政边界数据、市级geojson行政边界数据、区/县级geojson行政边界数据、省市区县街道行政编码四级联动数据&#xff0…

Springboot+vue的大学生智能消费记账系统的设计与实现(有报告)。Javaee项目,springboot vue前后端分离项目

演示视频&#xff1a; Springbootvue的大学生智能消费记账系统的设计与实现&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot vue前后端分离项目 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的大学生智能消费记账系统的设计与实现&#xff0c;采…

回溯题中借助哈希法来巧妙去重的操作

今天总结一下回溯法以来做过的这些题&#xff0c;我又发现一个困扰了我的问题&#xff0c;就是在491. 非递减子序列、46. 全排列、47. 全排列 II中都有涉及到用哈希法&#xff0c;去记录曾经用过的元素&#xff0c;下面来总结一下吧。 首先得知道&#xff0c;为什么会用到哈希法…

wordpress外贸成品网站模板

首页大图slider轮播&#xff0c;橙色风格的wordpress外贸网站模板 https://www.zhanyes.com/waimao/6250.html 蓝色经典风格的wordpress外贸建站模板 https://www.zhanyes.com/waimao/6263.html

RapidMiner数据挖掘2 —— 初识RapidMiner

本节由一系列练习与问题组成&#xff0c;这些练习与问题有助于理解多个基本概念。它侧重于各种特定步骤&#xff0c;以进行直接的探索性数据分析。因此&#xff0c;其主要目标是测试一些检查初步数据特征的方法。大多数练习都是关于图表技术&#xff0c;通常用于数据挖掘。 为此…

【复现】cellinx摄像设备 未授权漏洞_50

目录 一.概述 二 .漏洞影响 三.漏洞复现 1. 漏洞一&#xff1a; 四.修复建议&#xff1a; 五. 搜索语法&#xff1a; 六.免责声明 一.概述 cellinx是一家韩国的摄像设备 二 .漏洞影响 通过未授权访问可以创建用户进入后台&#xff0c;可能造成系统功能破坏。 三.漏洞复…

多线程面试题汇总

多线程面试题汇总 一、多线程1、线程的生命周期2、线程的创建&#xff08;函数创建&#xff09;3、线程的创建&#xff08;使用类&#xff09;4、守护线程 二、全局解释器锁1、使用单线程实现累加到5000000002、使用多线程实现累加到5000000003、总结 三、线程安全1、多线程之数…

SQL的1999语法

目录 交叉连接 实现交叉连接 自然连接 实现自然连接&#xff08;实际上就是内连接&#xff09; ON和USING 使用自然连接时要求两张表的字段名称相同&#xff0c;但是如果不相同或者两张表中有两组字段是重名,这时就要利用 ON 子句指定关联条件&#xff0c;利用 USING 子句…

【Android】使用Apktool反编译Apk文件

文章目录 1. 下载Apktool1.1 Apktool官网下载1.2 百度网盘下载 2. 安装Apktool3. 使用Apktool3.1 配置Java环境3.2 准备Apk文件3.3 反编译Apk文件3.3.1 解包Apk文件3.3.2 修改Apk文件3.3.3 打包Apk文件3.3.4 签名Apk文件 1. 下载Apktool 要使用Apktool&#xff0c;需要准备好 …

OpenSource - 一站式自动化运维及自动化部署平台

文章目录 orion-ops 是什么重构特性快速开始技术栈功能预览添砖加瓦License orion-ops 是什么 orion-ops 一站式自动化运维及自动化部署平台, 使用多环境的概念, 提供了机器管理、机器监控报警、Web终端、WebSftp、机器批量执行、机器批量上传、在线查看日志、定时调度任务、应…

2.14:二维数组、非函数实现strcat、strcmp、strcpy、strlen

1.编程实现二维数组的杨辉三角 程序代码&#xff1a; 1 #include<stdio.h>2 #include<string.h>3 #include<stdlib.h>4 int main(int argc, const char *argv[])5 {6 int n;7 printf("please enter n:");8 scanf("%d",&…

C++文件操作->文本文件(->写文件、读文件)、二进制文件(->写文件、读文件)

#include<iostream> using namespace std; #include <fstream>//头文件包含 //文本文件 写文件 void test01() { //1.包含头文件 fstream //2.创建流对象 ofstream ofs; //3.指定打开方式 ofs.open("test.txt", ios::out); //4.写…

蓝桥杯嵌入式学习记录——PWM输出

目录 一、PWM原理介绍 二、学习目的 三、cubeMX的配置 四、PWM输出代码 一、PWM原理介绍 PWM&#xff08;Pulse Width Modulation&#xff0c;脉宽调制&#xff09;是一种通过改变信号的脉冲宽度来控制电平的技术。它通过调整脉冲信号的占空比&#xff08;高电平时间与周期…

互联网加竞赛 基于计算机视觉的身份证识别系统

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于机器视觉的身份证识别系统 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng-sen…

【STM32 CubeMX】I2C中断方式与DMA方式

文章目录 前言一、I2C中断方式1.1 CubeMX配置I2C中断1.2 I2C中断函数使用Master模式Mem模式 1.3 DMA方式发送和接收CubeMX配置IIC DMA方式Master模式Mem模式 总结 前言 在STM32 CubeMX环境中&#xff0c;I2C&#xff08;Inter-Integrated Circuit&#xff09;通信协议的实现可…