入门笔记 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>
复制代码