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

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁 編程語言 正文

CSS樣式：行內(nèi)元素 盒子模型

作者：那人獨(dú)釣寒江雪. 更新時(shí)間： 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是相對(duì)于元素的字體大小來計(jì)算的
            - 1em = 1font-size
            - em會(huì)根據(jù)字體大小的改變而改變

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

        行內(nèi)元素    
            - 行內(nèi)元素在頁面中左向右水平排列
        
        - 塊元素 
            - 塊元素會(huì)在頁面中獨(dú)占一行
            - 默認(rèn)寬度是父元素的全部(會(huì)把父元素?fù)螡M)
            - 默認(rèn)高度是被內(nèi)容撐開(子元素)


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

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



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

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

            行內(nèi)元素的盒模型
                - 行內(nèi)元素不支持設(shè)置寬度盒高度
                - 行內(nèi)元素可以設(shè)置padding, 但是垂直方向padding不會(huì)影響頁面的布局
                - 行內(nèi)元素可以設(shè)置border,重置方向不會(huì)影響頁面的布局
                - 行內(nèi)元素可以設(shè)置margin,垂直方向的margin不會(huì)影響布局
                    
         */
        
        .box1{
            width: 200px;
            height: 200px;
            background-color:aqua;
            border-width: 10px 20px 30px 40px; /*四個(gè)值：上 右 下 左  三個(gè)值：上 左右 下 兩個(gè)值：上下 左右 一個(gè)值：上下左右*/
            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

欄目分類
最近更新