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. ASP.NET SQL 总结（2）

    Sql常见面试题(总结) 1.用一条SQL语句 查询出每门课都大于80分的学生姓名 name   kecheng   fenshu 张三     语文       81 张三     数学       ...

  2. 【SPOJ-GCDEX】GCD Extreme（欧拉函数）

    题目: SPOJ-GCDEX (洛谷 Remote Judge) 分析: 求: \[\sum_{i=1}^{n}\sum_{j=i+1}^{n}gcd(i,j)\] 这道题给同届新生讲过,由于种种原因 ...

  3. 基于Web的Kafka管理器工具之Kafka-manager启动时出现Exception in thread "main" java.lang.UnsupportedClassVersionError错误解决办法（图文详解）

    不多说,直接上干货! 前期博客 基于Web的Kafka管理器工具之Kafka-manager的编译部署详细安装 (支持kafka0.8.0.9和0.10以后版本)(图文详解)   问题详情 我在Kaf ...

  4. Spring.Net学习笔记(6)-方法注入

    一.开发环境 系统:win10 编译器:VS2013 二.涉及程序集 Spring.Core.dll 1.3.1 Common.Logging.dll 三.开发过程 1.项目结构 2.编写Mobile ...

  5. Java多线程——线程之间的同步

    Java多线程——线程之间的同步 摘要:本文主要学习多线程之间是如何同步的,如何使用volatile关键字,如何使用synchronized修饰的同步代码块和同步方法解决线程安全问题. 部分内容来自以 ...

  6. php经典bug

    <?php $tem = 0=="a"?1:2; echo $tem; ?> 输出结果为:1 原因:在0=="a",这个比较中因为会将字符串&quo ...

  7. golang协程——通道channel阻塞

    新的一年开始了,不管今天以前发生了什么,向前看,就够了. 说到channel,就一定要说一说线程了.任何实际项目,无论大小,并发是必然存在的.并发的存在,就涉及到线程通信.在当下的开发语言中,线程通讯 ...

  8. vue项目中添加百度地图功能及解决遇到的问题详解

    第一步,在百度地图开放平台 申请密钥 (如果有密钥可以省略此步骤,朋友有也可以借) 地址:http://lbsyun.baidu.com/ 第二步,创建应用并填写表单(下面链接可参考) http:// ...

  9. 梦想CAD控件网页版文字样式

    增加文字样式 用户可以增加文字样式到数据库,并设置其字体等属性,具体实现js代码如下: function CreateText(){ //返回控件的数据库对象 var database =mxOcx. ...

  10. 梦想CAD控件网页版扩展数据

    随着基于CAD的应用软件飞速发展,经常需要保存一些与图形可视性无关的数据,即非图形参数.例如在绘制化验样图中包含品位数据.MxCAD定义一类新的参数——实体扩展数据.扩展数据与实体的可视性无关,而是用 ...