滾動條對盒子寬度的改變

原創 歆冉 2019-05-01 12:57

7.jpg

此時對應的效果:

此時父盒子的寬度是: 600

此時子盒子的寬度是: 600- 2*20=560   (左右padding的寬度)

8.jpg6.jpg

讓父盒子出現滾動條

9.jpg

此時的效果是：

10.jpg

此時父盒子的寬度仍是600

11.jpg

此時子盒子的寬度是：543

12.jpg

爲什麼是543了?

其實此時 父盒子的可視區區域的寬度只有了 600-17(滾動條的寬度)=583

然後 我們還需要減去左右的padding。也就是583- 2*20= 543

所有543是這樣來的。

而並不是滾動條的寬度在padding的上面


發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

html+css 選項卡

  <style type=text/css>td {   font-size: 12px;  color: #000000;  line-heig

bluelazyboy 2020-07-08 12:23:28

position:absolute下，top:0,right:0,bottom:0,left:0 結合margin:auto的作用（讓明確寬高的盒子水平垂直居中於父元素）

絕對定位 + margin，讓明確寬高的盒子水平垂直居中於窗口 <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <meta name="vie

ddx2019 2020-07-08 11:55:42

css每日一報（自己積累平時寫法）

1、pc端共用的樣式： *{padding:0px;margin:0px;outline:0 none; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-s

空手走-web 2020-07-08 11:54:55

vue開發的手機購物商城APP東京大藥房(帶數據庫，定位，支付，等)

源碼下載就能上線,需要的注注,私信,

qq_36824777 2020-07-08 11:50:38

原生JS實現樹狀結構列表

樹狀結構列表，這個技術點之前有寫過了，是基於vue講解，但似乎都沒有解決痛點，最基礎的原生JS該怎麼實現呢？ 這篇文章會全面詳細的介紹樹狀結構列表的實現，從數據處理成樹狀結構，到動態生成dom節點渲染頁面。  確定原始數據結構  原始數據

wendZzz 2020-07-08 11:27:37

web前端複習第七課

                                           二級導航實例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

思丰百年 2020-07-08 10:46:31

我實現了客戶要求的五彩斑斕的黑！！！

五彩斑斕的黑？？？？五彩斑斕？？？還黑？？之前只是笑笑就過去了。。那麼能不能實現呢，，，今天他來了！！！ 效果圖:展示出來的效果顏色和光暈的顏色都是用c3寫成的動畫效果，由於不支持上傳視頻，就截了幾幀的圖片，有想要自己實現這個動畫

SC前端 2020-07-08 10:39:04

網頁設計中常見的兼容性問題

常見兼容性問題 1、png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8. 2、瀏覽器默認的margin和padding不同。解決方案是加一個全局的 *{margin:0;padding:0;}來統一。 3、IE6

LFWMP 2020-07-08 10:28:29

【Python】CSS選擇器語法

常用語法 語法 說明 * 選擇所有節點 #container 選擇id爲container的節點 .container 選擇所有class包含container的節點 div,p 選擇所有 div 元素和

岚清子 2020-07-08 09:13:33

HTML+css做炫酷的3d盒子反轉

3d盒子反戰 效果如圖如下： HTML重要的代碼如下： <ul> <li> <div class="box"> <div class="front">目錄

文情战 2020-07-08 09:12:55

幾個簡單的css動畫

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="wi

哀木i 2020-07-08 08:40:28

css消息數量，圓圈數字，購物車數量。

  html:  <a href="index.html" class="nav">未讀留言<div class="nav-counter nav-counter-blue">4</div></a> css:  .nav{

blueBings 2020-07-08 07:33:49

一次完整的HTTP服務過程（再整理）

重溫一下計算機網絡的重要知識 例如：當我們在web瀏覽器的地址欄中輸入：www.baidu.com並回車，具體發生了什麼。 第一層理解 對網址進行DNS域名解析，得到對應的公網IP地址 根據這個IP，找到對應的服務器，發起T

wennianzhu 2020-07-08 07:29:39

Js and Css

<div style="border: 1px; border-style: solid; border-collapse: collapse; border-color: Gray" mce_style="border: 1px; bo

海会圣贤 2020-07-08 06:54:55

window print 設置字體大小

<style   type="text/css">     @media   print   {     body   {   font-size:   12px}     }     @media   screen   {     bo

海会圣贤 2020-07-08 06:54:55