个人博客地址:CSS中的元素和定位
元素
块级元素(display:block):p、h1、div等元素
这些元素显示为一块内容,即”块框”
行内元素(display:inline):strong、span等元素
这些内容显示在行中,即”行内框”
行内盒元素(display:inline-block):顾名思义,这个定义使得元素像行内元素一样水平依次排列,但是框的内容仍然符合块级框的行为,例如可以显示地设置宽度、高度、垂直外边距和内边距。
- 可以使用dispaly更改元素的类型:
display:inline-block //行内盒元素
display:block //使行内元素表现的像块级元素一样
display:none //使这个框的内容不显示,不占用文档空间
- 将文本定义在块级元素开头时,即使没有显示定义,浏览器也会默认将其定义为块级元素。
CSS中的基本定位方式
- 普通流
- 浮动
- 绝对定位(position:absolute)
- 相对定位(position:relative)
- 固定定位(position:fixed)
- 继承定位(position:inherit)
- 默认定位/无定位(position:static)
1、普通流
除非专门指定,否则所有框均在普通流中定位
普通流中元素框的的位置由元素在HTML中的位置决定
块级框从上到下一个接一个垂直排列,垂直距离由垂直外边距决定,可能会发生margin合并现象。
行内框在一行中水平排列,可以使用水平内边距、边框、外边距来调整它们的水平间距。
但是垂直外边距、边框、外边框并不会影响行内框的高度。在行内框上设置显式地高度和宽度也没有影响。
由一行形成的水平框成为行框,行框的高度总是足以容纳其包含的所有行内框。即:行框高 = Max(所含行内框的高)
可以通过设置行高进而间接(在视觉上)增加行内框的高度。
2、浮动
浮动不占据文档流的空间,但是文本会会环绕在浮动元素周围,可能会覆盖掉文档流元素。
浮动图解:
框1脱离文档流向右浮动直到碰到边界:
浮动元素之间会相互影响:
文本环绕在浮动元素周围:
可以通过给文本元素增加clear属性(left、right、both、none)来表示哪边不应该挨着浮动框以达到上图左边的效果。
清除浮动:
- overflow:hidden 这个方法可以清除浮动,但会产生BFC,强制包裹住元素,导致内容被截断或产生滚动条。
- clear类方法(推荐)
.clear:after {
content: ".";
height: 0;
visibility: hidden;
display: block;
clear: both;
}
3、绝对定位
#myBox {
position: absolute;
left: 20px;
top: 20px;
}
绝对定位使元素位置与文档流无关,因此不占据空间。普通文档流元素就当绝对定位元素不存在一样。
4、相对定位
#myBox {
position: relative;
left: 20px;
top: 20px;
}
在使用相对定位时,无论是否移动,元素仍然占据原来的空间。因此,移动元素会导致覆盖其他框。
5、固定定位
position: fixed;
将元素从文档流中移除,使元素固定在窗口某一位置不动,并且跟随页面滚动始终处于页面固定的位置。
6、继承定位
position: inherit;
顾名思义,从父类元素继承定位属性。
7、默认值
position: static;
默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。