CSS盒模型是CSS 可视化格式化系统的基石，它是理解样式表如何工作的核心概念。盒模型用于元素定位和页面布局。
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：
* {
margin: 0;
padding: 0;
}
基本语法格式: <style type="text/css">
div{
width: 300px;
height: 300px;
border: 1px solid black;
border-bottom: 50px solid red;
border-left:50px solid blue ;
border-right: 50px solid pink;
border-top: 50px solid yellow;

}
</style>
<body>
<div>
我是盒子
</div>
通过上述的代码可以得到一个最基本的盒子模型
二 、内边距padding
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性

CSS padding 属性定义元素边框与元素内容之间的空白区域
padding的使用下面四个单独的属性，分别设置上、右、下、左内边距：
padding-top
padding-right
padding-bottom
padding-left
切记padding的赋值不能为负数
例:
padding: 10px;//四个方向
padding: 10px 20px; //上下 左右
padding: 10px 20px 30px;//上 左右 下
padding: 10px 20px 30px 40px;//上 右 下 左
padding-bottom: 40px;
padding-left: 20px;
padding-right: 30px;
padding-top: 10px;
padding: 0 20px;
margin: 50px;
三 、边框border
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线
切记border的赋值可以为负数
Border常用属性border-style,boder-width,border-color
例:
div{
width: 300px;
height: 300px;
border: 1px solid black;
border-bottom: 50px solid red;
border-left:50px solid blue ;
border-right: 50px solid pink;
border-top: 50px solid yellow;

}
制作三角形的小技巧:如果将width 和height改为0,并选择border-left, border-right, border-top的颜色为透明,则会显示一个三角形。

四、外边局合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
例：<style type="text/css">
.div1,.div2{
width: 100px;
height: 100px;
border: 1px solid blue;
}
.div1{
margin-bottom: 100px;
}
.div2{
margin-top: 50px;
}

</style>
<body>
<div class="div1">篮球</div>
<div class="div2">足球</div>
</body>
结果显示为篮球和足球的外边距为100px，取了较大值作为连个边框的距离。
五、布局
默认的浏览器中，文档的布局是将文件元素从上到下、从左到右的格式布局，块级元素从上到下，行内元素从左到右依次排列。
例：<style type="text/css">
.out{
width: 1000px;
height: 150px;
border: 1px solid red;
margin: 50px 50px;
}
.in{
height: 120px;
background: green;
padding:10px;
}
</style>
<body>
<div class="out">
<div class="in">内容</div>
</div>
结果显示为in的框套在out框的里面，切in在没有写入width的情况下，默认与其父级元素的width一致
六、CSS 定位机制
CSS块级元素和行内元素的转换
div{
display:none 不显示
display:block 1.转换为块级元素2.显示
display:inline 转换为行内元素
display:inline-block 不常用
}
CSS 有三种基本的定位机制：普通流、浮动和绝对定位
CSS positon属性
static 静态的
relative 相对(偏移)
absolute 绝对(脱离)
fixed 固定(脱离)
例:.left,.middle,.right{
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
}
.middle{
/*//相对定位*/
position:relative;
top: 50px;
left: 50px;
/*//绝对定位*/
position: absolute;
top: 50px;
left: 50px;
}
.out{
padding: 100px;
border: 1px solid red;
height: 300px;
position: relative;
}
<body>
<div class="out">
<div class="left">左</div>
<div class="middle">中</div>
<div class="right">右</div>
</div>
</body>
相对定位:框子转移后,原来的位置没有被占有.
绝对定位:框子转移后,原来的位置被占有且相对最初的包含块来定位完后成为一个块级元素.
固定定位
可以用于网页两边的固定栏
例：<style type="text/css">
.left,.right{
width: 100px;
height: 100px;
border: 1px solid black;
}
.left{
float: left;
position: fixed;
top: 100px;
left: 0;
}
.right{
float: right;
position: fixed;
bottom: 100px;
right: 0;
}

</style>
结果显示为左右两个不动的框
CSS水平和垂直居中的几种实现方法
水平居中：text-align,margin 0 auto,定位
垂直居中：line-height，vertical-align，margin,定位
CSS浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，它会脱离文档流
语法规则：.left,.middle,.right{
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
}
.middle{
clear: both;
}
其中clear以清除元素为中心，将后面的元素换行，拉倒其后面

CSS盒模型的更多相关文章

  1. 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

    概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...

  2. 第 16 章 CSS 盒模型[下]

    学习要点: 1.元素可见性 2.元素盒类型 3.元素的浮动 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一．元素可见性 使用 vis ...

  3. 第 16 章 CSS 盒模型[上]

    学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一．元素尺寸 C ...

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

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

  5. [k]css盒模型

    box-sizing :  content-box || border-box || inherit 1.content-box:此值为其默认值.元素的宽度/高度(width/height)等于元素边 ...

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

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

  7. 7.css盒模型

    所谓的盒模型,其实就是把元素当成盒子,元素里的文本就是盒子里的东西. 而根据元素的特效,其盒模型的特效也不同,下面是一些总结: 1.块级元素(区块) 所谓块级元素,就是能够设置元素尺寸.有隔离其他元素 ...

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

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

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

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

随机推荐

  1. 自用debug单元

    将之前的内存查看单元小幅修改,加上文件操作和计时,组成了一个自用debug单元,使用方法如示例. 此单元便捷之处在于直接将#define DEBUG注释掉而无需改动源码,即可取消debug模式. #d ...

  2. iOS常用网络库之AFNetWorking

    简介 ​     `AFNetworking`是iOS开发网络API中最常用的第三方库,`github`中的`star`数充分说明了它在iOS开发中第三方库中的江湖地位  github地址:[AFNe ...

  3. java_method_stringUtils

    /** * 字符串英文单双引号处理,将中英文引号转为中文的引号 * @param temp * @return */ public static String getStringDatabase(St ...

  4. Xcode导航栏不显示模拟器选择框ToolBar

    不显示ToolBar的小伙伴可能就是下面的样子: 全屏后就可以看到ToolBar,像下面这样: 刚开始还以为是模拟器没装,还傻不拉几的去下载模拟器,后来才发现,只要下面的操作即可显示 点击" ...

  5. Git查看、删除、重命名远程分支和tag(转)

    转:http://zengrong.net/post/1746.htm 这篇文章记录我在使用git的过程中碰到远程分支和tag的相关内容,提纲: 查看远程分支 删除远程分支和tag 删除不存在对应远程 ...

  6. 自定义刻度的SeekBar

    <com.imibaby.client.views.CustomSeekbar android:id="@+id/myCustomSeekBar" android:layou ...

  7. Miller_Rabin素数测试

    #include<iostream> #include<cmath> #include<cstdio> #include<cstring> #inclu ...

  8. Nginx-->基础-->理论-->nginx进程模型

    一.nginx的进程模型基础 如上图,是nginx的基本进程模型. 1.nginx的master进程与worker进程关系 nginx的master进程负责worker进程的管理,包括创建worker ...

  9. sk_buff封装和解封装网络数据包的过程详解（转载）

    http://dog250.blog.51cto.com/2466061/1612791 可以说sk_buff结构体是Linux网络协议栈的核心中的核心,几乎所有的操作都是围绕sk_buff这个结构体 ...

  10. Git 在团队中的最佳实践--如何正确使用Git Flow[转]

    原文地址:http://www.cnblogs.com/cnblogsfans/p/5075073.html Git的优点 Git的优点很多,但是这里只列出我认为非常突出的几点. 由于是分布式,所有本 ...