css盒模型只能应用于html,iframe，css样式表，盒模型的使用方法-2019年9月3日

实例演示:标签的使用

实例演示: css样式设置的优先级

实例演示: css的id, class与标签选择器的使用规则

实例演示盒模型的五大要素: width, height, padding, border, margin(margin可暂忽略)

(一)实例演示:标签的使用

iframe标签可以让我们在网页中再嵌套一个窗口进去，实现一个页面不同网站的效果。

实例

html>

iframe使用

iframe使用

百度地址

运行实例 »

点击 "运行实例" 按钮查看在线实例

(二)实例演示: css样式设置的优先级

css样式优先级为：内联样式>内部样式>外部样式

实例

html>

css设置优先级

/* 内部样式 */

p {

color: aqua

}

今天天气好好

运行实例 »

点击 "运行实例" 按钮查看在线实例

(三)实例演示: css的id, class与标签选择器的使用规则

选择器的优先级为：id>class>普通标签

实例

html>

选择器的使用

p {

color: blue;

}

.item2 {

color: brown;

}

#item1 {

color: blueviolet;

}

PHP中文网

PHP中文网

PHP中文网

运行实例 »

点击 "运行实例" 按钮查看在线实例

从上图可以看到，id的样式优先级大于class优先级，然后才到普通标签。

(四)实例演示盒模型的五大要素: width, height, padding, border, margin(margin可暂忽略)

width是宽度，height是高度，padding是内边距，margin是外边距，border是边框。透明看不见的只能设置宽度。比如padding,margin，能看得见的出了能设置宽度外，还能设置样式和颜色，比如说border。

实例

html>

盒子模型

span {

color: black;

background-color: red;

margin: 20px;

padding: 30px;

border: 2px solid black;

width: 300px;

height: 500px;

}

盒子模型

运行实例 »

点击 "运行实例" 按钮查看在线实例

由图中可以看出一个盒子模型的结构。最外面是margin，然后到border，然后是padding，再到content。