CSS

CSS深入浅出之高度和宽度

Posted by weite122 on 2018-02-13

div内有内联元素时的高度

  • 字体之间通过基线对齐，每个字体的行之间都有一个建议行高。即使确定font-size 的高度，但是未必能确定包含字体的div行高是多少。
  • 当div包含一个内联元素，他的高度由字体的行高确定，与字体的大小无关

深度截图_选择区域_20180219231830.png

内联元素之间的空格

  • 两个inline元素之间有任何回车，tab，换行或其他任意字符，都会变成空格

深度截图_选择区域_20180219232234.png

  • 中文的姓名与联系方式对齐方式技巧

深度截图_选择区域_20180219233050.png

  • 导航栏li元素横排不要使用inline-block方法，用float+清除浮动

深度截图_选择区域_20180219233729.png

文档流

  • 文档流就是内联元素会自动的从左向右流动，如果被挡住，就再次从左向右流动

    • 下面代码就是当一个字包含多个字符时，如果不加分隔符-，HTML就会默认他是一个字并且不会换行，解决方法就是word-break： break-all

深度截图_选择区域_20180219234113.png

多行文字溢出

文字垂直居中

div内有块级元素时的高度

margin合并

  • 当一个div(parent)包裹了一个div(child),parent的高度取决于child的高度+padding+margin(分情况)：

  • 如果parent和child之间有border或padding，parent和child之间的margin不会合并，parent的高度就是child的高度+padding+margin(这里也可以用overflow:hidden，但不推荐使用)

  • 反之，parent的高度就是child的高度+padding

  • code: http://js.jirengu.com/kapec/7/edit

  • 效果：
    深度截图_选择区域_20180220161144.png

div内有块级元素和内联元素时的高度

  • div的高度是由它内部文档流元素的高度总和决定的,并不是简单的元素高度相加。内联元素从左到右，排不下另起一行；块级元素从上到下,每个都另起一行
  • 元素可以通过float，设置position为absolute或fixed脱离文档流，计算父元素高度就不会算上

div垂直水平居中

深度截图_选择区域_20180220171848.png

实现一比一的div

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .one{
      border: 1px solid red;
      padding-top: 100%;
    }
  </style>
</head>
<body>
<div class="one"></div>
</body>
</html>
FEATURED TAGS
CSS
FRIENDS