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

实例演示:标签的使用

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

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

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

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

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

实例

html>

iframe使用

百度地址

运行实例 »

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

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

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

实例

html>

css设置优先级

/* 内部样式 */

p {

color: aqua

}

今天天气好好

运行实例 »

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

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

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

实例

html>

选择器的使用

p {

color: blue;

}

.item2 {

color: brown;

}

#item1 {

color: blueviolet;

}

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。

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

2019年5月1日起安卓应用应基于API 26开发
2019年5月1日起安卓应用应基于API 26开发,那么API等级是啥? 2018-7-23 16:58:10来源:新浪科技作者:晨光责编:守一/实习评论:199 据泰尔终端实验室公众微信号报道,20 ...
2019年6月20日工作总结---CSS篇
1.:webkit-scrollbar 自定义滚动条的样式(缺陷对Firefox和IE不支持) 实例: 属性: ::-webkit-scrollbar 解决了把bar本身的背景.它通常由 ...
把css样式表与html网页关联的方法,Dreamweaver 教程-CSS样式表的3种关联方法
下面我们来讲讲如何为一个网页添加CSS样式. 内部样式表内部样式表需要在网页的部分定义,格式如下: 行内样式表(内嵌样式表) 它的使用方法我们在前两节也已经使用过了.行内样式表直接在标签内部定义, ...
2021-04-03 Web前端之CSS——选择器、字体属性、文本属性、样式表
视频课程:黑马程序员Pink老师笔记: 选择器以及一条或多条声明写在<head><style>之间</style></head> font-size ...
css语法，常用css语法，内部样式表，外部样式表，内联样式表, 样式优先级问题
1.css语法: 2.css常用属性: 3.内部样式表: 在head标签中书写style标签,然后在style标签中书写css,style标签具有type属性,属性值为"text/css&q ...
html after 只能应用于p标签吗,css after是什么意思？
after是CSS的一种伪元素(选择器).:after选择器在被选元素的内容后面插入内容,需要使用content属性来指定要插入的内容.下面本篇文章就来给大家介绍一下CSS :after选择器,希望对 ...
php如何使用遮罩,CSS绝对定位实现窗口遮罩功能:2019年1月15日作业
CSS绝对定位实现窗口遮罩功能: 这是HTML代码部分实例 html> 绝对定位之遮罩用户登录窗口用户名: 密码: 登录运行实例 » 点击 "运行实例" 按钮查看在线 ...
简述html 布局的原理,css布局原理与实现-2019年9月4日20时
1.实例演示如何消除子元素浮动造成父元素高度折叠的影响. 实例 html> 浮动 .box1 { width: 250px; border: 5px dashed rebeccapurple; ...
如何将CSS应用于iframe？
我有一个简单的页面,其中包含一些iframe部分(以显示RSS链接). 如何将相同的CSS格式从首页应用到iframe中显示的页面? #1楼上面有一些更改的作品: var cssLink = doc ...

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

iframe使用

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

最新文章

热门文章