网页布局基础

1、CSS的三种定位机制

CSS 规定的定位机制有三种,分别是:

  1. 标准文档流(Normal flow):

特点:从上到下,从左到右,输出文档内容。由块级元素(块级元素特点:从左到右撑满页面,独占一行,触碰到页面边缘时,会自动换行)和行级元素(块级元素特点: 在同一行内显示,不会改变HTML文档结构 )组成。

  1. 浮动(Floats)
  2. 绝对定位(Absolute positioning)

言下之意就是网页布局和元素的定位都离不开这三种机制。

2、什么是W3C标准

W3C标准,是由万维网联盟制定的一系列标准,主要包括以下三个方面内容:

  1. 结构化标准语言(HTML和XML)
  2. 表现标准语言(CSS)
  3. 行为标准语言(DOM和ECMAScript)

W3C倡导的是结构、样式、行为分离

3.盒模型(Box Model)

所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin)、边框(border)、内边距(padding)、盒子中的内容(content).

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

元素的宽度和高度: 重要: 当你指定一个CSS元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完全大小的元素,你还必须添加填充(padding),边框(border)和边距。.

在三维空间中,盒子模型由上到下分为五层:

  1. 边框(border)位于第一层;
  2. 内边距(padding)和盒子中的内容(content)位于第二层;
  3. 背景图像(background-image)位于第三层;
  4. 背景颜色(background-color)位于第四层;
  5. 外边距(margin)位于最后一层。

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盒模型:

  1. 早期IE6、IE7使用“IE盒模型”,后来更新了一次,更新后的IE6、IE7使用标准盒模型IE8及以上版本使用标准盒模型.
  2. 没有DOCTYPE的情况下使用怪异模式,IE也使用“IE盒模型”。在HTML页面声明 <!DOCTYPE html>,浏览器就会选择标准 w3c 盒子模型来呈现内容了。

兼容方案:

使用css3新样式box-sizing,box-sizing有两个值:

  1. content-box:w3c标准盒模型
  2. border-box:“IE盒模型”
<div style="height:200px;width:200px;border:solid 10px #333;padding:100px;box-sizing: border-box;">
</div>

4.自动居中一列布局

需要掌握三个技能:

  1. 标准文档流
  2. 块级元素
  3. margin属性:上下外边距根据需要设置,左右外边距为auto

自动居中一列布局需要设置 margin 左右值设置为 auto,而且一

般要为包裹层(父层)设置width为一个定值,子层设置width为100%(以父包含块宽度为准自适应)。

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

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

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

5.浮动布局

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

浮动元素覆盖了紧邻它后面的元素,而不会覆盖前面的。

6.清除浮动的常用方法

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>

7.横向两列布局

主要应用技能:

  1. float 属性 - 使纵向排列的块级元素,横向排列
  2. margin属性 - 设置两列之间的间距
<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>

8.一切皆为框

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。

你可以使用 display 属性、改变生成的框的类型。这意味着,通过将 display 属性设置为 block,可以让行内元素(比如<a>元素)表现得像块级元素一样。还可以通过把 display 设置为 none,让生成的元素根本没有框。这样的话,该框及其所有内容就不再显示,不占用文档中的空间。

但是在一种情况下,即使没有进行显式定义,也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素(比如 div)的开头。即使没有把这些文本定义为段落,它也会被当作段落对待:

<div>
some text
<p>Some more text.</p>
</div>

Paste_Image.png

9.CSS定位机制

CSS 有三种基本的定位机制:普通流、浮动和绝对定位。

除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。

10.绝对定位布局

绝对定位布局就是使用position属性实现的网页布局,是CSS中规定的第三种定位机制。它除了能实现横向多列布局以外,还可以实现许多复杂的定位,例如:

  1. 带有遮罩层效果的提示框

Paste_Image.png

2.固定层效果

Paste_Image.png

  1. 全屏广告

Paste_Image.png

position属性拥有三种定位形式:

  1. 静态定位
  2. 相对定位
  3. 绝对定位

要使元素进行绝对定位可以使用position属性来设置,它可以设置四个属性值,即四种定位,分别是:

  1. static(静态定位):

元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

  1. relative(相对定位):

特点: 1.相对于自身原有位置进行偏移。 2.元素仍处于文档流中,这也就意味着它会占据标准文档流的空间。 3.一旦设置相对定位,元素随即拥有偏移属性和z-index属性(设置偏移属性之后可能会产生空间的层堆叠,对后面的元素形成遮盖,如下图所示。这时可以通过设置 [z-index 属性]来控制这些框的堆放次序)。

Paste_Image.png

  1. absolute(绝对定位):

特点: 1.建立了以包含块为基准的定位。 2.完全脱离了标准文档流,元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。当一个元素设置绝对定位,没有设置宽度时,元素的宽度根据内容进行调节。 3.当元素设置为绝对定位后,元素也会 多出两类属性:偏移量属性 和 Z-index属性,与相对定位不同的是:

  1. 该元素已经脱离了标准文档流(不占位)
  2. 建立的定位基准不是该元素的原来位置,而是分两种情况: 2.1:没有设置偏移量,特点:无论是否存在已定位的祖先元素,都保持在元素初始位置;脱离文档流;宽度塌陷(随内容变化而变化) 2.2:设置了偏移量:又分两种情况(A.无已定位的祖先元素 B.有已定位的祖先元素) A.无已定位的祖先元素:它会以根节点(<html>)为偏移参照基准 B.有已定位的祖先元素:它会以距其最近的已定位祖先元素为偏移参照基准 (通过为元素赋予position:relative、position:absolute或者position:fixed对其进行定位,已定位的祖先元素意思就是通过这三种方式已经定位完成了)

绝对定位不在文档流中(不会占位置,宽度及长度显示随内容增减而增减

  1. fixed(固定定位):

元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。

absolute(绝对定位)和fixed(固定定位)都属于绝对定位形式

使用绝对定位ablolute实现横向两列布局 — 常用于一列固定宽度,另一列宽度自适应的情况

主要应用技能:

  1. relative—父元素相对定位
  2. absolute—自适应宽度的元素绝对定位

注意:固定宽度列的高度>自适应宽度的列(因为绝对定位的元素会导致父元素高度塌陷,所以一定要保证固定宽度列的高度>自适应宽度的列,才能让绝对定位元素放进父容器里)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端学习心得

rem响应式布局

1124
来自专栏小李刀刀的专栏

[译]clearfix改良及overflow:hidden详解

原文:clearfix Reloaded + overflow:hidden Demystified clearfix 和 overflow:hidden 可算...

3498
来自专栏恰同学骚年

Web前端温故知新-CSS基础

  定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样...

733
来自专栏地方网络工作室的专栏

CSS 幽灵元素方案垂直居中注意事项

之前,我们转载了一篇博文CSS居中完全指南,在这篇文章中,提到了一种使用幽灵元素方式的解决垂直居中的问题的方案。 这种方案非常适合解决一些图片布局,因此我也在项...

1885
来自专栏HTML5学堂

文本类样式 — 背景、文本、字体

上周我们通过之前讲解的知识点完成了对一个页面的布局操作,实现了页面的一级、二级布局,完成了页面主体框架的搭建。但是细心的你应该会发现,我们做出来的网页与网页PS...

4368
来自专栏前端布道

CSS实现元素居中原理解析

在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了。但就是这样一个从理论上来看似乎实现起来极其简单的,在实践中,它往往难住了很多人。

592
来自专栏Small Code

《Python基础教程》第二版代码清单2-3更正

今天在看《Python基础教程》第二版的时候看到代码清单2-3,自己试了试结果不对(输入的时候就感觉不太对,结果真的不对),于是自己修改了一下,主要是盒子里的空...

17410
来自专栏菜鸟计划

javascript简史

一、javascript简介 1.1 javascript简史 javascript诞生于1995年。当时它的主要目的是处理以前由服务器端语言负责的一些输入验证...

2655
来自专栏GIS讲堂

Arcgis for JavaSctipt之常用Layer详解

概述:Arcgis for Javasctipt中常见的layer有动态图层(ArcGISDynamicMapServiceLayer

1005
来自专栏用户2442861的专栏

应不应该使用inline-block代替float

CSS布局创建网站,浮动绝对占据了很大的比例.大块区域如主内容及侧边栏,以及在其中的小块区域,都可以看到浮动的影子.这里浮动是唯一的解决方案吗?

661

扫码关注云+社区