css-盒模型及相关属性

一、 盒模型的概念和组成

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。
css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含：  外边距、边框、内边距、内容区，这就是盒模型。
margin  border  padding  content(width  height)

1） padding的使用方法

内边距：padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。

也称补白、填充。

用法：
1）用来调整内容在容器中的位置关系
2）用来调整子元素在父元素中的位置关系。
3）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding值。（width height-----容积）
4）支持背景

属性值的4种方式：
  四值法：上   右   下   左 {padding:10px   20px   30px    40px;}
  三值法：上    右左    下  {padding:10px   20px   30px ;}
  二值法：上下    右左      {padding:10px   20px  ;}
  一值法：四个方向 padding:2px;/*定义元素四周填充为2px*/

说明：可单独设置一方向填充（内边距），
如：padding-top:10px; 
padding-right:10px;
padding-bottom:10px;
padding-left:10px;

3） border的使用方法
  border:边框宽度 边框风格 边框颜色;
  例如：border:5px solid #f00

边框：border,网页中很多修饰性线条都是由边框来实现的。
边框宽度：border-width:
边框颜色：border-color:
边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)/double(双线)
可单独设置一方向边框，

如：border-bottom:边框宽度 边框风格 边框颜色;  底边框
border-left:      边框宽度 边框风格 边框颜色;  左边框
border-right:     边框宽度 边框风格 边框颜色;  右边框
border-top:       边框宽度 边框风格 边框颜色;  上边框

4） margin的使用方法
  边界：margin,在元素外边的空白区域，被称为外边距。

  属性值的4种方式： 
  四个值：上 右 下 左
  三个值：上 左右 下
  二个值：上下 左右
  一个值：四个方向 

margin:0 auto;/*定义元素上、下边界为0px，在浏览器中横向居中。

说明：可单独设置单一方向边界，
如：margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;

垂直外边距合并：垂直、相邻

（不论父子关系还是兄弟关系，都会发生合并，合并后取大的）

解决方案：子盒子添加浮动属性

二、写页面的注意事项：

任何线上案例都需要在书写css之前做3步准备工作；（作用：这3步准备工作可以让你在后期的代码当中省很多时间）

1.清空默认的边距和列表样式；

2.设置正文的全局样式----指的就是给body设置文字三属性；

3.设置超链接的默认样式；

总结：这是写任何网站都必须要设置的3步工作；

三、关于溢出:

1、溢出属性（容器的）

overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;

visible:  默认值，内容不会被修剪，会出现在元素框之外；

hidden：  内容会被修剪，并且其余内容是不可见的;

scroll：  内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;

auto：    如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;

inherit： 规定应该从父元素继承overflow属性的值。


2、文本溢出:text-overflow:clip/ellipsis

取值：

clip：不显示省略号（...），而是简单的裁切；
ellipsis：当对象内文本溢出时，显示省略标记；

说明：
text-overflow属性仅是...，当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：

1、容器宽度：width：value；
2、强制文本在一行内显示:white-space：nowrap；
3、溢出内容为隐藏：overflow：hidden；
4、溢出文本显示省略号：text-overflow：ellipsis；