两个相邻盒子的边框怎么只显示一个_【前端小课堂】0044 盒子

这是一个面向零基础的前端教程,很简单,用零散时间就可以学习。 

推荐早上读一下,晚上复习一下,如果可以奢侈一点,白天稍微练习一下下,总共花费 5~15 分钟。就酱!

已经好几次提到块(block)元素了,但都没有仔细讲解它的特征,现在开始来稍微认识一下。

nav 这个元素就是一个块元素。我们加上背景以后,可以观察到它的宽度是从左边到右边占满的。块元素的宽度默认是 100%。

如果你写一个 div,然后给他设置背景是看不见的,因为它的高度是0没有面积,所以并不会显示出来。如果你给他一个高度,或者在里面放上内容,将它的高度撑开就能够看到了。

但如果不给高度只给宽度,因为高度为 0,面积依然为 0,所以还是看不见。

给了高度,给了宽度,当他占不满整个宽度的时候,就会靠左侧显示。那如果有连续的几个块元素,即便宽度足够让他们并排(水平排列),他们依然会每一个占据一行纵向排列。

上面这些内容都可以自己动手尝试来体会一下。下面的内容先了解一下理论,我们后面再慢慢的深入。

我们称他为盒子,但实际上是二维的,所以他有上下左右 4 个边框。默认情况下边框是没有宽度的,也不会显示出来,当然我们可以设置边框的宽度和样式等。

盒子里面当然可以装内容,盒子里面也可以套盒子。在盒子边框的内侧,我们还可以“垫”东西,这样盒子里装的内容和盒子的边框之间就隔开了距离,这叫做内补,就是在盒子的内壁补充了一部分空间。

反之还有外补,就是在盒子的外面补充了一部分空间,可以使相邻的盒子之间隔开距离。

>>>=== 小老鼠卖着萌走过去的分割线 ===<<<

学习的秘诀就在于坚持下去,可以通过给文章点赞来打卡学习。也让小老鼠了解到有人在看,然后更努力的更新。坚持,一起哦~ 

有疑问,有想法,有理解……都可以写在评论里。听懂了不等于会使用,会使用不等于能讲出来。尝试讲出自己的理解,是很好的学习方法呢~(小老鼠就在这样学习着,可爱!

可以来微信群一起讨论嗷~~【前端小课堂】微信群

这么可爱的小老鼠……Rua!这么简单的小教程,就学一下呗~~

【决心】学习的,可以找小老鼠,用小“鞭子”督促你~(收费哦,还贵呢~~92757402e14c4a52617bf1d54d06244b.png

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

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

相关文章

scala apply方法 笔记

原文出处&#xff1a;http://blog.csdn.net/pzw_0612/article/details/48576569 ----------------------------------------------------- Scala比Java更面向对象的一个方面是Scala没有静态成员。替代品是&#xff0c;Scala有单例对象&#xff1a;singleton object。 当单例对…

转:6.1海量数据处理

本文转自看云&#xff0c;原文地址请移步&#xff1a;https://www.kancloud.cn/kancloud/the-art-of-programming/41608 偶然闲游&#xff0c;偶遇某一站点&#xff0c;发现这里写的关于海量数据处理相关的思路还挺不错&#xff0c;所以在这里采摘收藏,如有侵权之处还请评论区或…

flash一个按钮控制动画_flutter闪屏过渡动画,闪光占位动画

在程序设计的理念中&#xff0c;讲究一切都来源于物理世界&#xff0c;在现实世界中&#xff0c;人们在每接触到一个新的事物或者说在手指触碰到一个事物时&#xff0c;总是心里默许期望有一个反馈效果&#xff0c;这就是来源于心底深处常常被人忽略的一个潜在期望。在程序的世…

动态改变_Excel中如何动态改变可编辑区域?

有这样一个工作场景&#xff1a;我们制作一个工作报表模板给同事填写数据&#xff0c;这个工作表格只可以在预设的可编辑区域编辑&#xff0c;其它都是受密码保护的&#xff0c;而且这个可编辑区域是随着日期——工作周的变化而发生变化的。也就是说在不同的工作周可编辑的区域…

java集合框架之ArrayList与LinkedList的区别

参考http://how2j.cn/k/collection/collection-arraylist-vs-linkedlist/690.html#nowhere ArrayList和LinkedList的区别 ArrayList 插入&#xff0c;删除数据慢LinkedList&#xff0c; 插入&#xff0c;删除数据快ArrayList是顺序结构&#xff0c;所以定位很快&#xff0c;指哪…

Spark集群安装

Spark是独立的&#xff0c;所以集群安装的时候&#xff0c;不像hive&#xff0c;hbase等需要先安装hadoop&#xff0c;除非文件保存在hadoop上&#xff0c;才需要安装hadoop集群。 如果虚拟机安装&#xff0c;点击阅读推荐配置 前提环境&#xff1a; 1、安装了JDK1.7及以上版…

列表逆序排序_【Python自学笔记】集合——列表

list列表类型是一个与元组tuple类似的有序序列。构造函数是list()切片# 切片 fruit ["Apple", "Hawthorn", "Loquat", "Medlar", "Pear", "Quince"] print(fruit[:2]) print(fruit[-1])语法与字符串和元组中的一…

esp8266 阿里云 arduino_NUCLEO-G071RB通过WiFi与NB连接阿里云

开箱体验试用背景去年年初&#xff0c;有新项目要让移动式容器设备的监控数据上云&#xff0c;选型时主要考虑三个系列STM32L0、STM32G0和STM8。最初有意向选用STM32L052RB&#xff0c;主要是为了满足低功耗需求。恰逢G0系列上市&#xff0c;价格亲民&#xff0c;性能却要高很多…

“云上金融,智创未来” 腾讯“云+未来”峰会金融专场在广州举行

5月24日&#xff0c;腾讯“云未来“峰会金融专场在广州举行。来自央行、腾讯公司以及银行、证券、保险、互金公司等腾讯金融云的合作伙伴代表以及行业专家&#xff0c;共同分享了智慧金融、企业数字化转型、腾讯金融云业务布局以及与合作伙伴取得的最新成绩等话题。活动现场&am…

Spark算子reduceByKey深度解析

原文地址&#xff1a;http://blog.csdn.net/qq_23660243/article/details/51435257 -------------------------------------------- 最近经常使用到reduceByKey这个算子&#xff0c;懵逼的时间占据多数&#xff0c;所以沉下心来翻墙上国外的帖子仔细过了一遍&#xff0c;发现一…

绕固定轴分解_3轴 / 5轴 / 3+2到底是什么......??

一、 什么是32定位加工在一个三轴铣削程序执行时&#xff0c;使用五轴机床的两个旋转轴将切削刀具固定在一个倾斜的位置&#xff0c;32加工技术的名字也由此而来&#xff0c;这也叫做定位五轴机床&#xff0c;因为第四个轴和第五个轴是用来确定在固定位置上刀具的方向&#xff…

启动spark shell

spark集群安装教程&#xff1a;http://blog.csdn.net/zengmingen/article/details/72123717 启动spark shell. 在spark安装目录bin文件夹下 ./spark-shell --master spark://nbdo1:7077 --executor-memory 2g --total-executor-cores 2 参数说明&#xff1a; --master spark…

python发送excel文件_Python操作Excel, 开发和调用接口,发送邮件

接口开发&#xff1a; importflaskimporttoolsimportjson,redisimportrandom server flask.Flask(__name__)#新建一个服务&#xff0c;把当前这个python文件当做一个服务 ip 118.24.3.40passwordHK139bc&*r redis.Redis(hostip,passwordpassword,port6379,db10, decode_res…

go conn 读取byte数组后是否要_【技术推荐】正向角度看Go逆向

Go语言具有开发效率高&#xff0c;运行速度快&#xff0c;跨平台等优点&#xff0c;因此正越来越多的被攻击者所使用&#xff0c;其生成的是可直接运行的二进制文件&#xff0c;因此对它的分析类似于普通C语言可执行文件分析&#xff0c;但是又有所不同&#xff0c;本文将会使用…

Confluence 6 选择一个外部数据库

2019独角兽企业重金招聘Python工程师标准>>> 注意&#xff1a; 选择一个合适的数据库通常需要花费很多时间。同时 Confluence 自带的 XML 数据备份和恢复功能通常也不适合合并和备份有大量数据的数据库。如果你想在系统运行后进行数据合并&#xff0c;你通常需要使用…

python爬取内容乱码_python爬取html中文乱码

环境&#xff1a; python3.6 爬取代码&#xff1a; import requests url https://www.dygod.net/html/tv/hytv/ req requests.get(url) print(req.text) 爬取结果&#xff1a; / _-如上&#xff0c;title内容出现乱码&#xff0c;自己感觉应该是编码的问题&#xff0c;但是不…

前端每日实战:34# 视频演示如何用纯 CSS 创作在文本前后穿梭的边框

效果预览 按下右侧的“点击预览”按钮可以在当前页面预览&#xff0c;点击链接可以全屏预览。 https://codepen.io/comehope/pen/qYepNv 可交互视频教程 此视频是可以交互的&#xff0c;你可以随时暂停视频&#xff0c;编辑视频中的代码。 请用 chrome, safari, edge 打开观看。…

spark shell中编写WordCount程序

启动hdfs 略http://blog.csdn.net/zengmingen/article/details/53006541 启动spark 略安装&#xff1a;http://blog.csdn.net/zengmingen/article/details/72123717 spark-shell&#xff1a;http://blog.csdn.net/zengmingen/article/details/72162821准备数据 vi wordcount.t…

mysql计算机二级选择题题库_全国计算机二级mysql数据库选择题及答案

全国计算机二级mysql数据库选择题及答案选择题是全国计算机二级mysql考试里的送分题&#xff0c;下面小编为大家带来了全国计算机二级mysql数据库选择题及答案&#xff0c;欢迎大家阅读&#xff01;全国计算机二级mysql数据库选择题及答案1) 函数 max( ) 表明这是一个什么函数?…

git add 撤销_更科学地管理你的项目,Git 简明教程(二)

修改文件内容上回说到&#xff0c;我们已经成功创建并提交了一个 README.md 文件到 FirstGit 版本库中1、修改文件现在我们更改 README.md 内容2、查看版本库状态该文件夹内右键运行 Git Bash Here执行命令 git statusGit 提示我们的改动还没有 commit&#xff0c;并且它给出了…