1、CSS包含：标准文档流，浮动，绝对定位

标准文档流的特点：从上到下，从左到右，输出文档内容

盒子模型：块级元素（div ui li dl dt p）与行级元素（span strong img input）

盒子模型：边框（border）外边框（margin）内边框（padding）内容（content）

盒子3D模型：border、 content+padding 、background-img、background-color、margin

<html>

<head>

<style type="text/css">

.a{

    border:1px solid #CCC; padding: 30px 10px<!--第一个代表上下的距离，第二个代表左右的距离-->; width:225px;}

.b

{

    background:url(../../aaa/0044.jpg) repeat;}

</style>

</head>

<body>

<div class="a b"><img src="../../aaa/1026/aaa/201502161055436380.jpg" width="50">

        <img src="../../aaa/1026/aaa/201502161055561562.jpg" width="50">

        <img src="../../aaa/1026/aaa/201502161056148701.jpg" width="50">

        <img src="../../aaa/1026/aaa/201502161056243854.jpg" width="50">     </div>

</body>

</html>

2、网页自动居中

沿用上面的数据：

<html>

<head>

<style type="text/css">

*

{margin:0px;padding:0px;}

#warp

{<!--用warp包裹住整个页面，设置居中，则整个页面就居中-->

    border:1px solid #FF0; width:250px; margin:0 auto;<!--如果想让页面居中，当设置margin属性为auto时，不能设置浮动属性或者绝对定位属性；margin左右设置为auto，而且设置width为定值-->}

#header

{

    border:1px solid #0F0; width:100%<以warp规定的页面宽度为标准>; height:100px;<!--高度一般不写-->}

#mid

{

    border:1px solid #903; width:100%; height:100px;}

#foot

{

    border:1px solid #FF0; width:100%; height:100px;}

.a{

    border:1px solid #CCC; padding: 30px 10px; width:225px;}

.b

{

    background:url(../../aaa/0044.jpg) repeat;}

</style>

</head>

<!--页面分为上中下三部分 header是头 mid是中间 foot是结尾-->

<body>

<div id="warp">

    <div id="header"></div>

    <div id="mid">

        <div class="a b"><img     src="../../aaa/1026/aaa/201502161055436380.jpg" width="50">

        <img src="../../aaa/1026/aaa/201502161055561562.jpg" width="50">

        <img src="../../aaa/1026/aaa/201502161056148701.jpg" width="50">

        <img src="../../aaa/1026/aaa/201502161056243854.jpg" width="50"></div>

    </div>

    <div id="foot"></div>

</div>

</body>

</html>

3、float浮动与清除

特点：元素会左移或者右移直至碰到容器为止  ，设置了浮动的元素仍然会处于标准文档流之中

当元素没有设置宽度值而设置了浮动属性，元素的宽度随内容的尺寸变化而变化

当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特指紧邻其后的元素

清除浮动的方法：1、clear:both ;clear:left;clear:right

2、width:100%(或者固定宽度)+overflow:hidden

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>float浮动布局</title>

<style type="text/css">

.box1{

     height:50px; background-color:#3F9; float:left}

.box2{

     height:50px; background-color:#03C; float:right}

p

{

    clear:both;}

body

{

    font-size:12px; font-family:楷体;}

</style>

</head>

<body>

<div class="box1">fafhgdlfhdfui</div>

<div class="box2">方便哈收到部分速报给我个iehieghwgn</div><!--对p标签产生影响-->

<p>对公女uilr哦能女尼看了吗joeif奖我国偶就诶哦叫我人工湖给ibnethrhirsdv东方</p>

<div class="box2">方便哈收到部分速报给我个iehieghwgn</div>

<p >fbsdbvskkjfjk空间的不死哦该内容ngogiorg尽快公布日锅包肉ihb</p>

<div class="box1">fafhgdlfhdfui</div> 

</body>

</html>

4、横向两列布局

父元素没有浮动，而子元素中有浮动，则要从父元素中消除浮动，使用overflow

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>横向两列布局</title>

<style type="text/css">

*{ margin:0; padding:0;}

.warp{ background:#0F3; margin:0 auto; width:450px;}

.a{ background:#900; width:100%;}

.b{ background:#FF0; width:100%; overflow:hidden;}

.c{ background:#00F; width:100%;}

#left{ background:#FC0; width:280px; float:left;}

#right{ background:#666; width:150px; float:right;}

#le{ background:#0FF; width:250px; float:left; margin-top:15px;}

p{ clear:both;}

</style>

</head>

<body>

<div class="warp">

  <div class="a">头部</div>

  <div class="b">

    <div id="left">在那遥远的地方，有位好姑娘</div>

    <div id="right">不要问我从哪里来，也不要问我到哪里去，我像爱一阵风，人之所见，解=皆是我的栖所</div>

    <div id="le">你是风儿我是沙，缠缠绵绵永不分离</div>

  <p>主题内容</p></div>

  <div class="c">版权归属</div>

</div>

</body>

</html>

盒子模型、网页自动居中、float浮动与清除、横向两列布局的更多相关文章

  1. DIV+CSS 网页布局之：两列布局

    1.宽度自适应两列布局 两列布局可以使用浮动来完成,左列设置左浮动,右列设置右浮动,这样就省的再设置外边距了. 当元素使用了浮动之后,会对周围的元素造成影响,那么就需要清除浮动,通常使用两种方法.可以 ...

  2. float浮动与清除浮动

    浮动: 浮动的框可以左右移动,直到它的边缘碰到包含框或另一个浮动框的边框为止.文档的普通流中的块框会当浮动框不存在一样.但会影响内联框(通常是文本)的排列. 属性值有:left,right,none; ...

  3. 两列布局（浮动、定位、flex）和三列布局（圣杯、双飞翼、flex）

    demo 各种布局演示 https://jsfiddle.net/mayufo/qp890peq/1/ 两栏布局 浮动 <div class="box1"> <d ...

  4. 用css、html编写一个两列布局的网页，名称为css.html ，要求左侧宽度为200px ，右侧自动扩展

    <body><div style=" float:left; width:200px; height:300px; border: 1px #0033FF solid;&q ...

  5. 浮动和margin负值 三列布局

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. CSS属性之float浮动属性

    float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. float有四个属性 ...

  7. 溢出处理、盒子模型、背景图片、float（浮动）

    一.overflow:溢出内容的处理     overflow:hidden;  溢出内容隐藏(在父元素内使用,可以清除子元素浮动对父元素的影响)    overflow:auto; 自动滚动(有溢出 ...

  8. HTML网页设计基础笔记 • 【第7章 盒子模型】

    全部章节   >>>> 本章目录 7.1 盒子模型原理 7.1.1 盒子模型概述 7.1.2 盒子的大小 7.1.3 盒子之间的关系 7.2 标准文档流 7.2.1 标准文档流 ...

  9. IT兄弟连 HTML5教程 使用盒子模型的浮动布局

    虽然使用绝对定位可以实现页面布局,但由于调整某个盒子模型时其他盒子模型的位置并不会跟着改变,所以并不是布局的首选方式.而使用浮动的盒子模型可以向左或向右移动,直到它的外边缘碰到包含它的盒子模型边框或另 ...

随机推荐

  1. linux常用命令学习笔记

    1.top命令 作用:该命令可以按CPU使用.内存使用和执行时间对任务进行排序,常用来监控系统中占用CPU或内存较高的程序及CPU和内存的负载. 默认视图: 当想看系统负载时,可观察汇总的%CPU中的 ...

  2. 解读经典《C#高级编程》第七版 Page32-38.核心C#.Chapter2

    前言 接下来讲讲预定义数据类型.关于数据类型,其实是非常值得透彻研究的. 01 预定义数据类型 值类型和引用类型 C#将把数据类型分为两种,值类型和引用类型,值类型存储在堆栈上,引用类型存储在托管堆上 ...

  3. GNU C 与 ANSI C（下）

    1. 语句表达式 GNU C 把包含在括号中的复合语句看做是一个表达式,称作语句表达式,它可以出现在任何允许表达式的地方.我们可以在语句表达式中使用原本只能在复合语句中使用的循环.局部变量等,例如: ...

  4. Python系列：一、Python概述与环境安装--技术流ken

    Python简介 Python是一种计算机程序设计语言.是一种动态的.面向对象的脚本语言,最初被设计用于编写自动化脚本(shell),随着版本的不断更新和语言新功能的添加,越来越多被用于独立的.大型项 ...

  5. python中的模块和包

    模块 一 什么是模块 模块就是一组功能的集合体,可以通过导入模块来复用模块的功能. 比如我在同一个文件夹定义两个.py文件,分别命名为A.py和B.py,那么可以通过在A文件里通过import B来使 ...

  6. backbond Model实现

    backbond中的M,指的是模型,即存放数据以及数据相关逻辑的单位.在分析其结构之前,先看一下其调用过程. <script> (function ($) { World = Backbo ...

  7. L1与L2损失函数和正则化的区别

    本文翻译自文章:Differences between L1 and L2 as Loss Function and Regularization,如有翻译不当之处,欢迎拍砖,谢谢~   在机器学习实 ...

  8. NPOI导出EXCEL报_服务器无法在发送 HTTP 标头之后追加标头

    虽然发表了2篇关于NPOI导出EXCEL的文章,但是最近再次使用的时候,把以前的代码粘贴过来,居然报了一个错误: “服务器无法在发送 HTTP 标头之后追加标头” 后来也查询了很多其他同学的文章,都没 ...

  9. mvc 中合并两个list集合

    有时候,在进行查询操作的时候需要将从数据库中查询的两张表进行合并,成为一张表然后返回给前端.或者在原有的一张表基础上面加几个新的字段. 这个时候可以新建一个.class[model类],在这个新建的m ...

  10. java过滤器(过滤器排序)

    java过滤器(过滤器排序) 定义过滤器顺序是很简单的:匹配请求的过滤器将按照它们出现在部署描述符或者编程式配置中的顺序添加到过滤器链中(记住,如果同时再部署描述符或者编程式配置中设置了一些过滤器,那 ...