入門筆記 Day four

時間 2019-12-04

標籤入門筆記 day 简体版

原文原文鏈接

浮動

float（left、right、none、inherit繼承）讓塊元素展現在同一行bash

Float的特徵

塊在一排顯示
內聯支持寬高
默認內容撐開寬度
脫離文檔流
提高層級半層

clear（left、right、both、none、inherit）元素的某個方向上不能有浮動元素spa

clear：both; 在左右兩側均不容許浮動元素code

清除浮動

方法：繼承

加高度（擴展性很差）
給父級加浮動（頁面中全部元素都加浮動，margin左右自動失效）
inline-block （margin左右自動失效）
空標籤清除浮動
br 清浮動（不符合工做中：結構、樣式、行爲，三者分離的要求）
after僞類清除浮動（主流方法）

<style>
    .clearfix{
        *zoom:1;
    }
    .clearfix:after{
        content:"xxxxx"
        display: block;
        clear: both;
    }
</style>
</head>
<body>
    <div class="clearfix"></div>
</body>
複製代碼

overflow

overflow：hidden（隱藏） scroll（滾動）ci

定位

relative 相對定位/定位偏移量

不影響元素自己的特性
不是元素脫離文檔流（元素移動以後原始位置會保留）
若是沒有定位偏移量，對元素自己沒有影響
提高層級

top、right、bottom、left 定位元素偏移量文檔

.div{
  position: relative;
  left: 200px;
  top: 200px
  }
複製代碼

絕對定位

.div{
  position: absolute;
  left: 200px;
  top: 200px
  }
複製代碼

使元素徹底脫離文檔流
是內嵌支持寬高
塊屬性標籤內容撐開寬度
若是有定位父級相對於定位父級發生偏移，沒有定位父級相對於document發生偏移
相對定位通常都是配合絕對定位元素使用
提高層級

固定定位

<style>
      body{
          height: 3000px;
      }
      div{
          width: 100px;
          height:100px;
          background-color: red;
          position: fixed;
          right:0;
          bottom: 0
      }
</style>
<body>
      <div>返回頂部</div>
</body>
複製代碼

position: static; 默認值string

position: inherit; 從父元素繼承定位屬性的值（不兼容）it

透明度

opacity: 0~1(範圍);io

IE 6/7 下的透明度設置：filter: alpha(opacity=0~100)table

<style>
      div{
          width: 100px;
          height:100px;
          background-color: red;
          color: green;
          font-size: 20xp;
          opacity: 0.5;
      }
</style>
<body>
      <div>xxxx</div>
</body>
複製代碼

彈層作法、z-index

z-index:數字; 定位層級

彈層作法

<style>
      div{
          width: 300px;
          height:300px;
      }
      .box{
          margin: 100px;
          position: relative;
      }
      .content{
          position: absolute;
          background-color: blue;
          left: -6px;
          top: -6px;
          z-index：2;
      }
      .mark{
          position: absolute;
          background-color: black;
          right: -6px;
          bottom: -6px;
          z-index: 1;
          opacity: 0.5;
      }
</style>
<body>
      <div class="box">
          <div class="content"></div>
          <div class="mark"></div>
      </div>
</body>
複製代碼

表格

table 表格
thead 表頭
tbody 主體
tr 表格行
th 元素定義表頭
td 元素定義表格單元

表格樣式重置

border-collapse: collapse; 單元格間隙合併

table{
    border-collapse: collapse;   單元格*間隙*合併
}

th,td{
    padding: 0;    重置單元格默認填充
}
複製代碼

課程表寫法

<style>
       table{
           border-collapse: collapse;
       }
       th,td{
           padding: 0;
       }
 </style>
 <body>
      <table border="1px">
           <thead>
               <tr>
                   <th>星期一</th>
                   <th>星期二</th>
                   <th>星期三</th>
                   <th>星期四</th>
                   <th>星期五</th>
               </tr>
           </thead>
           <tbody>
               <tr>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
               </tr>
                <tr>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
               </tr>
                <tr>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
               </tr>
           </tbody>   
      </table>
 </body>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。