在写网页的时候一般都先用Div把网页的框架搭好（用不同的背景颜色来区分不同的Div块），然后填充每一个Div，最后把每个Div的背景颜色去掉

　　　　<html>

　　　　　　<head>

　　　　　　　　<title></title>

　　　　　　　　<style type="text/css">

　　　　　　　　　　.divIndex

　　　　　　　　　　{
　　　　　　　　　　　　width:1000px;height:800px;background-color:yellow;margin:0px auto;
　　　　　　　　　　}
　　　　　　　　　　.divLogo
　　　　　　　　　　　　{ width:1000px;height:100px;background-color:red;
　　　　　　　　　　}
　　　　　　　　　　.divContent
　　　　　　　　　　{
　　　　　　　　　　　　width:1000px;height:300px;background-color:Green;
　　　　　　　　　　}
　　　　　　　　　　.divPicture
　　　　　　　　　　{
　　　　　　　　　　　　height:300px;width:300px;background-color:Blue;float:left;
　　　　　　　　　　}
　　　　　　　　　　.divText
　　　　　　　　　　{
　　　　　　　　　　　　height:300px;width:700px;background-color:Purple;float:left;
　　　　　　　　　　}

　　　　　　　　</style>

　　　　　　</head>

　　　　　　<body>

　　　　　　　　<div class="divIndex">

　　　　　　　　　　<div class="divLogo">
　　　　　　　　　　　　<img src="data:image/000.jpg" height="100px" alt="姊妹"/>
　　　　　　　　　　</div>
　　　　　　　　　　<div class="divContent">
　　　　　　　　　　　　<div class="divPicture"></div>
　　　　　　　　　　　　<div class="divText"></div>
　　　　　　　　　　</div>

　　　　　　　　</div>

　　　　　　</body>

　　　　</html>

CSS——标准盒子模型的更多相关文章

  1. CSS样式----盒子模型（图文详解）

    盒子模型 盒子中的区域 一个盒子中主要的属性就5个:width.height.padding.border.margin.如下: width:内容的宽度.CSS中 width 指的是内容的宽度,而不是 ...

  2. 深入理解CSS系列（一）：理解CSS的盒子模型

    接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...

  3. 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）

    这些HTML.CSS知识点,面试和平时开发都需要 No1-No4   系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...

  4. #CSS的盒子模型、元素类型

    CSS的盒子模型.元素类型   本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...

  5. 深入了解CSS中盒子模型

    CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...

  6. CSS3_标准盒子模型和怪异盒子模型

    #box{ width: 200px; height: 200px; background-color: pink; } 标准盒子模型 box-sizing: content-box; padding ...

  7. 使用css弹性盒子模型

    提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...

  8. CSS 弹性盒子模型

    CSS 弹性盒子模型 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/ CSS Flexible Box Layout Module Leve ...

  9. CSS之盒子模型

    CSS核心内容 源文件目录: D:\Users\ylf\Workspaces\MyEclipse 10 标准流 盒子模型 浮动 定位 标准流/非标准流: 标准流:就是普通的 非标准流:实际工作中要打破 ...

随机推荐

  1. Django框架----Web框架本质

    Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 半成品自定义web框架 impor ...

  2. 20180112final和static

    final关键字 fianl关键字可以修饰类.成员变量.和方法中的局部变量. (java中的局部变量?定义在方法中的变量都是局部变量,使用前必须初始化) 1.fianl类 Final类不能被继承,即可 ...

  3. Unable to load the Wrapper's native library because none of the following files及解决方法

    在有几个应用中,在启动的时候发现下列警告: The version of the script (3.5.29) doesn't match the version of this Wrapper ( ...

  4. c++中对应java ShutdownHook的退出处理器

    最近学习cpp(至于为什么,可参考http://www.cnblogs.com/zhjh256/p/6321972.html),c++标准库第二版5.8.2节的时候,发现c++有一个对应java Sh ...

  5. 01: html常用标签

    目录: 1.1 web开发的三把利器介绍 1.2 网页头部head标签中几个常用标签 1.3 html常用标签归类 1.4 input系列标签 1.5 HTML其他标签 1.1 web开发的三把利器介 ...

  6. C_Learning (4)

    / 预处理命令 / 宏定义 / 一般形式:#define 宏名 字符串 # 表示这是一条预处理命令 宏名是一个标识符,必须符合C语言标识符的规定 字符串可以是常数.表达式.格式化字符串等 / 注意: ...

  7. 集成利用tesseract.exe进行ocr

    ocr是一个宽泛的概念.市场上面ocr将一直是一个不断发展.需求强烈的方向. 我认为,从难度上区分,中文ocr难于英文ocr;手写ocr难于印刷ocr.所以两两组合,中文手写体最难(比如毛体,有一些人 ...

  8. 20145101《JAVA程序设计》课程总结

    每周读书笔记链接汇总 假期笔记 第1周学习总结 第2周学习总结 第3周学习总结 第4周学习总结 第5周学习总结 第6周学习总结 第7周学习总结 第8周学习总结 第9周学习总结 第10周学习总结 实验报 ...

  9. swift设计模式学习 - 策略模式

    移动端访问不佳,请访问我的个人博客 设计模式学习的demo地址,欢迎大家学习交流 策略模式 策略模式定义了算法家族,分别封装起来,让它们之间可以相互替换,此模式让算法的变化,不会影响到使用算法的客户. ...

  10. 2、extract-text-webpack-plugin提取Sass编译的Css

    cnpm install css-loader --save-dev    //css-loader 是将css打包进js cnpm install style-loader --save-dev   ...