day04

今天我學到了什么

1.盒子模型

1.1:box-sizing:border-box

當設置box-sizing:border-box時;
設置padding,和border,它的寬度還是會保持不變
例：//HTML
<div></div>
//css
div{
            border:10px solid #333;
            padding:20px;
            box-sizing: content-box;
            width:100px;
            height:100px;
            background-color: red;
        }
當設置padding和border時寬度會發生改變
總寬度=width+border+padding
box-sizing:content-box;(默認清晰)
//沒有圖像，

1.2實現元素居中
margin-left:auto;
margin-right:auto;

2、浮動float

/HTML
<ul>
    <li>手機</li>
    <li>電視</li>
    <li>平板</li>
</ul>
//CSS
 *{margin:0;padding:0}
        li{float: left}
float：left/right/top/bottom
//目的：為了讓元素并排顯示

3、如何清除浮動

（1）給下面的兄弟元素給clear:both;
//HTML
<div class="one"></div>
<div class="two"></div>
//CSS
 .one{
            width:100px;
            height:50px;
            background-color: red;
            float: left;
        }
        .two{
            clear: both;
            width:200px;
            height:50px;
            background-color: yellow;
        }

（2）給父級加overflow:hidden;
//HTML
<div class="parent">
    <div class="one"></div>
</div>
//css
  .one{
            width:100px;
            height:100px;
            background:red;
            float: left;
        }
        /*子級float,父級沒有高度，如何讓父級有高度*/
        .parent{
            overflow: hidden;
            width:200px;
            background:yellow;
              }

（3）用偽元素,給父級內容生成

.row:before{ display:table; content:”” }

.row:after{ display:table; display:table; content:””；clear:both;

例：//HTML
<div class="parent">
    <div class="one"></div>
</div>
//css
  .one{
            width:100px;
            height:100px;
            background:red;
            float: left;
        }
        /*子級float,父級沒有高度，如何讓父級有高度*/
        .parent{
            /*overflow: hidden;*/
            width:200px;
            background:yellow;
                  }
        .parent:after{
            content:"";
            display: table;
            clear:both;
        }

4定位

4.1position:absolute | relative
position:relative(相對定位）
//相對定位元素的定位是相對其正常位置。
position:absolute (絕對定位）
position:absolute | relative都position:absolute ,top,right,bottom移動

例：
沒有設置已定位的父元素，position:absolute 通過left移動
//HTML
<div class="one">
    <div class="two"> </div>
</div>
//css
   *{margin:0;padding:0}
        /*相對定位:就是元素在頁面上正常的位置*/
        .one{
            margin-left:100px;
            width:100px;
            height:100px;
            background-color: red;
        }
        .two{
            width:50px;
            height:50px;
            background-color: yellow;
            position: absolute;
            left:0;
           }

利用float和display實現導航
//HTML
<ul>
<li><a href="#">手機</a></li>
<li><a href="#">平板</a></li>
<li><a href="#">電腦</a></li>
</ul>
//CSS
 *{
margin:0;
   padding:0;
}
 a{
  text-decoration: none;
   display: block;
   color:white;
}
 ul{
     list-style: none;
     overflow: hidden;
     background:pink
}
  li{
float:left;
line-height: 50px; 
width:100px;
text-align:center;
}
 a:hover{
color:gainsboro;
background-color: deeppink;
}

4.2 z-index
//HTML
<div class="parent">
    <div class="one"> </div>
    <div class="two"></div>
</div>
//CSS
  /*z-index:可以給絕對定位的元素，設置它們的堆疊順序*/
        .parent{
            width:300px;
            height:300px;
            background-color: red;
            position: relative;
        }
        .one{
            z-index: 100;
            position: absolute;
            width:100px;
            height:50px;
            background-color: green;
        }
        .two{
            z-index:90;
            position: absolute;
            width:50px;
            height:50px;
            background-color: pink;
        }
        .parent:hover .one{
            z-index: 80;
        }
z-index:設置元素的堆疊順序 給position:absolute絕對定位的元素

4.3例子:用position實現搜索框
//HTML
div class="center">
    <input type="text" placeholder="搜素"/>
    <a></a>
</div>
//CSS
*{margin:0;padding: 0;}
        div{
            width:250px;height:40px;margin-top:15px;
            position:relative;
        }
        input{
            box-sizing: border-box;
            width:250px;
            outline: none;
            padding-left:20px;
            height: 38px;
            font-size: 14px;
            border: 1px solid #eee;
            border-radius: 40px;
            background: #eee;
        }
        a{
            cursor: pointer;
            width:24px;
            height:24px;
            display: block;position:absolute;top:9px;right:5px;
            background:url(images/icon4.png) no-repeat
        }
        input:focus div{width:300px;}
注：//***當子元素沒有設置寬度，如果設置了絕對定位,它不會繼承父元素的寬度

5、實現元素的垂直水平居中

//HTML
<body>
<div class="one">
<div class="two"></div>
</body>
</div>
//CSS
   *{
            margin:0;
            padding:0}
        .one{
            width: 500px;
            height: 500px;
            background-color: green;
            position:relative}
        .two{
            width :100px;
            height:100px;
            background: red ;
            position:absolute;
            left:50%;
            top:50%;
            margin-left:-50px;
            margin-top:-50px;
        }父元素設置parent{position:relative;}
子元素設置child{
position:absolute;
left:50%;
top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;
}

6、CSS樣式的幾種引入方式

外部樣式：<link rel="stylesheet" type="text/css" href="/c5.css">
內部樣式表（位于 <head> 標簽內部）：<style>
p{color:pink;font-size:16px}
</style>
內聯樣式（在 HTML 元素內部）：
<p style=”color:pink;font-size:16px”>hello world</p>
注：給同一選擇器設置同一樣式,離元素近的樣式設置方式優先級高

B、今天掌握了什么

1、css盒子模型

//HTML
<div></div>
//css
div{
            border:10px solid #333;
            padding:20px;
            box-sizing: content-box;
            width:100px;
            height:100px;
            background-color: red;
        }
當設置box-sizing:border-box時;
設置padding,和border,它的寬度還是會保持不變

margin-left:auto;
margin-right:auto;
給父級加text-align: center;（元素水平居中）

如何清除浮動

HTML
<div class="one"></div>
<div class="two"></div>
//CSS
 .one{
            width:100px;
            height:50px;
            background-color: red;
            float: left;
        }
        .two{
            clear: both;
            width:200px;
            height:50px;
            background-color: yellow;
        }給下面的兄弟元素給clear:both;

//HTML
<div class="parent">
    <div class="one"></div>
</div>
//css
  .one{
            width:100px;
            height:100px;
            background:red;
            float: left;
        }
        /*子級float,父級沒有高度，如何讓父級有高度*/
        .parent{
            overflow: hidden;
            width:200px;
            background:yellow;
              }
給父級加overflow:hidden;

//HTML
<div class="parent">
    <div class="one"></div>
</div>
//css
  .one{
            width:100px;
            height:100px;
            background:red;
            float: left;
        }
        /*子級float,父級沒有高度，如何讓父級有高度*/
        .parent{
            /*overflow: hidden;*/
            width:200px;
            background:yellow;
                  }
        .parent:after{
            content:"";
            display: table;
            clear:both;
        }
用偽元素,給父級內容生成

.row:before{ display:table; content:”” }

.row:after{ display:table; display:table; content:””；clear:both;

定位

沒有設置已定位的父元素，position:absolute 通過left移動
//HTML
<div class="one">
    <div class="two"> </div>
</div>
//css
   *{margin:0;padding:0}
        /*相對定位:就是元素在頁面上正常的位置*/
        .one{
            margin-left:100px;
            width:100px;
            height:100px;
            background-color: red;
        }
        .two{
            width:50px;
            height:50px;
            background-color: yellow;

            position: absolute;
            left:0;
           }


利用float和display實現導航
//HTML
<ul>
<li><a href="#">手機</a></li>
<li><a href="#">平板</a></li>
<li><a href="#">電腦</a></li>
</ul>
//CSS
 *{
margin:0;
   padding:0;
}
 a{
  text-decoration: none;
   display: block;
   color:white;
}
 ul{
     list-style: none;
     overflow: hidden;
     background:pink
}
  li{
float:left;
line-height: 50px; 
width:100px;
text-align:center;
}
 a:hover{
color:gainsboro;
background-color: deeppink;
}

position:absolute | relative都position:absolute ,top,right,bottom移動

z-index

z-index:設置元素的堆疊順序 給position:absolute絕對定位的元素
//HTML
<div class="parent">
    <div class="one"> </div>
    <div class="two"></div>
</div>
//CSS
  /*z-index:可以給絕對定位的元素，設置它們的堆疊順序*/
        .parent{
            width:300px;
            height:300px;
            background-color: red;
            position: relative;
        }
        .one{
            z-index: 100;
            position: absolute;
            width:100px;
            height:50px;
            background-color: green;
        }
        .two{
            z-index:90;
            position: absolute;
            width:50px;
            height:50px;
            background-color: pink;
        }
        .parent:hover .one{
            z-index: 80;
        }

用position實現搜索框

//HTML
div class="center">
    <input type="text" placeholder="搜素"/>
    <a></a>
</div>
//CSS
*{margin:0;padding: 0;}
        div{
            width:250px;height:40px;margin-top:15px;
            position:relative;
        }
        input{
            box-sizing: border-box;
            width:250px;
            outline: none;
            padding-left:20px;
            height: 38px;
            font-size: 14px;
            border: 1px solid #eee;
            border-radius: 40px;
            background: #eee;
        }
        a{
            cursor: pointer;
            width:24px;
            height:24px;
            display: block;position:absolute;top:9px;right:5px;
            background:url(images/icon4.png) no-repeat
        }
        input:focus div{width:300px;}
//***當子元素沒有設置寬度，如果設置了絕對定位,它不會繼承父元素的寬度

CSS樣式的幾種引入方式

外部樣式:
<link rel="stylesheet" type="text/css" href="/c5.css">
內部樣式表（位于 <head> 標簽內部）:
<style>
p{color:pink;font-size:16px}
</style>
內聯樣式（在 HTML 元素內部）:
<p style=”color:pink;font-size:16px”>hello world</p>

3我今天沒有掌握什么

//HTML
div class="center">
    <input type="text" placeholder="搜素"/>
    <a></a>
</div>
//CSS
*{margin:0;padding: 0;}
        div{
            width:250px;height:40px;margin-top:15px;
            position:relative;
        }
        input{
            box-sizing: border-box;
            width:250px;
            outline: none;
            padding-left:20px;
            height: 38px;
            font-size: 14px;
            border: 1px solid #eee;
            border-radius: 40px;
            background: #eee;
        }
        a{
            cursor: pointer;
            width:24px;
            height:24px;
            display: block;position:absolute;top:9px;right:5px;
            background:url(images/icon4.png) no-repeat
        }
        input:focus div{width:300px;}
//***當子元素沒有設置寬度，如果設置了絕對定位,它不會繼承父元素的寬度
這里掌握不是很清除
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,809評論 1贊 92
  • 1、css盒子模型 1.1:box-sizing:border-box 1.2實現元素居中 2、浮動float 3...
    陳夢晴閱讀 296評論 0贊 0
  • A我今天學到了什么 一.css盒子模型 1.1:box-sizing:border-box box-sizing:...
    孔子曰_f425閱讀 77評論 0贊 0
  • A今天學了什么 1.盒子模型 1.box-sizing:border-box 2.總寬度 3.居中 2.浮動(fl...
    相信自己_胡閱讀 268評論 1贊 1
  • 今天是開始寫作第十九天，終于進入了一種沒有靈感，心情煩躁的狀態。從早上睜開眼就琢磨我要寫什么呢？然后早飯就想要不寫...
    木魚78閱讀 148評論 3贊 3