004 Python前端之CSS盒模型

标准盒模型

1. 最外层margin
2. 中间border
3. 内层padding
4. 最内层width + height

padding属性

Padding是设定页面中一个元素内容到元素的边框之间的距离。 也称补白

用法：
1）用来调整内容(子元素)在容器（父元素）中的位置关系
2）用来调整子元素在父元素中的位置关系。 注：padding属性需要添加在父元素上。
3）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉添加的padding值大小。

Padding属性值的四种方式

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

可单独设置某一方向填充      
上方向padding-top:10px;              
右方向pahdding-right:10px;      
下方向padding-bottom:10px;       
左方向padding-left:10px;
注意：padding值不允许是负值

padding区域在border与content之间；背景色和背景图像会覆盖padding和content组成的区域；

margin外边界

边界：margin,在元素外边的空白区域，被称为边距。

属性值的4种方式：  
四个值：上 右 下 左         {margin:10px  2px  4px   3px  ;}  
三个值：上    左右    下    {margin:2px   4px   6px;}  
二个值：上下   左右         {margin:2px   4px;}  
一个值： 四个方向           {margin:2px;}

可单独设置某一方向填充
上方向margin-top:10px;
右方向margin-right:10px;
下方向margin-bottom:10px;
左方向margin-left:10px;

border属性

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

网页中很多修饰性线条都是由边框来实现的。 边框三类属性：
边框宽度：border-width:
边框颜色：border-color:
边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)/none; *  

可单独设置一方向边框，

盒模型：Border的设置
1、border:dashed/solid/dotted/double（默认的边框宽度为中等(大约3px和4px之间)，默认的颜色为文字的颜色）
2、border-width:10px;(设置一个值时：四方向)
3、border-width:5px 10px(设置两个时：第一个值的是上下、第二个值是左右)
4、border-width:4px 10px 20px(设置三个值时：第一个值上，第二个值是左右，第三个指下；)
5、border-width:10px  5px  7px  8px ;（分别设置四个方向的边框宽度；）

盒子大小的计算

盒子实际占有宽度区域=margin-left + border-left + padding-left+width+padding-right+border-right+margin-right

盒子实际占有高度的区域=margin-top + border-top + padding-top + height + padding-bottom+ border-bottom + margin-bottom

文本属性

容器溢出

{overflow: visible/hidden/scroll}

visible:默认值，内容不会被修剪，会呈现在元素框之外;
hidden：内容会被修剪，并且其余内容是不可见的;
scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;

文本溢出

{text-overflow: clip  / ellipsis;}

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

省略号设置

text-overflow属性仅是：当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：
1、容器宽度：width：value；（px、%，都可以）
2、强制文本在一行内显示:white-space：nowrap;
3、溢出内容为隐藏：overflow：hidden;
4、溢出文本显示省略号：text-overflow：ellipsis;                       
注：必须是单行文本才能设置本文溢出！！！

怪异盒模型

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素

content-box
这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。

border-box
为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

举例
盒模型尺寸基准有两种，分别是默认的content-box和border-box

默认情况下我们代码中元素的是以content-box作为标准的盒子

content-box和border-box的主要区别是二者的盒子的宽度是否包含元素的边框和内边距。

html
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>

css
.box{width:100px;height:100px;background:red;border:5px solid yellow;padding:10px}

#box1{box-sizing:content-box}
#box2{box-sizing:border-box}