2018-02-28 CSS 宽度和高度

normal flow
问如下div的高度是多少？

image.png

看不出来，那么就加border来显示
div里有文字，那么div就会变高，那具体多高？
如果在css里写font-size:20px，那么高度是多少？

image.png
实际高度是28px
如果换了一个字体，比如tahoma，高度变成了24px
image.png

原因：1、字和字之间是通过基线对齐的

image.png
image.png

原本的默认字体，设计师认为行高是字体的1.4倍最好看
换了一个字体之后，字体设计师认为行高是字体的1.2倍就好看了
如果不想用默认的行高，那么就自己改行高
那么这个div的高度=这个字的字体高度*建议行高决定的
跟字的font-size没关系

image.png
font-size变大了，div不会变大

nbsp = bo break space 不停顿的空格
span是inline元素，是不支持设置宽度的，要变成inline-block

image.png

如果要让姓名和联系方式两边对齐，怎么弄？
加text-align:justify，这对换行的文字才有效，如果只有单行（姓名）怎么办？
加个after

image.png
我不想要蓝色的呢？
进行限制高度，超出部分进行隐藏
image.png

2个inline之间有看不见的信息（空格、tab、回车）都会被显示成一个间距

image.png

如果要他们紧挨着呢？那就用float

image.png
并且在父级元素上加个clearfix——小技巧
如果不加，那么ul就包不起来li
image.png
image.png

内联元素足够多，一行容不下，会自动换行，这就叫文档流

image.png
浏览器认为是一个单词，就不会分割，用连词符连起来
或者加属性连起来 image.png

如何做文字溢出省略
首先文本不换行 white-space:nowrap
超出部分隐藏overflow:hidden
文字省略text-overflow:ellipsis

image.png
image.png

方法二

image.png

如何满足div高度是40px，同时文字垂直居中？
不要写height，计算出来加padding

image.png

如果dad没有border（或者其他的挡着的比如padding），那么儿子的margin上下方向就会被合并
这叫做margin合并

image.png

以上讲了如果一个div里有内联元素，高度如何确定；有块级元素，高度如何确定
那如果既有内联元素也有块级元素呢？
div的高度是由它内部文档流中元素的总和决定的
文档流：内联元素，从左到右；块级元素，从上到下

image.png

如何脱离文档流?
float可以
position:absolute也可以
position:fixed也可以

position:relative相对定位没有脱离文档流

让一个div里的div上下左右居中

image.png

如果需求是父级高度固定呢？（比如全屏）

image.png
这种方式必须定宽定高
image.png
image.png

方式二

image.png
内联元素的padding和margin会影响其宽度，但是不影响高度

如何实现1比1的div（宽度和高度始终是相等的）

image.png

实现了一个宽度自适应，高度为0，用padding-top来实现高度撑起来