1.盒模型

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　margin:外边距； margin-top /margin-right/margin-bottom/margin-left; 或者 margin:top right bottomleft;

　　border:边框；border-top /border-right/border-bottom/border-left; 或者 border:top right bottomleft;

　　padding:内边距；padding-top /padding-right/padding-bottom/padding-left; 或者 padding:top right bottomleft;

2.margin (外边距)

2.1margin作为外边距，因此我们可以通过调整margin的距离来改变元素的位置；

　　列：通过写 margin:auto 来实现让div居于整个页面中间；

　　　　　　　　　　　　　　　　　　　　

　　

  1. <!DOCTYPE html>
  2. <html>
  3. 　　<head lang="en">
  4.     　　<meta charset="UTF-8">
  5.     　　<title></title>
  6.     　　<style>
  7.             div{width:50px;height: 50px;background: yellow; margin: auto}
  8.         </style>
  9. </head>
  10. <body>
  11. 　　<div >
  12.     　　</div>
  13. </body>
  14. </html>

　　同样的我们也可以采用margin-top /margin-right/margin-bottom/margin-left;让元素居于想要的位置，但是要注意的是采用margin调整元素的位置会影响该元素后面的元素的位置；因此采用margin布局要特别注意不要影响后面的元素布局；

　　当我们将一个元素放到一个另一个元素中并且想通过使用margin来改变这个元素的布局，这个时候会发现如果直接使用margin会使父级元素同这个元素一起改变位置，但是父级元素的margin却没有发生改变；

　　列如：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .d1{width:300px;height: 300px;background: yellow; margin: auto}
  8.         .d2{width: 50px;height:50px;background: green;margin-top: 20px}
  9.     </style>
  10. </head>
  11. <body>
  12.         <div  class="d1">
  13.                 <div class="d2"></div>
  14.         </div>
  15. </body>
  16. </html>

　　为了使只改变你想要改变的位置却不改变父级元素的位置，使该元素脱离正常的文档流，这样改变位置的时候就不会影响父级元素了；

　　列如：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .d1{width:300px;height: 300px;background: yellow; margin: auto}
  8.         .d2{width: 50px;height:50px;background: green;margin-top: 20px;float:left;}
  9.     </style>
  10. </head>
  11. <body>
  12.         <div  class="d1">
  13.                 <div class="d2"></div>
  14.         </div>
  15. </body>
  16. </html>

　　如上的列子让d2浮动，这样脱离了文档流就可以改变d2的margin让d2的位置改变而父级d1的位置却不改变；

　　2.2应为margin可以为负的，因此有了负边距布局，

　　列：

　　

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         .center{
  12.             float: left;
  13.             width: 100%;
  14.         }
  15.         .main{
  16.             background: yellow;
  17.             margin: 0 210px;
  18.             height: 200px;
  19.         }
  20.         .left,.right{
  21.             width: 200px;
  22.             height: 200px;
  23.             background: blue;
  24.             float: left;
  25.         }
  26.         .left{
  27.             margin-left: -100%;
  28.         }
  29.         .right{
  30.             margin-left: -200px;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <div class="center">
  36.         <div class="main">
  37.             center
  38.         </div>
  39.     </div>
  40.     <div class="left">left</div>
  41.     <div class="right">right</div>
  42. </body>
  43. </html>

　　效果如图：改变窗口大小左右两边的蓝色框大小不变，中间的大小改变

　　　　　　　　　　　　　　　　　　

　　2.3 由于有了负边距的布局，有衍生出了圣杯布局：

　　　　列：

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.        *{
  8.            padding: 0;
  9.            margin:0;
  10.            text-align: center;
  11.            font-size: 1.2em;
  12.        }
  13.        .head{
  14.            width: 100%;
  15.            height: 50px;
  16.            background: #f50;
  17.         }
  18.        .body{
  19.            padding: 0 200px;
  20.        }
  21.        .center{
  22.            width: 100%;
  23.            height: 200px;
  24.            background: yellow;
  25.            float: left;
  26.        }
  27.        .left,.right{
  28.            width: 200px;
  29.            height: 200px;
  30.            background: blue;
  31.            float: left;
  32.            position: relative;
  33.        }
  34.        .left{
  35.            margin-left: -100%;
  36.            right: 200px;
  37.        }
  38.        .right{
  39.           margin-left: -200px;
  40.            left:200px
  41.        }
  42.         .foot{
  43.             clear: both;
  44.             width: 100%;
  45.             height: 50px;
  46.             background: #0ff;
  47.         }
  48.     </style>
  49. </head>
  50. <body>
  51.     <div class="head">
  52.         head
  53.     </div>
  54. <div class="body">
  55.     <div class="center">center</div>
  56.     <div class="left">left</div>
  57.     <div class="right">right</div>
  58. </div>
  59. <div class="foot">
  60.     foot
  61. </div>
  62. </body>
  63. </html>

　　如下图，具有与负边距布局相同的效果，改变窗口大小黄色区域改变大小，但是蓝色区域大下固定不变

　　　　　　　　　　　　　　

　　圣杯布局相对于负边距布局感觉两者的差别不大，圣杯布局的兼容性要比负边距布局更好。

3.border （边框）

　　用border绘制的图案：

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         #d1{
  8.             width: 0;
  9.             height: 0;
  10.             border:50px solid;
  11.             border-top-color: rgb(255, 11, 12);
  12.             border-right-color: rgb(56, 18, 255);
  13.             border-bottom-color: rgb(85, 255, 31);
  14.             border-left-color: rgb(255, 215, 28);
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div id="d1"></div>
  20. </body>
  21. </html>

　　通过对border的不同边设置不同的样式可以得到不同的图形：

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

4.padding （内边距）

　　　　通过调整内边距可以使内容与border之间有间隔，这一应用在文本输入框中很实用

　　列：

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         .t2{
  8.             padding-left: 16px ;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13. <input type="text" class="t1"/>
  14. <input type="text" class="t2"/>
  15. </body>
  16. </html>

　　样式：

　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　注意：当加入padding后会改变文本输入框的大小；

　　

　　

　　

CSS盒模型简单用法的更多相关文章

  1. CSS盒模型和文本溢出

    CSS盒模型和文本溢出 学习目标 认识盒子模型 盒子模型的组成部分 学习盒子模型的相关元素margin padding 文本溢出相关的属性 一.认识盒子模型 盒模型是css布局的基石,它规定了网页元素 ...

  2. 每日分享！介绍Css 盒模型！

    如何定义盒模型: 在CSS盒子模型理论中,页面中所有的元素都是看成一个盒子,并且还占据一定的空间. 一个页面是由很多这样的盒子组成的.这些盒子之间都会相会影响,因此我们掌握CSS盒模型相当重要.需要理 ...

  3. 4、css盒模型和文本溢出

    4:css盒模型和文本溢出 学习目标 1.认识盒子模型 2.盒子模型的组成部分 3.学习盒子模型的相关元素 margin padding 4.文本溢出相关的属性 一.css属性和属性值的定义 盒模型是 ...

  4. CSS盒模型

    CSS盒模型是CSS 可视化格式化系统的基石,它是理解样式表如何工作的核心概念.盒模型用于元素定位和页面布局.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘 ...

  5. 【前端盲点】DOM事件流论证CSS盒模型是否具有厚度

    前言 很久没有扯淡了,我们今天来扯淡吧. 我今天思考了一个问题,我们页面的dom树到底是如何渲染的,而CSS盒模型与javascript是否有联系,于是便想到一个问题: CSS的盒模型具有厚度么??? ...

  6. 尖刀出鞘的display常用属性及css盒模型深入研究

    一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...

  7. css盒模型和块级、行内元素深入理解

    盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...

  8. CSS盒模型和定位的类型

    此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...

  9. CSS盒模型（Box Model）

    阅读目录 1. 什么是CSS盒模型 2. IE盒模型和W3C盒模型 3. CSS3属性box-sizing 4. 关于盒模型的使用 在最初接触CSS的时候,对于CSS盒模型的不了解,撞了很多次的南墙呀 ...

随机推荐

  1. centos下 Apache、php、mysql默认安装路径

    centos下 Apache.php.mysql默认安装路径 http://blog.sina.com.cn/s/blog_4b8481f70100ujtp.html apache: 如果采用RPM包 ...

  2. PaaS平台资源

    http://www.vagrantup.com/ http://www.docker.com/

  3. jquery网页字体变大小

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. oracle中substr函数的用法

    1.substr(string string, int a, int b) 参数1:string 要处理的字符串 参数2:a 截取字符串的开始位置(起始位置是0) 参数3:b 截取的字符串的长度(而不 ...

  5. http://www.jobui.com/mianshiti/it/java/6782/

    1.运算符优先级问题,下面代码的结果是多少?(笔试) package test; public class Test {public static void main(String[] args) { ...

  6. 删除重复记录（Mysql,SqlServer,Sqlite）

    Mysql中有重复的数据: ) )> order by count() desc 删除一下吧: delete a from t_resource_apptype_releation as a, ...

  7. windows下安装，配置gcc编译器

    在Windows下使用gcc编译器: 1.首先介绍下MinGW MinGW是指仅仅用自由软件来生成纯粹的Win32可运行文件的编译环境,它是Minimalist GNU on Windows的略称. ...

  8. Ajax 无刷新在注册用户名时的应用的代码

    var xmlHttp; uName() //用户名失去焦点时 { if(all.uname.=="") { all.l1.innerHTML="不能为空!"; ...

  9. scenes & segues within storyboards

    Scenes Scenes in a storyboard represent content shown within one screen in your application. A scene ...

  10. Codeforces Round #338 (Div. 2) D. Multipliers 数论

    D. Multipliers 题目连接: http://codeforces.com/contest/615/problem/D Description Ayrat has number n, rep ...