对CSS中高度和宽度的理解

div 的高度:

当我们写font-size=20px,但是在开发者工具里面会随着字体的不同,字体的大小也不同,这是因为随着字体的设计不同,行高不同。当然可以使用line-height来固定行高。因此在一个div里面的字体的大小,不是由font-size决定的,而是由字体本身的行高决定。
空格:  全拼:no break space。切记,不能使用空格来进行对齐,因此每种字体的空格宽度不一样。
1.块级元素高度由其内部文档流元素的高度总和决定的。
2. 文档流是文档内元素的流动方向,内敛元素从左往右,块级元素从上往下。
脱离文档流的意思就是计算高度的时候别算上我。可以使用float:left, position:absolute, position:fixed 这三种方法脱离文档流。
position:relative是不会脱离文档流的。相对于之前的位置定位,同时占据的位置还是原来的位置,也就是在文档流中的位置不变。也不会把下面的元素挤下去,而去盖住了。也就是父元素算高度的时候还是要算上我。

margin合并:

如果一个div(父)里面还有一个div(子),那么这个父div的高度就是由里面div的高度加padding,border,加margin决定的。但是会出现父div和子div的margin合并的现象,当父div没有border,pading
当父元素没什么挡住(如padding和border)子元素的margin,那么子元素的margin就会和父元素margin合并起来(上下合并,左右不合并)。
解决方法:
父元素上加border-top(bottom),或者padding-top(bottom),
overfolw:hidden;也是可以的,不推荐使用。

内联元素:

内联元素的宽是由它里面的字数个数确定的,可以加padding,也可以加margin,但是高度是不受加padding和margin的影响。也就是说内联元素的宽度受padding和margin的影响,但是高度不受padding和margin的影响。span的告诉是由行高决定的。
div的宽度尽量不要改,因为它会默认去适应它爸爸的宽度。
outline:轮廓,宽高不影响。
border:会影响宽高。

一比一的div
padding-top: 100%
效果:padding-top 为100%就是和宽度一样。这样就实现了一个宽度自适应,宽度和它爸爸一样宽,高度为0,用padding-top来实现的高度的撑起来,因为高度使受padding影响的

你可能感兴趣的:(对CSS中高度和宽度的理解)