盒子模型的基础

  • 盒子模型

    • 边框（border）

    • border可以设置元素的边框，边框分成三部分，边框的（粗细）边框的样式，边框的颜色

    • <style>div {width: 100px;height: 100px;border-width: 200;border-style: 边框的样式 border-style: solid 实线边框 dashed 虚线边框 dotted 点线边框border-color: 边框颜色}
</style>
<body><div></div>
</body>

    • 边框的简写：没有顺序，一般规定。

    • border-width: 200;
border-style: 边框的样式 
border-color: 边框颜色

    • 简写后：border: 5px solid pink;

    • 可以分别让四个边框各自修改

    • border-top: 大小 边框样式 边框颜色。这是让上边框改变，还有bottom left right

    • border: 1px solid bule;

    • border-top: 1px solid red;//这个最靠近body里面的容器故呈现上边框是红色，其他边其他颜色

    • 当想合并两个方框的边框使其1+1=1则

    • border-collapse:collapse;

    • 测量盒子的大小的时候，不量边框

    • 测量包括边框时需要，width/height剪切边框的宽度

    • 让内容与边框有距离则利用填充的方法

    • padding-left: 200px;//将左边的进行填充
padding-top: 38px;//将上边进行填充

  • 如果固定了和盒子的大小使用padding就会使盒子变大，故当使用padding时要将其与盒子一起相加

  • 当父类有witch/height时，子类无需在定义。定义会超出父类的范围。在子类padding不会超出父类的范围

  • 外边距margin-left: 数值

  • 右外边距margin-right: 数值

  • 上外边距margin-top: 数值

  • 下外边距margin-bottom: 数值

  • 让盒子水平居中

  • 1、盒子必须指定了宽度（width)

  • 2、盒子左右的外边距都设置为auto

  • <style>div {width: 100px;height: 100px;background-color: aqua;margin: 0 auto;//0代表上下外边框为0，auto自动水平对齐}</style><body><div></div>
</body>

  • 以上的方法是让让块级元素水平居中，行内元素或者行内块元素水平居中需要给其父类元素添加text-align: center即可

  • 嵌套块元素垂直外边距的塌陷

  • 由于两个父子关系的块元素，两个都用margin-top: 59px；最终执行的是父类的塌陷

  • 解决方法一、父类定义上边框

  • border: 1px solid transparent；//transparent是全透明

  • 方法二、给父类上内边框

  • padding: 1px ；

  • 方法三、给父类添加overflow.hidden

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

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

相关文章

【面试HOT100】哈希双指针滑动窗口

【面试HOT100】哈希双指针滑动窗口

系列综述&#xff1a; &#x1f49e;目的&#xff1a;本系列是个人整理为了秋招面试的&#xff0c;整理期间苛求每个知识点&#xff0c;平衡理解简易度与深入程度。 &#x1f970;来源&#xff1a;材料主要源于LeetCodeHot100进行的&#xff0c;每个知识点的修正和深入主要参考…
阅读更多...
openGauss学习笔记-92 openGauss 数据库管理-内存优化表MOT管理-内存表特性-使用MOT-MOT使用MOT SQL覆盖和限制

openGauss学习笔记-92 openGauss 数据库管理-内存优化表MOT管理-内存表特性-使用MOT-MOT使用MOT SQL覆盖和限制

文章目录 openGauss学习笔记-92 openGauss 数据库管理-内存优化表MOT管理-内存表特性-使用MOT-MOT使用MOT SQL覆盖和限制92.1 不支持的特性92.2 MOT限制92.3 不支持的DDL操作92.4 不支持的数据类型92.5 不支持的索引DDL和索引92.6 不支持的DML92.7 不支持的JIT功能&#xff08;…
阅读更多...
自然语言处理的分类

自然语言处理的分类

动动发财的小手&#xff0c;点个赞吧&#xff01; 简介 作为理解、生成和处理自然语言文本的有效方法&#xff0c;自然语言处理&#xff08;NLP&#xff09;的研究近年来呈现出快速传播和广泛采用。鉴于 NLP 的快速发展&#xff0c;获得该领域的概述并对其进行维护是很困难的。…
阅读更多...
代码随想录算法训练营第四十五天 | 1049. 最后一块石头的重量 II、494. 目标和、474.一和零

代码随想录算法训练营第四十五天 | 1049. 最后一块石头的重量 II、494. 目标和、474.一和零

1049. 最后一块石头的重量 II 视频讲解&#xff1a;动态规划之背包问题&#xff0c;这个背包最多能装多少&#xff1f;LeetCode&#xff1a;1049.最后一块石头的重量II_哔哩哔哩_bilibili 代码随想录 &#xff08;1&#xff09;代码 494. 目标和 视频讲解&#xff1a;动态规划…
阅读更多...
计算机竞赛 深度学习疫情社交安全距离检测算法 - python opencv cnn

计算机竞赛 深度学习疫情社交安全距离检测算法 - python opencv cnn

文章目录 0 前言1 课题背景2 实现效果3 相关技术3.1 YOLOV43.2 基于 DeepSort 算法的行人跟踪 4 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习疫情社交安全距离检测算法 ** 该项目较为新颖&#xff0c;适合作为竞赛…
阅读更多...
剑指offer——JZ34 二叉树中和为某一值的路径（二） 解题思路与具体代码【C++】

剑指offer——JZ34 二叉树中和为某一值的路径（二） 解题思路与具体代码【C++】

一、题目描述与要求 二叉树中和为某一值的路径(二)_牛客题霸_牛客网 (nowcoder.com) 题目描述 输入一颗二叉树的根节点root和一个整数expectNumber&#xff0c;找出二叉树中结点值的和为expectNumber的所有路径。 1.该题路径定义为从树的根结点开始往下一直到叶子结点所经过…
阅读更多...
Youtube视频下载工具分享-油管视频，音乐，字幕下载方法汇总

Youtube视频下载工具分享-油管视频，音乐，字幕下载方法汇总

YouTube视频下载方法简介 互联网上存在很多 YouTube 下载工具&#xff0c;但我们经常会发现自己收藏的工具没过多久就会失效&#xff0c;我们为大家整理的这几种方法&#xff0c;是存在时间较久并且亲测可用的。后续如果这些工具失效或者有更好的工具&#xff0c;我们也会分享…
阅读更多...
c++day2

c++day2

1.XMIND 2. 自己封装一个矩形类(Rect)&#xff0c;拥有私有属性:宽度(width)、高度(height)&#xff0c;定义公有成员函数: 初始化函数:void init(int w, int h) 更改宽度的函数:set_w(int w) 更改高度的函数:set_h(int h) 输出该矩形的周长和面积函数:void show() #include &…
阅读更多...
基于SSM的固定资产管理系统的设计与实现

基于SSM的固定资产管理系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…
阅读更多...
网站强制跳转至国家反诈中心该怎么办？怎么处理？如何解封？

网站强制跳转至国家反诈中心该怎么办？怎么处理？如何解封？

在互联网环境中&#xff0c;网站安全是非常重要的。然而&#xff0c;在实际操作过程中&#xff0c;不少网站可能因内容问题、技术安全漏洞等原因被迫下线甚至跳转至国家反诈骗中心网址。面对这一严峻问题&#xff0c;我们如何有效解决&#xff0c;让网站恢复运行并解除强制跳转…
阅读更多...
点餐小程序实战教程06-首页开发

点餐小程序实战教程06-首页开发

用户注册功能开发好了之后&#xff0c;我们就要开发小程序&#xff0c;首先我们是规划小程序的功能模块&#xff0c;我们一共是四个模块&#xff0c;分别是首页、订单、消息和我的。 首页我们主要是点餐的功能&#xff0c;可以选择菜品&#xff0c;加入到购物车&#xff0c;然…
阅读更多...
【C++】stack/queue/deque

【C++】stack/queue/deque

目录 一、stack 1.1 stack的接口 1.2 关于使用stack的例题 1.2.1 最小栈 1.2.2 栈的压入、弹出序列 1.2.4 逆波兰表达式求值 1.3 stack的模拟实现 二、queue 2.1 queue的接口 2.2 queue的模拟实现 三、deque 3.1 deque底层实现原理 3.1.1 头插实现原理 3.1.2 尾插…
阅读更多...
Cocos Creator3.8 项目实战（五）背景无限滚屏效果如何实现

Cocos Creator3.8 项目实战（五）背景无限滚屏效果如何实现

在游戏中&#xff0c;我们经常会实现背景无限滚动的效果。那这些效果是怎么实现的呢&#xff1f; 原理很简单&#xff0c;就是使用多张背景图&#xff0c;每张图&#xff0c;每一帧都同时移动&#xff0c;当图移出屏幕外时&#xff0c;将其位置设置到下一张图的初始位置&#x…
阅读更多...
加速attention计算的工业标准：flash attention 1和2算法的原理及实现

加速attention计算的工业标准：flash attention 1和2算法的原理及实现

transformers目前大火&#xff0c;但是对于长序列来说&#xff0c;计算很慢&#xff0c;而且很耗费显存。对于transformer中的self attention计算来说&#xff0c;在时间复杂度上&#xff0c;对于每个位置&#xff0c;模型需要计算它与所有其他位置的相关性&#xff0c;这样的计…
阅读更多...
10.8c++作业

10.8c++作业

#include <iostream>using namespace std; class Rect {int width; //宽int height; //高 public://初始化函数void init(int w,int h){widthw;heighth;}//更改宽度void set_w(int w){widthw;}//更改高度void set_h(int h){heighth;}//输出矩形周长和面积void show(){co…
阅读更多...
【ORACLE】ORA-00972：标识符过长

【ORACLE】ORA-00972：标识符过长

问题 执行创建表结构sql&#xff0c;提示 ORA-00972&#xff1a;标识符过长&#xff1b; 如图所示&#xff0c;约束名称超过30个字符了 原因 一、11G and before 在使用11G数据库时&#xff0c;经常会遇到报错ORA-00972&#xff0c;原因是因为对象名称定义太长&#xff0c…
阅读更多...
C++——继承

C++——继承

什么是继承 继承是两个类之间的关系&#xff0c;可以实现派生类&#xff08;子类&#xff09;对基类&#xff08;父类&#xff09;的复用&#xff0c;即派生类在基类的基础上进行扩展&#xff0c;实现更多功能。例如学生和人这两个对象就可以是继承关系&#xff0c;学生具有人…
阅读更多...
基于Dockerfile搭建LNMP

基于Dockerfile搭建LNMP

目录 一、基础环境准备 1、环境前期准备 二、部署nginx&#xff08;容器IP 为 172.18.0.10&#xff09; 1、配置Dockerfile文件 2、配置nginx.conf文件 3、构建镜像、启动镜像 三、部署mysql 1、配置Dockerfile文件 2、配置my.conf文件 3、构建镜像、启动镜像 5、验…
阅读更多...
【Linux】Vim使用总结

【Linux】Vim使用总结

【Linux】Vim使用总结 Vim 的三种模式命令行模式1. 移动2.复制&#xff0c;粘贴&#xff0c;剪切3.撤销4.大小写切换&#xff0c;替换&#xff0c;删除 插入模式底行模式 Vim 的三种模式 一进入VIM就是处于一般模式&#xff08;命令模式&#xff09;&#xff0c;该模式下只能输…
阅读更多...
flink双流join结果数据重复问题排查

flink双流join结果数据重复问题排查

1.背景 Kafka的两个topic&#xff0c;topic1 为用户下单明细记录&#xff08;包含订单基本信息&#xff09;&#xff0c;topic2为下单渠道记录&#xff08;包含下单来源和渠道内容设备相关的信息&#xff09; &#xff0c;要求实时统计每分钟内所有订单下的渠道来源分布详情。具…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023