sass定義函式控制元素position的所有位置-超級方便

阿新 • • 發佈：2019-01-10

這裡寫圖片描述
當頁面佈局用的比較多postition：absolute的時候，我們可以利用sass定義簡單的函式，實現多次操作。
html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/test1.css"/>
    </head>
    <body> 

        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <div class="div3">div3</div>
        <div class="div4">div4</div>
        <div class="div5">div5</div>
        <div class="div6">div6</div>
        <div 
 class="div7">div7</div>
        <div class="div8">div8</div>
        <div class="div9">div9</div>
    </body>
</html>

scss:


@mixin qfun($w,$h,$vertical,$ver,$horizontal,$hor){
    width: $w+px;
    height: $h+px;
    position: absolute;
    @if ($vertical == t 
){
        top: $ver+px;
    }@else if($vertical == b){
        bottom: $ver+px;
    }@else if($vertical == m){
        top: 50%;
        margin-top: -$w/2+px;
    }
    @if ($horizontal == l) {
        left: $hor+px;
    }@else if($horizontal == r){
        right:$hor+px;
    }@else if($horizontal == m){
        left: 50%;
        margin-left: -$h/2+px;
    }
}
body{
    position: relative;
    width: 800px;
    height: 800px;
    border: 1px solid #000000;
    .div1{
        background: palegreen;
        @include qfun(200,200,'t',12,'l',20);
    }
    .div2{
        background: #0000FF;
        @include qfun(200,200,'t',12,'m',0);
    }
    .div3{
        background: wheat;
        @include qfun(200,200,'t',12,'r',20);
    }
    .div4{
        background: #F06633;
        @include qfun(200,200,'m',0,'l',20);
    }
    .div5{
        background: #FFC0CB;
        @include qfun(200,200,'m',0,'m',0);
    }
    .div6{
        background: #535F6D;
        @include qfun(200,200,'m',0,'r',20);
    }
    .div7{
        background: palegreen;
        @include qfun(200,200,'b',12,'l',20);
    }
    .div8{
        background: brown;
        @include qfun(200,200,'b',12,'m',0);
    }
    .div9{
        background: gold;
        @include qfun(200,200,'b',12,'r',20);
    }
}

如果沒有安裝scss檔案轉換成css檔案的同學需要安裝，然後進行轉換。

sass定義函式控制元素position的所有位置-超級方便

當頁面佈局用的比較多postition：absolute的時候，我們可以利用sass定義簡單的函式，實現多次操作。 html: <!DOCTYPE html> <html> <head> &

C# winform 自定義函式中找不到Form中的控制元件和定義的全域性變數

今天碰到一個比較狗血的問題，想了很多辦法，最後發現，原來如此的坑。在新建一個form頁面後，我們在程式碼頁面寫程式碼，往往會寫自定義的方法，一般情況下，在自定義的方法中是可以找到form頁面中的控制元件和自定義的全域性變數，但是如果我們在自定義的方法前面加了static，那麼坑就出來啦，從此這個方法好

MySQL自定義函式用法詳解-複合結構自定義變數/流程控制

自定義函式 (user-defined function UDF)就是用一個象ABS() 或 CONCAT()這樣的固有（內建）函式一樣作用的新函式去擴充套件MySQL。所以UDF是對MySQL功能的一個擴充套件建立和刪除自定義函式語法: 建立UDF: 　　CREATE

通過遞迴函式輸出n個元素的所有子集

#include <iostream> using namespace std; template <typename T> a為待處理的集合 flag為判斷是否輸出（1輸出 0不輸出） start和end為字面意思 void cout

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

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

BootstrapValidator 校驗動態插入的元素以及自定義函式校驗

Example：<script type="text/javascript" src="bootstrap/js/bootstrapValidator.min.js"></script

初學mysql(十)-資料庫之儲存過程、函式與遊標-自定義函式和流程控制（下）

上一篇部落格講了儲存過程、函式、以及遊標，這一篇部落格接著上一篇部落格來說。首先說說mysql資料庫中的流程控制及自定義函式的使用。自定義函式：根據所需要的功能，使用流程控制來完成所需要的功能，完成功能的程式碼就稱為自定義函式。要想完成自定義函式就必須學會流程控制的使

使用遞迴函式，輸出n個元素的所有子集

題目描述：請編寫一個遞迴函式，用來輸出n個元素的所有子集。例如，三個元素{a,b,c}的所有子集是：{},{a},{b},{c},{a,c},{ac},{b,c},{a,b,c}. 解題思路：根據子集的定義，集合中的每一個元素在子集中都有兩種狀態：‘1’表示出現，'0

【JavaScript】牛客程式設計：在陣列 arr 中，查詢值與 item 相等的元素出現的所有位置

function findAllOccurrences(arr, target) { var a = [] arr.forEach(function(item, index) {

Android自定義控制元件佈局重新整理自定義控制元件回到初始位置問題的解決

在闡述我所遇到的問題之前，先通過檢視Android原始碼發現這樣幾個程式碼樣例： 1. grep extends\ ViewGroup.MarginLayoutParams ./core/java/android/widget/ -rn ./core/java/andr

編寫一個函式，用來輸出n 個元素的所有子集

#include<iostream> using namespace std; int str[]={1,2,3,4,5,6,7}; bool bo[7]; long xnum=0; /* int p

js控制元素顯示在螢幕固定位置，監聽螢幕高度變化

//控制logo的顯示位置 Begin window.addEventListener("resize", function () { // 得到螢幕尺寸 (內部/外部寬度，內部/外部高度) changeLog

關於scala 函式定義流程控制異常處理

scala是基於ivm的語言，相比java而言，有些語法更加簡潔，個人感覺跟swift有點相似，不說了直接上程式碼 package com.dt.hello /** * @author ly */ object Hello { def main(args: Ar

java 隨意控制控件的位置

def null port 參數 package class java.awt stat 1-1 package chat1; import java.awt.*; import java.awt.event.*; import javax.swing.*; public

數據流圖和數據流程圖的定義與組成元素

http 系統分析 diag 數據傳遞角度加工 .cn com 數據流圖數據流圖定義：數據流圖(Data Flow Diagram):簡稱DFD，它從數據傳遞和加工角度，以圖形方式來表達系統的邏輯功能、數據在系統內部的邏輯流向和邏輯變換過程，是結構化系統分析方法的主

自定義video控制欄，移動端可行

ima http請求 ret 需要 max -m etc ssi pau <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>預覽頁

3種純css方法控制元素隱藏顯示

adding absolut 首頁 one col isp clas 瀏覽器 type 1.通過hover，也是最常用的方式。此方法要求按鈕與被控制元素必須有層級關系。（兼容低端瀏覽器常用） <div class="nav-btn">

十八、DOM元素尺寸和位置

包含隱藏有單位 absolut bottom var compute 重要內邊距十八、DOM元素尺寸和位置 1.獲取元素CSS大小 1.通過style內聯獲取元素的大小　　var box = document.getElementById(‘box‘);

js獲取元素下所有子元素總寬度賦值給父元素

網上 () func back 賦值 click button article ack 這個問題是今天在網上看到有人提的。想要獲取#box下面所有div的寬度之和，然後賦值給#box，不論加多少個div，#box的寬都會隨著div的增加而改變。 <styl

使用html元素的getBoundingClientRect來獲取dom元素的時時位置和大小

html 可能 .get dom元素 logs query htm images cli 使用： var section = $(‘.section‘)；這是jquery包裝的dom元素，其他前端框架返回的可能也是一個包裝元素，我們需要獲得的是裏面的html的dom元素

sass定義函式控制元素position的所有位置-超級方便

相關推薦