盒子模型

盒子模型

一、基础概念

1、块与行的区别

1.1、块级元素

1. 总是在新行上开始。(独占一行)
2. 高度、行高以及外边距和内边距都可控制。
3. 宽度默认是它容器的100%，除非设定一个宽度。
4. 他可以容纳内联元素,内联块和其他块元素。

1.2、内联元素(行间元素)

1. 和其他元素在同一行内
2. 高，行高及外边距和内边距不可改变,就是内容的宽高
3. 宽度就是它的文字和图片的宽度，不可改变；
4. 可以设置margin-left和margin-right属性，无法设置margin-top和margin-bottom属性
5. border和padding可以设置，但是border-top和padding-top到页面顶部后就不再增加
6. 内联元素只能容纳文本,其他内联元素和内联块元素。

2、块级元素和行内元素之间的转换

1. 说明

   如果想要是他们之间进行转化,我们可以使用 display属性,

   块元素默认display:block；

   行内元素(a,span)默认为display:inline；

   行内块元素(input)默认为display:inline-block；

2. 转化

   1、display:none; 不显示该元素，也不会保留该元素原先占有的文档流位置。

   2、display:block;转换为块级元素。

   3、display:inline;转换为行内元素。

   4、display:inline-block;转换为行内块元素。

二、什么是盒子模型

2.1、定义

	网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式
	一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两方面来理解。一是理解一个孤立盒子的内部结构，二是理解多个盒子之间的相互关系。

1. 日常生活中的盒子

   

2.2、分类

1. 标准盒子模型

标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分

2. IE 盒子模型

IE 盒子模型的范围也包括 margin、border、padding、content

​和标准 W3C 盒子模型不同的是：IE 盒子 模型的 content 部分包含了 border 和 pading。

三、属性详解

1、元素内容（element content）

1.1、说明

就是盒子里的装的东西

1.2、相关属性

属性	描述
width	表示内容宽度
height	表示内容高度

1.3、 相关属性

可选值	描述
length	规定以具体单位计的固定的上内边距值，比如像素、英寸、毫米或 em等。默认值是 0px 。
%	定义基于父元素宽度的百分比上内边距。此值不会如预期的那样工作于所有的浏览器中。

1.4、示例代码

语法结构	描述
width:50px	内容的宽度50px(固定值)
height:50px	内容的高度50px(固定值)
width:10%	内容的高度10%(基于父类宽度)跟父类元素的宽度有关
height:10%	内容的宽度10%(基于父类高度度)跟父类元素的高度有关

2、边框（border）

2.1、说明:

表示元素的边线

2.2、语法格式

border : border-width border-style border-color

例如

border:1px solid #F00
设置边框1px宽、实线（solid）、红色（#F00）

2.3、常用属性总结

1. 边框宽度(border-width)

   属性	说明
   border	简写属性。作用是在一个声明中用来设置四个边框的所有属性
   border-top	简写属性。将所有用于上边框的属性设置于一个声明中。
   border-right	简写属性。将所有用于右边框的属性设置于一个声明中。
   border-bottom	简写属性。作用是在一个声明中用来设置下边框的所有属性。
   border-left	简写属性。用于在一个声明中设置左边框的所有属性。

2. 边框样式(border-style)

   可选值	描述
   none	定义无边框
   dotted	定义点状边框.在大多浏览器中显示是实线
   dashed	定义虚线。大多数浏览器中显示实线
   solid	定义实线
   double	定义双线 双线的宽度等于 border-width 的值

3. 边框颜色(border-color)

   可选值	描述
   color_name	规定颜色值为颜色名称的边框颜色（比如 red）。
   hex_number	规定颜色值为十六进制值的边框颜色（比如 #ff0000）。

3、内边距（padding）

1. 说明

   设置元素边框与元素内容之间的空白区域
   

2. 属性

   属性	描述
   padding	简写属性。作用是在一个声明中设置元素的所内边 距属性
   padding-bottom	设置元素的下内边距
   padding-left	设置元素的左内边距
   padding-right	设置元素的右内边距
   padding-top	设置元素的上内边距

3. 取值范围

   可选值	描述
   length	规定具体单位的内边距长度 比如像素、英寸、毫米或 em等
   %	基于父元素的宽度的内边距的长度
   auto	浏览器自动计算内边距

4. 示例代码

   语法结构	描述
   padding:10px	四个内边距都是10px
   padding:10px 20px	上下、左右内边距
   padding:10px 20px 30px	上、左右、下
   padding:10px 20px 30px 40px	上、右、下、左内边距（上开始，顺时针）
   padding-top:10px	上内边距10px
   padding-right:10px	右内边距10px
   padding-bottom:10px	下内边距10px
   padding-left:10px	左内边距10px

4、外边距（margin）

1. 说明

   围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的空白区域这个属性可以设置负值
   

2. 属性

   属性	描述
   margin	简写属性,设置所有外边距属性（跟padding写法一样）
   margin-bottom	设置元素的下外边距
   margin-left	设置元素的左外边距
   margin-right	设置元素的右外边距
   margin-top	设置元素的上外边距

3. 取值范围

   可选值	描述
   length	规定具体单位的内边距长度
   %	基于父元素的宽度的内边距的长度
   auto	浏览器自动计算内边距

4. 示例代码

语法	描述
margin-left:10px	左外边距
margin-right:10px	右外边距
margin-top:10px;	上外边距
margin-bottom:10px	下外边距
margin:10px	四边统一外边距
margin:10px 20px	上下、左右外边距
margin:10px 20px 30px	上、左右、下外边距
margin:10px 20px 30px 40px	上、右、下、左外边距

5. 注意:

   • 可以设置负值

   • 当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,firefox会把内层元素的margin-top作用于父元素。

   • 少于4个值规则

     如果缺少左外边距的值，则使用右外边距的值。
     如果缺少下外边距的值，则使用上外边距的值。
     如果缺少右外边距的值，则使用上外边距的值。

6. 示例代码

   1、行内元素之间的水平距离

   

   当两个行内元素并排紧邻时，它们之间的距离为margin-left和 margin-right之和。

   2、块级元素之间的竖直距离

   

   两个块级元素之间的距离不是margin-bottom与margin-top总和，而是 两者中的较大者。

   3、Margin可设置为负值

   当margin设为负数时，会使被设为负数的块向相反 的方向移动，甚至覆盖在另外的块上。

   <style type="text/css">
           #div1{
               height: 100px;
               width: 100px;
               background: blue;
           }
           #div2{
               background: hotpink;
               height: 100px;
               width: 100px;
               margin-top: -25px;
               margin-left: -25px;
           }
   </style>
   

   

5、总结

5.1pading与margin

1. 兄弟关系设置距离使用margin
2. 父子关系设置距离使用padding