盒子模型
介绍
CSS盒模型本质是一个盒子，由边距、边框、填充和实际内容组成。
CSS盒模型分为两种：标准盒模型、IE盒模型（也称为怪异盒模型）。
两种盒模型的区别在于他们的总宽度的计算公式不一样。
在文档首部加了 <!Doctype html>声明，即使用标准盒模型，若不加，则会由浏览器自己决定。
标准盒模型
width = 内容（content）的宽度
height = 内容（content）的高度
总宽度：width + margin（左右） + padding（左右） + border（左右）
总高度：height +margin（上下） + padding（上下） + border（上下）
增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
IE盒模型（怪异盒模型）
width = border + padding + 内容（content）的宽度
height = border + padding + 内容（content）的高度
总宽度：width + margin（左右）（即 width 已经包含了 padding 和 border）
总高度：height + margin（上下）（即 height 已经包含了 padding 和 border）
设置 padding 、border 后，真正宽度或高度就会改变。
box-sizing
CSS 中的 box-sizing 属性定义了 user agent（用户计算机程序）应该如何计算一个元素的总宽度和总高度。
属性值：border-box（IE盒模型）、content-box（标准盒模型）
盒子透明度
1.rgba()设置颜色透明度
使用rgba()设置颜色透明度，语法“background:rgba(R,G,B,A)”；
rgba（)里的值的介绍：
R：红色值。正整数 （0~255）
G：绿色值。正整数 （0~255）
B：蓝色值。正整数（0~255）
A：透明度。取值0~1之间
rgba()只是单纯的可以设置颜色透明度，这样在页面的布局中有很多应用。比如说：让背景出现透明效果，但上面的文字不透明。
2.opacity属性设置背景透明度
使用opacity属性设置背景透明度，语法“opacity: 透明值;”，取值范围“0.0~1.0”。
opacity:value;
value：指定不透明度，从0.0（完全透明）到1.0（完全不透明）。
opacity属性具有继承性，会使容器中的所有元素都具有透明度；
总结： rgba()方法与opacity方法虽然都可以实现透明度效果，但rgba()只作用于元素的颜色或其背景色（设置了rgb(）透明度元素的子元素不会继承其透明效果）；而opacity具有继承性，既作用于元素本身，也会使元素内的所有子元素具有透明度。
网友评论