8月27日学习日志

9. css基础

1. 选择器
   类选择器 .first {} 选中class为first的元素
   id选择器 #one {} 选中id为one的元素
   标签选择器 div {} 选中所有的div元素
   父子选择器 .first > div {} 选中class为first的所有div孩子元素
   后代选择器 .first div{} 选中class为first的所有div后代元素

2. 基础布局
   解决块元素在一行中排列的问题

1. 浮动布局
2. 定位布局
3. 伸缩盒布局
  1) html
    <div class="first">
      <div>新增</div>
      <div>本土新增</div>
      <div>境外输入</div>
    </div>
  2) css
    1. 将父元素.first变为伸缩盒元素
    .first {
      display:flex;
      flex-direction:row;   // 其子元素沿着行来排列
      justify-content: space-between;   /*空白区域放在哪里？ space-between空白介于中间*/
    }
    2. 子元素
    .first > div {
      height:100px ;      // 高度为100px
      width:33%;          // 宽度为33%
      flex:1 ;            //占据剩余份数
    }

10.html基础
块元素
div h1~h6 p ul>li dl>dt,dd ol->
独占一行空间，高度