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. 搭建MySQL MHA高可用

    本文内容参考:http://www.ttlsa.com/mysql/step-one-by-one-deploy-mysql-mha-cluster/ MySQL MHA 高可用集群 环境: Linu ...

  2. MySQL 安装和启动服务，“本地计算机 上的 MySQL 服务启动后停止。某些服务在未由其他服务或程序使用时将自动停止。”

    MySQL 安装和启动服务,以及遇到的问题 MySQL版本: mysql-5.7.13-winx64.zip (免安装,解压放到程序文件夹即可,比如 C:\Program Files\mysql-5. ...

  3. UIWebView显示乱码问题

    今天有人问Swift中UIWebView加载页面出来的是乱码,问知道怎么解决么? OC我知道肯定不会有乱码问题,Swift就不知道了,因为没有试过.....于是...我自己动手试试啦... OC和Sw ...

  4. 解决跑twoBitToFa时出现“/admin/exe/linux.x86_64/twoBitToFa: Permission denied”的问题

    出现这种问题时,一般要加上以下命令: chmod ugo+x ./admin/exe/linux.x86_64/twoBitToFa 运行成功后,再将twobit格式转化为fa格式 ./admin/e ...

  5. 第七章 consul docker集群

    --net=host:运行consul的docker镜像必须带有的参数,因为consul的consensus和gossip协议对于网络的延迟和丢包很敏感,所以引入额外的其他网络类型的层是不可取并且不必 ...

  6. C++基础-01

    指针 - 指针的基本操作间接引用指针所指向的对象 - 机器一般按字节寻址,所以能够独立分配的最小空间是1字节,也就是说指针指向的 最小空间为1字节.特别地,对于bool变量,虽然实际需要的是1bit, ...

  7. csrf跨站请求伪造

    如何杜绝跨站请求伪造? 1.要让服务器知道本次请求是不是冒用了用户的身份→ 2.服务器发给用户一个凭证,用户请求时需携带此凭证→ 3.此凭证只能用户看到而且冒用者看不到→ 4.这就用到了浏览器的安全机 ...

  8. KVC

    KVC可以修改私有的属性,估计也是底层 操作的.

  9. python操作系统环境变量

    获取整个系统变量的方法是os.environ,这是一个os的class类型,使用的时候可以转换为字典类型 environ_value = dict(os.environ) 这样就可以看所有的key,e ...

  10. SQL Server 常用函数

    1.DATEADD 在向指定日期加上一段时间的基础上,返回新的 datetime 值. 语法 DATEADD ( datepart , number, date ) 参数 datepart 是规定应向 ...