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来实现高度撑起来
网友评论