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. Centos 7U盘安装

    1. 8G U盘 老毛桃软件 centos 7 everything.iso 7.4G左右 2.遇到问题 安装一刚开始 报错 unexpected exception  attribute error ...

  2. JavaIO之File类

    Java-IO之File类 Java-IO之File类 1. File类 1.1. File类说明 1.2. 体验 File 类 1.3. 构造一个 File 类实例: 1.4. 路径: 1.4.1. ...

  3. NSURLCache详解和使用

    使用缓存的目的是为了使应用程序能更快速的响应用户输入,是程序高效的运行.有时候我们需要将远程web服务器获取的数据缓存起来,以空间换取时间,减少对同一个url多次请求,减轻服务器的压力,优化客户端网络 ...

  4. MySQL出现Access denied for user 'root'@'%' to database 'netai_test'问题

    访问数据库时报错信息 Access denied for user 'root'@'%' to database 'netai_test' 原因:这是由于创建数据库后没有对用户授权,使用户可以访问数据 ...

  5. struts2配置文件中Action中的各属性的含义

    StrutsApacheBeanJSPServlet attribute:      这个属性用来指定ActionForm保存到指定上下文时所使用的属性名.如果不指定attribute属性的值,将使用 ...

  6. at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)

    控制台包空指针后跟这个异常,是因为控制层调用service时的失败,无法读到sql,问题在于controller在引入的service没有自动装配,在引入多个service时,每个service都要自 ...

  7. logback 常用配置详解（二） <appender>

    logback 常用配置详解(二) <appender> <appender>: <appender>是<configuration>的子节点,是负责写 ...

  8. Android学习---通过内容提供者(ContentProvider)操作另外一个应用私有数据库的内容

    一.什么是ContentProvider? ContentProvider直译过来就是内容提供者,主要作用就是A应用提供接口给B应用调用数据,和之前介绍的sharedPreference和直接开放文件 ...

  9. hdu 5877 (dfs+树状数组) Weak Pair

    题目:这里 题意: 给出一个n个结点的树和一个数k,每个结点都有一个权值,问有多少对点(u,v)满足u是v的祖先结点且二者的权值之积小于等于k. 从根结点开始dfs,假设搜的的点的权值是v,我们需要的 ...

  10. grunt配置太复杂？使用Qbuild进行文件合并、压缩、格式化等处理

    上次简单介绍了下Qbuild的特点和配置,其实实现一个自动化工具并不复杂,往简单里说,无非就是筛选文件和处理文件.但Qbuild的源码也并不少,还是做了不少工作的. 1. 引入了插件机制.在Qbuil ...