CSS將邊框border設定到寬度和高度中
今天偶遇一個css方面的問題,因為以前也為該問題苦惱過,今天得到了解決方案,而且答案很簡單,就是給css加上一個屬性就搞定了,由於該屬性平時很少用,為了方便以後檢視,特此記錄。
要實現的效果圖
我們想實現如下效果:
一般做法
那麼我們如何通過使用html+css來實現這個效果呢?按照一般的思維,我們會設計出如下的程式碼
html程式碼:
<div class="container">
<div class="content">
</div>
<div class="tab">
</div >
<div class="tab">
</div>
</div>
css程式碼:
.container {
margin: 0;
background-color: yellow;
height: 200px;
width: 400px;
}
.content {
width: 85%;
height: 100%;
float: right;
border: 1px solid red;
}
.tab {
width: 15%;
height: 30%;
float: left;
border: 1px solid green ;
}
此時我們會發現,如果不新增border,左右兩邊的div可以正常並排,一旦加了border,靠左的兩個div會被擠出container之外,並且iframe的高度還會超出container。
如圖:
問題解決方法
其實,對css的樣式很精通的人,這個應該不算是問題,因為css有一個屬性,box-sizing可以很方便的解決這個問題,將該屬性值設定為border-box,該值的相關描述如下:
為元素設定的寬度和高度決定了元素的邊框盒。
就是說,為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。
通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
html程式碼不變
css程式碼如下
.container {
margin: 0;
background-color: yellow;
height: 200px;
width: 400px;
}
.content {
width: 85%;
height: 100%;
float: right;
border: 1px solid red;
box-sizing: border-box;
}
.tab {
width: 15%;
height: 30%;
float: left;
border: 1px solid green;
box-sizing: border-box;
}
相關推薦
CSS將邊框border設定到寬度和高度中
今天偶遇一個css方面的問題,因為以前也為該問題苦惱過,今天得到了解決方案,而且答案很簡單,就是給css加上一個屬性就搞定了,由於該屬性平時很少用,為了方便以後檢視,特此記錄。 要實現的效果圖 我們想實現如下效果: 一般做法 那麼我們如何
html之給文字框設定寬度和高度...
今天在訪QQ空間登入介面時,感覺其文字框的寬度和高度都好大呀,截圖如下:我很好奇其是怎麼實現的,百度了一下,呵呵,其實不難嘛,程式碼如下:<input name="" type="text" style="wid
Web前端Table中的tr和td按百分比設定寬度和高度,當內容超出時Table變型解決
如果table按照百分比設定寬度和高度,當表格內部任意內容超出所在元素的百分比值時就會使得表格變形。 <table width='80%'> <tr> <td width='50%'>內容超過50%</td> </tr> </table>
畫布設定(style設定寬度,高度 和直接寫canvas的寬度,高度)的不同影響
今天在進行畫布學習的時候,出現了下面的問題: 程式碼寫的是畫的圓形。結果卻是橢圓形。經過討教和資料查詢,發現為題出現在上面的畫布定義上面。 修改程式碼後,問題消失。 在進行跨步寬度和高度定義的時候,需要搞清楚兩個概念: 1.畫布的寬和高(ps
Apache POI 設定Excel單元格的寬度和高度
原博作者:Tony Qu 原博連結 在Excel中,單元格的寬度其實就是列的寬度,因為Excel假設這一列的單元格的寬度肯定一致。所以要設定單元格的寬度,我們就得從列的寬度下手,HSSFSheet有個方法叫SetColumnWidth,共有兩個引數:一個是列的索引(從0開始),一個是
關於span標籤的寬度和高度設定
正常情況下我們設定span標籤是無法設定span標籤的寬度和高度的。那麼怎樣才能設定呢。個人感覺意義並不大,如果需要可以使用div。 span是有display:inline-block和float屬性的,只要設定了這兩個屬性,就會認為它是一個塊級元素。 下面是例子: &l
POI設定單元格的寬度和高度
作者:Tony Qu 在Excel中,單元格的寬度其實就是列的寬度,因為Excel假設這一列的單元格的寬度肯定一致。所以要設定單元格的寬度,我們就得從列的寬度下手,HSSFSheet有個方法叫SetColumnWidth,共有兩個引數:一個是列的索引(從0開始),一個是寬度。 現在假設你要設定B列的寬度
body css樣式中 設定寬度和背景色
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文件</title> <style type="text/css"&g
動態獲取和設定ImageView的寬度和高度
內某金融企業的一道面試題:如何在程式碼中獲得一個ImageVIew的高度和寬度? 相信很大一部分人,會直接想到用imageview.getWidth() 和 imageview.getHeight() 來獲得,其實不然。 我們可以自己寫個程式來跑一下,當我們放置一張圖
CSS 控制DIV及圖片的寬度和高度
在製作網頁時,常常希望頁面能夠在視窗變小時出現滾動條,保持頁面不變形;同時又想讓頁面隨同視窗自動增長以填滿視窗。 這時候我們需要設定長寬保留最小值,同時自適應。 如:background:url(header_bg.gif) #ffffff repeat-x 0 0; mi
html 表格單元格的寬度和高度的設定
做網頁的時候,經常會碰到表格寬度對不齊的問題。詳細地看了html中表格標籤table的高度和寬度設定的細節,現總結如下: 1、table中的width和height設定及其作用:table中設定的height其實是設定個最小值,也就是當表格中的內容或者行高總值超過這個設定值時,會自動延長表格的
LaTeX技巧015:設定表格的寬度和高度
前言 LaTeX的表格預設只是包裹內容,但是有時候我們需要指定表格的寬度或高度,即每一列的寬度,實現效果如下: 效果展示 實現程式碼 %system = ubuntu %software = TexLive 2015 %compl
安卓中動態設定控制元件的寬度和高度
我們做專案的時候 需要動態設定控制元件的高度,因此該功能是很重要的,下面我介紹一下動態設定控制元件的高度。 LinearLayout.LayoutParams linearParams = (LinearLayout.LayoutParams) password_l
android開發中如何通過程式碼設定控制元件的寬度和高度
原理:通過控制元件的setLayoutParams(params)來設定。而params的型別主要是根據該控制元件的父控制元件的型別來定義的。例如,1、main.xml檔案內容如下:<LinearLayout xmlns:android="http://schemas.
網頁寬度和高度設定參考建議
先看一下國內國外的幾個知名網站的網頁寬度設定: 編號 網站名 網頁寬度 備註 1 網易 960px 均指首頁,下同 2 新浪 950px 3 騰訊 910px 4 TOM 960px 5 鳳凰網 950px 6 MICROSOFT 935px 國外網站 7 BBC 995px 8 AOL 9
CODEVS 1501二叉樹最大寬度和高度
它的 logs nbsp 二叉 ace 最小寬度 最大 -h blog 題目描述 Description 給出一個二叉樹,輸出它的最大寬度和高度。 輸入描述 Input Description 第一行一個整數n。 下面n行每行有兩個數,對於第i行的兩個數
JS獲取屏幕的寬度和高度
邊線 spa top offset nbsp log off document color <html> <script> function a(){ document.write( "屏幕分辨率為:"+screen.width
js和jquery如何獲取圖片真實的寬度和高度_javascript技巧
寬高 clas 獲取 deb 問題 網頁 log css www. 在做pc網頁的時候,有時候會考慮按照插入的圖片的尺寸來判斷圖片是橫圖還是豎圖。然後判斷過後給予不同的展示方式! 另外一種就是在手機頁面上,在新聞頁插入的圖片往往都是按照圖片的原尺寸來展示,如果手機屏幕太小,
JavaPOI設置Excel單元格的寬度和高度
mvc sco .html adb cvs docs sm3 shuf a10 uq1m1u杖刳苯嗆逼日http://docstore.docin.com/gde52315jdyl昂抗掌冶闌錘http://jz.docin.com/dqgis813189o011z殘豢忍縷仁
瀏覽器寬度和高度的說明
工作區 eve post off mage 技術 title www. gpo IE中: document.body.clientWidth ==> BODY對象寬度 document.body.clientHeight ==> BODY對象高度 docume