CSS--宽度与高度

最新推荐文章于 2024-09-29 13:19:13 发布

weixin_33972649

最新推荐文章于 2024-09-29 13:19:13 发布

阅读量135

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b77e454e51d4538b063d98b

单行div的高度

字与字之间是通过基线对齐的.
每个字体有不同的建议行高.
line-height可以规定固定的行高
行高决定div的高度

多个连续空格/回车/tab等会被识别为一个空格,"& nbsp"类似于空格,不同字体的空格大小不同,所以不要使用"& nbsp"来做样式.

如何实现单行文字两端对齐:

  <div>
    <span>姓名</span><br>
    <span>联系方式</span>
  </div>

复制代码

span{
    display: inline-block;
    width: 4em;
    text-align: justify;
    overflow: hidden;
}
span::after{
    content: '';
    display: inline-block;
    width: 100%;
}
复制代码

单行文字两端效果预览

单行/多行文字溢出(省略号):

单行

selector{
  overflow: hidden;
  text-overflow: ellipsis;
}
复制代码

多行:

selector{
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow: hidden;
}
复制代码

文字居中

  text-align: center;
  line-height: 20px;
  padding: 10px;   //固有高度内垂直居中
复制代码

margin合并

块级元素的上外边距和下外边距有时会合并为一个外边距，其大小取其中的最大者，这种现象称为margin合并.通过设置border/padding/overflow:hidden来去除合并.

div的高度是由内部文档流中元素的高度的总和决定的.

文档流是内联元素从左到右依次排列,宽度不够从下一行继续从左到右排列(内联元素的padding\margin和border只会影响其宽度).块级元素从上到下,依次排列,每一个都另起一行.

既然说到了文档流,就说一下脱离文档流.脱离文档流的元素不会再占用原来的空间,即原来的高度变小减去脱离文档流元素的高度,就像"浮在"文档流的上面.脱离文档流的方法有 float:left / position:absolute / position:fixed等,要注意position:relative并不会脱离文档流.

div居中

<div class='parent'>
    <div class='son'>
    </div>
</div>
复制代码

body{
  margin: 0;
}
.parent{
  height: 100vh;
  border:2px solid cyan;
  box-sizing: border-box;
}
.son{
  background: red;
  width:100px;
  height:100px;
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin: auto;
}
复制代码

如此能实现定宽定高的div元素的垂直与水平方向的居中.不指定宽高的xy方向居中方式为:

body{
  margin: 0;
}
.parent{
  height: 100vh;
  border:2px solid cyan;
  box-sizing: border-box;
  display:flex;
  justify-content: center;
  align-items: center;
}
.son{
  background: red;
  width:100px;
  height:100px;
}
复制代码