标签分为两种等级:
1,行内元素。2,块级元素。
行内元素和块级元素的区别:
行内元素:
- 与其他行内元素并排
- 不能设置宽高,默认的宽度就是文字的宽度
块级元素:
- 霸占一行,不能与其他任何元素并列。
- 能接受宽高,如果不设置宽度,那么宽度将默认变为父级的100%。
块级元素和行内元素的分类:
在HTML的角度来讲,标签分为:
文本级标签:p , span , a , b , i , u , em
容器级标签:div , h系列 , li , dt ,dd
p:里面只能放文字和图片和表单元素,p里面不能放h和ul,也不能放p。
从CSS的角度讲,CSS的分类和上面的很像,就p不一样:
行内元素:除了p之外,所有的文本级标签,都是行内元素。p是个文本级标签,但是是个块级元素。
块级元素:所有的容器级标签,都是块级元素,以及p标签。
块级元素和行内元素的相互转换:
我们可以通过display属性将块级元素(比如div)和行内元素进行相互转换。
display:inline;
那么这个标签将变为行内元素,即:
1,此时这个div将不能设置宽度和高度了。
2,此时这个div可以和其他行内元素并排了。
同样的到了我们也可以用display将行内元素(比如span)转行成块级元素。
display:block;
那么这个span标签将变为块级标签,即:
1,此时这个span能够设置宽度,高度。
2,此时这个span必须独占一行,其他元素无法与之并排。
3,如果不设置宽度,将占满父级。
标准流里面的限制非常多,导致很多页面效果无法实现,如果我们现在就要并排,并且就要设置宽度,就hi有:脱离标准流。
CSS一共有三种手段,是一个元素脱离标准流文档:
-
浮动
-
绝对定位
-
固定定位
浮动:
浮动是CSS里面布局最多的一个属性。
float:表示浮动的意思。
属性:
- none:表示不浮动,默认。
- left:表示左浮动。
- rigth:表示右浮动。
我们会发现,三个元素并排显示,.box1和span因为是左浮动,所有紧挨在一起,这种现象是贴边现象。
.box2盒子因为是右浮动,所以紧靠着右边。
浮动的四大特性:
1,浮动的的元素脱标,
2,浮动的元素互相贴靠。
3,浮动的元素由"子围"效果。
4,收缩的效果。
浮动元素的脱标:
脱标:就是脱离了标准文档流。
效果:红色的盒子盖住了黄色的盒子,一个行内的span标签,竟然能够设置宽高了。
原因1:小红设置了浮动,而小黄并没有设置浮动,小红脱离了标准文档流,其实就是他不在页面中占据位置了,此时浏览器认为小黄是标准文档流的第一个盒子,所以就渲染到了页面中的第一个位置上,这种现象,也有一种叫法:浮动元素"飘起来了"。
原因2:所有的标签一旦设置浮动,就能够并排且不区分块元素或行内元素,换言之,能够设置宽高了。
浮动元素互相贴靠:
效果发现:如果父元素有足够的空间,那么小绿就会紧靠小黄,小黄紧靠小红,小红靠着边。
如果没有足够的空间,小绿那么就会靠着小红,若没有足够的空间靠着小红,就会自己靠边。
浮动元素字围效果:
效果发现:所谓的字围效果,当div浮动,p不浮动,div遮盖了p,div的层级提高,但是p中的文字不会被遮盖,此时就形成了字围效果。
浮动元素紧凑效果:
收缩:一个浮动元素,如果没有设置width,那么就自动收缩为文字的宽度。(和行内元素很像)
谨记:关于浮动,一定要遵循一个原则,永远不是一个盒子单独浮动,要浮动就要一起浮动。另外,有浮动,一定要清楚浮动。
为什么要清楚浮动:
在页面布局的时候,每个结构中的父元素的高度,我们一般不会设置。
大家想,如果我第一版的页面的写完了,感觉非常爽,突然隔了一个月,老板说页面某一块的区域,我要加点内容,或者我觉得图片要缩小一下。这样的需求在工作中非常常见的。真想打他啊。那么此时作为一个前端小白,肯定是去每个地方加内容,改图片,然后修改父盒子的高度。那问题来了,这样不影响开发效率吗?答案是肯定的。
效果发现:如果不给.father一个高度,那么浮动子元素是不会填充父盒子的高度,那么.father2的盒子就会占据第一个位置,影响页面布局。
那么我们知道,浮动元素确实能实现我们页面元素并排的效果,这是它的好处,同时它还带来了页面布局极大的错乱!!!所以我们要清除浮动!
清除浮动的方法:
1,给父盒子设置高度。
2,clear:both;
3,伪元素清除法
4,overflow:hidden;
给父盒子设置高度:
使用不灵活,会固定父盒子的高度。
clear:both;
clear:意思就是清楚的意思。
有三个值:
left:当前元素左边不允许有浮动元素,
rigtht:当前元素右边不允许有浮动元素。
both:当前元素的左右两边都不允许有浮动元素。
给浮动元素后面加一个空的div,并且该元素不浮动,然后设置clear:both。
伪元素清除法(常用):
给浮动子元素的父盒子,也就是不浮动元素,添加一个clearfix的类,然后设置:
overflow:hidden(常用):
overflow属性规定当内容溢出元素框时,发生的事情。
属性值:
visible:默认值,内容不会被修剪,会呈现在元素框之外。
hidden:内容会被修剪,并且其余内容是不可见的。
scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto:如果内容被修剪,则浏览器会显示滚动条以便利查看其余内容。
inherit:规定应该从父元素继承overflow属性的值。