CSS 知識總結(jié)03

1. CSS知識：

i. CSS基礎(chǔ)知識這里不作贅述，有興趣自查 MDN Web文檔。

ii.CSS----- 布局：

1.布局是什么--> 把頁面分成一塊一塊，按左中右、上中下等進(jìn)行排列

2.布局分類：

a.固定寬度布局 一般寬度為 960 /1000 / 1024 px
b.不固定寬度布局，主要靠文檔流的原理來布局
c.響應(yīng)式布局( PC上固定寬度，手機(jī)上不固定寬度，即一種混合布局)

3.布局方向：

a.從大到小----》先定下大布局，然后完善每個部分的小布局
b.從小到大----》先完成小布局，然后組合成大布局

3.布局常用屬性：

圖示選擇.png
  • a. float 布局：
    i.步驟：
    子元素加浮動float:left 和 width&父元素上加浮動清除.clearfix::after{ content: ''; display: block; clear: both; }
    ii.布局樣式：
    a.兩欄布局（頂部導(dǎo)航條）
    · HTML代碼：
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<header class="top clearfix ">
  
  <div class="logo">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584185973384&di=699dd1315ff0a4d5dfd6d90957420864&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fa71ea8d3fd1f4134adac45b3201f95cad0c85e67.jpg" alt="" title="">
  </div>
  <ul class="nav clearfix">
    <li>
      <a href="javascript:;">首頁</a></li>
    <li><a href="javascript:;">主題</a></li>
    <li><a href="javascript:;">關(guān)于</a></li>
  </ul>
  
</header>
</body>
</html>

· CSS代碼：

/**--------------------------------------------
       CSS默認(rèn)樣式清除
--------------------------------------------**/

 *{
 margin: 0;padding: 0;box-sizing:border-box;
}
ul,ol{
 list-style:none;
}
a{ text-decoration:none;} 

img{max-width: 100%;}

/*  ------- float樣式清除  ---------   */
.clearfix::after{
 content:'';
 display:block;
 clear:both;
}



/**--------------------------------------------
     頂部樣式 *header*
--------------------------------------------***/

header{
 border:1px solid #c40;
 width:650px;
}

/* 左側(cè)logo */
div.logo{
 float:left;
 
 
}
div.logo >img{
 height: 30px;
 vertical-align:top;
 margin-top: .5px;
 margin-left: 5px;
}

/* 右側(cè)導(dǎo)航條nav */
ul{

 float:right;
 
}
li{
 float:left;
 background: #95d4b1;
 margin-left: 10px;
 margin-top: 3px;
 margin-bottom: 3px;
 padding: 4px .5em;

}

b.三欄布局（內(nèi)容區(qū)）
· HTML代碼：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="Author" content="mengerfei">
        <title>float測試</title>
    </head>
    <body>
    
      <div class="content clearfix">
        <aside class="float-left">這是左側(cè)！</aside>
        <main class="float-left">這是中間</main>
        <div class="ad float-left">這是右邊</div>
      </div>
    
    </body>
</html>

· CSS代碼：

/**--------------------------------------------
        CSS默認(rèn)樣式清除
--------------------------------------------***/

*{
  margin: 0;padding: 0;box-sizing:border-box;
}
ul,ol{
  list-style:none;
}
a{ text-decoration:none;} 

img{max-width: 100%;}

/*  ------- float樣式清除  ---------   */
.clearfix::after{
  content:'';
  display:block;
  clear:both;
}


/*  ------- float樣式  ---------   */
.float-right{float: right;}
.float-left{float: left;}

/**--------------------------------------------
      內(nèi)容區(qū)樣式 *content*
--------------------------------------------***/

.content{
   outline: 1px solid #f40;
  margin-top: 20px;
}

/*  ------- 左部aside樣式  ---------   */
.content aside{
  outline: 1px solid black;
  width: 150px;
  height: 300px;
}

/*  ------- 中部main樣式  ---------   */
.content main{
  outline: 1px solid green;
  width: 350px;
  height: 300px;
}

/*  ------- 右部.ad樣式  ---------   */
.content .ad{
  outline: 1px solid purple;
  width: 150px;
  height: 300px;
}

c.平均布局（展示區(qū)）

· HTML代碼：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>平均布局</title>

</head>

<body>
/*  ------- image展示樣式  ---------   */
    <div class="image clearfix">
        <div class="xx clearfix">
            <div class="image-list">1</div>
            <div class="image-list">2</div>
            <div class="image-list">3</div>
            <div class="image-list">4</div>
            <div class="image-list">5</div>
            <div class="image-list">6</div>
            <div class="image-list">7</div>
            <div class="image-list">8</div>
        </div>
    </div>
</body>

</html>

· CSS代碼：

/**--------------------------------------------
        CSS默認(rèn)樣式清除
--------------------------------------------***/

    
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
/*  ------- float樣式清除  ---------   */
        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }
/*  ------- image展示樣式  ---------   */
        div.image {
            outline: 1px solid #000;
            width: 900px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 20px;

        }

        div.image .xx .image-list {
            border: 5px solid #f50;
            background: #00ff00;
            width: 163px;
            height: 163px;
            float: left;
            margin-right: 20px;
            margin-bottom: 20px;
        }

        div.image .xx {
            margin-right: -20px;
        }
  • b. flex 布局：
    1.使一個元素變成flex容器----> display: flex;
    2.container的樣式：
    改變items流動方向（主軸）: flex-direction: row | row-reverse |
    column | culumn-reverse;
    改變折行 flex-wrap; nowrap | wrap | wrap-reverse;
    改變主軸對齊方式默認(rèn)主軸是橫軸，除非改變了flex-direction方向: .container{ justify-conntent :flex-start | flex-end | center | space-between | space-around | space-evenly }
    次軸對齊 align-items :gfgfghfghb flex-start | flex-end | center | stretch | baseline
    多行內(nèi)容 align-content; flex-start | flex-end | center | space-between | space-around | stretch
    flex item 屬性
    item上面加order 加flex-grow(控制自己如何長胖)
    flex-shrink控制如何變瘦 一般寫flex-shrink:0 防止變瘦，默認(rèn)為1
    flex-basis控制基準(zhǔn)寬度 默認(rèn)是auto
    flex具體屬性及用法這里不做贅述

. 瀏覽器渲染原理:

渲染原理.png

CSS 動畫的兩種做法（transition 和 animation）:

第一種：


01.gif

HTML部分：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>動畫--跳動的心01</title>
</head>
<body>
   <div class="heart">
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
   </div>
</body>
</html>

CSS部分：

*{margin: 0;padding: 0;box-sizing:border-box;}
.heart{
  display: inline-block;
  margin: 100px;
  position:relative;
  transition:all 1s;
}
.heart:hover{
  transform: scale(1.1);
}
.heart>.left{
  background: red; 
  transform:rotate(-45deg) translateY(31px);
   width: 50px;
   height:50px;
  border-radius:50% 50% 0 0 ;
  position:absolute;
   bottom:50px;
  left:-50px;
 
}
.heart>.right{
  background: red; 
  transform:rotate(-45deg) translateY(26px);
   width: 50px;
   height:50px;
  border-radius: 0 50% 50%  0 ;
  position:absolute;
   bottom:46px;
  right:-9px;
 
}
.heart>.bottom{
  background: red;
  width: 50px;
  height: 50px;
  transform: rotate(45deg);
}

第二種：


02.gif

HTML部分：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>動畫-跳動的心02</title>
</head>
<body>
  <div id="heart">
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
  </div>
</body>
</html>

CSS部分：

*{box-sizing: border-box;}
#heart{
  display: inline-block;
  margin: 100px;
  position: relative;
  animation: .5s heart infinite alternate-reverse;
  
}
@keyframes heart {
  0%{
    transform: scale(1);
  }
  100%{
    transform: scale(1.2);
  }
}

#heart>.left{
  background: red;
  width: 50px;
  height: 50px;
  position: absolute;
  transform: rotate(45deg) translateX(31px);
  bottom: 50px;
  left: -50px;
  border-radius: 50% 0 0 50%;
}
#heart>.right{
  background: red;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  transform: rotate(45deg) translateY(31px);
  bottom: 50px;
  right: -50px;
  border-radius: 50% 50% 0 0;
}
#heart>.bottom{
  background: red;
  width: 50px;
  height: 50px;
  transform: rotate(45deg);
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容