css深入浅出

主要内容：布局、居中、自适应、媒介查询、bfc和ifc（触发条件）

1. 宽度与高度

1.1 div的高度

<style>
  div {
    font-size: 20px;
    line-height: 24px: 
    /*明确的告诉浏览器行高是多少，但也不是绝对的*/
  }
</style>

<div>
    1
<div>

字和字之间是通过基线对齐的，不同字体会给出一个建议行高，是字体大小的1.3、1.5、3......倍，不同字体默认的行高是由字体设计师写进去的。

1. 当在div里写一个1，div的高度是由字体乘以建议的行高确定的，跟字体的大小没关系，div的高度实际是由行高确定的。

2. 在使用float浮动的时候要清楚浮动在父元素上添加clearfix,让父元素包裹住里面的子元素

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

3. 使用word-break:break-all来让浏览器分行。

4. 让文字两端对齐(小技巧)

   span{
     border: 1px solid red;
     display: inline-block;
     width: 5em;
     text-align: justify;
     line-height: 20px;
     overflow: hidden;
     height: 20px
   }
   span::after{
     content:'';
     display: inline-block;
     width: 100%;
     border:1px solid blue
   }
   

1.2.多行文字溢出

单行文字分行

div{
  border: 1px solid red;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

多行文本(css multi line text ellipsis) Google

1.3 文字垂直居中

div {
  border:1px solid red;
  line-height: 24px; //行高40px
  padding: 8px 0;
  text-align: center;
}

1.4 margin合并

外边距合并,子元素的margin会和父元素的margin上下合并，若要区分可

1. 给父元素加上下padding或border
2. 在父元素上加上overflow: hidden; //不推荐

1.5 元素的高度宽度

• 内联元素：给inline元素设置宽高是没有任何效果的；不同字体高度不同，父元素的line-height可以决定高度；宽度由内容字数决定，margin和padding影响宽度不影响高度。
• div：内部文档流中元素总和决定的

1.5.1脱离文档流

• float
• Fixed
• absolute

1.5.2div的居中

1. 父元素padding: 100px 0;;子元素margin:0 auto;

2. 利用flex布局

dad{ //父元素
  display:flex;
  justify-content: center;
  align-items: center;
}

1.6 1:1的div

.one{
  border: 1px solid red;
  padding-top:100%;
}

padding的高度和父元素宽度一样来实现

2.堆叠上下文

2.1什么是堆叠顺序

1. z-index: - =>position: relative absolute

2. background

3. border

4. 块级

5. 浮动

6. 内联，inline-block

7. z-index: 0,auto=>position: relative absolute

8. z-index: + =>position: relative absolute

如果是兄弟元素重叠，那么后面的盖在前面的身上。

2.2 堆叠上下文

• 根元素 (HTML),
• z-index 值不为 "auto"的 绝对/相对定位，
• 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
• opacity 属性值小于 1 的元素（参考 the specification for opacity），
• transform 属性值不为 "none"的元素，
• mix-blend-mode 属性值不为 "normal"的元素，
• filter值不为“none”的元素，
• perspective值不为“none”的元素，
• isolation 属性被设置为 "isolate"的元素，
• position: fixed
• 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考 这篇文章）
• -webkit-overflow-scrolling 属性被设置 "touch"的元素

2.3 堆叠上下文对z-index的影响

部门的等级大于员工的等级。部门都position定位；员工的相互的比较取决于部门。

3.移动端页面（响应式）

3.1 媒介查询

<style>
    @media(min-width: 300px) and (max-width: 320px){

    }
  </style>
<link rel="" herf="" media="(min-width: 300px) and (max-width: 320px)

3.2 手机端加一个meta

  <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0",maximum-scale=1.0, minimum-scale=1.0>

3.3 移动端特点

响应式其实用的不多，主要是在一些新闻网站或博客。大型网站多用两套页面，无IE

1. 手机上没有hover
2. Vue swipe、jquery swipe；touch事件
3. 没有resize
4. 没有滚动条

4.布局套路

移动布局

1. meta：vp

2. 要图片不变形多用 background：transparent url no-repeat center；background-size：cover

   不用img

3. google固定比例div