盒模型的屬性丶display顯示丶浮動(dòng)

番茄西紅柿發(fā)布于2019-04-23 13:22 / 1640人閱讀

摘要：一丶盒模型的屬性重要是標(biāo)準(zhǔn)文檔流父子之間調(diào)整位置上下左右上下左右上左右下順時(shí)針上右下左三要素線性的寬度線性的樣式顏色實(shí)線小圓點(diǎn)

一丶盒模型的屬性(重要)

　　1.padding

　　　　padding是標(biāo)準(zhǔn)文檔流,父子之間調(diào)整位置

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>paddingtitle>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                width: 200px;
                height: 200px;
                background-color: red;
                /*上下左右*/
                padding: 10px;
                /*上下  左右*/
                padding: 20px 30px;
                /*上  左右  下*/
                padding: 20px 30px 40px;
                /*順時(shí)針   上右下左*/
                padding: 20px 30px 40px 50px;
            }
        style>
    head>
    <body>
        <div class="box">alexdiv>
    body>
html>

padding

　　2.border

　　　　三要素: 線性的寬度線性的樣式顏色

　　　　solid 實(shí)線　　dotted小圓點(diǎn)　　double雙實(shí)線　　bottom虛線

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>bordertitle>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                width: 200px;
                height: 200px;
                background-color: red;
                /*根據(jù)方向來(lái)設(shè)置*/
                border-left: 5px solid green;
                border-right: 1px dotted yellow;
                border-top: 5px double purple;
                border-bottom: 1px dashed;
            }
        style>
    head>
    <body>
        <div class="box">alexdiv>
    body>
html>

border

　　實(shí)例:制作三角形

　　transparent 透明

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>制作三角形title>
        <style type="text/css">
            div{
                width: 0;
                height: 0;
                border-bottom: 20px solid red;
                border-left: 20px solid transparent;
                border-right: 20px solid transparent;
                
            }
        style>
        
    head>
    <body>
        <div>
            
        div>
    body>
html>

制作三角形

　　3.margin

　　　　前提:必須是在標(biāo)準(zhǔn)文檔流下

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>margintitle>
        <style>
            .s1{
                background-color: red;
                margin-right: 30px;
            }
            .s2{
                background-color: rgb(0,128,0);
                margin-left: 30px;
            }
        style>
    head>
    <body>
        <span class="s1">alexspan><span class="s2">wusirspan>
    body>
html>

margin

　　margin垂直方向上的坑:

　　　　margin的水平不會(huì)出現(xiàn)任何問(wèn)題

　　　　垂直方向上 margin會(huì)出現(xiàn)塌陷問(wèn)題

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>margin坑title>
        <style>
            .s1{
                width: 200px;
                height: 200px;
                background-color: red;
                margin-bottom: 40px;
            }
            .s2{
                width: 200px;
                height: 200px;
                background-color: green;
                margin-top: 100px;
            }
        style>
    head>
    <body>
        <div class="s1">div>
        <div class="s2">div>
    body>
html>

margin(坑)

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>margin父子盒子的坑title>
        <style type="text/css">
            .box{
            width: 300px;
            height: 300px;
            background-color: red;
            /*float: left;*/
        }
            .child{
                width: 100px;
                height: 100px;
                background-color: green;
                margin-left: 50px;
                margin-top: 50px;
        }
        style>
    head>
    <body>
        <div class="father">
            <div class="child">
            div>
        div>
    body>
html>

margin父子盒子的坑

二丶display顯示

　　前提;必須是在標(biāo)準(zhǔn)文檔流下

　　塊級(jí)元素和行內(nèi)元素的相互轉(zhuǎn)換:

　　　　塊級(jí)元素可以轉(zhuǎn)換為行內(nèi)元素:

　　　　　　display:inline

　　　　　　此時(shí)這個(gè)div不能設(shè)置寬度丶高度;

　　　　　　此時(shí)這個(gè)div可以和別人并排了

　　　　行內(nèi)元素轉(zhuǎn)換為塊級(jí)元素:

　　　　　　display:block

　　　　　　此時(shí)這個(gè)span能夠設(shè)置寬高

　　　　　　此時(shí)這個(gè)span必須霸占一行了,別人無(wú)法和他并排

　　　　　　如果不設(shè)置寬度,將撐滿父親

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>displaytitle>
        <style>
            .box{
                width: 100px;
                height: 100px;
                background-color: red;
                border: 1px solid yellow;
            }
            div a{
                display: block;
                width: 100px;
                height: 100px;
            }
            span{
                display: inline-block;
                width: 300px;
                height: 200px;
                background-color: yellow;
            }
        style>
    head>
    <body>
        <div class="box">alexdiv>
        <div class="box">wusirdiv>
        
        <div>
            <a href="#">
                <img src="http://img07.tooopen.com/images/20170818/tooopen_sy_220999936848.jpg" alt="" width="300" height="300"/>
            a>
        div>
        
        <input type="text" /><br />
        <span>哈哈哈哈span>
        <span>嘻嘻嘻嘻span>
    body>
html>

display

三丶浮動(dòng)

　　float : none 表示不浮動(dòng),默認(rèn)

　　　　　 left:表示左浮動(dòng)

　　　　　 right:表示右浮動(dòng)

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮動(dòng)title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .father{
                width: 500px;
            }
            .box1{
                width: 100px;
                height: 100px;
                background-color:red;
                float: left;
            }
            .box2{
                width: 100px;
                height: 300px;
                background-color:green;
                float: left;
            }
            .box3{
                width: 100px;
                height: 100px;
                background-color:blue;
                float: left;
            }
            .father2{
                width: 600px;
                height: 200px;
                background-color: yellow;
            }
        style>
    head>
    <body>
        <div class="father">
            <div class="box1">1div>
            <div class="box2">2div>
            <div class="box3">3div>
        div>
        <div class="father2">
            
        div>
    body>
html>

浮動(dòng)

　　我們?cè)撊绾吻宄?dòng)呢?有以下幾種方法

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>清除浮動(dòng)title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .father{
                width: 500px;
                height: 300px;
            }
            .box1{
                width: 100px;
                height: 100px;
                background-color:red;
                float: left;
            }
            .box2{
                width: 100px;
                height: 300px;
                background-color:green;
                float: left;
            }
            .box3{
                width: 100px;
                height: 100px;
                background-color:blue;
                float: left;
            }
            .father2{
                width: 600px;
                height: 200px;
                background-color: yellow;
            }
        style>
    head>
    <body>
        <div class="father">
            <div class="box1">1div>
            <div class="box2">2div>
            <div class="box3">3div>
        div>
        <div class="father2">
            
        div>
    body>
html>

固定高度

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"
                 
                                                                                                                    
                         GPU云服務(wù)器
                                             
                         云服務(wù)器
                                                                                                                                                 
                                      
                     
                    
                                                                                               display屬性
                                                                                                           盒模型
                                                                                                           盒模型html嗎
                                                                                                           簡(jiǎn)述html盒模型

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1784.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensor

閱讀 769·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 4021·2021-11-30 14:52
Hadoop 2.6.0 啟動(dòng)問(wèn)題 lib/native/libhadoop.so which mi

閱讀 3855·2021-11-30 14:52
VmShell：黑五美國(guó)VPS,免費(fèi)先開通測(cè)試,滿意后付款!支持tiktok美區(qū)

閱讀 3909·2021-11-29 11:00
百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

閱讀 3838·2021-11-29 11:00
Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

閱讀 3949·2021-11-29 11:00
301重定向怎么做?301重定向設(shè)置方法有幾種

閱讀 3613·2021-11-29 11:00
wordpress網(wǎng)站重定向次數(shù)過(guò)多的解決方法

閱讀 6310·2021-11-29 11:00

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

盒模型的屬性丶display顯示丶浮動(dòng)

一丶盒模型的屬性(重要)

1.padding

padding是標(biāo)準(zhǔn)文檔流,父子之間調(diào)整位置

2.border

三要素: 線性的寬度 線性的樣式 顏色

solid 實(shí)線 dotted小圓點(diǎn) double雙實(shí)線 bottom虛線

實(shí)例:制作三角形

transparent 透明

3.margin

前提:必須是在標(biāo)準(zhǔn)文檔流下

margin垂直方向上的坑:

margin的水平不會(huì)出現(xiàn)任何問(wèn)題

垂直方向上 margin會(huì)出現(xiàn)塌陷問(wèn)題

二丶display顯示

前提;必須是在標(biāo)準(zhǔn)文檔流下

塊級(jí)元素和行內(nèi)元素的相互轉(zhuǎn)換:

塊級(jí)元素可以轉(zhuǎn)換為行內(nèi)元素:

display:inline

此時(shí)這個(gè)div不能設(shè)置寬度丶高度;

此時(shí)這個(gè)div可以和別人并排了

行內(nèi)元素轉(zhuǎn)換為塊級(jí)元素:

display:block

此時(shí)這個(gè)span能夠設(shè)置寬高

此時(shí)這個(gè)span必須霸占一行了,別人無(wú)法和他并排

如果不設(shè)置寬度,將撐滿父親

三丶浮動(dòng)

float : none 表示不浮動(dòng),默認(rèn)

left:表示左浮動(dòng)

right:表示右浮動(dòng)

我們?cè)撊绾吻宄?dòng)呢?有以下幾種方法

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

　　1.padding

　　　　padding是標(biāo)準(zhǔn)文檔流,父子之間調(diào)整位置

　　2.border

　　　　三要素: 線性的寬度線性的樣式顏色

　　　　solid 實(shí)線　　dotted小圓點(diǎn)　　double雙實(shí)線　　bottom虛線

　　實(shí)例:制作三角形

　　transparent 透明

　　3.margin

　　　　前提:必須是在標(biāo)準(zhǔn)文檔流下

　　margin垂直方向上的坑:

　　　　margin的水平不會(huì)出現(xiàn)任何問(wèn)題

　　　　垂直方向上 margin會(huì)出現(xiàn)塌陷問(wèn)題

　　前提;必須是在標(biāo)準(zhǔn)文檔流下

　　塊級(jí)元素和行內(nèi)元素的相互轉(zhuǎn)換:

　　　　塊級(jí)元素可以轉(zhuǎn)換為行內(nèi)元素:

　　　　　　display:inline

　　　　　　此時(shí)這個(gè)div不能設(shè)置寬度丶高度;

　　　　　　此時(shí)這個(gè)div可以和別人并排了

　　　　行內(nèi)元素轉(zhuǎn)換為塊級(jí)元素:

　　　　　　display:block

　　　　　　此時(shí)這個(gè)span能夠設(shè)置寬高

　　　　　　此時(shí)這個(gè)span必須霸占一行了,別人無(wú)法和他并排

　　　　　　如果不設(shè)置寬度,將撐滿父親

　　float : none 表示不浮動(dòng),默認(rèn)

　　　　　 left:表示左浮動(dòng)

　　　　　 right:表示右浮動(dòng)

　　我們?cè)撊绾吻宄?dòng)呢?有以下幾種方法