day1：html+css

准备好起飞了吗
289 阅读3分钟

HTML

  • 语义化
    1. 让人更加容易读懂，增加代码可读性
    2. 让搜索引擎更容易读懂（SEO）
  • 块状元素和内联元素
    • display：block/table; div/h1/h2/table/ul/ol/p
    • display:inline-block; span/img/input/button

css布局

  • 盒模型宽度计算
标准模型：content-box
clientWidth = content(width)+padding
offsetWidth = content(width)+padding+border 
盒子的总宽度：offsetWidth + margin

ie怪异模型：border-box:
这个模式下
clientWidth = content = width-border;
width = content+padding+border
offsetWidth = width
盒子总宽度：offsetWidth + margin
  • 关于图片懒加载
一些获取位置的属性：
offsetTop //距离浏览器顶部的高度(固定值)
clientHeight //容器高度
let img = document.getElementById('img')
img.clientHeight //这个高度就是设置的height
document.documentElement.clientHeight // 浏览器窗口大小
document.body.clientHeight //整个浏览器的高度

scrollTop //滚动高度
document.documentElement.scrollTop // 滚动条滚动的距离
window.pageYOffset // 滚动条滚动的距离


//懒加载方案一
if(window.pageYoffset > img.offsetTop-document.documentElement.clientHeight){
    //替换图片
    img.setAttribute('src',img.getAttribute('data-src'))
}
//懒加载方案二
img.getBoundingClientRect().top < document.documentElement.clientHeight{
    //替换图片
}
//懒加载方案三

let observe = new IntersectionObserver((change)=>{
      if(change[0].isIntersecting){
        change[0].target.setAttribute('src',change[0].target.getAttribute('data-src'))
      }
    });
observe.observe(fa)
//性能优，自动实现懒加载

  • margin重叠问题 (兄弟元素)

  • margin负值的问题

    margin-bottom && margin-right理解

  • BFC的理解和应用

    BFC：块级格式化上下文

    • 一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素

    • 条件

      1. float不是none
      2. position是absolute或fixed
      3. overflow不是visible
      4. display是flex，inline-block等

    • 应用

      1. 清除浮动（父容器未撑开）
      2. 解决margin重叠问题
      3. 解决margin塌陷

  • float布局（圣杯布局和双飞翼布局）

    三栏布局（中间内容最先出来，最重要）,中间栏宽度自适应

    //position布局
 .column{
   position:absolute;
 }
 .main{
   left: 200px;
   right:300px;
   height: 200px;
   background-color: aqua;
 }
 .left{
   left:0;
   width: 200px;
   height:200px;
   background-color: aquamarine;
 }
 .right{
   right:0;
   width: 300px;
   height: 200px;
   background-color: blue;
 }

 <div class="cont">
   <div class="column left">left val</div>
   <div class="column main">content val</div>
   <div class="column right">right val</div>
 </div>


    //float布局
  .main{
    margin-left: 200px;
    margin-right: 300px;
    height: 200px;
    background-color: aqua;
  }
  .left{
    float: left;
    width: 200px;
    height:200px;
    background-color: aquamarine;
  }
  .right{
    float: right;
    width: 300px;
    height: 200px;
    background-color: blue;
  }    
  <div class="cont">
    <div class="column left">left val</div>
    <div class="column right">right val</div>
    <div class="column main">content val</div>
  </div>    


    //flex布局
.cont{
    display:flex;
  }
  .main{
    flex:1;
    height: 200px;
    background-color: aqua;
  }
  .left{
    width: 200px;
    height:200;
    background-color: aquamarine;
  }
  .right{
    width: 300px;
    height: 200px;
    background-color: blue;
  }    
  <div class="cont">
    <div class="column left">left val</div>
    <div class="column main">content val</div>
    <div class="column right">right val</div>
  </div>

    圣杯布局和双飞翼布局

       1. 使用float布局
   2. 两侧使用margin负值，以便和中间内容横向重叠
   3. 防止中间内容被两侧覆盖，一个用padding,一个用margin
    • 圣杯布局
    .cont{
     margin:0 300px 0 200px;
   }
   .column{
     float: left;
   }
   .main{
     height: 100px;
     width:100%;
     background-color: aqua;
   }
   .left{
     position: relative;
     right: 200px;
     margin-left: -100%;
     width: 200px;
     height: 100px;
     background-color: aquamarine;
   }
   .right{
     margin-right: -300px;
     width: 300px;
     height: 100px;
     background-color: blue;
   }
   <div class="cont">
       <div class="column main">content val</div>
       <div class="column left">left val</div>
       <div class="column right">right val</div>
   </div>
    • 双飞翼布局
    .center{
    width: 100%;
  }
  .inner{
    height:200px;
    background-color: blueviolet;
    margin:0 200px 0 300px;
  }
  .left{
    margin-left:-100%;
    height: 200px;
    width: 300px;
    background-color: aqua;
  }
  .right{
    margin-left:-200px;
    height: 200px;
    width: 200px;
    background-color: rgb(255, 127, 187);
  }
  .column{
    float:left;
  }
  
  <div class="container">
      <div class="center column">
        <div class="inner ">双飞翼布局 Lorem ipsum.</div>
      </div>
      <div class="left column"></div>
      <div class="right column"></div>
  </div>

  • 手写clearfix

.clearfix:after{
    content:'';
    display: table;
    clear:both;
}

  • flex布局（三色骰子）

  • css定位依据

    -  position：absolute/relative/fixed
-  居中方式
       - 水平居中：
           1. inline元素：text-align: center
           2. block元素： margin: auto
           3. absolute元素: left:50%+margin-left负值
       - 垂直居中：
           1. inline元素: line-height
           2. absolute元素: top:50%+margin-top负值
           3. absolute元素：top:50%+left:50%;transform:translate(-50% -50%)
           3. absolute元素:top,left,bottom,right=0+margin:auto;

  • css图文样式

    1. line-height如何继承

  • css响应式

    1. rem是什么？

       rem是一个长度单位

 - px , 绝对长度单位
 - em ， 相对长度单位，相对父元素
 - rem ，相对长度单位，相对根元素，适用于响应式布局

    2. 响应式的常用方案？

       - media-query，根据不同屏幕宽度设置根元素 
 - em， 基于根元素的相对单位，
 - rem的弊端，阶梯性 （media-query设置不同标准）
         - 网页视口尺寸
                 - window.screen.height //屏幕高度
                 - window.innerHeight //网页视口高度
                 - document.body.clientHeight //body高度
         
         -vw/vh
avatar
文章
阅读
粉丝