2. 程式人生 > >calc函式，動態計算元素的寬高

calc函式，動態計算元素的寬高

阿新 • • 發佈：2018-11-13

css3，新增的calc函式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="main.css">
    <style>
       .box {
           width: 200px;
           height: 100px;
           border: 1px solid red;
 

       }
        .box>div {
            margin: 5px;
            display: inline-block;
            width: calc(50% - 15px);
            height: calc(100% - 15px);
            border: 1px solid darkgray;
        }
    </style>
</head>
<body>
<div class="box">
    <div></
 
div>
    <div></div>
</div>

</body>
</html>

在這裡插入圖片描述

相關推薦

calc函式，動態計算元素的寬高

css3，新增的calc函式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>

微信小程式——獲取到px轉化為rpx（根據裝置寬高動態設定元素寬高）

在專案中需要給一個view標籤動態的設定高度 首先，先通過呼叫wx.getSystemInfo獲取裝置資訊 可以獲取的資訊如下圖 wx.getSystemInfo({ success: function(res) { console.log

iOS中最簡單實用的自定義動態返回行高的cell，動態計算cell的高度

      iOS專案開發中，需要動態返回行高自定義cell的場景可以說是數不過來，可以不誇張的說，只要伺服器返回的同一個欄位的文字字數無限制，那麼我們客戶端在設定的時候就要動態返回行高。      場景：1.當需要tableview展示資料時，一般頭像，暱稱，等資訊都

根據HTML+CSS完成一個三列布局，左右側欄寬為180px，高為300px；中間欄自適應，高為300px；中間欄子元素(寬高不確定)實現水平、垂直居中。

使用Flex佈局，更加方便。HTML程式碼省略，以下只是CSS樣式的程式碼，僅供參考。 <!DOCTYPE html> <html> <head> <title></title> </head> &

js動態添加iframe，自適應頁面寬高

www. obj () iframe spa margin ber client document function showIframe(url,w,h){ //添加iframe var if_w = w; var if_h = h; $("&

兼容性— IE6下子元素寬高會撐大父級

color html image oct 編寫代碼 ack box ie6 images <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

jquery或者js獲取到元素寬高精確到小數

OS 模式 idt alert 新版 老版本 保留 兼容ie rom 首先我們應該知道用jQuery的width()方法獲取元素的寬高及樣式屬性數值時，如果元素的屬性是浮點數，會自動四舍五入成整數。 而如果我們就是想獲取實際的帶小數的屬性數值時該用什麽方法。 在使用獲取

jQuery中幾個關於元素寬高方法的區別

contain ext 參數設置 oct ont doctype asc jquer cloud 幾個關於元素寬高的方法 height():帶參數設置，不帶參數獲取,參數是number類型 width():帶參數設置，不帶參數獲取,參數是number類型 innerHei

最全的獲取元素寬高及位置的方法

offsetWidth / offsetHeight offsetWidth HTMLElement.offsetWidth 是一個只讀屬性，返回一個元素的佈局寬度。一個典型的（各瀏覽器的offsetWidth可能有所不同）offsetWidth是測量包含元素的邊框(border)、水平線上的內邊距(pa

安卓專案實戰之Activity啟動過程中動態獲取元件寬高的3種方式

前言 有時候我們需要在Activity啟動的時候獲取某一元件的寬或者是高用於動態的更改UI佈局，但是這時候我們直接通過getWidth和getHeight方法獲取是有問題的，如下： 我們在Activity的onCreate方法中呼叫如下的方法來獲取元件的寬高： /** * 在onC

Android動態設定佈局寬高

例如設定一個圖片寬高 關鍵程式碼： //取控制元件當前的佈局引數 LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) imageView.getLayoutParams(); //設定寬度值 params.wi

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

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

最全面的獲取元素寬高及位置的方法

HTMLElement.offsetWidth 是一個只讀屬性，返回一個元素的佈局寬度。一個典型的（各瀏覽器的offsetWidth可能有所不同）offsetWidth是測量包含元素的邊框(border)、水平線上的內邊距(padding)、豎直方向滾動條(

vue 動態獲取div寬高有時候為0的情況

　專案背景： 　　需要使用echarts進行圖表展示。由於div寬高是不固定的，因此需要先獲取父級的寬高再把值賦予到圖表的div中。 　　需要使用 this.$nextTick(() => {    });方法，在mounted中，保證DOM渲染完全後，在進行echar

jquery獲取設定元素寬高位置height()、width()、offset()、position()、scrollTop()、scrollLeft()

全棧工程師開發手冊 （作者：欒鵬） jquery獲取設定元素寬高位置 jquery的通過height()、width()、offset()、position()、scrollTop()、

元素寬高以百分比設定時的大小相對誰來確定

今天在做一個demo的時候有一個地方遇到一個問題，想實現小星星bling bling的效果，在我設定background-size由100%變為50%的時候，發現小星星變成了巨星！！震驚！！！ 因為我的小星星是以背景圖片放在一個div (class=”inne

css3的calc屬性用於動態計算長度值

calc() 函式用於動態計算長度值。      calc(100vh - 10px) 表示整個瀏覽器視窗高度減去10px的大小      calc(100vw - 10px) 表示整個瀏覽器視窗

關於元素寬高、邊距屬性及應用

一、屬性定義 1、width: auto 預設值。瀏覽器可計算出實際的寬度。 length 使用 px、cm 等單位定義寬度。 % 定義基於包含塊（父元素）寬度的百分比寬度。 inherit 規定應該從父元素繼承 width 屬性的值。 2、padding length： 規

js中與元素寬高位置相關知識彙總

常見clientWidth、clientHeight、offsetWidth、offsetLeft，clientX、scrollTop等詞語，比較混亂，現在總結下他們的區別。 1. clientWidth：元素的寬度（width+padding），offsetWidth相比clientWidth，

Android螢幕適配3-動態獲取螢幕寬高及動態設定控制元件寬高

1、問題 在螢幕適配中，要求應用在不同的螢幕上顯示一樣的效果時，我們的佈局可以採用百分比來定位，也就是 layout_weight，但對於一些層層巢狀或更加複雜的情況下，使用百分比的效果並不是很好，頁無法解決一些問題，比如文字大小。 2、解決思路 我們