#WEB前端(盒子模型)

1.實驗:盒子


2.IDE:VSCODE?


3.記錄:?

margin(外邊距)

border(邊框)

padding(內邊距)


4.代碼:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型</title>
</head>
<style>.demo{background-color: blueviolet;height: 70px;width: 70px; }.demo{color: brown;}/* border */.demo{border-width: 10px;border-color: brown;border-style: solid;}/* 左外邊框 margin*/.box_leftborder{margin-left: 50px;}    /*左外邊距50px*/.box_leftborder{border-left: 5px;border-color: blue;border-style: solid;}.box_leftborder{border-right: 5px;border-style: solid;}/* 內邊框 padding*/.demo{padding: 30px;}
</style>
<body><!-- 塊內元素 --><div class="demo">box</div>         <div class="box_leftborder">盒子</div>  
</body>
</html>

?

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

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

相關文章

【C++】類與對象(static、explicit、友元、隱式類型轉換、內部類、匿名對象)

&#x1f308;個人主頁&#xff1a;秦jh__https://blog.csdn.net/qinjh_?spm1010.2135.3001.5343&#x1f525; 系列專欄&#xff1a;http://t.csdnimg.cn/eCa5z 目錄 再談構造函數 初始化列表 隱式類型轉換 explicit關鍵字 static成員 概念 計算程序中創建出了多少個類…

開源軟件的商業模式探析:開放與盈利的平衡

寫在開頭 開源軟件的概念和應用已經成為了現代科技領域中的一個重要組成部分。然而&#xff0c;雖然開源軟件的價值和影響力得到了廣泛認可&#xff0c;但如何在開放的環境中找到商業盈利的平衡卻是一個頗具挑戰性的問題。本文將深入探討開源軟件的商業模式&#xff0c;從基本…

力扣61:旋轉鏈表

題目 給你一個鏈表的頭節點 head &#xff0c;旋轉鏈表&#xff0c;將鏈表每個節點向右移動 k 個位置。 示例 1&#xff1a; 輸入&#xff1a;head [1,2,3,4,5], k 2輸出&#xff1a;[4,5,1,2,3] 示例 2&#xff1a; 輸入&#xff1a;head [0,1,2], k 4輸出&#xff1a;…

卷積神經網絡(CNN)原理與實現

卷積神經網絡(CNN) 卷積神經網絡原理卷積神經網絡的數學推導卷積層反向傳播算法數學推導卷積層實現代碼 卷積神經網絡(CNN) 卷積神經網絡原理 卷積神經網絡是一種用于圖像、語音、自然語言等數據的深度學習模型&#xff0c;其核心思想是使用卷積操作提取輸入數據的特征&…

4、通達OA代碼審計

一、文件操作 1、文件上傳配合文件包含審計 文件上傳首先確定存在漏洞的文件。和文件上傳相關的函數比如upload。在從上到下分析構造的條件1. 從 POST 請求中提取變量 P 的值。 2. 檢查 P 是否已設置且不為空字符串。 3. 如果 P 已設置且非空&#xff0c;進入包含 "inc/…

JavaScript定義函數,創建函數實例時的內部原理

1、定義一個函數&#xff0c;JavaScript內部各做了哪些事情 定義一個函數時&#xff0c;JavaScript內部執行了以下步驟&#xff1a; 解析函數聲明: 當你定義一個函數時&#xff0c;JavaScript的解析器會首先解析函數聲明。這意味著它會檢查函數聲明的語法是否正確&#xff0c;…

[NSSCTF 2nd]MyJs

做一題ejs原型鏈污染 首先是登錄界面 源碼里面提示了源碼的路由 js不熟先審計一下 const express require(express); #導入Express框架&#xff0c;用于構建Web應用程序的服務器和路由 const bodyParser require(body-parser); #導入body-parser中間件&#xff0c;用于解析…

軟考證書=職稱證書?

官方的回答 根據《計算機技術與軟件專業技術資格&#xff08;水平&#xff09;考試暫行規定》&#xff08;國人部發〔2003〕39號&#xff09;規定&#xff0c;通過考試并獲得相應級別計算機專業技術資格&#xff08;水平&#xff09;證書的人員&#xff0c;表明其已具備從事相…

學習Android的第二十二天

目錄 Android ContextMenu 上下文菜單 ContextMenu 范例 參考文檔 Android SubMenu 子菜單 范例 參考文檔 Android PopupMenu 彈出菜單 范例 參考文檔 Android ContextMenu 上下文菜單 在Android開發中&#xff0c;ContextMenu&#xff08;上下文菜單&#xff09;為…

使用Javassist 在android運行時生成類

序言 最近在寫框架&#xff0c;有一個需求就是動態的生成一個類&#xff0c;然后查閱了相關文獻&#xff0c;發現在android中動態生成一個類還挺麻煩。因次把一些內容分享出來&#xff0c;幫助大家少走彎路。 方案一 DexMaker DexMaker 是一個針對 Android 平臺的庫&#xf…

Myqsort:基于冒泡排序算法的C語言實現

我們將詳細介紹一個基于冒泡排序算法的自定義排序函數——Mysqrt。該函數通過使用用戶提供的比較函數進行元素間的比較&#xff0c;并結合swap交換函數對任意類型的數據進行排序。下面是對代碼的逐行解析。 邏輯導圖 代碼實現 // 頭文件 #include<stdio.h>// 定義比較函…

華為自動駕駛技術詳解報告分享

ADS2.0首發搭載問界M5智駕版&#xff0c;城市NCA計劃年底全國開通。2023年4月16日華為在智能汽車解決方案發布會上發布了最新的ADS2.0產品&#xff0c;硬件數量減少至27個(11個攝像頭12個超聲波雷達3個毫米波雷達1個激光雷達,ADS1.0有34個)&#xff0c;車載計算平臺改為MDC610&…

python自學2

第一階段第三章 if&#xff0c;elif&#xff0c;else語句 這個是有順序的&#xff0c;如果第一個滿足下面的就不會執行&#xff0c;else也可以不寫&#xff0c;執行的效果等同于三個獨立的if。 還可以寫的更加簡潔一些 直接輸入的參數帶入到判斷里面去 小練習&#xff1a; 做…

打造專屬投屏體驗:Windows系統投屏到iOS系統

想要將電腦投屏共享給同事或朋友&#xff0c;又擔心隱私內容泄露&#xff1f;來來來&#xff0c;這里有妙招&#xff01; AirDroid Cast網頁版讓電腦投屏變得挑剔&#xff0c;只展示你允許共享的內容。會議資料、個人照片、敏感文件&#xff0c;都將得到嚴格的篩選&#xff0c;…

云原生之容器編排實踐-ruoyi-cloud項目部署到K8S:Nacosv2.2.3

背景 前面搭建好了 Kubernetes 集群與私有鏡像倉庫&#xff0c;終于要進入服務編排的實踐環節了。本系列拿 ruoyi-cloud 項目進行練手&#xff0c;按照 MySQL &#xff0c; Nacos &#xff0c; Redis &#xff0c; Nginx &#xff0c; Gateway &#xff0c; Auth &#xff0c;…

傳輸層Transport layer (ISO15118-20:2022) (7.7 part1) -- TCPUDP

7.7 Transport layer 這段描述闡明了文檔中子條款及其所有子條款的特定要求,這些要求分別適用于私有SECC(Supply Equipment Communication Controller)和公共SECC。除非在特定子條款或其內部的任何子條款中另有說明,否則不應將私有SECC和公共SECC視為可互換的。 這意味著…

問題解決 | RuntimeError: CUDA error: invalid device ordinalCUDA kernel errors

錯誤&#xff1a; RuntimeError: CUDA error: invalid device ordinal CUDA kernel errors might be asynchronously reported at some other API call, so the stacktrace below might be incorrect. For debugging consider passing CUDA_LAUNCH_BLOCKING1. Compile with TO…

windows環境下Grafana+loki+promtail入門級部署日志系統,收集Springboot(Slf4j+logback)項目日志

&#x1f339;作者主頁&#xff1a;青花鎖 &#x1f339;簡介&#xff1a;Java領域優質創作者&#x1f3c6;、Java微服務架構公號作者&#x1f604; &#x1f339;簡歷模板、學習資料、面試題庫、技術互助 &#x1f339;文末獲取聯系方式 &#x1f4dd; 往期熱門專欄回顧 專欄…

動態規劃DP之背包問題4---分組背包問題

目錄 DP分析&#xff1a; 例題&#xff1a; 01背包&#xff1a; 一種物品只有一件 動態規劃DP之背包問題1---01背包問題-CSDN博客 完全背包&#xff1a;一種物品有無限件 動態規劃DP之背包問題2---完全背包問題-CSDN博客 多重背包&#xff1a;一種物品有有限…

【三維重建】【SLAM】SplaTAM:基于3D高斯的密集RGB-D SLAM(CVPR 2024)

題目&#xff1a;SplaTAM: Splat, Track & Map 3D Gaussians for Dense RGB-D SLAM 地址&#xff1a;spla-tam.github.io 機構&#xff1a;CMU&#xff08;卡內基梅隆大學&#xff09;、MIT&#xff08;美國麻省理工&#xff09; 總結&#xff1a;SplaTAM&#xff0c;一個新…