日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

CSS樣式：行內元素 盒子模型

作者：那人獨釣寒江雪. 更新時間： 2022-07-12 編程語言 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /*
         像素百分比 
        fawwa  em 
            - em是相對于元素的字體大小來計算的
            - 1em = 1font-size
            - em會根據字體大小的改變而改變

        rem
            - rem相對于根元素的字體大小來計算 
            html{
                font-size:30px;
            } 

        行內元素    
            - 行內元素在頁面中左向右水平排列
        
        - 塊元素 
            - 塊元素會在頁面中獨占一行
            - 默認寬度是父元素的全部(會把父元素撐滿)
            - 默認高度是被內容撐開(子元素)


        盒模型、盒子模型、框模型(box model)
            - css將頁面中的所有元素都設置為一個矩形的盒子
            - 將元素設置為矩形的盒子后,對頁面的布局編程將不同的盒子擺放到不同的位置
            - 每一個盒子由一個幾個部分組成：
                內容區（content）
                內邊距（padding）
                邊框（border）
                外邊框（margin）   
                
                
        要設置邊框,需要至少設置三個樣式：
            - 邊框的寬度 border-width border-width還有一組 border-xxx-width  xxx可以是tio right bottom left
            - 邊框的顏色 border-color 也可以設置四個顏色的邊框  border-xxx  xxx：top bottom right left
            - 邊框的樣式 border-style 指定邊框樣式  solid表示實線   dotted 點狀虛線 dashed 虛線 double 雙線 
            1px solid #B3100F;

            內邊距(padding)
                 內容區(在沒有設置內邊距的時候是一個整矩形 設置了是四個邊之后是小矩形)
                 padding-left:100px; -right -bottom -top
                 padding 內邊距簡寫屬性, 可以同時指定四個方向的內邊距
                 規則和bordr-width一樣   
                 padding:10px 20px 30px 40px;設置四個邊
                 padding:10px 20px;設置兩個邊



            外邊距(margin)
                - 外邊距不會影響盒子可見框的大小
                - 但是外邊距會影響盒子的位置(網頁是一個大矩形)
                - 一共有四個方向的外邊距：
                    margin-top
                    margin-right
                    margin-bottom
                    margin-left

                - 元素在頁面中是按照自左向右的順序排列的
                    所以默認情況下如果我們設置的左和上外邊距則會移動元素自身
                    而設置下和右外邊距會移動其他元素    
            
            overflow:可選值：
                scroll: 生成一個橫一個豎滾動條來查看完整的內容 
                visible:默認值 子元素會從父元素中溢出,在父元素外部的位置顯示
                hidden 溢出內容將會被裁剪不會顯示 比如文字 其余字體 
                overflow-x 單獨處理橫滾動條
                overflow-y 單獨處理豎滾動條
                auto ：根據需要判斷是否加滾動條

            行內元素的盒模型
                - 行內元素不支持設置寬度盒高度
                - 行內元素可以設置padding, 但是垂直方向padding不會影響頁面的布局
                - 行內元素可以設置border,重置方向不會影響頁面的布局
                - 行內元素可以設置margin,垂直方向的margin不會影響布局
                    
         */
        
        .box1{
            width: 200px;
            height: 200px;
            background-color:aqua;
            border-width: 10px 20px 30px 40px; /*四個值：上 右 下 左  三個值：上 左右 下 兩個值：上下 左右 一個值：上下左右*/
            border-color: rebeccapurple;
            border-style:1px solid #B3100F;
        }
        .box2{
            margin: auto;
        }
        /* 共同特征寫在一起 提高效率*/
        .box3 .box4{
            width: 400px;
            height: 400px;
            font-size: 10em;
        }
        .box3{
           background-color: aqua; 
        }
        .box4{
            background-color: blanchedalmond;
        }
        
    </style>
</head>
<body>
    <div class="box1 box2">123456</div>
    <div class="box3">1</div>
    <div class="box4">2</div>
</body>
</html>

原文鏈接：https://blog.csdn.net/m0_62491934/article/details/125548441

欄目分類
最近更新