从零开始学习html(十一)CSS盒模型——上

一、元素分类

在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有:

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有:

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有:

<img>、<input>

二、元素分类--块级元素

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>内联块状元素</title>
 6 <style type="text/css">
 7 div,p{background:pink;}
 8 </style>
 9 </head>
10 <body>
11 <div>div1</div>
12 <div>div2</div>
13 <p>段落1段落1段落1段落1段落1</p>
14 </body>
15 </html>

元素分类--块级元素

什么是块级元素?在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。

设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点。

a{display:block;}

块级元素特点:

1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

来试一试:感受一下块级元素的特点

在代码编辑器中输入各种块级标签,试一试他们的特点。

三、元素分类--内联元素

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>行内元素标签</title>
 6 <style type="text/css">
 7 a,span,em{
 8     background:pink;/*设置a、span、em标签背景颜色都为粉色*/
 9 }
10 </style>
11 </head>
12 <body>
13 <a href="http://www.baidu.com">百度</a>
14 <a href="http://www.imooc.com">慕课网</a>
15 <span>33333</span>
16 <span>44444</span><em>555555</em>
17 </body>
18 </html>

元素分类--内联元素

在html中,<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素(行内元素)(inline)元素。

当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素,从而使 div 元素具有内联元素特点。

 div{
     display:inline;
 }

......

<div>我要变成内联元素</div>

内联元素特点:

1、和其他元素都在一行上;

2、元素的高度、宽度及顶部和底部边距不可设置;

3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

内联元素之间有一个间距问题。

来试一试:感受一下内联元素的特点

在代码编辑器中输入各种内联元素标签,试一试他们的特点。

行内元素之间会产生间隙bug问题的场景:

1、当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。

如下代码:

<div>

<a>1</a>

<a>2</a>

<span>33333</span>

<span>44444</span>

<em>555555</em>

</div>

解决方法:

1、写在一行,之间不要有空格之类的符号。

2、使用font-size:0

div{font-size:0;}

a,span,em{font-size:16px;}

如果你想让div{font-size: 0;}起作用,请将行内元素包裹在里面,就想这样:

<div>

<a>我是链接</a>

<span>我是行空间</span>

</div>

四、元素分类--内联块状元素

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>内联块状元素</title>
 6 <style type="text/css">
 7 a{
 8
 9     width:20px;/*在默认情况下宽度不起作用*/
10     height:20px;/*在默认情况下高度不起作用*/
11     background:pink;/*设置背景颜色为粉色*/
12     text-align:center; /*设置文本居中显示*/
13 }
14 </style>
15 </head>
16 <body>
17 <a>1</a>
18 <a>2</a>
19 <a>3</a>
20 <a>4</a>
21 </body>
22 </html>

元素分类--内联块状元素

内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,

代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增),<img>、<input>标签就是这种内联块状标签。

inline-block 元素特点:

1、和其他元素都在一行上;

2、元素的高度、宽度、行高以及顶和底边距都可设置。

来试试,仿分页页码设计

在代码编辑器中大家可以看到我们为 a 元素设置了宽和高,但都没有起到作用,

原因是a在默认的时候是内联元素,内联元素是不可以设置宽和高的。

在编辑器的第8行,输入:

display:inline-block;

将块元素或行内元素转换为行块内元素:是为后面的课程做铺垫,

你只要知道行内元素不能设置高宽,转换后可以设置就行了,块状元素不能在一行显示转换后可以在一行显示就行了。

a标签变为内联块状元素后,居中设置的意思是,数字在每一个块内里面是居中显示的,而不是整个a标签在页面上居中

inline:内联元素{
1,不能设置width和height;
2,多个行内元素排成一行,直到一行排不下,才会换新一行;
3,只可以设置水平方向的边距,如:margin-left,margin-right,padding-left,padding-right.
}
block:块级元素{
1,块级元素独占一行;
2,可以设置width和height,默认宽度为一整行,除非单独设置宽度;
3,可以设置margin和padding属性。
}
inline-block{
简而言之就是让元素既可以在一行内显示,又可以设置宽高边距等。
}

块级元素默认占一整行 无论它的宽有没有一整行宽 没用完的空间不准其他元素使用

属性:display:block;

默认占一整行 默认宽度一整行 可以设置宽高 一行只有自己

内联(行内)元素 定义的是一段内容(文本)这一行内没占用完的空间其他内联元素可以共同使用

属性:display:inline;

没法设置宽高 一行可以有多个 大小由内容决定

内联块状元素(行内块级元素)

属性:display:inline-block;

可以设置宽高

一行能有多个

五、什么是盒模型

视频课程

时间: 2024-09-29 03:09:57

从零开始学习html(十一)CSS盒模型——上的相关文章

第 16 章 CSS 盒模型[上]

学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素尺寸 CSS 盒模型中最基础的就是设置一个元素的尺寸大小.有三组样式来配置一个元素的尺寸大小,样式表如下: 属性 值 说明 CSS 版本 width auto.长度值或百分比 设置元素的宽度 1 height auto.长度值或百分比 设置元素的高度 1 min-width auto.长度值或百分比 设置元

从零开始学习前端开发 — 3、CSS盒模型

★  盒子模型 (标准的盒模型) css盒模型的概念及组成 css盒模型是css的基石,每个html标签都可以看作是一个盒模型. css盒模型是由内容(content),补白或填充(padding),边框(border),外边距(margin)四部分组成(具体如图所示) 1.内容(content) 宽度 width:数值+单位; 高度 height:数值+单位; eg: .box{width:200px;height:100px;} 2.补白或填充 (设置内容和边框之间的距离) 语法:paddi

大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的,所以并不会阻挡其后的元素 * { margin: 0; padding: 0; } 这是在CSS中最常见的初始化CSS的代码,用于覆盖浏览器的默认样式 浏览器兼容性 大多数浏览器都会按照上面的图示来呈现内容.然而 IE 5 和 6 的呈现却是不正确的.根据 W3C 的规范,元素内容占据的空间是由 w

css盒模型—逆战班学习总结

在css中,可以把元素看成一个盒子,就是盒模型,用盒模型可以控制元素之间的位置关系. 盒模型组成由里到外为:concent(内容)+padding(内边距)+border(边框)+margin(外边距) border普通写法:border-width(宽度)border-style(线型)border-color(颜色) 复合写法:border:  (宽度) (线型)(颜色):  border:1px solid #000; padding,margin写法:padding:(像素大小):  p

css学习の第三弹—盒模型的创建和使用

一.css盒模型: 元素分类: 块状元素.内联元素(又叫行内元素)和内联块状元素. >>常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>.<address>.<blockquote> .<form> 设置display:block就是将元素显示为块级元素.如下代码就是将内联元素a转换为块状元素,从而使a元

20.CSS盒模型【上】

第十六章  CSS盒模型[上] 一.元素尺寸 属性                   值                    说明              CSS版本 1.width          auto.长度值或百分比     设置元素的宽度            1 2.height         auto.长度值或百分比     设置元素的高度            1 3.min-width      auto.长度值或百分比     设置元素最小宽度          2

CSS学习(十七)-盒模型

一.理论: 1.CSS盒模型 a.外盒尺寸计算--高度 element空间高度=内容高度+内距+边框+边距 b.外盒尺寸计算--宽度 element空间宽度=内容宽度+内距+边框+外距 c.内盒尺寸计算--高度 element高度=内容高度+内距+边框 d.内盒尺寸计算--宽度 element宽度=内容宽度+内距+边框 2.box-sizing a.content-box 默认值 b.border-box 元素维持IE传统的盒模型 c.inherit 使元素继承父元素的盒模型模式 d.此值主要目

第16章 CSS盒模型下

第 16章 CSS盒模型[下]学习要点:1.元素可见性2.元素盒类型3.元素的浮动 本章主要探讨 HTML5中 CSS盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素可见性使用visibility属性可以实现元素的可见性,这种样式一般可以配合 JavaScript来实现效果.样式表如下:属性 visibility 值 说明 CSS版本visible 默认值,元素在页面上可见 2hidden 元素不可见,但会占据空间. 2collapse 元素不可见,隐藏表格的行与列. 2 如果不

从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件

原文:从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零