Html百分比设宽偏差大,absolute和relative元素 设置百分比宽高的差异
一般元素在頁面所占的空間包括：magin border padding content。以前一直以為子元素設置百分比寬高都是以父元素的content值為基準計算的。但是當子元素的position不同時，卻是不同的結果。
demo
用如下小demo測試：
.container{
position: relative;
margin: 100px auto;
padding: 20px;
height: 100px;
width: 100px;
border : 10px solid green;
background-color: red;
}
.test{
height: 20%;
width: 20%;
position: relative;
top:;
left:;
background-color: #000000;
}
效果如下：
子元素以父元素的content寬度100px為基準計算的20%為20px 且是以content為參考進行的偏移(雖然這里為0)
若子元素position為absolute時，效果如下：
此時子元素的百分比寬度是以 父元素的 padding + content的值進行計算的 為28px; 而且也是以padding為基礎進行偏移的。
結論
absolute元素的百分比寬高 計算時按照的包含塊的 padding + content的值算的，偏移的參考也要加上padding那部分
relative元素的百分比寬高 計算時按照的包含塊的 content的值算的.
JS獲取頁面,元素,窗口和返回頁面,元素,窗口的寬高以及滾動值
jquery獲取頁面,元素,窗口的寬高以及滾動值 //獲取瀏覽器顯示區域(可視區域)的高度 : $(window).height(); //獲取瀏覽器顯示區域(可視區域)的寬度 : $(window) ...
關于html中的設置body寬高的理解
有時候看到別人的代碼中經常出現在body中設置的寬高,不是很理解,于是自己測試了下,瞬間懂了,廢話不多說,直接上代碼: 首先創建好一個基本的html文件,設body的背景色為red: 相信大家都知道效 ...
input與select 設置相同寬高，在瀏覽器上卻顯示不一致，不整齊
遇到 input與select 設置相同寬高,在瀏覽器上卻顯示不一致,遂實驗了下(IE 10.013 ,Firefox 30.0),得出以下結論 input?? width,height 值里面, 不 ...
Python設置瀏覽器寬高
# 發起請求,設置瀏覽器寬高 # 代碼中引入selenium版本為:3.4.3 # 通過Chrom瀏覽器訪問發起請求 # Chrom版本:59 ,chromdriver:2.3 # 需要對應版本的Ch ...
CSS Transform讓百分比寬高布局元素水平垂直居中
很早以前了解過當元素是固定寬度和高度的時候,水平垂直高居中的方法可以設置margin的負值來使其居中,這個負值是元素的寬和高的一半,比如寬高是100px,那么就用margin-left:-50px;m ...
IE6下絕對定位元素父級寬高是奇數,絕對定位元素的right和bottom值會有1個像素的偏差
...IE下元素設置百分比的問題
場景:近兩天在做一個控件,該控件是一個tab型的,并且該tab有可能是兩個tab標簽,也有可能是多個tab標簽,為了能夠適應這種動態需求, 在設置標簽寬度的時候,直接用的最外層容器除以tab的個數,然 ...
關于百分比寬高div居中并垂直居中問題
【轉載】Spark性能優化指南——高級篇
前言 數據傾斜調優 調優概述 數據傾斜發生時的現象 數據傾斜發生的原理 如何定位導致數據傾斜的代碼 查看導致數據傾斜的key的數據分布情況 數據傾斜的解決方案 解決方案一:使用Hive ETL預處理數 ...
bootstrap-select去除藍色邊框outline
/*去除選擇框的outline*/ .bootstrap-select .dropdown-toggle:focus{outline:none !important;} /*去除選項的outline* ...
Angular中使用Rainbow
在使用js類庫和框架的時候,大家都習慣于編寫自己的使用示例,如果能將示例中的html,js和css 進行展示, 并進行高亮顯示,效果會很棒,例如在html高亮顯示jquery代碼 上面的示例是使用ra ...
poj2407
歐拉函數裸題. 歐拉函數:在數論,對正整數n,歐拉函數是少于或等于n的數中與n互質的數的數目. 歐拉函數的定義: E(N)= ( ?區間[1,N-1] 中與 N 互質的整數個數). 對于 積性函數 F ...
QTP自傳之web常用對象
隨著科技的進步,“下載-安裝-運行”這經典的三步曲已離我們遠去.web應用的高速發展,改變了我們的思維和生活習慣,同時也使web方面的自動化測試越來越重要.今天,介紹一下我對web對象的識別,為以后的 ...
窗體的擴展樣式GWL_EXSTYLE用于SetWindowLong
SetWindowLong(Handle, GWL_EXSTYLE, GetWindowLong(Handle, GWL_EXSTYLE) or WS_EX_TRANSPARENT or WS_EX_ ...
mysql命令參數詳解
一,MySQL命令行參數 Usage: mysql [OPTIONS]?[database]?//命令方式?-?, --help //顯示幫助信息并退出?-I, --help //顯示幫助信息并退出? ...
總結
以上是生活随笔為你收集整理的Html百分比设宽偏差大,absolute和relative元素 设置百分比宽高的差异的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机专业多媒体技术学什么,计算机多媒体
- 下一篇： html代码测试1006无标题,无标题H