浮动
行内元素和块级元素
标签分为两种等级:
- 块级元素:
<span>,<b>,<a>,<em>,<i>,<u>
- 行内元素:
<h1>~<h6>,<p>,<h>,<dt>,<dd>,<li>
行内元素和块级元素的区别:
行内元素:
- 与其他行内元素并排
- 不能设置宽高;默认的宽度就是文字的宽度。
块级元素:
- 霸占一行,不能与其他任何元素并列。
- 能接受宽、高;如果不设置宽度,那么宽度将默认变成父元素的100%。
行内元素和块级元素的分类:
- 文本级标签:
<p>,<span>,<a>,<b>,<i>,<u>,<em>
- 容器级标签:
<div>,<h系列>,<li>,<dt>,<dd>
- 为什么说p标签是文本级标签呢,因为p标签里面只能放“文字,图片,表单元素”,p里面不能放h和ul,p标签里面也不能放p标签。
行内元素和块级元素相互转换
通过使用display
属性将块级元素和行内元素进行相互转换。“display”即是显示模式
块级元素可以转换为行内元素:
display:inline;
当把一个块元素转为行内元素后,这个标签将和span无异。inline就是“行内”的意思。
- 此时这个div不能设置宽度、高度。
- 此时这个div可以和别人并排。
行内元素转换为块级元素
给一个行内元素(如 span)设置:
display:block;
那么,这个标签将立即变为块级元素,block是“块”的意思
- 此时这个span能够设置宽度、高度。
- 此时这个span必须霸占一行了,别人无法和他并排
- 如果不设置宽度,将自动撑满父元素。
现实使用中,往往有时候需要在一行中既要行内元素又要块元素,这时就用到了**“脱离标准流”**
css中一共三种方法,使一个元素脱离标准文档流:
- 浮动
- 绝对定位
- 固定定位
1. 浮动的元素脱标
<span>
标签在标准流中是不能设置宽高的(因为是块元素);但是一旦设置为浮动之后,即使不转成块元素,也能设置宽高了。- 一旦一个元素浮动了,那么将能够并排了,并且能够设置宽高了。不论原始是什么标签,一旦浮动之后,将不区分行内、块级了。
2.浮动的元素互相贴靠
3.浮动的元素有“字围”效果
总结:永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动
4.收缩
一个浮动的元素,如果没有设置width,那么将自动收缩为内容的宽度。
浮动的清除
-
给浮动元素的增加元素加高度
-
总结:如果一个元素要浮动,那么它的祖先元素一定要有高度
-
有高度的盒子,才能关住浮动
-
只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元素。
-
-
clear:both
- 实际使用中,随便给一个父元素设置高度是不合理的,会导致其他内容被称高,为了解决这种问题,在不写height的情况下,也把浮动清除了可以使用
clear:both;
这个属性。 - clear 就是清除的意思;both 指的是左浮动、右浮动都要被清除;
clear:both
的意思就是:不允许左侧和右侧有浮动对象。 - 注意:这种方法有一个非常大的问题,它所在的标签会导致,margin属性失效了,失效的原因是 “元素中的高度为零“。
- 实际使用中,随便给一个父元素设置高度是不合理的,会导致其他内容被称高,为了解决这种问题,在不写height的情况下,也把浮动清除了可以使用
-
隔墙法
- 可以在受影响的两个div之间再创建一个div,然后给这个div赋予一个
clear:both;
。
- 可以在受影响的两个div之间再创建一个div,然后给这个div赋予一个
-
内墙法
- 内墙法是在div元素里面再创建一个div
- 优势:内墙法可以给它所在的父元素,通过子元素设置的宽高进行撑出父元素的宽高
-
清除浮动的方法:overflow:hidden;
overflow:hidden;
- overflow 表示“溢出”;
hidden
“隐藏”;这个属性的意思是“溢出隐藏”;所有溢出边框的内容,都要进行隐藏掉。
- overflow 表示“溢出”;
margin相关的知识
-
margin塌陷/margin重叠
- 标准文档流中,竖直方向的margin不重叠,取较大的值作为margin(水平方向的magin是可以叠加的,即水平方向没有塌陷现象)。
-
盒子居中
margin:0 auto;
-
margin的值可以为auto,表示自动。当left、right两个方向都是auto的时候,盒子居中了。
margin-left:auto; margin-right:auto;
-
盒子居中的简写:
margin: 0 auto;
-
-
注意:
-
只有标准流的盒子。才能使用
margin:0 auto;
居中。也就是说。当一个盒子浮动了、绝对定位了、固定定位了,都不能使用margin:0 auto;
-
使用
margin:0 auto;
的盒子,必须有width,明确的width(可以这样理解,如果没有明确的witdh,那么它的width就是霸占整行) -
margin:0 auto;
是让盒子居中,不是让盒子里的文本居中;文本的居中要使用text-align:center;
-
margin:0 auto;//让这个div自己在大的容器中的水平方向上居中 text-align:center; //让这个div内部的文本居中。
-
text-align:left;//文本居左,默认的就是 text-align:right;//文本居右
-
善用父元素的padding,而不是子元素的margin
- 如果父元素没有border,那么子元素的margin 实际上是“流”。
- margin这个属性,本质上描述的是兄弟元素之间的距离;最好不要用margin表达父子元素之间的距离