DIV用于搭建网站结构（框架），CSS用于创建网站表现（样式/美化）

　　DIV+CSS模式设计网站的优势：

1、表现和内容分离。　　　　2代码简洁，提高网页浏览速度。　　3、易于维护，改版。　　4、提高搜索引擎对网页索引的效率

　　　　　　大部分标签都有意义，例如a标签创建链接h标签创建标题     　　div和span是无意义的标签，但是div和span可以与css，结合起来。应用就非常的广泛。

　　　　　　　　<div id="scissors">使用div组合一块大的代码

　　　　　　　　　　　<p> This is <span class ="paper">crazy</span></p>使用span内联在p标签中

　　　　　　　　</div>　　div结束一个块

·　　　　　　W3C盒子模型：每个HTML模型都可以看做一个区块，类似于装了东西的盒子，所以称为盒子模型。

　　　　　　

　　　　　　

<!DOCTYPE html>
<html>
　　<head>
　　　　<title>盒子模型</title>
　　　　<style>
　　　　　　#box {
　　　　　　　　　　width: 200px;　　　　　　　　/*盒子宽度为200像素*/
　　　　　　　　　　height: 200px;　　　　　　　　/*盒子高度为200像素*/
　　　　　　　　　　border: 5px solid #ccc;　　　　/*盒子边框各自边宽为5px*/
　　　　　　　　　　padding: 10px;　　　　　　　　/*盒子内填充为10px*/
　　　　　　　　　　margin: 20px;　　　　/*盒子的4个外边距为10px*/
}
　　　　</style>
　　</head>
　　<body>
　　　　<div id="box"> <!--使用div定义一个盒子 -->
　　　　内容区 <!--盒子内还可以嵌套一个盒子-->
　　　　</div>

　　</body>
</html>

　　　　声明盒子的css属性：

　　　　margin：定义外边界与上级元素距离的属性，用1——4来设定元素的边界，每个值都是长度，百分比或者auto。百分比的值是参考上级元素的宽度，允许使用负值。margin-top上边界　　margin-bottom下边界　　margin-left左边界　　margin-right右边界

　　　　padding：用于设置区块的内边距属性，是边框和元素内容之间的间隔距离，与margin属性相反padding-top上补白　　padding-bottom下补白　　padding-right右补白

　　　　　　　　padding-left左补白　　

　　　　border：边框属性用于设置一个元素的边框风格，宽度，颜色

　　　　width：盒子的宽度

　　　　height：盒子的高度

　　　　　　　　和页面布局有关的css属性：

　　　　　　　　position：用于定义一个元素是否absolute（绝对的）、relative（相对的）、static（静态）或者fixed（固定）

　　　　　　　　top：层距离页面顶点纵坐标的距离

　　　　　　　　left：层距离页面顶点横坐标的距离

　　　　　　　　text-align：横向排列，可以使用left（居左对齐）、right（居右对齐）、center（居中对齐）。

　　　　　　　　z-index：决定层的先后顺序和覆盖关系、值高的元素会覆盖值低的元素。、

　　　　　　　　display：是一个显示属性，设定为block值以块状显示，在元素后，添加换行符，即其他元素不能在其后面并列显示。

　　　　　　　　visibility：这个属性是针对嵌套层的设置，如果存在嵌套的层（子层）和被嵌套的层（父层），可以使用inherit值设置子层继承父层的可见性，如果父层可见，那么子层也可见，当值为visiable，无论父层是否可见，子层都可见。而当值为hideen时。无论父层是否可见。子层都隐藏。

　　　　　　　　overflow：用于设置层内容超出所能容纳的范围的处理方式。

　　　　　　　　float：设置区块漂浮属性，允许网页制作作者将文本环绕，环绕在一个元素的周围，可以使用左漂浮值left和右漂浮值right值；

　　　　　　　　　clear：清楚属性，指定一个元素是否允许有元素漂浮在它的旁边，值left移动元素到左边漂浮的元素下面：

　　　　　　盒子区块的定位：普通流、结对定位、浮动、三种基本定位机制。

　　　　　　如果不专门追定区块位置，默认为都是普通流中定位即从上到下一个接一个的排列。位置元素由HTML决定，如果使用像span和strong等不自动换行元素，就会在同一行中水平布局，可以使用水平填充，外部边距等调整他们的水平边距。

　　　　　　相对定位：通常被看做普通定位的一部分，因为元素的位置相对于它本身普通流中的位置定位并不是布局的常用方式。如果某个区块框在他所在的位置处，设置垂直或水平位置，就可以让这个“相对于”他在普通流的起点位置进行移动。但使用相对位置时，无论是对否移动，元素都占据原来的空间，因此这种移动方式会导致覆盖其他区块。

　　　　　　a：hover {　　　　　　　　　　/*定义a元素的伪选择器，当鼠标移动到链接上时改变样式

　　　　　　　　　position：relative；　　　*设置元素使用相对位置

　　　　　　　　　top：1px；　　　　　　　*鼠标进入时a元素将出现在原位置顶部下面1px的地方

　　　　　　　　　left：1px；　　　　　　　*鼠标进入时a元素将出现在原位置右边1px的位置

　　　　　　　　　　}　　　　　　　　　　　*/

　　　　　　　　本咧是实现将鼠标移动到页面的链接时，链接的元素就会在网页上震动一下，还会相对原位置下移1像素，向右移动1像素。

　　　　　　　　相对定位是相对于自身在普通流中的位置移动。

　　　　　　　　绝对定位：absolute使元素的位置与文档的普通流无关，他的位置是相对于已定位包含的上层元素中上、下、左、右移动。如果没有已定位的上层元素，那么他的位置相对于最初包含的区块，例如body或HTML元素。

　　　　　　　　风场灵活的定位方式不会占据普通流中现有的区框位置空间，网页中浮动的广告，都采用的是绝对定位的机制，因为它可以浮动在其他区块的上面，也可以使用

z-index属性来控制这些区块的堆放次序，z-index的值越大，区块在层中的位置就会越高。

　　　　　　　　绝对定位一般不做布局，配合JavaScript使用完成一些页面特效，登录框的盒子需要用绝对定位完成。

<!DOCTYPE html>
<html>
<head>
　　<title>登录框盒子模型定位</title>
　　<style>
　　　　#login{ ./*定义一个id选择器*/
　　　　　　width: 300px;
　　　　　　height: 200px;
　　　　　　position: absolute;
　　　　　　left: 50%;/*左部盒子开始位置是页面宽度的50%*/
　　　　　　top: 50%/*顶部盒子开始位置是页面高度的50%*/
　　　　　　margin-left:-150px;/*左部开始位置退回盒子宽度的一半*/
　　　　　　margin-top: -100px;/*顶部开始位置在退回盒子高度的一半*/
　　　　　　background: #BABABA;/*设置背景颜色为灰色*/
　　　　　　}
　　</style>
</head>
<body>
　　<div id="login">
　　　　登录框的盒子模型
　　</div>
</body>
</html>

BIV+CSS网页的标准化布局的更多相关文章

  1. 43个实例xHTML+CSS(DIV+CSS)网页及导航布局

    在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...

  2. IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势

    标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采 ...

  3. CSS网页布局全精通

    在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...

  4. 《精通CSS网页布局》读书报告 ----2016-12-5补充

    第一章:CSS布局基础 1.CSS的精髓是布局,而不是样式哦!  (定要好好的研究布局哦,尤其配合html5) 2. html标签的语义性,要好好的看看哦! 3.DTD:文档类型定义. 4.内联--& ...

  5. 深入理解CSS网页布局-理论篇

    在CSS网页开发布局中,需要对浮动和定位有深刻的理解才能在开发中游刃有余. 基于此,在博客园中做了本篇总结,这些总结来自实践经验和阅读一些书籍后的理解总结,主要内容为浮动,清除浮动,定位. (可点击屏 ...

  6. CSS网页布局错位:CSS宽度计算

    为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...

  7. 系列文章--精通CSS.DIV网页样式与布局学习

    精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...

  8. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  9. DIV+CSS 网页布局之：一列布局

    1.网页布局 布局(layout)即对事物的全面规划和安排,页面布局是对页面的文字.图像或表格进行格式化版式排列.网页布局对改善网站的外观非常重要,又称版式布局,大多数网站会把内容安排到多个列中,就像 ...

随机推荐

  1. Poj 3177 Redundant Paths （双连通分支+节点统计）

    题目描述: 给出一个无向的连通图,问最少加入几条边,才能使所给的图变为无桥的双连通图? 解题思路: 可以求出原图中所有的不包含桥的所有最大连通子图,然后对连通子图进行标记缩点,统计度为1的叶子节点le ...

  2. 题解报告：poj 1321 棋盘问题（dfs）

    Description 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放k个棋子 ...

  3. 290 Word Pattern 单词模式

    给定一种 pattern(模式) 和一个字符串 str ,判断 str 是否遵循这种模式.这里的 遵循 指完全匹配,例如在pattern里的每个字母和字符串 str 中的每个非空单词存在双向单映射关系 ...

  4. JSON基础 JS操作JSON总结

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...

  5. Matlab2014的下载和安装激活过程

    Matlab2014的下载和安装过程 转载自csdn  https://blog.csdn.net/hp910315/article/details/70197149 1 下载Matlab2014,下 ...

  6. POJ_1163_The triangle

    The Triangle Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 40079   Accepted: 24144 De ...

  7. GetArxPath

    extern HINSTANCE _hdllInstance;CString GetArxPath(){ CString strArxPath; GetModuleFileName(_hdllInst ...

  8. （转）MySQL中的索引详讲

    序言 之前写到MySQL对表的增删改查(查询最为重要)后,就感觉MySQL就差不多学完了,没有想继续学下去的心态了,原因可能是由于别人的影响,觉得对于MySQL来说,知道了一些复杂的查询,就够了,但是 ...

  9. js 动态加载select触发事件

    动态加载select后,手动调用一下 subjectChange函数,模拟触发change事件 function hallidChange(value) { $.ajax({ type: " ...

  10. docker搭建日志收集系统EFK

    EFK Elasticsearch是一个数据搜索引擎和分布式NoSQL数据库的组合,提过日志的存储和搜索功能. Fluentd是一个消息采集,转化,转发工具,目的是提供中心化的日志服务. Kibana ...