国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

盒模型的屬性丶display顯示丶浮動

番茄西紅柿 / 1614人閱讀

摘要：一丶盒模型的屬性重要是標準文檔流父子之間調整位置上下左右上下左右上左右下順時針上右下左三要素線性的寬度線性的樣式顏色實線小圓點

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

　　1.padding

　　　　padding是標準文檔流,父子之間調整位置

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;
                /*順時針   上右下左*/
                padding: 20px 30px 40px 50px;
            }
        style>
    head>
    <body>
        <div class="box">alexdiv>
    body>
html>
padding

　　2.border

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

　　　　solid 實線　　dotted小圓點　　double雙實線　　bottom虛線

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>bordertitle>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                width: 200px;
                height: 200px;
                background-color: red;
                /*根據方向來設置*/
                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

　　實例:制作三角形

　　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

　　　　前提:必須是在標準文檔流下

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的水平不會出現任何問題

　　　　垂直方向上 margin會出現塌陷問題

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顯示

　　前提;必須是在標準文檔流下

　　塊級元素和行內元素的相互轉換:

　　　　塊級元素可以轉換為行內元素:

　　　　　　display:inline

　　　　　　此時這個div不能設置寬度丶高度;

　　　　　　此時這個div可以和別人并排了

　　　　行內元素轉換為塊級元素:

　　　　　　display:block

　　　　　　此時這個span能夠設置寬高

　　　　　　此時這個span必須霸占一行了,別人無法和他并排

　　　　　　如果不設置寬度,將撐滿父親

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

 

三丶浮動

　　float :    none  表示不浮動,默認

　　　　　  left:表示左浮動

　　　　　  right:表示右浮動

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮動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>
浮動

　　我們該如何清除浮動呢?有以下幾種方法

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>清除浮動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"

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1784.html

相關文章

  • 浮動的補充丶文本和字體屬性丶background丶定位

    摘要：英語為了防止用戶電腦里面，沒有微軟雅黑這個字體。因為絕對定位脫離標準流，影響頁面的布局。一丶浮動的補充 　　浮動的特性: 　　　　1.浮動的元素脫標 　　　　2.浮動的元素互相貼靠 　　　　3.浮動的元素有字圍效果 　　　　4.浮動的元素有收縮的效果 　　　　前提是標準文檔流,margin的垂直方向會出現塌陷問題 　　　　如果盒子居中:margin: 0auto;如果盒子浮動了,margin...

    番茄西紅柿 評論0 收藏0

  • AngularJs 功能（三）--數據綁定丶作用域

    摘要：功能數據綁定的雙向數據綁定，一方面可以做到變化驅動了中元素變化，另一方面也可以做到元素的變化也會影響到。其次告訴，對頁面上的這個進行雙向數據綁定。第三告訴，在這個指令模版上顯示這個的數據。作用域是一個把一個元素連結到上的對象。 功能 數據綁定 AngularJS的雙向數據綁定，一方面可以做到model變化驅動了DOM中元素變化，另一方面也可以做到DOM元素的變化也會影響到Model。 ...

    joywek 評論0 收藏0

  • 基于ONENET云平臺數據的MQTT協議的使用及模擬數據和搭建。

    登錄與添加： 首先，我們打開ONENET云平臺 然后選擇登錄 ?登錄以后我們選擇多協議接入中的MQTT ?接著我們點擊添加產品按鈕 ? ? 輸入產品名稱丶行業丶類別丶簡介 ? 技術參數中聯網方式我們可以根據實際情況來選擇，設備接入協議選擇MQTT協議，操作系統選擇uC/OS系統，網絡運營商選擇移動。接著系統會彈出一個頁面我們選擇立即添加設備 ?也可以從設備列表進行添加設備 ?設備名稱可...

    不知名網友 評論0 收藏0

  • JVM虛擬機筆記之運行時數據區域(一)

    摘要：本文參照深入了解虛擬機周志明，純粹做做筆記，寫寫自己覺得較為重要的內容方便理解虛擬機運行時數據區如下程序計數器程序計數器寄存器是一塊較小的內存空間，看做是當前線程所執行的字節碼的行指示器。異常情況也與虛擬機棧一致。 本文參照深入了解Java虛擬機-周志明，純粹做做筆記，寫寫自己覺得較為重要的內容方便理解 Java虛擬機運行時數據區如下： showImg(https://segmentf...

    mgckid 評論0 收藏0

  • 利用 Css 制作精美的卡片UI

    摘要：固定塊元素的大小，其中包含我們的圖片，這使我們能夠在滿足尺寸要求的情況下，任何圖片都可用于制作成卡片。字體及其他博文鏈接利用制作精美的卡片源碼鏈接利用制作精美的卡片原文鏈接翻譯墨丶水瓶 本教程將會告訴你如何用 Html 和 Css 實現卡片界面。教程會重點使用 Css filter 屬性處理圖片，以便給它添加一些過渡效果。 第一步：確定 HTML 代碼結構 在創建 HTML 代碼前，你...

    Ilikewhite 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<