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. HP-Socket v3.2.2

    ==========================================================================================v3.2.2 upg ...

  2. 新生命Redis组件（.Net Core 开源）

    NewLife.Redis 是一个Redis客户端组件,以高性能处理大数据实时计算为目标.Redis协议基础实现Redis/RedisClient位于X组件,本库为扩展实现,主要增加列表结构.哈希结构 ...

  3. 2016 ACM/ICPC亚洲区青岛站现场赛（部分题解）

    摘要 本文主要列举并求解了2016 ACM/ICPC亚洲区青岛站现场赛的部分真题,着重介绍了各个题目的解题思路,结合详细的AC代码,意在熟悉青岛赛区的出题策略,以备战2018青岛站现场赛. HDU 5 ...

  4. Perl的子程序

    子程序(subroutine) perl中的子程序其实就是自定义函数.它使用sub关键字开头,表示声明一个子程序 子程序名称有独立的名称空间,不会和其它名称冲突 Perl中的子程序中可以定义.引用.修 ...

  5. Go基础系列：struct的导出和暴露问题

    struct的导出和暴露问题 关于struct的导出 struct的属性是否被导出,也遵循大小写的原则:首字母大写的被导出,首字母小写的不被导出. 所以: 如果struct名称首字母是小写的,这个st ...

  6. 伪指令 ADR 与 LDR 的区别

    指令简介: adr r0, _start 得到的是 _start 的当前执行位置,由 pc+offset 决定 ldr r0, =_start 得到的是绝对的地址,链接时决定 程序示例: ldr r0 ...

  7. IE的浏览器模式、文本模式

    最近在部署网页的时候,发现IE下的布局完成混乱. 在改变IE的文本模式后,显示就正常了. IE的浏览器模式,用于切换IE针对该网页的默认文本模式.对不同版本浏览器的条件注释解析.决定请求头里userA ...

  8. 第一册：lesson thirty nine.

    原文: Don't drop it! A:What are you going to do with that vase,Penny? B:I am going to put it on the ta ...

  9. c# 破解谷歌翻译

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  10. 【模板小程序】任意长度非负十进制数转化为二进制（java实现）

    妈妈再也不用担心十进制数过大了233(注意只支持非负数) import com.google.common.base.Strings; import java.math.BigInteger; imp ...