前端学习-盒子模型(十八)

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

目录

前言

盒子模型组成

边框

语法

边框简写

代码示例

表格的细线边框

语法

内边距

内边距复合写法

外边距

外边距典型应用

外边距合并

清除内外边距

总结


前言

前几天接了个实习,最近在和hr商讨这个,接下来会恢复更新


盒子模型组成

所谓盒子模型,就是把HTML页面中的布局元素看成一个矩形的盒子,也就是一个盛有内容的容器

CSS盒子模型本质上是一个盒子,封装周围的HTML元素,包括边框,外边距,内边距以及实际内容

border边框,content内容,padding内边距以及外边距margin

边框

broder可以设置元素的边框,边框由三部分组成:边框宽度,边框样式以及边框颜色

语法

border : border-width || border-style ||border-color

 

边框简写

border :1px solid red; 没有顺序

边框分开写法border-top :1px solid red;/只设定上边框 其余同理/

代码示例

<!DOCTYPE html><html lang="en"><head>​ <meta charset="UTF-8">​ <meta name="viewport" content="width=device-width, initial-scale=1.0">​ <title>边框样式</title>​ <style>​ div {​ width: 300px;​ height: 200px;​ border-width: 5px;​ border-style: solid;​ /solid实线边框,dashed虚线边框,dotted点状边框/​ border-color: blue;​ }​ </style></head><body>​ <div>​ <p>这是一个段落。</p>​ </div></body></html>

表格的细线边框

border-collapse属性控制浏览器绘制表格边框的方式,控制相邻单元格的边框

语法
border-collapse:collapse;

collapse单词是合并的意思

border-collapse:collapse;表示相邻边框合并在一起

注意:边框会影响盒子的实际大小

内边距

padding属性用于设置内边距,即边框与内容之间的距离

内边距复合写法

padding属性(简写属性)可以有一到四个值

注:内容和边框有了距离,添加了内边距。padding影响了盒子实际大小。如果想让盒子跟效果图大小保持一致,则让width/height减去多出来的内边距大小即可。

外边距

margin属性用于设置外边距,即控制盒子和盒子之间的距离

margin的简写方式和padding完全一致

外边距典型应用

外边距可以让块级盒子水平居中,但是必须满足两个条件

1.盒子必须指定了宽度

2.盒子的左右边距都设置为auto

.header{width:960px;margin:0 auto;}

常见的写法:

margin-left:auto;margin-right:automargin:automargin:0 auto;

注意:以上方法是让块级元素水平居中,行内元素或者行内块元素居中给其父元素添加text-align:center即可

外边距合并

使用 margin 定义块元素的垂直外边距时,可能会出现外边距的合并。1.相邻块元素垂直外边距的合并当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距 margin-bottom,下面的元素有上外边距 margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的合并之前较大者这种现象被称为相邻块元素垂直外边距的合并

解决方法:尽量只给一个盒子添加margin值

2.嵌套块元素垂直外边距的塌陷对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会場陷较大的外边距值。

解决方案

①可以为父元素定义上边框。②可以为父元素定义上内边距,③ 可以为父元素添加overflow:hidden

清除内外边距

网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致,因此我们在布局前,首先要清除下网页元素的内外边距

*{padding:0;margin:0;}

行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级和行内块元素就可以了


总结

远山起风又起雾,无人知我来时路

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

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

相关文章

GHuNeRF: Generalizable Human NeRF from a Monocular Video

研究背景 研究问题&#xff1a;这篇文章要解决的问题是学习一个从单目视频中泛化的人类NeRF模型。尽管现有的泛化人类NeRF已经取得了令人印象深刻的成果&#xff0c;但它们需要多视图图像或视频&#xff0c;这在某些情况下可能不可用。此外&#xff0c;一些基于单目视频的人类…

为啥学习数据结构和算法

基础知识就像是一座大楼的地基&#xff0c;它决定了我们的技术高度。而要想快速做出点事情&#xff0c;前提条件一定是基础能力过硬&#xff0c;“内功”要到位。 想要通关大厂面试&#xff0c;千万别让数据结构和算法拖了后腿 我们学任何知识都是为了“用”的&#xff0c;是为…

离线安装Vue2开发环境

在外网进行Vue2开发后&#xff0c;需要转到内网开发&#xff0c;无法在线依赖库安装&#xff0c;需要迁移node_modules。 1.内外网开发电脑安装同样版本的nodejs 我本地安装的node-v16.17.1-x64.msi&#xff0c;所以在内网环境也要按照node-v16.17.1-x64.msi。 在外网环境使用…

初探Flink的序列化

Flink中的序列化应用场景 程序通常使用(至少)两种不同的数据表示形式[2]&#xff1a; 1. 在内存中&#xff0c;数据保存在对象、结构体、列表、数组、哈希表和树等结构中。 2. 将数据写入文件或通过网络发送时&#xff0c;必须将其序列化为字节序列。 从内存中的表示到字节序列…

【ESP32】ESP-IDF开发 | I2C控制器+I2C主从收发例程

1. 简介 I2C&#xff08;Inter-Integrated Circuit&#xff09;&#xff0c;是由Philips公司在1980年代初开发的一种半双工的同步串行总线&#xff0c;它利用一根时钟线和一根数据线在连接总线的两个器件之间进行信息的传递&#xff0c;为设备之间数据交换提供了一种简单高效的…

提高交换网络可靠性之端口安全配置

转载请注明出处 此实验为配置交换机端口安全&#xff0c;当非法设备接入接口时自动触发安全措施 1.查看PC1和PC2的MAC地址&#x1f447; 2.交换机改名为S1&#xff0c;同时启用端口安全 3.配置允许接入设备 4.设置违规处理方式&#xff1a;即违规则关闭端口 5.查看安全端口相关…

UE5 第三人称学习之动画 control rig

这个东西和建模软件里有的是一个东西&#xff0c;然后IK就是你动脚&#xff0c;他帮你算出小腿大腿该怎么动&#xff0c;FK就是你自己动了大腿&#xff0c;摆小腿&#xff0c;然后再摆脚 就是给每一根骨骼搞一个控制器&#xff0c;给他一个容易选中和操作更明显的图形作为控制…

宏处理将多个excel文件的指定sheet页合并到一个excel文件中

背景了解&#xff1a;有个同事问我&#xff1a;现在他要处理一千多个文件&#xff0c;每个excel文件都有3个sheet页签&#xff0c;想把所有的excel文件的第二个sheet页签复制一份放到一个新的excel文件中。如果是手动去操作一个个文件的复制&#xff0c;也没什么不可&#xff0…

Linux系列-进程的概念

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” 这篇文章&#xff0c;我们主要分析一下进程。 之前&#xff0c;我们讲过了冯诺依曼体系架构&#xff0c; 我们常见的计算机&#xff0c;像笔记本&#xff0c;或者不常见的计算机…

SQL优化经验大全(表设计优化,索引优化,索引创建规则、索引失效场景,sql语句优化,主从复制,分库分表)面试题

目录 1.表的设计优化 2.索引优化 2.1 索引创建的规则 2.2 索引失效的场景 3.SQL语句优化 4.主从复制、读写分离 5.分库分表 5.1.怎么判断项目是需要分库还是要分表&#xff1f; 5.2 分库分表有哪些拆分方案&#xff1f; 5.2.1 垂直分库 5.2.2 垂直分表 5.2.3 水平分…

css边框修饰

一、设置线条样式 通过 border-style 属性设置&#xff0c;可选择的一些属性如下&#xff1a; dotted&#xff1a;点线 dashed&#xff1a;虚线 solid&#xff1a;实线 double&#xff1a;双实线 效果如下&#xff1a; 二、设置边框线宽度 ① 通过 border-width 整体设置…

OpenGL入门002——顶点着色器和片段着色器

文章目录 一些概念坐标转换阶段顶点着色器片段着色器VBOVAO 实战简介main.cppCMakeLists.txt最终效果 一些概念 坐标转换阶段 概述&#xff1a; 模型空间、世界空间、视图空间和裁剪空间是对象在3D场景中经历的不同坐标变换阶段。每个空间对应渲染管道的一个步骤&#xff0c;…

LeetCode 684.冗余连接:拓扑排序+哈希表(O(n)) 或 并查集(O(nlog n)-O(nα(n)))

【LetMeFly】684.冗余连接&#xff1a;拓扑排序哈希表&#xff08;O(n)&#xff09; 或 并查集&#xff08;O(nlog n)-O(nα(n))&#xff09; 力扣题目链接&#xff1a;https://leetcode.cn/problems/redundant-connection/ 树可以看成是一个连通且 无环 的 无向 图。 给定往…

C语言指针与一维数组 Java动态初始化与常见问题(越界问题)

1./*int main(void) { int a[5] { 10,20,30,40,50 };//数组间的元素地址相连的 int* p; printf("a代表的地址&#xff1a;%d\n", a);//数组首个元素的地址 printf("a1代表的地址&#xff1a;%d\n", a 1);//偏移数组 printf("a2…

2023年SEO趋势分析与未来发展展望

内容概要 在2023年的数字营销环境中&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;依然扮演着关键角色。随着技术的不断演进和用户需求的变化&#xff0c;SEO趋势也在不断变化。首先&#xff0c;核心算法的更新已开始影响网站排名&#xff0c;搜索引擎越来越注重网站内…

面试经典 150 题:189、383

189. 轮转数组 【参考代码】 class Solution { public:void rotate(vector<int>& nums, int k) {int size nums.size();if(1 size){return;}vector<int> temp(size);//k k % size;for(int i0; i<size; i){temp[(i k) % size] nums[i];}nums temp; }…

Linux云计算 |【第五阶段】CLOUD-DAY8

主要内容&#xff1a; 掌握DaemonSet控制器、污点策略&#xff08;NoSchedule、Noexecute&#xff09;、Job / CronJob资源对象、掌握Service服务、服务名解析CluterIP&#xff08;服务名自动发现&#xff09;、&#xff08;Nodeport、Headless&#xff09;、Ingress控制器 一…

智能网联汽车:人工智能与汽车行业的深度融合

内容概要 在这个快速发展的时代&#xff0c;智能网联汽车已经不再是科幻电影的专利&#xff0c;它正在悄然走进我们的日常生活。如今&#xff0c;人工智能&#xff08;AI&#xff09;技术与汽车行业的结合犹如一场科技盛宴&#xff0c;让我们看到了未来出行的新方向。通过自动…

Iceoryx2:高性能进程间通信框架(中间件)

文章目录 0. 引言1. 主要改进2. Iceoryx2 的架构3. C示例代码3.1 发布者示例&#xff08;publisher.cpp&#xff09;3.2 订阅者示例&#xff08;subscriber.cpp&#xff09; 4. 机制比较5. 架构比较6. Iceoryx vs Iceoryx2参考资料 0. 引言 Iceoryx2 是一个基于 Rust 实现的开…

NumPy安装

1.NumPy简介 NumPy(Numerical Python) 是 Python 语言的扩展程序库&#xff0c;支持大量维度数组与矩阵运算&#xff0c;此外也针对数组运算提供大量的数学函数库。 NumPy 的前身 Numeric 最早由 Jim Hugunin 与其它协作者共同开发&#xff0c;2005 年&#xff0c;Travis Oliph…