牛腩知识小结-盒子模型

 一，盒子模型 

网页设计中常听的属性名:内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模式都具备这些属性。

这些属性我们可以用日常生活中的常见事物--盒子作一个比喻来理解，所以叫它盒子模式。

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

 

首先解释一下概念：红色部分是你的操作区域（比如说一个文本框）。蓝色部分应该是我们的网页。

边框：border所在的区域是边框线条，有点粗，像区域了，但是他是边框。

内容：是1050*26那里，那里是内容部分。

内边距:内容到边框的距离。

外边距：边框到蓝色框的距离。

*CSS选择器优先级：ID选择器 >类选择器>HTML标签选择器

*CSS核心内容：标准流，盒子模型，浮动，定位。

1.边框

简单格式：

 border:1px solid #00F;（简写使这种格式，系统默认格式。）

1px：边框粗细为1像素

solid：线条样式

#00F：线条颜色

详细格式：

border-width: 1px;

 border-color: #ff0000;

 border-style: dotted;

二，内边距

简单

padding:5px,6px,7px,8px;（设置顺序是上，右，下，左 ，意思是上内边距为5，右内边距为6，以此类推）

详细

padding-top:5px;

padding-right:6px;

padding-bottom:7px;

padding-left:8px;

 

三，外边距

设置样式和内边距雷同。

 

四，相对定位和绝对定位

position:relative;  /*相对定位*/

left:20px;

相对位移是在你其他盒子的基础上来进行定位的。

  position:absolute;/*绝对定位*/

  top:20px;/*移位*/

绝对位移是以整个伟业为基准来进行定位的。