網頁布局基礎

1、盒子模型的第一層到第五層:
border、padding content、background-image、background-color、margin

2、清除浮動。對受到浮動影響的標簽作以下操作:
???? 1、clear: both;
???? 2、clear: right; ?clear: left;
???? 3、設置寬度width: 100%(或者固定寬度) overflow: hidden;

3、兩種清除浮動方法的使用場景:
1、當子元素設置了浮動,父元素沒有設置浮動而導致的父元素高度不能自動擴展,縮成一條線,子元素從父元素中溢出時,適合使用同時設置width:100%(或固定寬度值) overflow:hidden的方式來清除浮動;此法可同時去除緊鄰的塊級受到的浮動影響,而不需要再對受到浮動影響的緊鄰塊級元素設置去除浮動。 ??
2、如果是緊鄰的塊級元素受到浮動影響,對該受到影響的塊級設置clear:both或者clear:left,clear:right更為合適。
注意:width設置為100%就是繼承父容器的寬度。左右撐滿整個容器,為自己清除浮動創建條件。再加溢出隱藏,就可以把包裹 浮動的部分去除。

4、絕對定位特點:
  • 建立了以包含塊位基準的定位
  • 完全脫離標準文檔流
  • 隨即擁有偏移屬性跟z-index屬性
  1. 未設置偏移量時:(left、top)
    ???? 無論是否存在已經定位的祖先元素,都保持在元素初始位置 脫離標準文檔流
  2. 設置偏移量時:偏移參照的基準:
    ? ???無已定位的祖先元素:以<html>為偏移參照基準;
    ? ???有已定位的祖先元素:以距其最近的已定位的祖先元素為偏移參照基準。
?? ?注意:當一個元素設置了絕對定位,沒有設置寬度時,元素的寬度根據內容進行調節。

?
練習題:已知一個設置了絕對定位的元素b,位于其父元素a中,a元素為靜態元素,則b元素將以(html)為基準進行偏移。
答案是因為a為靜態位置,所以要以根元素為基準進行偏移,也就是html元素(靜態定位是position:static,是元素的默認定位屬性。只有設置了absolute或relative或fixed才算已定位的父級元素。

5、隱藏按鈕文字的小技巧:
text-indent: -999px;
overflow: hidden;
先使用text-indent:-999px;語句把被設置元素“擠出去”了,然后設置溢出的元素都隱藏起來,也就是被擠出去的元素隱藏起來。
6、媒體查詢:
可被用于css中的@media和@import規則上,也可被用在HTML和XML中。
1)@media screen and (width: 800px){...}
2)@import url(example.css) screen and (width: 800px);
3)<link media="screen and (width: 800px)" rel="stylesheet" href="example.css"/>0

?

本文轉載于:猿2048https://www.mk2048.com/blog/blog.php?id=hcc01j&title=網頁布局基礎

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

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

相關文章

mysql與串口通信_虛擬機串口與主機串口通信·小程序(下)

上次說到的&#xff0c;不能做到實時通信。那么開兩個進程就可以了&#xff0c;一個用來監聽是否有消息傳來&#xff0c;一個用來等待用戶輸入。那么&#xff0c;先來復習一下進程的相關概念。進程結構linux中進程包含PCB(進程控制塊)、程序以及程序所操縱的數據結構集&#xf…

淺談我所見的CSS命名風格

在兩年工作中&#xff0c;總結一下我所見的css命名風格。 1.單一class命名 .header {width: 500px; } .item {text-indent: 20%; } 優點&#xff1a;簡單&#xff0c;渲染效率高。 缺點&#xff1a;零散&#xff0c;沒有模塊化。 2. 后代選擇器class命名 .header .item a {font…

Java規范請求中的數字

你們都了解Java社區流程 &#xff08;JCP&#xff09;&#xff0c;不是嗎&#xff1f; JCP是為Java技術開發標準技術規范的機制。 任何人都可以注冊該站點并參與對Java規范請求&#xff08;JSR&#xff09;的審查和提供反饋&#xff0c;并且任何人都可以注冊成為JCP成員&#x…

ORACLE MOS 翻譯

http://blog.csdn.net/msdnchina/article/details/53174196轉載于:https://www.cnblogs.com/zengkefu/p/6665950.html

自從我這樣擼代碼以后,公司網頁的瀏覽量提高了107%!

歡迎大家前往騰訊云 社區&#xff0c;獲取更多騰訊海量技術實踐干貨哦~ 本文由騰訊IVWEB團隊發表于云 社區專欄 作者&#xff1a;yangchunwen HTTP協議是前端性能乃至安全中一個非常重要的話題&#xff0c;最近在看《web性能權威指南(High Performance Browser Networking)》&a…

python數列分段_按范圍分段的Python數組

首先&#xff0c;定義你的“極”數第二&#xff0c;根據這些“極”數生成間隔第三&#xff0c;定義盡可能多的列表。在然后&#xff0c;對于每個間隔&#xff0c;掃描列表并在相關列表中添加屬于該間隔的項代碼&#xff1a;source [1, 4, 7, 9, 2, 10, 5, 8]poles (0,3,6,25)…

51nod 1278 相離的圓

基準時間限制&#xff1a;1 秒 空間限制&#xff1a;131072 KB 分值: 10 難度&#xff1a;2級算法題 平面上有N個圓&#xff0c;他們的圓心都在X軸上&#xff0c;給出所有圓的圓心和半徑&#xff0c;求有多少對圓是相離的。例如&#xff1a;4個圓分別位于1, 2, 3, 4的位置&…

讓我們將包變成模塊系統!

使用構建系統將許多項目分為模塊/子項目&#xff08; Maven &#xff0c; Gradle &#xff0c; SBT …&#xff09;&#xff1b; 編寫模塊化代碼通常是一件好事。 將代碼分為構建模塊主要用于&#xff1a; 隔離代碼部分&#xff08;減少耦合&#xff09; api / impl拆分 僅將…

R語言日期的表示和運算(詳細總結)

1、取出當前日期 Sys.Date() [1] "2014-10-29" date() #注意&#xff1a;這種方法返回的是字符串類型 [1] "Wed Oct 29 20:36:07 2014" 2、在R中日期實際是double類型&#xff0c;是從1970年1月1日以來的天數 typeof(Sys.Date()) [1] "double" …

html高度塌陷問題解決

高度塌陷的問題&#xff1a; 當開啟元素的BFC以后&#xff0c;元素將會有如下的特性 1 父元素的垂直外邊距不會和子元素重疊 開啟BFC的元素不會被浮動元素所覆蓋 開啟BFC的元素可以包含浮動的子元素 如何開啟元素的BFC 設置元素浮動 設置元素絕對定位 …

java空格鍵_Java KeyPressed-如果其他鍵也太舊,則無法檢測是否按下了空格鍵

如標題所示&#xff0c;在我的Java游戲中&#xff0c;無法檢測是否同時按下空格鍵和其他鍵。例如&#xff0c;空格鍵是射擊鍵&#xff0c;而箭頭鍵則使玩家移動。如果我按下向上箭頭鍵&#xff0c;向左箭頭鍵和空格鍵&#xff0c;那么它應該向左上方發射子彈。但是&#xff0c;…

How to fix the bug “Expected required, optional, or repeated.”?

參考&#xff1a;https://github.com/tensorflow/models/issues/1834 You need to download protoc version 3.3 (already compiled). Used protoc inside bin directory to run this command like this:tensorflow$ mkdir protoc_3.3tensorflow$ cd protoc_3.3tensorflow/prot…

立面設計模式–設計觀點

在上一篇文章中&#xff0c;我們描述了適配器設計模式 。 在今天的文章中&#xff0c;我們將展示另一種類似的“四結構幫派”模式 。 顧名思義&#xff0c;結構模式用于從許多不同的對象形成更大的對象結構。 外觀模式就是這樣一種模式&#xff0c;它為系統內的一組接口提供了簡…

Java第三次作業 1502 馬 帥

《Java技術》第三次作業 &#xff08;一&#xff09;學習總結 1.書中對面向對象封裝性的定義為&#xff1a;指把對象的屬性和行為看成一個密不可分的整體&#xff0c;把不需要讓外界知道的信息隱蔽起來。簡單來說&#xff0c;就是定義的一些對象&#xff0c;只有在本類中才可以…

sass運算

sass具有運算的特性&#xff0c;可以對數值型的Value(如&#xff1a;數字、顏色、變量等)進行加減乘除四則運算。 請注意運算符前后請留一個空格&#xff0c;不然會出錯。 scss.style css.style 本文轉載于:猿2048https://www.mk2048.com/blog/blog.php?idiij12j&titles…

163 coremail_Icoremail企業郵箱

高速穩定iCoremail企業郵箱于國內外多個網絡運營商的主干網數據中心放置郵件服務器&#xff0c;同時采用我司自主研發的Coremail電子郵件系統&#xff0c;從多方面保障了用戶的流暢體驗。安全可靠iCoremail企業郵箱使用歐洲最大的反病毒安全提供商的Sophos反病毒系列產品&#…

jquery-基礎事件[下]

<script>$(function () {mouseover mouseout mouseenter mouseleave的區別$(div).mouseover(function () {$(this).css(background, red);}).mouseout(function () {$(this).css(background, green);});$(div).mouseenter(function () {$(this).css(background, red);}).…

JavaOne 2012:NetBeans.Next –未來路線圖

我從Continental Ballroom 4和一個NetBeans主題&#xff08; 項目Easel &#xff09;到Continental Ballroom 5&#xff0c;走了必要的幾個步驟&#xff0c;以查看另一個面向NetBeans的演示文稿&#xff1a;“ NetBeans.Next –未來路線圖”。 Ashwin Rao發起了“羽毛之鳥”&am…

LeetCode day30

LeetCode day30 害&#xff0c;昨天和今天在搞數據結構的報告&#xff0c;后面應該也會把哈夫曼的大作業寫上來。 今天認識認識貪心算法。(&#xff61;&#xff65;?&#xff65;)&#xff89; 2697. 字典序最小回文串 給你一個由 小寫英文字母 組成的字符串 s &#xff0c;…

html注冊表

這是第一次使用html寫一個簡單的注冊表&#xff08;有不對的地方希望大家可以幫我指出來謝謝?&#xff09; <!DOCTYPE html><html><head> <title>木木音樂網第一次注冊表</title></head><body><h2>使用手機號碼注冊</…