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. [ASP.NET MVC]笔记（四） UnobtruSive AJAX和客户端验证

    UnobtruSive AJAX和客户端验证 ASP.NET MVC 已经默认开启非侵入试js和客户端验证,在web.config可以看到如下配置: <configuration> < ...

  2. Win32文件系统编程

    Win32文件系统编程 一丶了解什么是文件系统 文件系统是抽象的.是windows在软件层面提供的一层虚拟的数据结构. 文件系统分为NTFS 跟 FAT32. 具体看看两者的区别吧. 磁盘分区容量. ...

  3. 逆向知识第一讲,IDA的熟悉使用

    逆向知识第一讲,IDA的熟悉使用 一丶熟悉IDA,以及手工制作sig文件. IDA,静态分析工具,网上随便找一个即可下载. 首先,我们写一个可执行EXE,最简单的 使用IDA打开. 1.提示使用什么格 ...

  4. python datetime模块详解

    datetime是python当中比较常用的时间模块,用于获取时间,时间类型之间转化等,下文介绍两个实用类. 一.datetime.datetime类: datetime.datetime.now() ...

  5. jpa的查询语法

  6. 消息中间件RabbitMQ(一)

    1.消息中间件 消息队列中间件是指利用高效可靠地消息传递机制传递消息.有两种传递模式:点对点模式.发布/订阅模式.流行的消息中间件有RabblitMQ.Kafka.RockerMQ.它们都提供了基于存 ...

  7. ElasticSearch集群环境搭建

    一 .单机部署 1.下载安装包.解压 2.在window下运行bin/elasticsearch.bat 3.访问localhost:9200 页面显示结果 { "name" : ...

  8. 细说flush、ob_flush的区别

    ob_flush/flush在手册中的描述, 都是刷新输出缓冲区, 并且还需要配套使用, 所以会导致很多人迷惑… 其实, 他们俩的操作对象不同, 有些情况下, flush根本不做什么事情.. ob_* ...

  9. Javascript继承2：创建即继承----构造函数继承

    //声明父类 function SuperClass(id){ //值类型公有属性 this.id = id; //引用类型公有属性 this.books = ['Html','Css']; } // ...

  10. mybatis插件机制

    目录 mybatis插件机制 主要 类/接口 和 方法 mybatis插件机制实现 mybatis插件机制 mybatis的插件机制使用动态代理实现,不了解的朋友请先了解代理模式和动态代理:插件本质是 ...