布林值-JavaScript入門基礎（012）

阿新 • • 發佈：2021-01-19

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .p1{
                width: 100px;
                height: 30px;
                font-size: 20px;
                background-color: red;
                margin 
-bottom: 20px;
            }
            .p2{
                width: 100px;
                font-size: 20px;
                height: 30px;
                background-color: yellow;
                margin-top: 50px;
                
            }
            .d1{
                width: 1000px;
                height: 600px;
                border: 1px solid gray;
                margin:  
0 auto;
            }
            .d2{
                width: 200px;
                height: 500px;
                background-color: red;
                float: left;
            }
            .d3{
                width: 500px;
                height: 500px;
                background-color: yellow;
                 
float: right;
            }
            .d4{
                /*width: 600px;*/
                height: 600px;
                background-color: green;
                overflow: hidden;
                /*display: inline-block;*/
                
            }
        </style>
    </head>
    <body>
        <!--
            BFC(Block Formatting Context)"塊級格式化上下文"
            它是頁面裡的任意一塊獨立的渲染區域，只有Block-level box參與。
            在BFC內部有一定的排布規則，且這個區域與外部毫不相干。
            
            概念1：Box  頁面佈局的基本單位，一個頁面有多個box組成，元素的預設型別和display樣式，最終決定了這個box的型別。不同的box型別會參與不同的Fromatting Context.
            概念2：Formatting Context:這是css2.1提出的概念，是頁面中的一塊渲染區域，不同型別的元素會形成不同的渲染區域，其內部渲染規則不同，它決定了其內部子元素如何排列，
                  以及和其他元素之間的關係和相互作用，最常見的Formatting Context有兩種：BFC（Block Formatting Context）和IFC（inline Formatting Context）
            
            BFC的佈局規則
            1.內部的行box（一行裡所有行元素的組合）和塊box全部會在垂直方向上，一個一個的放置
            2.box垂直方向上的距離有margin決定，屬於同一個BFC的兩個相鄰的box的margin會發生融合
            3.每個盒子的margin的左邊緣，與其父元素的左邊緣相接觸（如果發生了從右向左的格式化，效果相反），此條對於浮動元素依然適用。
            4.BFC區域不會與float box重疊。
            5.BFC區域是頁面時一個獨立的渲染區域，容器裡的子元素不會影響外部元素，反之亦然。
            6.計算一個BFC容器的高度時，浮動元素也會參與計算。
            
            如何建立一個BFC
               1.float的值不是none.
               2.position的值不是static或者relative
               3.display的值時inline-block，table-cell,flex,table-caption或者inline-flex
               4.overflow的值不是visible。
        -->
        
        <!--<div class="p1"></div>
        <div class="p2"></div>-->
        
        <div class="d1">
            <div class="d2"></div>
            <div class="d3"></div>
            <div class="d4"></div>
        </div>
    </body>
</html>

布林值-JavaScript入門基礎（012）

技術標籤：JavaScriptjqueryjavascripthtml 今天接著說數值和字串的內容。布林值：布林型別的資料只有兩個，真值true，假值false。常用於邏輯操作中的判斷。

區域性邊框的使用-CSS入門基礎（012）

技術標籤：CSScsscss3htmlhtml5javascript 今天我們接著分享邊框樣式的使用。我們都知道邊框有上下左右，四條邊，那麼如果我們要對其中的某一條邊設定，我該怎麼辦？

訪問歷史記錄-JavaScript入門基礎（009）

技術標籤：JavaScripthtmlhtml5javascriptjquerycss3 訪問歷史記錄：在JavaScript中，瀏覽器的歷史記錄用window.history物件表示的，它是訪問過的URL列表。history物件的方法可以讓我們訪問這個列表，但是不能

DOM物件和內建物件-JavaScript入門基礎（008）

技術標籤：JavaScriptjavascriptjquerycsscss3html 函式設定預設引數：有時候，我們需要函式的引數帶預設值，是為了簡化輸入。

函式-JavaScript入門基礎（006）

技術標籤：JavaScriptjavascriptjquerycsscss3html 很多時候，我們需要程式執行相同和類似的任務。為了避免程式碼重複和冗餘，我們會把相似的功能縮寫在一個模組中，這個模組我們稱為函式。

變數-JavaScript入門基礎（004）

技術標籤：JavaScripthtmlhtml5csscss3javascript 變數可以看作一種被命名的分類容器，用於儲存特定的資料。變數可以用任何方式進行命名，但我們一般只用字母、數字、美元符號和下劃線。

建立簡單的指令碼-JavaScript入門基礎（003）

技術標籤：JavaScriptcsscss3javascripthtmlhtml5 今天我們分享關於如何建立指令碼的內容。

Hello World-JavaScript入門基礎（002）

技術標籤：JavaScripthtmljavascriptjquerycss3css 在開始學習任何一種程式語言時，我們總會沿用傳統，也就是編寫的第一個程式，向世界問聲好，下面我們使用JavaScript編寫一個“Hello World”的範例。

JavaScript簡介-JavaScript入門基礎（001）

技術標籤：JavaScriptjavascriptjquerycsscss3html 今天我們分享關於JavaScript的內容。早期的web，內容主要是文字，現在的web則完全不同，它包含了聲音、視訊、動畫、互動導航等元素，在這其中JavaScript扮演

動態載入檔案-JavaScript入門基礎（019）

技術標籤：JavaScriptjavascriptjquery 在有些情況下，我們需要給已經在瀏覽器中載入的頁面隨時載入Javas程式碼，就可以利用createElement動態新建<script>元素。

DOM指令碼程式設計-JavaScript入門基礎（018）

技術標籤：JavaScriptjavascriptjquery DOM節點： DOM層級結構中最頂端的物件是window物件，而document物件是它的子物件之一。

用prototype擴充套件和繼承物件-JavaScript入門基礎（017）

技術標籤：JavaScriptjavascriptjquery 擴充套件物件：可以使用prototype快速的新增屬性和方法。

物件-JavaScript入門基礎（016）

技術標籤：JavaScriptjavascriptjquery 面向物件程式設計是一種很重要的技術，有助於編寫清晰可靠的、可以重複使用的程式碼。

邏輯控制-JavaScript入門基礎（015）

技術標籤：JavaScriptjavascriptjquery 條件語句： if語句，它可以根據布林型變數的值，走不同的分支條件。

事件-JavaScript入門基礎（014）

技術標籤：JavaScriptjavascriptjqueryhtml 滑鼠事件：事件描述onclick單擊元素oncontextmenu右鍵彈出選單ondbclick雙擊元素onmousedown元素上按下滑鼠鍵onmouseenter滑鼠指標移動到元素上onmouseleave滑鼠移動

陣列-JavaScript入門基礎（013）

技術標籤：JavaScriptjavascriptjquery 建立陣列： varmyArray = new Array(); 也可以直接給一個方括號：

數字和字元-JavaScript入門基礎（011）

技術標籤：JavaScriptjavascriptjquerycsshtml JavaScript屬於“寬鬆型別”的程式語言，意味著JavaScript變數可以有不同的型別。

日期和時間-JavaScript入門基礎（010）

技術標籤：JavaScriptjavascriptjqueryhtml Date物件用於處理日期和時間。但是DOM裡並沒有現成的Date物件，而是需要我們自己在需要時建立Data物件。

Erlang 入門 ---- 基礎（一）

Erlang 入門基礎安裝 Erlang Shell 官網安裝命令安裝 For Homebrew on OS X: brew install erlang

WPF入門基礎 ——（佈局）

WPF中的常用佈局 ——墨問蒼生 2020-10-11 一、佈局的基本原則　　·一個視窗只能包含一個元素

布林值-JavaScript入門基礎（012）

相關推薦