兩個相鄰盒子的邊框怎么只顯示一個_【前端小課堂】0044 盒子

這是一個面向零基礎的前端教程,很簡單,用零散時間就可以學習。?

推薦早上讀一下,晚上復習一下,如果可以奢侈一點,白天稍微練習一下下,總共花費 5~15 分鐘。就醬!

已經好幾次提到塊(block)元素了,但都沒有仔細講解它的特征,現在開始來稍微認識一下。

nav 這個元素就是一個塊元素。我們加上背景以后,可以觀察到它的寬度是從左邊到右邊占滿的。塊元素的寬度默認是 100%。

如果你寫一個 div,然后給他設置背景是看不見的,因為它的高度是0沒有面積,所以并不會顯示出來。如果你給他一個高度,或者在里面放上內容,將它的高度撐開就能夠看到了。

但如果不給高度只給寬度,因為高度為 0,面積依然為 0,所以還是看不見。

給了高度,給了寬度,當他占不滿整個寬度的時候,就會靠左側顯示。那如果有連續的幾個塊元素,即便寬度足夠讓他們并排(水平排列),他們依然會每一個占據一行縱向排列。

上面這些內容都可以自己動手嘗試來體會一下。下面的內容先了解一下理論,我們后面再慢慢的深入。

我們稱他為盒子,但實際上是二維的,所以他有上下左右 4 個邊框。默認情況下邊框是沒有寬度的,也不會顯示出來,當然我們可以設置邊框的寬度和樣式等。

盒子里面當然可以裝內容,盒子里面也可以套盒子。在盒子邊框的內側,我們還可以“墊”東西,這樣盒子里裝的內容和盒子的邊框之間就隔開了距離,這叫做內補,就是在盒子的內壁補充了一部分空間。

反之還有外補,就是在盒子的外面補充了一部分空間,可以使相鄰的盒子之間隔開距離。

>>>===?小老鼠賣著萌走過去的分割線 ===<<<

學習的秘訣就在于堅持下去,可以通過給文章點贊來打卡學習。也讓小老鼠了解到有人在看,然后更努力的更新。堅持,一起哦~?

有疑問,有想法,有理解……都可以寫在評論里。聽懂了不等于會使用,會使用不等于能講出來。嘗試講出自己的理解,是很好的學習方法呢~(小老鼠就在這樣學習著,可愛!

可以來微信群一起討論嗷~~【前端小課堂】微信群

這么可愛的小老鼠……Rua!這么簡單的小教程,就學一下唄~~

【決心】學習的,可以找小老鼠,用小“鞭子”督促你~(收費哦,還貴呢~~92757402e14c4a52617bf1d54d06244b.png

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/538603.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/538603.shtml
英文地址,請注明出處:http://en.pswp.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;所以在這里采摘收藏,如有侵權之處還請評論區或…

python爬去中國天氣網_python爬取中國天氣網并展示最低溫度

import requestsfrom bs4 import BeautifulSoupimport lxmlimport jsonfrom echarts import Echart,Bar,Axisimport time#城市與溫度的集合weather_list []#城市集合city_list []#溫蒂集合lowest_list []#獲取溫度def getTemperature(url):result requests.get(url)#print r…

flash一個按鈕控制動畫_flutter閃屏過渡動畫,閃光占位動畫

在程序設計的理念中&#xff0c;講究一切都來源于物理世界&#xff0c;在現實世界中&#xff0c;人們在每接觸到一個新的事物或者說在手指觸碰到一個事物時&#xff0c;總是心里默許期望有一個反饋效果&#xff0c;這就是來源于心底深處常常被人忽略的一個潛在期望。在程序的世…

scala-wordcount

/* * Mapreduce步驟 * 1、map&#xff1a;獲取一行 * 2、按空格分隔 * 3、每個單詞統計&#xff0c;<key,1> 輸出到 reducer * 4、reducer <key,{1,1,1,1,1}> 匯總 * 5、輸出結果 */ 1、聲明一個集合&#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;指哪…

python語言是由誰設計并領導開發的_python語言概述 - osc_lt3ocv4d的個人空間 - OSCHINA - 中文開源技術交流社區...

python語言的發展 python語言誕生于1990年&#xff0c;由Guide van Rossum設計并領導開發。 python語言是開源項目的優秀代表&#xff0c;其解釋器的全部代碼都是開源的。 編寫Hello程序 學習編程語言有一個慣例&#xff0c;即運行最簡單的Hello程序&#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…

unix環境高級編程 pdf_UNIX環境高級編程——記錄鎖

引言在多進程環境下&#xff0c;多個進程同時讀寫一個文件&#xff0c;如果不進行同步&#xff0c;就可能導致不期待的結果&#xff0c;如后一個進程覆蓋了前一個進程寫的內容。Unix為此提供了一種強大的解決辦法&#xff1a;記錄鎖記錄鎖記錄鎖本質上就是對文件加讀寫鎖&#…

LNMP源碼安裝腳本

LNMP安裝腳本&#xff0c;腳本環境 #LNMP環境搭建centos6.8 2.6.32-696.28.1.el6.x86_64 nginx:1.12.2 mysql:5.6.36 PHP:5.5.36 #!/bin/bash#LNMP環境搭建centos6.8 2.6.32-696.28.1.el6.x86_64 nginx:1.12.2 mysql:5.6.36 PHP:5.5.36trap echo "error line: $LINE…

啟動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…

第一個Spark實例:求PI值

向spark提交jar&#xff0c;需要使用 bin下的spark-submit [hadoopnbdo1 bin]$ ./spark-submit --help Usage: spark-submit [options] <app jar | python file> [app arguments] Usage: spark-submit --kill [submission ID] --master [spark://...] Usage: spark-submi…

go conn 讀取byte數組后是否要_【技術推薦】正向角度看Go逆向

Go語言具有開發效率高&#xff0c;運行速度快&#xff0c;跨平臺等優點&#xff0c;因此正越來越多的被攻擊者所使用&#xff0c;其生成的是可直接運行的二進制文件&#xff0c;因此對它的分析類似于普通C語言可執行文件分析&#xff0c;但是又有所不同&#xff0c;本文將會使用…