CSS3-盒模型

来源：互联网发布：淘宝客推爆款方法编辑：程序博客网时间：2024/05/20 06:28

一.盒模型介绍

所谓的盒模型，是CSS中的一个重要的概念, 用来布局和设计页面。

由：margin(外边距)、border(边框)、padding(内边距)、content(内容),四部分组成。

Html的所有元素都可以当成盒子来对待

如下图

这里写图片描述

二. CSS3中对盒模型扩展

2.1 在css中影响盒子大小的因素：

我们知道在css中影响盒子大小的因素有border、padding、content.

margin只能改变盒子与盒子之间的距离，不会影响盒子大小

通过设置标签元素的width, height，改变的只是盒子中content的大小

盒子实际的width：

左边框 + 左内边距 + 内容宽度 + 右内边距 + 右边距

盒子实际的height：

上边框 + 上内边距 + 内容宽度 + 下内边距 + 下边距

如下图

这里写图片描述

2.2 css3中引入了box-sizing，来对盒子模型进行扩展

box-sizing有两个值：content-box 和 border-box

① content-box

盒子的实际宽度=width + 左右border + 左右padding之和

示例代码

<!DOCTYPE html><html><head>    <title></title>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <style>        /*② 设置盒子样式*/        div {            /*width height 设置的是content 的宽高*/            width: 300px;            height: 300px;            /*盒子与盒子之间的距离*/            margin: 0px;            /*设置边框*/            border: 10px solid black;            /*内边距*/            padding: 10px;            box-sizing: content-box;        }    </style></head><body>    <!--① 创建一个div盒子-->    <div></div></body></html>

效果

这里写图片描述

② border-box

盒子的实际宽度就等于设置的width值，通过改变border 和 padding 值，不会影响盒子的大小。

示例代码

<!DOCTYPE html><html><head>    <title></title>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <style>        /*② 设置盒子样式*/        div {            /*width height 设置的是content 的宽高*/            width: 300px;            height: 300px;            /*盒子与盒子之间的距离*/            margin: 0px;            /*设置边框*/            border: 10px solid black;            /*内边距*/            padding: 10px;            box-sizing: border-box;        }    </style></head><body>    <!--① 创建一个div盒子-->    <div></div></body></html>

运行效果

这里写图片描述

阅读全文

0 0