2. 程式人生 > >CSS深入理解之overflow（HTML/CSS）

CSS深入理解之overflow（HTML/CSS）

阿新 • • 發佈：2017-12-31
clas alt span doc 邊距 蘊含 top overflow 會同

簡介

overflow看上去其貌不揚，其中蘊含的知識點還是很多的,有很多鮮為人知的特性表現。

overflow基本屬性值

1、visible（默認）

2、hidden

3、scroll

4、auto

5、inherit

body/html與滾動條

無論什麽瀏覽器，默認滾動條均來自html標簽，而不是body標簽。因為新建一個空白html頁面，body默認有margin值，如果滾動條來自body，則應該有邊距，而不是緊貼著瀏覽器的邊緣。

body/html與滾動條（滾動高度）

Chrome瀏覽器：document.body.scrollTop

其他瀏覽器：document.documentElement.scrollTop

目前兩者不會同時存在，因此建議寫法為：var st = document.documentElement.scrollTop || document.body.scrollTop

滾動條的寬度機制

由於滾動條會占用容器的可用寬度和高度，因此可能會導致原本和諧的布局，滾動條出現後直接掛掉。

獲取滾動條寬度：

技術分享圖片

CSS深入理解之overflow（HTML/CSS）

相關推薦

CSS深入理解之overflow（HTML/CSS）

clas alt span doc 邊距 蘊含 top overflow 會同 簡介 overflow看上去其貌不揚，其中蘊含的知識點還是很多的,有很多鮮為人知的特性表現。 overflow基本屬性值 1、visible（默認） 2、hidden 3、scroll 4、

CSS深入理解之vertical-align：middle的小bug

mage css -a 分享 .com 屬性 需要 如何解決 存在 vertical-align 屬性設置元素的垂直對齊方式； 想必大家都知道這個屬性，也知道怎麽用。但是今天我要說的是其中值：middle（把此元素放置在父元素中部）存在的一個小小的bug...... 如果

css深入理解之float浮動慕課視訊學習筆記

浮動的特性：包裹與破壞 包裹的特點：收縮堅挺隔絕，江湖人稱BFC 1.浮動具有破壞性，會讓父元素高度塌陷 2.浮動使高度塌陷不是bug，而是標準 3.浮動的原本作用僅僅是為了實現文字環繞效果 4. 給圖片加了float:left後， 5.清除浮動是清除浮動所帶來的的影響

CSS深入理解之position定位

1、什麼是定位？ CSS定位屬性允許你為一個元素定位。它也可以將一個元素放在另一個元素後面，並指定一個元素的內容太大時，應該發生什麼。元素可以使用的頂部，底部，左側和右側屬性定位。然而，這些屬性無法工作，除非事先設定position屬性。他們也有不同的工作方式，這取決於定位方法。 有四種不同

CSS深入理解之margin外邊距

1、margin的相關屬性 margin 屬性是用於在一個宣告中設定四個外邊距的所有屬性的簡寫屬性。沒有繼承性，也就是它的設定的margin值不會自動傳遞到下一級標籤中。 margin後面的引數個數可以是一個，兩個，三個或四個。 一個引數，例如：margin:10px;表示四邊外邊距10畫素； 兩個

CSS深入理解之line-height

line-height 一、line-height的定義 行高line-height，兩行文字基線之間的距離。 1、什麼是基線？字元（x）下邊緣 2、為什麼是基線？基線是*線定義之根本。 3、需要兩行麼？不需要，兩行的定義決定了一行的表現 行高line

CSS深入理解之float浮動

1、什麼是 CSS Float（浮動）？        CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。Float（浮動），往往是用於影象，但它在佈局時一樣非常有用。CSS float 屬性定義元素在哪個方向浮動，浮動元素會生成一個塊級框，

CSS深入理解之z-index

大於 fixed anim 普通 htm fire tex 層疊 部分 (http://www.imooc.com/learn/643) 一、z-index基礎知識 1.z-index的含義 　z-index屬性指定了元素及其子元素的【z順序】，而【z順序】可以決定當元素

PHP面向物件深入理解之五（內省函式與反射類）

1. 內省(Introspection)函式 Introspection(內省)程式在執行時檢查物件的型別或屬性的能力，他允許物件類由程式設計師操縱。 你將會發現introspection 相當有用當你不知道哪一個類後或者方法在設計時需要被執行. Introspectio

CSS設計美麗之百合花（小作品）

這次的小作品選用了百合花圖片作為文件top的背景圖。 作品效果： 程式碼框架結構： <!DOCTYPE html> <html lang="zh-en"> <head> <meta http-equiv="

深入理解計算機系統（序章）------談程序員為什麽要懂底層計算機結構

人類 是你 驅動 計算機世界 執行過程 鍵盤 二進制 java虛擬機 調優 　　萬丈高樓平地起，計算機系統就像程序員金字塔的地基。理解了計算機系統的構造原理，在寫程序的道路上才能越走越遠。道理LZ很早就懂了，可是一直沒下定決心好好鉆研，或許是覺得日常工作中根本用不到這些，又

深入理解計算機系統（1.2）------存儲設備

高速 計算 想法 知識 1-1 運用 文件 字符 設備 　　上一章我們講解了hello world 程序在計算機系統中是如何運行的。 hello 程序的機器指令最初是存放在磁盤上的，當程序加載時，他們被復制到主存；當處理器運行程序的時候，指令又從主存復制到處理器。相似的，數

深入理解計算機系統（2.4）------整數的表示（無符號編碼和補碼編碼）

class 映射 們的 c語言 正數 裏的 小例子 負數 類型 　　上一篇博客我們主要介紹了布爾代數和C語言當中的幾個運算符。那麽這一篇博客我們主要介紹在計算機中整數是如何表示的，諸如我們在編碼過程中遇到的對數據類型進行強制轉換可能會得到意想不到的結果在這篇博客裏你會得到解

深入理解計算機系統（3.1）------匯編語言和機器語言

找到 生產 有著 shu 符號 ces pc機 高效率 機器語言 　　《深入理解計算機系統》第三章——程序的機器級表示。作者首先講解了匯編代碼和機器代碼的關系，闡述了匯編承上啟下的作用；接著從機器語言IA32著手，分別講述了如何存儲數據、如何訪問數據

深入理解計算機系統（3.3）------操作數指示符和數據傳送指令

邏輯操作 無效 系統 get 訪問 www. 執行 十六 title 　　在上一篇博客 程序編碼以及數據格式 中我們給出了一個簡單的C程序，然後編譯成了匯編代碼。大家看不懂沒關系，後面的博客我們將逐漸揭開一些匯編指令的神秘面紗。本篇博客我們將對操作數指示符和數據傳送指令進行

String源碼理解之indexOf（JDK1.7）

static img nta from 來看 png val 四種 targe String的indexOf共有四種參數，分別如下圖： 其中，第一種內部實現如下： public int indexOf(int ch) { return indexOf(c

深入理解計算機系統（3.6）------匯編的流程控制

深入理解計算機系統（3.8）------數組分配和訪問

2個 說明 add 如果 c++編譯 類型 操作 http 程序 　　上一篇博客我們講解了匯編語言中過程（函數）的調用實現。理解數據如何在調用者和被調用者之間傳遞，以及在被調用者當中局部變量內存的分配以及釋放是最重要的。那麽這篇博客我們將講解數組的分配和訪問。 1、

轉載：2.2.3 配置項的註釋《深入理解Nginx》（陶輝）

href 深入 logs class tps 註釋 配置 blog bsp 原文：https://book.2cto.com/201304/19628.html如果有一個配置項暫時需要註釋掉，那麽可以加“#”註釋掉這一行配置。例如：#pid logs/ngi

轉載：2.2.5 在配置中使用變量《深入理解Nginx》（陶輝）

依賴 con com 關註 部分 自己 core stat sent 原文：https://book.2cto.com/201304/19630.html 有些模塊允許在配置項中使用變量，如在日誌記錄部分，具體示例如下。log_format main ‘$r