前端學習 -- Css -- 內聯元素的盒模型

  1. 內聯元素不能設置width和height;
  2. 設置水平內邊距,內聯元素可以設置水平方向的內邊距:padding-left,padding-right;
  3. 垂直方向內邊距,內聯元素可以設置垂直方向內邊距,但是不會影響頁面的布局;
  4. 為元素設置邊框,內聯元素可以設置邊框,但是垂直的邊框不會影響到頁面的布局;
  5. 水平外邊距內聯元素支持水平方向的外邊距;
  6. 內聯元素不支持垂直外邊距;
  7. 為右邊的元素設置一個左外邊距,水平方向的相鄰外邊距不會重疊,而是求和。

示例:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">span {background-color: #FFA500;}/*** 寬120 高120 顏色為#0000FF的div*/.box1 {width: 120px;height: 120px;background-color: #0000FF;}.s1 {/*內容區、內邊距 、邊框 、外邊距* *//** 內聯元素不能設置width和height,設置了也沒有效果*/width: 200px;height: 200px;/** 水平方向上內邊距左為100px,右為100px*/padding-left: 100px;padding-right: 100px;/** 垂直方向內邊距,內聯元素可以設置垂直方向內邊距,但是不會影響頁面的布局*/padding-top: 50px;padding-bottom: 50px;/** 為元素設置邊框,*     內聯元素可以設置邊框,但是垂直的邊框不會影響到頁面的布局*/border: 2px yellow solid;/** 水平外邊距100px*/margin-left: 100px;margin-right: 100px;/** 內聯元素不支持垂直外邊距,因此設置如下完全沒有效果*/margin-top: 200px;margin-bottom: 200px;}.s2 {/** 為右邊的元素設置一個左外邊距* 水平方向的相鄰外邊距不會重疊,而是求和*/margin-left: 100px;}</style></head><body><span class="s1">章臺路</span><span class="s2">還見褪粉梅梢</span><span>試花桃樹</span><span>愔愔坊陌人家</span><div class="box1"></div></body></html>

效果:

代碼放到github上面了:

https://github.com/soyoungboy/htmlCssStudy/blob/master/HelloHBuilder/lesson16.html

自己可以運行下看看效果

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/282281.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/282281.shtml
英文地址,請注明出處:http://en.pswp.cn/news/282281.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Redis 數據持久化的方案的實現

一、需要了解的基礎 1、Redis實現數據持久化的兩種實現方式&#xff1a; RDB&#xff1a;指定的時間間隔內保存數據快照 AOF&#xff1a;先把命令追加到操作日志的尾部&#xff0c;保存所有的歷史操作二、RDB 實現 Redis數據持久化&#xff08;默認方式&#xff09;1、編輯 red…

div剩余空間填滿

div里有一個固定高度的div使其另一個div填滿空間&#xff0c;外層div設置的高度為百分比&#xff0c;給外層一個相對定位&#xff0c;設置想要充滿的div高度為100%&#xff0c;其中這次有個要求&#xff0c;使其填充div里面的內容距離固定高度div30px&#xff1b;給填充div一個…

快速生成快遞柜唯一取件碼

曾管理一萬多臺快遞柜&#xff0c;優化了系統中生成唯一取件碼的算法。項目&#xff1a;https://github.com/nnhy/PickupCode新建項目&#xff0c;添加 Nuget 應用 NewLife.Redis &#xff0c;借助其Add去重能力。代碼如下&#xff1a;private static void Main(string[] args)…

自動調試自動編譯五分鐘上手

Browsersync能讓瀏覽器實時、快速響應您的文件更改&#xff08;html、js、css、sass、less等&#xff09;并自動刷新頁面。更重要的是 Browsersync可以同時在PC、平板、手機等設備下進項調試。 無論您是前端還是后端工程師&#xff0c;使用它將提高您30%的工作效率。 MD5加密&a…

六臺機器搭建RedisCluster分布式集群

一、RedisCluster結構二、redis Cluster集群搭建1、修改redis.conf中需要更改的配置 bind 改成當前ip cluster-enabled yes #允許redis集群 cluster-config-file nodes-6379.conf #集群配置文件 cluster-node-timeout 15000 #集群中節點允許失聯的最大時間15s 注&#xff1…

C# 的 async/await 其實是stackless coroutine

注&#xff1a; 最近Java 19引入的虛擬線程火熱&#xff0c;還有很多人羨慕 go的 coroutine&#xff0c;很多同學一直有一個疑問&#xff1a; C# 有 虛擬線程或者 coroutine嗎&#xff0c;下面的這個回答可以解決問題。這里節選的是知乎上的hez2010 的高贊回答&#xff1a;http…

推薦使用typora

最近在網上接觸到一款全新的markdown寫作工具——typora。 現在它已經是我的主要寫作工具了。 甚至我也也會利用它安排自己的工作和任務。 typora介紹 下載鏈接特色&#xff1a;可以即時渲染markdown語法的書寫工具總算找到了&#xff0c;終于不用再糾結發生語法錯誤&#xff0…

中文詞頻統計

import jiebafoopen(text.txt,r,encodingutf-8)tfo.read()fo.close() wordsjieba.cut(t)dic{}for w in words: if len(w)1: continue else: dic[w]dic.get(w,0)1wc list(dic.items())wc.sort(keylambda x:x[1],reverse True)for i in range(20): print(wc[i]) 轉載于:https:/…

實現html錨點的兩種方式

1&#xff0c;a標簽name屬性。 2&#xff0c;使用標簽的id屬性&#xff1b;

mysql實現讀寫分離

一、環境介紹&#xff1a; LNMP vmware workstation pro配置了3個虛擬機&#xff0c;均安裝了LNMP環境&#xff1a; Pro &#xff1a;192.168.0.105 Pro2&#xff1a;192.168.0.106 Pro3&#xff1a;192.168.0.107 二、Mysql主從復制同步的實現 https://blo…

[BZOJ1509][NOI2003]逃學的小孩

1509: [NOI2003]逃學的小孩 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 968 Solved: 489[Submit][Status][Discuss]Description Input 第一行是兩個整數N&#xff08;3 ? N ? 200000&#xff09;和M&#xff0c;分別表示居住點總數和街道總數。以下M行&#xff0c;每行…

十一隨筆|讀書

十一放假回老家前三天一直下雨&#xff0c;沒法幫父母干農活&#xff0c;陰雨天氣農村就閑下來了親戚間走動&#xff0c;長輩們談論孩子不好好學習&#xff0c;孩子抱怨學習沒用大學畢業照樣找不到工作。現在大學生就業現狀確實不容樂觀&#xff0c;當下不好好學習沒有拖底&…

yii之behaviors

BaseController: protected $actions [*];protected $except [];protected $mustlogin [];protected $verbs [];// 行為過濾public function behaviors(){return [access > [class > \yii\filters\AccessControl::className(),only > $this->actions, // 針對哪…

關閉 Visual Studio 2013 的 Browser Link 功能

什么是 Browser Link ? 這個 Browser Link 的功能就是通過一個腳本文件架起流程器和 Visual Studio IDE 之前的一個通信橋梁&#xff0c; 在啟用 Browser Link 后&#xff0c; Visual Studio 會給網站注入一個 IHttpModule 模塊對象&#xff0c; 然后在每個頁面都會注冊一段上…

Groove list操作-轉數組,collect,each等

2019獨角獸企業重金招聘Python工程師標準>>> list轉換為數組 List list [a,b,c,d] def strs list as String[] println strs[0] 使用了Groovy語言&#xff0c;就能時不時的感受到Groovy語言在編碼風格上與Java語言的不同。當然&#xff0c;我們首先感受到的可能就…

支持多種操作系統的新一代服務主機

一個應用需要常駐操作系統后臺服務&#xff0c;可選框架有WindowsServiceLifeTime和SystemdLifeTime&#xff0c;但需要區別對待不同操作系統且需要另外寫命令安裝。NewLife.Agent自2008年設計以來&#xff0c;一直秉著簡單易用的原則&#xff0c;不僅實現了服務框架&#xff0…

c#中的奇異遞歸模式

奇異遞歸模式&#xff0c;Curiously Recurring Template Pattern (CRTP) &#xff0c;作用是能使父類中能夠使用子類的信息。下面是我對這個問題的分析過程。 按照一般的繼承關系&#xff0c;父類是無法訪問到子類的&#xff0c;所以很自然的想到了c#中的泛型&#xff0c;將子類…

面試中get和post的區別

get和post的區別主要有以下幾方面&#xff1a;1、url可見性&#xff1a; get&#xff0c;參數url可見&#xff1b; post&#xff0c;url參數不可見2、數據傳輸上&#xff1a; get&#xff0c;通過拼接url進行傳遞參數&#xff1b; post&#xff0c;通過body體傳輸參數3、緩存性…

程序猿與線性代數

逛微博&#xff0c;摸到了一堆寶&#xff1a;關于線性代數學習的文章。先是發現了陳曉鳴&#xff08;http://weibo.com/acumon&#xff09;&#xff0c;前百度資深project師&#xff0c;終身學習者。再找到“文藝復興記”&#xff08;http://weibo.com/weidagang&#xff09;。…

Verilog MIPS32 CPU(八)-- 控制器

Verilog MIPS32 CPU&#xff08;一&#xff09;-- PC寄存器Verilog MIPS32 CPU&#xff08;二&#xff09;-- RegfilesVerilog MIPS32 CPU&#xff08;三&#xff09;-- ALUVerilog MIPS32 CPU&#xff08;四&#xff09;-- RAMVerilog MIPS32 CPU&#xff08;五&#xff09;--…