总结CSS基础知识【复习之一】

知识解析:

CSS规定的定位机制有三种:分别是标准流、浮动及绝对定位。

W3C标准:结构化标准语言(HTML和XML)、表现标准语言(CSS)、行为标准语言(DOM和ECMAScript)

       倡导结构、样式、行为分离

CSS中,存在3种的定位机制:标准文档流(Normal flow)、浮动(float)、绝对定位(absolute positioning)

标准文档流

特点:从上到下,从左至右,输出文档内容        

   由块元素和行元素组成

块级元素

特点:从左到右撑满页面,独占一行

   触碰到页面边缘时,会自动换行

   即块级标签,如div、ul、li、dl、dt、p...

行级元素

特点:能在同一行内显示 不会改变HTML文档结构

如:span、strong、img、input...

块元素和行级元素都是盒子模型

盒子模型是四种组成:boder+padding+margin+width等于盒子模型尺寸

自动居中——列布局

三个技能点:标准文档流、块级元素、margin属性

margin:0 auto

auto根据浏览器宽度自动设置两边的外边距

原理:(浏览器的宽度-外包含层的宽度)/2=外边距

如果想让你页面自动居中,当设置margin属性为auto的时候,不能再设置浮动或者绝对定位属性。

CSS中规定的第二种定位机制:能够实现横向多列布局

通过float浮动来实现

3个属性值:left 左浮动 right 右浮动 none 无浮动

特点:元素会左移,或右移,直到触碰到容器为止

设置了浮动的元素,仍旧处于标准文档流中。

当元素没有设置宽度值,而设置了浮动属性,元素的宽度随内容的变化而变化 。
当元素设置浮动属性后,会对相邻的元素产生影响,相邻元素特指紧邻后面的元素
清除浮动的常用方法:
clear属性-常用clear:both clear:left或者clear:right 同时设置width:100%(或固定宽度)+overflow:hidden;
空标签无意义,不建议使用此方法清除浮动
横向两列布局
网页布局最常见的方式之一
主要应用技能:float属性—使纵向排列的块级元素,横向排列
margin属性—设置两列之间的间距
绝对定位布局
通过设置position属性实现
CSS中规定的第三种定位机制  能够实现横向多列布局及较为复杂的定位
position属性
拥有3种定位形式:1静态定位 2相对定位 3绝对定位
可设置4个属性值:static(静态定位) relative(相对定位)absolute(绝对定位)
fixed(固定定位) 最后两个为绝对定位
相对定位
特点:相对于自身原有位置进行偏移
仍处于标准文档流中
随即拥有偏移属性和z-index属性
绝对定位
特点:建立了以包含块为基准的定位
完全脱离了标准文档流
随即拥有偏移属性和z-index属性
末设置偏移量
特点:无论是否存在已定位祖先元素,都保持在元素初始位置
脱离了标准文档流
设置偏移量
偏移参照基准:
无已定位祖先元素,以<html>为偏移参照基准
有已定位祖先元素,以距其最近的已定位祖先元素为偏移参照基准
当一个元素设置绝对定位,没有设置宽度时,元素的宽度根据内容进行调节
横向两列布局
使用absolute实现横向两列布局
常用于一列固定宽度,另一列宽度自适应的情况
主要应用技能:
relative——父元素相对定位
absolute——自适应宽度元素绝对定位
注意:固定宽度列的高度>自适应宽度的列


已知一设置了绝对定位的元素b,位于其父元素a中,a元素为静态定位,则b元素将以( html元素)为基准进行偏

知识解析
因为a元素为静态定位,所以要以根元素为基准进行偏移,也就是htm元素。。


值得注意的地方:
外边距叠加问题
1. 当第一个元素在第二个元素上面时(在发生垂直外边距的情况下,第一个元素的底外边距与第二个元素的顶外边距发生叠加,那么外边距高度等于发生叠加外边距高度中的较大者
2. 在标准文档流中块框会发生垂直外边距离叠加,但是行级框,浮动元素或者绝对定位之间的外边距不会叠加。
3. 段落上面空间等于顶外边距,没有设置外边距叠加,那么后续所有段落的空间将是相邻顶外边距和底外边距的和,就是段落顶外边距的两倍。发生外边距叠加时,段落之间的顶外边距与底外边距就叠加在一起,这样各边的距离就一致了

     

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。