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. 启动tomcat报错：ImageFormatException

    启动某工程报错: java.lang.NoClassDefFoundError: com/sun/image/codec/jpeg/ImageFormatException 查找此类存在于jdk的rt ...

  2. 所有版本chrome、chromedriver、firefox下载链接

    1. 所有版本chrome下载 是不是很难找到老版本的chrome?博主收集了几个下载chrome老版本的网站,其中哪个下载的是原版的就不得而知了. http://www.slimjet.com/ch ...

  3. Visual Studio 生成项目时脚本执行

    项目属性 - 生成事件 项目生成前:预先生成事件命令行: 项目生成后:后期生成事件命令行:例:copy $(ProjectDir)Reference\sms_cfg.ini $(TargetDir) ...

  4. 关于java的print()

    print方法是类PrintStream的方法成员,而System类有一个static的PrintStream类型的属性成员,名叫out,我们平时写的System.out.print("he ...

  5. 《CSS世界》学习笔记（一）

    <CSS世界>,张鑫旭著,人民邮电出版社,2017年12月第一版. 1.P9二维码链接文章的demo值得一看,可以实现有关“某些区域颜色始终保持一致”的效果. P9二维码所链接文章的一个d ...

  6. Python自动监控错误日志

    平时在查看日志的时候打开满屏的日志,看上去有点凌乱.于是写个Python脚本过滤出想要看的错误的日志.直接上脚本 脚本示例 def read_log(logname,keyword): tell = ...

  7. React Native 出现红屏幕报连接服务失败

    最近移动项目组在本人的带领下切换进React Native开发应用,之前没接触过,用了几周之后,发现也就那么回事吧,小玩具项目用用还是可以的.今天Android小姑娘在Windows下出问题解决不了, ...

  8. 少啰嗦！一分钟带你读懂Java的NIO和经典IO的区别

    1.引言 很多初涉网络编程的程序员,在研究Java NIO(即异步IO)和经典IO(也就是常说的阻塞式IO)的API时,很快就会发现一个问题:我什么时候应该使用经典IO,什么时候应该使用NIO? 在本 ...

  9. 12C语言标准函数库

    C语言标准函数库 数学函数 三角函数 指数和对数函数 双曲线函数 其它函数 Sqrt() Pow() Exp() Log() Sin() Cos() Tan() 时间函数 查找和排序 Bsearch( ...

  10. clock_gettime 用法

    #include <stdio.h> #include <stdlib.h> #include <sys/types.h> #include <sys/sta ...