盒子模型和透明度

2023-03-31 本文已影响0人宝子向前冲

盒子模型

介绍

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具有继承性，既作用于元素本身，也会使元素内的所有子元素具有透明度。