2. 程式人生 > >使用box-sizing讓擁有padding屬性的元素不超出想要的寬度

使用box-sizing讓擁有padding屬性的元素不超出想要的寬度

阿新 • • 發佈：2019-01-30
這兩天做頁面的設計，想實現一個input最寬的一個搜尋框，所以用了
input{display:block; width:100%;}

由於預設的樣子 有點不好看，遂加入：

border:1px solid #FF8B02;
border-radius: 5px;
padding:10px;

可是問題來了，由於加入了padding屬性，導致頁面變形了。原因無它，就是因為width:100%後，瀏覽器又再外面加了20px;所以寬度超出了自己的預想。

例如：

input{display:bolck;width:500px;border:1px solid black;}
實際寬度為502px;

當加入

padding:10px;

實際的寬度就變成了522px;了，這和我想要的不一樣。

看到bootstrap中實現了我想要的效果：無論padding是多少，元素的寬高都不變；

比如我想要1000px;的畫素，加了padding 和border之後，實際的寬度還是1000px;

這樣border與padding都在內部了。

進過除錯研究發現一個屬性叫做box-sizing。使用了這個屬性之後就能讓它的寬度 不再超出想要的範圍了，實現了我想要的效果

相關推薦

使用box-sizing讓擁有padding屬性的元素不超出想要的寬度

這兩天做頁面的設計，想實現一個input最寬的一個搜尋框，所以用了input{display:block; width:100%;} 由於預設的樣子 有點不好看，遂加入： border:1px solid #FF8B02; border-radius: 5px; pad

如何讓搜尋引擎更好地理解我們想要什麼

能否有效地利用搜索引擎，對我們能否在海量資訊中迅速挖掘出所需有著決定性影響。 本文的源起是今天讀完的一本谷歌前高管寫的書《 Google 時代的工作方法》，其中一章提到對於關於谷歌搜尋的高效運用，加之先前看過為數不少的關於搜尋引擎運用的文章，結合自己平時的搜尋習慣，出於更好地理解和運用的目的，方有此文。 本

java中用split()方法分割字串--用特殊字元分割得不到想要的結果的情況

java中，分割字串可以使用split()方法來實現分割。 String str1 = "aabccbdd"; String[] Str1Array = str1.split("b");//結果Str1Array：[aa, cc, dd] 上面的例子中可以成功的將

DemoSpinner有關多個Spinner的例子，網上找的都不是 想要的，可以網路獲取資料新增的Spinner

直接上程式碼： xml佈局： <RelativeLayout      xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"

left join達不到想要的效果，得到的不是左表的樣本數，原因在這！！！

1）區別：左表 left join 右表 on/where left join 是以左表為主，on是不管條件滿不滿足，都會保留左表的內容，而where，則是將不滿足條件的過濾掉了； 2）左表 lef

如果搜尋不到想要的結果，嘗試下圖片搜尋

這幾天因為某些原因，只能用百度進行搜尋。深深的感受到了惡意，但同時也反思了自己的搜尋技巧和發現了一個新的技巧。 之前寫過一個搜尋

使用 CSS3 的 box-sizing 屬性設置元素大小包含 border 與 padding

lang htm tle 內部 p s itl css3 div char 默認情況下，內部元素（如：input）的寬度或高度，是不會包含元素的邊框和內邊距的，這是就需要使用 box-sizing 屬性設置該元素。 box-sizing 是 CSS3 的屬性，可以設置以

使用 CSS3 的 box-sizing 屬性設定元素大小包含 border 與 padding

預設情況下，內部元素（如：input）的寬度或高度，是不會包含元素的邊框和內邊距的，這是就需要使用box-sizing 屬性設定該元素。 ?  box-sizing 是 CSS3 的屬性，可以設定以上值： 1.   content-box: 元素 size 不包含 b

css3基礎 box-sizing 設置盒模型(邊線與padding不改盒子的大小)

鍛煉 author har con ast 學習 tca padding set 禮悟：　　 公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。 虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。 　　

CSS解決border影響元素寬高的問題（box-sizing屬性）

問題 我們在用 CSS 進行頁面佈局時，經常會給元素指定寬高。在沒有邊框時（border為0）往往父元素的寬高是子元素寬高的和。但是在新增邊框寬度後如果不調整元素寬度，會導致佈局錯亂。 例如我們想要下面這樣的效果： 一個寬度為 600px 的父元素下有三個 200px 的子元素。

css3 box-sizing屬性（width,padding,border）

box-sizing屬性可以為三個值之一：content-box（default），border-box，padding-box。 content-box，border和padding不計算入width之內 padding-box，padding計算入width內 border-box，border和pad

box-sizing屬性

3.5 borde nbsp containe left border 大小 也不會 class box-sizing這個屬性可規定盒子大小是否包含padding和border 1.以下三個值: 　　box-sizing:content-box;/*盒子寬度就是內容的

CSS3 中的 box-sizing屬性

9.png androi 應用 css com webkit -m -1 img 語法： box-sizing: content-text | border-box | inherit; content-box（默認）： 寬度和高度分別應用元素的內容框；在寬度和高度之外繪制

CSS box-sizing屬性

分享圖片 瀏覽器 公式 lan nat tricks tro unset ini 全文摘抄自 https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing box-sizing 屬性用於更改用於計算元素寬度和

box-sizing常用的屬性有哪些？分別有什麽作用？

spa idt body gpo 通過 邊距 adding AD 常用 box-sizing: content-box|border-box|inherit; content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框(元素默認效果)。

css3中的box-sizing屬性的使用

.net font content mage css3 模型 盒子模型 它的 span box-sizing屬性用來定義元素的width和height所表示的區域,該屬性一般有三種值：content-box、border-box、inherit。 其中inherit表示bo

W3c盒子模型+IE盒子模型+box-sizing屬性

fault 部分 col 公式 就是 space 內容 高度 增加 1.盒子模型有兩種，標準盒模型和IE盒模型，其中W3C標準的盒模型就是在網頁的頂部加上 DOCTYPE 聲明。 （1）W3C標準的盒模型 W3C盒子模型包括4部分：margin，border，padding

css3偽元素選擇器和box-sizing盒子模型

要點： 1.偽元素選擇器 寫法：E::before E::after （E代表元素，如下面的div元素為例） 作用：在div中內容部分的最前面和最後面新增content屬性，文字內容可以為空。但是注意，content是行類元素，自己本身也是一個盒子，所以我們這裡可以使用相對定位。 2

淺談box-sizing屬性

前言 初學 css 的時候 div 的一些寬高問題經常會引起一些不好理解的問題，這裡做一個關於css盒模型的分享。 問題 下面的程式碼可以直接複製出去執行哦 <!DOCTYPE html> <html lang="en"> &

CSS3中box-sizing屬性的作用以及應用場景

盒模型box-sizing: 取值 1.content-box 預設值，標準盒模型，設定寬度為內容寬度，實際寬度為左右邊距加上左右邊框加上左右填充再加上內容寬度 2.border-box 設定寬度等於元素內容寬度，content包含了元素的border和padding 3.inherit 繼承父元素的