-
什么是盒模型?
盒模型(box moldel),是w3c规定一个浏览器如何渲染,显示一个元素,根据元素的种类分为块级元素盒模型和行内元素盒模型 -
标准盒模型
—width/height (content box 内容区)
块级元素的width和height值在标准和模型下,定义了一个块级元素能够存放内容的区域大小,元素的内容从width和height的左上角原点开始排列内容
—border (border box 边框区)
border-color:颜色; 默认与color样式一致/颜色值: 十六进制,rgb,关键字,transparent [ 透明的(使用父元素的颜色)]/
border-style:种类; 默认是none就是没有边框/*dotted 圆点边框, double 双边框; dashed 虚边框; solid 实线边框 */
块级元素的border的作用是在元素的内容区外加上一个边框线
边框样式为:border:宽度 种类 颜色;./复合写法/
—border (border box 边框区) 详解
元素的边框可以单独给某一个方向设置
例: 顶部边框: border-top:宽度 种类 颜色;
底部边框: border-bottom:宽度 种类 颜色;
左边边框: border-letf:宽度 种类 颜色;
右边边框: border-right:宽度 种类颜色;
—padding (padding box 内边距区)
块级元素的padding的作用是在元素的内容区与边框线之间加一个内部边距,用来隔开元素内容和边框线,使得元素内容更加突出明显,默认情况下,padding区域的颜色和内容区的颜色保持一致
padding也可以单独设置四个方向不同的值,具体的概念与border相似
—标准盒模型的整体概念
块元素在网页内容中实际占据空间的大小是:
实际占据宽度=width+左padding+右padding+左border+右border
实际占据高度=height+上padding+右padding+左border+右border
标准盒模型
最新推荐文章于 2024-08-02 22:44:35 发布