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. Java生成sitemap网站地图

    访问我的博客 sitemap 是什么?对应没有接触过网站 SEO 的同学可能不知道,这里引用一下百度站长的一段解释. Sitemap(即站点地图)就是您网站上各网页的列表.创建并提交Sitemap有助 ...

  2. leetcode — combination-sum

    import java.util.ArrayList; import java.util.Arrays; import java.util.List; /** * Source : https://o ...

  3. python练习五—简单web应用

    配置apache 我以前web开发基本都是基于java平台的,比如tomcat,servlet等等,由tomcat接收http请求,然后交给servlet处理,servlet处理完成以后把返回结果交给 ...

  4. Java基础系列--instanceof关键字

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/8492158.html instanceof关键字是在Java类中实现equals方法最常使 ...

  5. Spring的@Transactional事务注意事项

    1.@Transactional应该放在方法级别,不需要使用事务的方法,就不要放置事务,2.查询方法声明不要事务,否则对性能是有影响的.3.对同一个类里的方法调用, @Transactional无效 ...

  6. nginx支持跨域访问

    1,进入nginx的html目录 vim ./crossdomain.xml 具体路径: /usr/local/nginx/html/crossdomain.xml 2,在crossdomain.xm ...

  7. CentOS 7.0 上安装和配置 VNC 服务器

    作为一个系统管理员,大多数时间是通过网络管理服务器的.在管理服务器的过程中很少会用到图形界面,多数情况下我们只是用 SSH 来完成我们的管理任务.在这篇文章里,我们将配置 VNC 来提供一个连接我们 ...

  8. ProtoBuf使用指南（C++）

    ProtoBuf使用指南(C++) Created: Mar 12, 2019 6:47 PM Last Edited Time: Mar 22, 2019 1:51 PM 1.安装部署 去官网(gi ...

  9. Android Studio 学习（一）

    XML给元素定义ID 定义id android:id="@+id/button_1" 引用id id/id_name 解决Failed to load Appcompat Acti ...

  10. 让MySQL查询更加高效——对查询进行重构

    在优化有问题的查询时,目标应该是找到一个更优的方法获得实际需要的结果,而不是一定总是要求从MySQL获取一模一样的结果集 一个复杂查询还是多个简单查询 设计查询的时候一定需要考虑的问题就是,是否需要将 ...