CSS深入浅出-宽度与高度

2019-01-08 本文已影响2人酒极子

文档流

文档流就是文档内元素的流动方向。
内联元素从左到右流动，遇到阻碍分行继续流。
块级元素从上往下流动，每一个块独占一行。

CSS高度

设计字体时要给一个建议行高，所以除了用line-height固定行高外，很难写死字体高度

内联元素的宽高

宽度
内联元素的宽度是由里面的字个数决定的
高度
内联元素的高度是由行高(line-height)决定的，padding和margin无法改变其高度。

块级元素的宽高

宽度
块级元素的宽度是由里面的字个数，以及内外边距决定的。
高度
块级元素的高度是由里面文档流的元素高度总和决定的

小技巧

居中

文字垂直居中
使用padding属性可以实现垂直居中
文字水平居中
使用text-align:center;属性可以实现水平居中

两端对齐

一段话
1.使用text-align:justify;可以让一段话两端对齐，但如果只有一行，是不能对齐的
2.给元素加上::after伪类，在该伪类里使用width100%，给原话加上text-align:justify;,同时两端属性均加上display:inline-block;来两端对齐
举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    div{
      font-size:20px;
    }
    span{
      display:inline-block;
      text-align:justify;
      line-height:20px;
      height:20px;
      width:5em;
      overflow:hidden;
    } 
    span::after{
      content:'';
      display:inline-block;
      width:100%;
      text-align:justify;
    }
  </style>
</head>
<body>
  <div>
    <span>姓名</span><br><span>联系方式</span>
  </div>
</body>
</html>

文字打断

因为中英文语言上的区别，默认的文字打断属性是不同的，可以通过改该属性实现英文分行

英文
默认属性为word-break:break-word;，通过改该属性来实现英文分行
也可以在单词中加上连字符"-"来实现英文分行
中文
默认属性是word-break:break-all;，即为每个字都分开来算

inline空格问题

只要是inline元素，两个元素间不相邻的话一定会有空格，可以通过脱离文档流来解决这个问题

margin合并问题

假设一个父元素包裹住一个子元素，如果父子元素都有margin属性，而父元素没有挡住子元素的东西，那么子元素的margin会和父元素的margin合并起来
使用padding或者block可以解决这个问题

文字省略效果怎么做

单行文本

div{
  white-space:nowrap;  //不换行
  overflow:hidden;    //超出div边界部分隐藏
  text-overflow:ellipsis;  //超出部分文本以省略号显示
}

多行文本

直接google关键词"css multi line text ellipsis"然后点击第一条关键词，直接抄代码，略改一下以完成需求。
抄下方代码

div{
overflow:hidden;  //超出div边界部分隐藏
display:-webkit-box;
-webkit-line-clamp:2; //显示两行文本
-webkit-box-orient:vertical;
}

实现一个1:1的div

以下代码

div{
padding-top:100%;
}

border调试大法

在调试css之前，给所有div都加上一个1px的border用来看，方便调试