CSS基础
行内元素和块级元素的区别:
行内元素:
- 与其他行内元素并排;
- 不能设置宽、高。默认的宽度,就是文字的宽度。
块级元素:
- 霸占一行,不能与其他任何元素并列;
- 能接受宽、高。如果不设置宽度,那么宽度将默认变为父亲的100%。
行内元素和块级元素的分类:
在以前的HTML知识中,我们已经将标签分过类,当时分为了:文本级、容器级。
从HTML的角度来讲,标签分为:
- 文本级标签:p、span、a、b、i、u、em。
- 容器级标签:div、h系列、li、dt、dd。
行内元素和块级元素的相互转换
我们可以通过display
属性将块级元素和行内元素进行相互转换。display即“显示模式”。
块级元素可以转换为行内元素:
一旦,给一个块级元素(比如div)设置:
display: inline;
那么,这个标签将立即变为行内元素,此时它和一个span无异。inline就是“行内”。也就是说:
- 此时这个div不能设置宽度、高度;
- 此时这个div可以和别人并排了。
行内元素转换为块级元素:
同样的道理,一旦给一个行内元素(比如span)设置:
display: block;
那么,这个标签将立即变为块级元素,此时它和一个div无异。block”是“块”的意思。也就是说:
- 此时这个span能够设置宽度、高度
- 此时这个span必须霸占一行了,别人无法和他并排
- 如果不设置宽度,将撑满父亲
css中一共有三种手段,使一个元素脱离标准文档流:
- (1)浮动
- (2)绝对定位
- (3)固定定位
这便引出我们今天要讲的内容:浮动。
性质1:浮动的元素脱标
性质2:浮动的元素互相贴靠
性质3:浮动的元素有“字围”效果
总结:标准流中的文字不会被浮动的盒子遮挡住。(文字就像水一样)
浮动的清除
1.加高法
给浮动元素的祖先元素设置高度,如果一个元素要浮动,那么它的祖先元素一定要有高度。有高度的盒子,才能关住浮动。(记住这句过来人的经验之语)。此方法不能适应页面的快速变化。
2.clear:both;
clear就是清除,both指的是左浮动、右浮动都要清除。clear:both
的意思就是:不允许左侧和右侧有浮动对象。这种方法有一个非常大的、致命的问题,它所在的标签,margin属性失效了,导致两个div之间,没有任何的间隙了
3.隔墙法
外墙:在这两个div中间用一个新的div隔开,然后给这个新的div设置clear: both;
属性;同时,既然这个新的div无法设置margin属性,我们可以给它设置height,以达到margin的效果
内墙:内墙法可以给它所在的div撑出宽度,让div的高度可以自适应内容。
<!--CSS 浮动 隔墙法-->
<div class="box1">
<p></p>
<p></p>
</div>
<!-- 为了防止两个div贴靠,我们可以在这两个div中间用一个新的div隔开,然后给这个新的div设置clear: both;属性;
同时,既然这个新的div无法设置margin属性,我们可以给它设置height,以达到margin的效果这便是隔墙法 -->
<div style="clear: both; height: 10px;"></div>
<div class="box1">
<p></p>
<p></p>
</div>
<!--CSS 浮动 内墙法-->
<div class="box1">
<p></p>
<p></p>
<!-- 内墙法可以给它所在的div撑出宽度。即:box1的高度可以自适应内容 -->
<div style="clear: both; "></div>
</div>
<div class="box1">
<p></p>
<p></p>
</div>
4.overflow:hidden;
这个属性的本意,就是将所有溢出盒子的内容,隐藏掉。但是,我们发现这个东西能够用于浮动的清除。 我们知道,一个父亲,不能被自己浮动的儿子撑出高度,但是,如果这个父亲加上了overflow:hidden;那么这个父亲就能够被浮动的儿子撑出高度了。这个现象,不能解释,就是浏览器的偏方。 并且,overflow:hidden;能够让margin生效
margin相关
margin塌陷/margin重叠
标准文档流中,竖直方向的margin不叠加,取较大的值**作为margin(水平方向的margin是可以叠加的,即水平方向没有塌陷现象)
盒子居中margin:0 auto;
善于使用父亲的padding,而不是儿子的margin