CSS 规定的定位机制有三种,分别是:
特点:从上到下,从左到右,输出文档内容。由块级元素(块级元素特点:从左到右撑满页面,独占一行,触碰到页面边缘时,会自动换行)和行级元素(块级元素特点: 在同一行内显示,不会改变HTML文档结构 )组成。
言下之意就是网页布局和元素的定位都离不开这三种机制。
W3C标准,是由万维网联盟制定的一系列标准,主要包括以下三个方面内容:
W3C倡导的是结构、样式、行为分离
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin)、边框(border)、内边距(padding)、盒子中的内容(content).
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
元素的宽度和高度: 重要: 当你指定一个CSS元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完全大小的元素,你还必须添加填充(padding),边框(border)和边距。.
在三维空间中,盒子模型由上到下分为五层:
Paste_Image.png
各个层叠加之后也就形成了我们看到的盒子模型的平面结构图。
盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型。
Paste_Image.png
Paste_Image.png
区别: W3C标准中padding、border所占的空间不在width、height范围内,大家俗称的IE的盒模型width、height包括content尺寸+padding+border。
举个例子:一个盒子的 margin 为 20px,border 为 1px,padding 为 10px,content 的宽为 200px、高为 50px。
假如用标准 w3c 盒子模型解释,那么这个盒子需要占据的位置为: 宽: 20❄2+1❄2+10❄2+200=262px 高: 20❄2+1❄2+10❄2+50=112px
盒子的实际大小为: 宽: 1❄2+10❄2+200=222px 高: 1❄2+10❄2+50=72px
假如用ie 盒子模型,那么这个盒子需要占据的位置为: 宽: 20❄2+200=240px 高: 20❄2+50=70px
盒子的实际大小为:宽 200px、高 50px。
并不是所有的IE都使用IE盒模型:
兼容方案:
使用css3新样式box-sizing,box-sizing有两个值:
<div style="height:200px;width:200px;border:solid 10px #333;padding:100px;box-sizing: border-box;">
</div>
需要掌握三个技能:
自动居中一列布局需要设置 margin 左右值设置为 auto,而且一
般要为包裹层(父层)设置width为一个定值,子层设置width为100%(以父包含块宽度为准自适应)。
aotu 会根据浏览器的宽度自动的设置两边的外边距。
原理:(浏览器宽度-外包层宽度)/2 = 外边距
如果想让页面自动居中,当设置margin属性为auto的时候,不能再设置浮动或绝对定位属性 。
CSS中规定的第二种定位机制,使用浮动布局能够实现块级元素的横向排版,即横向多列布局。
浮动的框可以左右移动(根据float属性值而定),直到它的外边缘 碰到包含框或者另一个浮动元素的框的边缘。
浮动元素不在文档的普通流中,文档的普通流中的元素表现的就像浮动元素不存在一样。
当元素没有设置宽度值,而设置了浮动属性,元素的宽度会随内容的变化而变化(若没有内容,则宽度为0)。
当元素设置浮动属性后,会对相邻的元素产生影响,相邻元素特指紧邻它后面的元素,对它前面的元素没影响。
demo 1:
<div style="border: solid 5px #0e0; width:300px;">
<div style="height: 100px; width: 100px; background-color: Red; ">
</div>
<div style="height: 100px; width: 100px; background-color: Green;float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow;">
</div>
</div>
Paste_Image.png
浮动元素覆盖了紧邻它后面的元素,而不会覆盖前面的。
1.为受到浮动影响的元素设置clear属性 - clear:both;
2.为受到浮动影响的元素同时设置width:100%(或固定宽度)+overflow:hidden;
3、给包裹层(父层)设置:
.clearfix:after{
content:'';
display:block;
clear:both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.outer{
border: 1px solid black;
width: 300px;
}
.inner{
width: 50px;
height: 50px;
background-color: #ff4400;
margin-right: 20px;
float: left;
}
.footer{
background-color: #005FC3;
width: 200px;
height: 100px;
}
.clearfix:after{ /*最简方式*/
content: '';
display: block;
clear: both;
}
/* 新浪使用方式
.clearfix:after{
content: '';
display: block;
clear: both;
height: 0;
visibility: hidden;
}
*/
.clearfix{ /*兼容 IE*/
zoom: 1;
}
</style>
</head>
<body>
<div class="outer clearfix">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="footer"></div>
</body>
</html>
主要应用技能:
<style type="text/css">
* {
margin:0;
padding:0;
}
#wrap {
background:#00C;
margin:0 auto;
width:960px;
}
#header {
background:#FF3300;
width:100%;
}
#mainbody {
background:#FC0;
}
.clearfix:after{
content:'';
display:block;
clear:both;
}
.left {
width:800px;
height:200px;
background:#000;
float:left;
}
.right {
width:140px;
height:500px;
background:#690;
float:right;
}
#footer {
background:#639;
width:100%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">头部</div>
<div id="mainbody" class='clearfix'>
<div class="left"></div>
<div class="right"></div>
</div>
<div id="footer">版权部分</div>
</div>
</body>
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。
你可以使用 display 属性、改变生成的框的类型。这意味着,通过将 display 属性设置为 block,可以让行内元素(比如<a>
元素)表现得像块级元素一样。还可以通过把 display 设置为 none,让生成的元素根本没有框。这样的话,该框及其所有内容就不再显示,不占用文档中的空间。
但是在一种情况下,即使没有进行显式定义,也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素(比如 div)的开头。即使没有把这些文本定义为段落,它也会被当作段落对待:
<div>
some text
<p>Some more text.</p>
</div>
Paste_Image.png
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。
绝对定位布局就是使用position属性实现的网页布局,是CSS中规定的第三种定位机制。它除了能实现横向多列布局以外,还可以实现许多复杂的定位,例如:
Paste_Image.png
2.固定层效果
Paste_Image.png
Paste_Image.png
position属性拥有三种定位形式:
要使元素进行绝对定位可以使用position属性来设置,它可以设置四个属性值,即四种定位,分别是:
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
特点: 1.相对于自身原有位置进行偏移。 2.元素仍处于文档流中,这也就意味着它会占据标准文档流的空间。 3.一旦设置相对定位,元素随即拥有偏移属性和z-index属性(设置偏移属性之后可能会产生空间的层堆叠,对后面的元素形成遮盖,如下图所示。这时可以通过设置 [z-index 属性]来控制这些框的堆放次序)。
Paste_Image.png
特点: 1.建立了以包含块为基准的定位。 2.完全脱离了标准文档流,元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。当一个元素设置绝对定位,没有设置宽度时,元素的宽度根据内容进行调节。 3.当元素设置为绝对定位后,元素也会 多出两类属性:偏移量属性 和 Z-index属性,与相对定位不同的是:
绝对定位不在文档流中(不会占位置,宽度及长度显示随内容增减而增减
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
absolute(绝对定位)和fixed(固定定位)都属于绝对定位形式
使用绝对定位ablolute实现横向两列布局 — 常用于一列固定宽度,另一列宽度自适应的情况
主要应用技能:
注意:固定宽度列的高度>自适应宽度的列(因为绝对定位的元素会导致父元素高度塌陷,所以一定要保证固定宽度列的高度>自适应宽度的列,才能让绝对定位元素放进父容器里)