Learning Notes

# css深入浅出之宽度与高度

# 文档流：文档内元素的流动方向

  • # 内联元素从左往右
  • # 块级元素从上往下

#block，inline，inline-block 元素的区别：

block 元素独占一行，宽度占满父元素宽度。可以设置 width, height, padding, margin 属性。如 div p ul 等。 block 元素可以包含其他 block 元素和 inline 元素，比较特别的是

只能包含 inline 元素。 inline 元素不换行，宽度由其内容决定。设置 width, height 无效。如 span em strong 等。 设置水平方向 padding(padding-left, padding-right) 和 margin(margin-left, margin-right) 有效， 垂直方向的 padding(padding-top, padding-bottom)，margin(margin-top, margin-bottom) 无效。 inline-block 元素不换行，设置 width, height, padding, margin 属性有效。 由于 inline-block 元素会产生新的 BFC，因此可以包含浮动。

块级元素与行内元素

# div高度

div高度由其内部文档流的高度总和决定

  1. 仅一行 内联元素
<style>
   div{
     border:1px solid red;
     font-size:20px;
   }
</style>
<div>
  1
</div>

设置字体高度为20px，使用默认字体时，div高度为28.67

设置font-family:Arial； div高度为24.67

设置line-height:20px；font-size:60px; div高度为22

当仅一行时，div高度由行高确定，与字体大小无关(不同字体行高不同，字体建议行高由设计师确定)

  1. 多行
<div>
  <span>1</span><br>
  <span>2</span><br>
  <span>3</span>
</div>

使用默认字体：

设置font-family:Arial;

当多行时，div高度由多行行高相加

  • # inline-block

既呈现 inline 特性(不占据一整行，宽度由内容宽度决定) 又呈现 block 特性 (可设置宽高，内外边距) 缝隙问题(inline-block 之间有空格、Tab、换行符等会产生缝隙)

<div class="box">
  <span class="inner">welcome,welcome,welcome</span>
  <span class="inner">welcome,welcome,welcome</span>
  <span class="inner">welcome,welcome,welcome</span>
</div>
<style>
  .box{
    border:1px solid green;
    text-align:center;
  }
  .inner{
    display:inline-block;
    border:1px solid red;
    width:220px;
    padding:10px;
    margin-bottom:10px;
  }
</style>

注：通过给span标签设置inline-block属性，发现既呈现 inline 特性、又呈现 block 特性 不占据整行又可设置width、height、padding、margin

# 消除缝隙

  1. 两标签并排
<div class="box">
  <span class="inner">welcome,welcome,welcome</span><span class="inner">welcome,welcome,welcome</span>
  <span class="inner">welcome,welcome,welcome</span>
</div>

  1. 使用font-size:0(父元素设置0，子元素自定义）
.box{
  border:1px solid green;
  text-align:center;
  font-size:0;
}
.inner{
  display:inline-block;
  border:1px solid red;
  width:220px;
  padding:10px;
  margin-bottom:10px;
  font-size:16px;
}

  1. 使用float:left
<style>
    .inner{
      float:left;
    }
    .clearfix::after{
      content:'';
      display:block;
      clear:both;
    }
</style>
<div class="box clearfix">

清除浮动

未清除浮动

如果用了浮动，其父元素一般(最好)需要清除浮动。若未清除浮动，会出现浮动溢出现象

  • # word-break

<style>
  div{
    border:1px solid red;
    //word-break:break-all;
  }
</style>
<div>
  aa  bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
  cc
  dd
</div>

先要明确一点，不加word-break的时候，就是浏览器默认的时候，如果有一个单词很长，导致一行中剩下的空间已经放不下它时，则浏览器会把这个单词挪到下一行去：

在没有单词内断句的情况，单词太长会溢出了包裹它的容器

# 使用break-all强制断句

word-break与word-wrap区别

  • # Test：实现文字两端对齐

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
  div{
    border: 1px solid red;
    font-size: 20px;
  }
    span{
      border: 1px solid green;
      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;
    }
  </style>
</head>
<body>
<div>
  <span>姓名</span> <br>
  <span>联系方式</span>
</div>
</body>
</html>

效果

  • # 文字垂直居中

少用height(会将高度写死，一旦文字变动会出现bug) 使用 line-height + padding 实现给定行高！！！！！

# 实现行高为130px

line-height + padding

Tips: 四行每行行高为30px， 30*4 = 120 + 5*2 = 130

height

溢出

line-height + padding

通过新增文字，对比发现，若高度固定，新增文字会溢出；使用padding会自适应，不会出现溢出现象

  • # 文字溢出

# 1. 单行文字溢出

初始状态

文字不换行

 white-space:nowrap;

超出部分隐藏

 overflow:hidden;

...显示

text-overflow:ellipsis;

 //完整css代码
  <style>
  div{
    border:1px solid red;
    white-space:nowrap;      
    overflow:hidden;        
    text-overflow:ellipsis;
  }
  </style>

# 2. 多行溢出

google

效果

 //完整代码
 <style>
    div{
      border:1px solid red;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;  
    
    }
  </style>

-webkit-line-clamp: 3可控制显示行数 超出部分若不想显示，使用 overflow:hidden隐藏即可

# 3. margin合并

<div class="dad">
  <div class="son">
    text
  </div>
</div>
<style>
    .dad{
      outline:1px solid red;

    }
    .son{
      border:1px solid green;
      padding:10px;
      margin:10px;
    }
</style>

设置子元素margin高度，发现margin-top、margin-bottom未生效。 因为父元素无遮挡，造成子元素外边距margin与父元素合并。

son

解决办法：

  1. 设置border
    .dad{
      outline:1px solid green;
      border-top:10px solid red;
      border-bottom:10px solid black;
    }

通过对父元素设置上下border实现对子元素的遮挡，margin正常显示

border

  1. 设置padding
    .dad{
       outline:1px solid red; 
       padding:1px;
    }

padding

  1. overflow:hidden
    .dad{
      outline:1px solid red; 
      overflow:hidden;
    }

overflow

不到万不得已，尽量不用overflow:hidden。

  • # Test：实现div水平垂直居中(不定宽高）

vh/vw vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;

  <style>
    body{
      margin: 0;
    }
    .son{
      border: 5px solid red;
      padding:10px;
    }
    .dad{
      height:100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
<div class=dad>
  <div class=son>
    block block block
  </div>
</div>

  • # Test：实现一比一的 div

  <style>
    div{
      padding-top:100%;
      border:1px solid red;
    }
  </style>

← JS基本语法 →