郑州做手机网站,做网站数据库表设计,全国企业查询系统,平潭县建设局网站盒模型
专栏持续更新中
盒子模型就是用来装 HTML 元素的盒子#xff0c;它用于描述一个装有 HTML 元素的矩形盒子。该模型包括边框#xff08;border#xff09;、内边距#xff08;padding#xff09;、内容#xff08;content#xff09;、外边距#xff08;margin…盒模型
专栏持续更新中
盒子模型就是用来装 HTML 元素的盒子它用于描述一个装有 HTML 元素的矩形盒子。该模型包括边框border、内边距padding、内容content、外边距margin、宽和高等属性下图显示了盒模型的结构。
各部分的功能如下表
区域功能内容区内容区在模型的中心包含了盒子内的信息也就是 HTML 元素。这些元素可以是文本、图片等。内边距内边距是内容区和边框之间的空间可以被看作是内容区的背景区域。边框边框用于标识盒子的边界介于内边距和外边距之间。外边距外边距位于边框外部是边框与周围之间的空间。
知识点 • padding • margin • border
border 属性
border 属性用于设置元素的边框属性其用法如下所示
border: border-width border-style border-color;属性值说明如下 • border-width是边框宽度宽度一般用数值即可。 • border-style是边框线的样式一般有 solid实线、dotted圆点、dashed虚线、double双横线。 • border-color是边框线的颜色。 border、border-width、border-style、border-color 都是复合属性我们也可以单独设置某条边框的样式。
例如border-color 可以写成 border-top-color: 上边框颜色; border-right-color: 右边框颜色; border-bottom-color: 下边框颜色; border-left-color: 左边框颜色;
举个例子新建一个 index.html 文件在其中写入以下内容
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestylep {border-top-style: solid;border-right-style: dotted;border-bottom-style: dashed;border-left-style: double;}/style/headbodyp在当今社会中Web 已经成为网络信息共享和发布的主要形式。 要想开发 Web应用系统就必须掌握前端技术。 本书从 HTML、CSS 和 JavaScript三个方面系统地介绍了 Web 前端开发。/p/body
/htmlpadding 属性
padding 属性是一个复合属性代表我们盒子模型中的填充也就是内容区域外部的空白区域。 其使用格式如下所示
padding: 上右下左;
padding-top: 顶部填充值;
padding-left: 左边填充值;
padding-right: 右边填充值;
padding-bottom: 底部填充值;新建一个 index1.html 文件在其中写入以下内容。
!DOCTYPE html
htmlheadstylep {border-top: thin solid red;border-right: medium dotted green;border-bottom: dashed thick blue;border-left: double 6px yellow;padding: 10px;}/style/headbodyp在当今社会中Web已经成为网络信息共享和发布的主要形式。要想开发Web应用系统就必须掌握前端技术。本书从HTML、CSS和JavaScript三个方面系统地介绍了Web前端开发。/p/body
/htmlmargin 属性
margin 属性是用来设置元素的外边距的。 其使用格式如下
margin: 上边距 右边距 下边距 左边距;也可以省略写 当左右边距值相同时写法如下
margin: 上边距 左右边距 下边距;当上下边距值相同左右边距值相同时写法如下
margin: 上下边距 左右边距;当上下左右边距值均相同时写法如下
margin: 属性值;从上面的内容我们可以看出 margin 属性是个复合属性我们可以分开设置上下左右的边距写法如下
/*上边距*/
margin-top: 属性值;
/*左边距*/
margin-left: 属性值;
/*右边距*/
margin-right: 属性值;
/*下边距*/
margin-bottom: 属性值;新建一个 index2.html 文件在其中写入以下内容。
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestylediv {width: 200px;height: 100px;border: 1px solid blue;}p {width: 100px;height: 50px;background-color: darkgrey;text-align: center;}/style/headbodydivp蓝桥云课/p/div/body
/html我们可以通过 margin 属性来改变 p 元素相对于 div 元素的位置。修改代码如下
p {width: 100px;height: 50px;background-color: darkgrey;text-align: center;margin: 25px 50px;
}
