大前端学习笔记整理【三】行内元素与块级元素的区别以及绝对定位与固定定位的差异

时间:2022-10-28 10:50:33
1.简要说明: 1. 行内元素会再一条直线上,是在同一行的。比如span和strong; 2. 块级元素各占一行。是垂直方向的!比如div和p 假如你要将行内元素变成块级元素,那么就只需要在该标签上加上样式 display:block; 块级元素可以用样式控制其高、宽的值,而行内元素不可以   行内元素和width W3C CSS2 标准规定行内元素、非置换元素不会应用width属性。 以下例子中,对行内元素<a>应用了width:200px,你可以看到,根本就没有什么效果。 行内元素和height W3C CSS2 标准规定行内元素、非置换元素不会应用height属性,但是盒子高度可以通过line-height来指定。 以下例子,对行内元素<a>应用了height:50px,你可以看到什么效果都没。 行内元素和padding 你可以给行内元素设置padding,但只有padding-left和padding-right生效。 以下例子,行内元素<a>应用了padding:50px。你可以看到对左右的内容有影响,但是对上下没影响。 行内元素和margin margin属性也是和padding属性一样,对行内元素左右有效,上下无效。
  1. 设置宽度width   无效。
  2. 设置高度height  无效,可以通过line-height来设置。
  3. 设置margin 只有左右margin有效,上下无效。
  4. 设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的,看图上效果就知道了
text-align属性是两者表现的又以不同之处  在W3C CSS2.1规范第16.2节对text-align 有详细地描述: ------------------------------------------ 值: left | right | center | justify | inherit 初始值:匿名值,由'direction'的值而定,如果'direction'为'ltr'则为'left',如果'direction'为'rtl'则为'right'。 应用于: 块级元素,表格单元格,行内块元素 继承性: 是 计算后的值:初始值或指定值 ------------------------------------------   这个特性描述了如何使一个块元素的行内内容对齐。   注意一点,标准里说这个属性是用来对齐行内内容的,所以,不应该对块级内容起作用。   解释一下,行内内容是说由行内元素组成的内容,行内元素大家都知道吧,比如 SPAN 元素,IFRAME元素和元素样式的 ‘display : inline’ 的都是行内元素;块级内容跟则是由块级元素构成,DIV 是最常用的块级元素。块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示。   这样,我们对这个特性的认识应该就清楚了。但是,虽然标准里这么规定,那么是不是所有浏览器都遵守呢?答案是否定的。猜猜是哪个浏览器这么特立独行啊? IE!!   IE6/7及IE8混杂模式中,text- align:center可以使块级元素也居中对齐。其他浏览器中,text-align:center仅作用于行内内容上。   解决上面的问题比较好的方式,就是为所有需要相对父容器居中对齐的块级元素设置“margin-left:auto; margin-right:auto”。但这个方式 IE6/IE7/IE8的混杂模式中不支持,所以还要设置父容器的 "text-align:center;"。若居中对齐的子元素内的行内内容不需要居中对齐,则还需要为其设置“text-align:left”。   元素的总结暂时先到这里,然后由此我们需要再次引入一个网页布局中常用的一种手段,定位。

常用的定位就两种,绝对定位与相对定位,除此之外position这个属性还接受的参数有:fixed,固定定位,定位基于浏览器窗口;static,默认值,说明元素没有定位;切元素处于正常的流中;

那么,元素的相对定位于绝对定位有什么区别呢?我通过各位大神的博客整理了以下特点

相对定位(Relative positioning) 一旦一个盒子被定位或者浮动,它可以相对于这个位置进行一定的偏移。这就叫做相对定位。偏移的盒子(B1)对紧跟着它的盒子(B2)没有任何影响:B2的位置就像B1没有发生偏移一样。因此,相对定位可能导致盒子重叠(overlap)。但是,如果相对定位导致了"overflow:auto"或者"overflow:scroll"的盒子溢出了,那么UA必须允许用户(通过滚动条等)能够访问到盒子的内容。 一个相对定位的盒子保持原有的正常大小,包括换行和一开始就保有的空间。 对于相对定位的元素来说,left和right将盒子不改变大小的水平移动。left将盒子右移,right将盒子左移。因为left或right的结果都不会导致盒子被分隔或拉伸,所以实际上最终使用的值总是: left=-right。 如果left和right的取值都是auto,那最终生效的值都为0(也就是说盒子呆在原来的位置)。 如果left取值为auto,那么最终使用的值是-right(也就是说盒子最终左移了right的数值)。 如果right取值为auto,那么最终使用的值是-left。 如果left和right都不是auto,那么二者之中必须要忽略一个。如果包含块的direction属性值为ltr,那么使用left,right的值为-left;如果包含块的direction为rtl,那么使用right,left的值为-right。 top和bottom属性将盒子不改变大小的上下移动。top将盒子下移,bottom将盒子上移。因为盒子不会被分隔或者拉伸,所有最终使用的值总是:top=-bottom。如果两个都是auto,那么最终使用的值都为0。如果其中之一为auto,那么设为auto的那个属性最终使用的值是另一个的负值。如果都不是auto,那么bottom被忽略(也即是说bottom最终使用的值是-top)。   绝对定位(Absolute positioning) 在绝对定位模型中,盒子被从正常文档流中完全移除,并只相对于它的包含块进行偏移定位。绝对定位的盒子会为它的正常文档流后代盒子以及非fixed的绝对定位后代盒子建立一个包含块。绝对定位的盒子可能会遮盖其他元素,具体取决于堆叠层次。 固定布局(Fixed positioning) 固定布局是绝对布局的一个子类,唯一的不同在于固定布局的盒子的包含块由视口(viewport)产生。 我们通常通过fixed布局来创建页面的框架,比如: 大前端学习笔记整理【三】行内元素与块级元素的区别以及绝对定位与固定定位的差异