当前位置: 首页 > news >正文

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

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

目录

前言

盒子模型组成

边框

语法

边框简写

代码示例

表格的细线边框

语法

内边距

内边距复合写法

外边距

外边距典型应用

外边距合并

清除内外边距

总结


前言

前几天接了个实习,最近在和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;}

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


总结

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

相关文章:

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

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 盒子模型组成 边框 语法 边框简写 代码示例 表格的细线边框 语法 内边距 内边距复合写法 外边距 外边距典型应用 外边距合并 清除内外边距 总结 前…...

【C++】类和对象(十二):实现日期类

大家好&#xff0c;我是苏貝&#xff0c;本篇博客带大家了解C的实现日期类&#xff0c;如果你觉得我写的还不错的话&#xff0c;可以给我一个赞&#x1f44d;吗&#xff0c;感谢❤️ 目录 1 /!/>/</>/<运算符重载2 /-//-运算符重载(A) 先写&#xff0c;再通过写(B…...

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《提升系统频率支撑能力的“车-氢”柔性可控负荷协同构网控制》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…...

异或的性质

交换两个变量的值&#xff0c;不使用第三个变量。 即a3,b5,交换之后a5,b3; 有两种解法, 一种用算术算法, 一种用^(异或) a a b; b a - b; a a - b; or a a^b;// 只能对int,char… b a^b; a a^b; or a ^ b ^ a; 异或交换两个变量值的方法是利用了异或运算的特性。下面是…...

新一代Webshell管理器

工具介绍 游魂是一个开源的Webshell管理器&#xff0c;提供更为方便的界面和更为简单易用的功能&#xff0c;可配合或代替其他webshell管理器&#xff0c;帮助用户在各类渗透场景中控制目标机器。游魂不仅支持常见的一句话webshell以及常见Webshell管理器的功能&#xff0c;还…...

「iOS」——知乎日报一二周总结

知乎日报仿写 前言效果Manager封装网络请求线程冲突问题下拉刷新添加网络请求的图片通过时间戳和日期格式化获取时间 总结 前言 前两周内容的仿写&#xff0c;主要完成了首页的仿写&#xff0c;进度稍慢。 效果 Manager封装网络请求 知乎日报的仿写需要频繁的申请网络请求&am…...

windows C#-匿名类型

匿名类型提供了一种方便的方法&#xff0c;可用来将一组只读属性封装到单个对象中&#xff0c;而无需首先显式定义一个类型。 类型名由编译器生成&#xff0c;并且不能在源代码级使用。 每个属性的类型由编译器推断。 可结合使用 new 运算符和对象初始值设定项创建匿名类型。 …...

CryptoHack 简介

CryptoHack 简介 文章目录 CryptoHack 简介一、python的安装&#xff0c;运行二、ASCII码三、十六进制四、Base64五、字节和大整数六、XOR1.基本2.xor属性3.xor隐藏字节4.cryptohack——You either know, XOR you dont 一、python的安装&#xff0c;运行 二、ASCII码 chr()函数…...

transformControls THREE.Object3D.add: object not an instance of THREE.Object3D.

把scene.add(transformControls);改为scene.add(transformControls.getHelper());...

游戏开发与游戏运营:哪个更难?

在探讨游戏产业时&#xff0c;游戏开发和游戏运营是两个至关重要的环节。它们各自承担着不同的职责&#xff0c;共同推动着游戏产品的成功与发展。然而&#xff0c;关于哪个环节更难的问题&#xff0c;并没有一个绝对的答案&#xff0c;因为两者都涉及复杂的流程、专业技能和独…...

大模型在自动化渗透测试中的应用

1. 引言 随着人工智能技术的快速发展&#xff0c;特别是大模型&#xff08;如GPT-3、GPT-4等&#xff09;的出现&#xff0c;自动化渗透测试领域迎来了新的机遇。大模型具有强大的自然语言处理能力和生成能力&#xff0c;能够在多个环节提升渗透测试的效率和准确性。本文将详细…...

《AI在企业战略中的关键地位:以微软和阿里为例》

内容概要 在当今商业环境中&#xff0c;人工智能&#xff08;AI&#xff09;的影响力如滔滔洪水&#xff0c;愈演愈烈。文章将揭示AI在企业战略中的崛起&#xff0c;尤其以微软和阿里巴巴为代表的企业&#xff0c;这两家科技巨头通过不同方式&#xff0c;将智能技术融入其核心…...

C语言 | Leetcode C语言题解之第537题复数乘法

题目&#xff1a; 题解&#xff1a; bool parseComplexNumber(const char * num, int * real, int * image) {char *token strtok(num, "");*real atoi(token);token strtok(NULL, "i");*image atoi(token);return true; };char * complexNumberMulti…...

Vue如何实现数据的双向绑定和局部更新?

1、Vue如何实现数据的双向绑定和局部更新&#xff1f; Vue.js中数据的双向绑定和局部更新可以通过v-model指令来实现。v-model是一个内置的双向数据绑定机制&#xff0c;用于将输入元素&#xff08;如input、textarea、select等&#xff09;与Vue实例的数据进行双向绑定。 在…...

java学习1

一、运算符 1.算术运算符 在代码中&#xff0c;如果有小数参与计算&#xff0c;结果有可能不精确 1-1.隐式转换和强制转换 数字进行运算时&#xff0c;数据类型不一样不能运算&#xff0c;需要转成一样的&#xff0c;才能运算 &#xff08;1&#xff09;隐式转换&#xff1a…...

如何缩小PPT演示文稿的大小?

有时候PPT的磁盘空间一不小心就变得意想不到的大&#xff0c;比如上百MB&#xff0c;该如何缩小PPT的大小从而便于上传或者携带呢&#xff1f; 导致PPT大的原因&#xff1a; 媒体文件在插入或者复制到演示文稿里会被直接涵盖在其中&#xff08;.pptx版本&#xff09;&#xf…...

闯关leetcode——234. Palindrome Linked List

大纲 题目地址内容 解题代码地址 题目 地址 https://leetcode.com/problems/palindrome-linked-list/description/ 内容 Given the head of a singly linked list, return true if it is a palindrome or false otherwise. Example 1: Input: head [1,2,2,1] Output: tru…...

通过源码分析类加载器里面可以加载的类

类列表 每一个ClassLoader里面的类列表&#xff0c;类的数量都是固定的。 对上一节中的dex反编译 使用DexClassLoader类动态加载插件dex   利用jadx对dex进行反编译可以看到有哪些类 源码分析 BaseDexClassLoader 从BaseDexClassLoader类加载器开始分析 在BaseDexClassLoade…...

RSA算法:数字安全的基石

## RSA算法&#xff1a;数字安全的基石 RSA算法是现代密码学的重要组成部分&#xff0c;它为安全通信和数据保护提供了坚实的基础。本文将探讨RSA算法的基本原理、实施过程以及实际应用场景。 ### 一、RSA算法概述 RSA&#xff08;Rivest-Shamir-Adleman&#xff09;算法是由…...

DPDK高性能处理框架VPP

VPP 环境安装 $ git clone -b stable/1801 https://github.com/FDio/vpp.git $ ./extras/vagrant/build.sh && make 在编译成功以后&#xff0c;会生成上图红色的 deb 表 $ dpkg –i vpp-lib_18.01.2-1~g9b554f3_amd64.deb $ dpkg –i vpp_18.01.2-1~g9b554f3_amd…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...

Linux中《基础IO》详细介绍

目录 理解"文件"狭义理解广义理解文件操作的归类认知系统角度文件类别 回顾C文件接口打开文件写文件读文件稍作修改&#xff0c;实现简单cat命令 输出信息到显示器&#xff0c;你有哪些方法stdin & stdout & stderr打开文件的方式 系统⽂件I/O⼀种传递标志位…...

论文阅读:Matting by Generation

今天介绍一篇关于 matting 抠图的文章&#xff0c;抠图也算是计算机视觉里面非常经典的一个任务了。从早期的经典算法到如今的深度学习算法&#xff0c;已经有很多的工作和这个任务相关。这两年 diffusion 模型很火&#xff0c;大家又开始用 diffusion 模型做各种 CV 任务了&am…...

鸿蒙Navigation路由导航-基本使用介绍

1. Navigation介绍 Navigation组件是路由导航的根视图容器&#xff0c;一般作为Page页面的根容器使用&#xff0c;其内部默认包含了标题栏、内容区和工具栏&#xff0c;其中内容区默认首页显示导航内容&#xff08;Navigation的子组件&#xff09;或非首页显示&#xff08;Nav…...