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. HTTP的基本原理

    用户访问万维网文档,万维网文档之间的链接以及万维网文档中数据传送到用户计算机,这些功能的实现都是由超文本传输协议 HTTP(HyperTextTransfer Protocol) 负责完成的. HTT ...

  2. 通过keras例子理解LSTM 循环神经网络(RNN)

    博文的翻译和实践: Understanding Stateful LSTM Recurrent Neural Networks in Python with Keras 正文 一个强大而流行的循环神经 ...

  3. 让Python代码更快运行的 5 种方法

    不论什么语言,我们都需要注意性能优化问题,提高执行效率.选择了脚本语言就要忍受其速度,这句话在某种程度上说明了Python作为脚本语言的不足之处,那就是执行效率和性能不够亮.尽管Python从未如C和 ...

  4. Angular2入门：TypeScript的类 - 参数属性：定义和初始化类成员

  5. C#多线程的几种方法详解示例

    这里主要介绍了c#使用多线程的几种方式,通过示例学习c#的多线程使用方式,大家参考使用吧! 1 进程.线程.同步.异步的概念 2 回顾委托,开始异步 3 异步多线程的三大特点 异步多线程都觉得很厉害, ...

  6. [android] 利用广播实现ip拨号

    广播接收者,broadcast receiver,安卓系统在使用时会产生很多的事件,比如:短信到来,电量低,拨打电话等等 界面布局,线性布局,EditText指定为电话号码,设置属性android:i ...

  7. 关于laravel5 消息订阅/发布的理解初

    laravel5.4感觉官网文档说滴不够详细...安装predis官网很详细,这里略过.... 生成命令 直接使用 Artisan 命令 make:command,该命令会在 app/Console/ ...

  8. [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数

    [js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...

  9. 浅谈JS中String()与 .toString()的区别

    我们知道String()与 .toString()都是可以转换为字符串类型,但是String()与 .toString()的还是有区别的 1..toString()可以将所有的的数据都转换为字符串,但 ...

  10. Chrome 开发者工具

    打开开发工具 (1)在Chrome菜单中选择 更多工具 > 开发者工具. (2)在页面元素上右键点击,选择 "检查". (3)使用快捷键 Ctrl+Shift+I (Wind ...