0
点赞
收藏
分享

微信扫一扫

css深入浅出之宽度与高度

文档流:文档内元素的流动方向

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

block,inline,inline-block 元素的区别:

块级元素与行内元素

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

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

使用默认字体:


设置font-family:Arial;

  • inline-block

<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>

消除缝隙

  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>

  • 文字垂直居中

实现行高为130px

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




  • 文字溢出

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. 多行溢出



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

解决办法:

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

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


  1. 设置padding
    .dad{
       outline:1px solid red; 
       padding:1px;
    }
  1. overflow:hidden
    .dad{
      outline:1px solid red; 
      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>
举报

相关推荐

0 条评论