CSS之盒子（Box）模型

Css盒子模型

学习Css盒子模型，首先就要知道Css块级元素和内连元素

块级元素：就是我们写的各个的代码块，<h1>...<h6>、<p>、<div>等。

内连元素：<span>、<a>、<strong>等

内连元素是可以包含于块级元素里面的，也就是成为一个子元素。

 

盒子模型的本质上是一个盒子，封装着周围的HTML元素，他包括：边框，边距，填充和实际内容。

 

外边框（Margin）：清除边框外的区域，外边框是透明的；

边框（Border）：围绕在内边框距和内容外的边框；

内边距（Padding）：清除内容周围的区域，内边距是透明的；

内容（Content）：盒子里面的内容，显示文本和图像。

我们在设置边框（Border）的时候，主要对他的宽度，颜色，样式等进行设计。

Border-width设置的是边框的宽度

Border-color 设置的是边框的颜色

Border-style 设置的是边框的样式（solid实线、dashed虚线、dotted点状线等等样式）

在设计边框的时候，我们还有一个简写属性，那就是把所有的边框属性都写在Border里

如：Border: 1px solid blue;

表示边框宽度为1像素，实线，蓝色；

也可以对边框的四条边分别设置：

(上)Border-top-(width、style、color):......

(右)Border-right-(width、style、color):......

(下)Border-bottom-(width、style、color):......

(左)Border-left-(width、style、color):......

也可以使用简写属性：Border-top: width  style  color;

外边框的设置语法也基本差不多，只是把Border换成Margin而已；

Margin也有简写属性：Margin: - - -;

设置Margin时有一个妙用，那就是网页居正对齐可以使用Margin:0  auto; 直接设置。

还有当两个垂直外边距相遇时，外边距为两者高度中的较大者。

Padding 设置语法也基本一致；还有盒子内宽度=width+padding-left+padding-right;

 

Border 和 Margin的简写设置样式也和Padding一样，都是顺时针走向的。

   我们对盒子的操作，主要就是对.css文件的操作，我们输入的文本内容是不变的，但是通过这些操作，就可以把同样的内容设置成自己想要的样式！