html实践——IFE task 02(盒子模型)

1. 元素分类

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

(1)常用的块状元素有:

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

块级元素特点:

  • 每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
  • 元素的高度、宽度、行高以及顶和底边距都可设置。
  • 素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
    a{display:block;}可以将内联元素变成块级元素

(2)常用的内联元素有:

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

内联元素特点:

  • 和其他元素都在一行上;
  • 元素的高度、宽度及顶部和底部边距不可设置;
  • 元素的宽度就是它包含的文字或图片的宽度,不可改变。
    a{display:inline;}可以将块级元素变成内联元素

(3)常用的内联块状元素有:

<img>、<input>

内联块状(inline-block )元素特点:

  • 和其他元素都在一行上;
  • 元素的高度、宽度、行高以及顶和底边距都可设置。

2. 盒子模型概述

元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。

3. CSS内边距

元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。

CSS padding 属性定义元素边框与元素内容之间的空白区域。

4. CSS边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

CSS border 属性允许你规定元素边框的样式、宽度和颜色。

5. CSS外边距

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值。

 【注意】

当两个垂直外边距相遇时,它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

时间: 2024-10-06 03:32:33

html实践——IFE task 02(盒子模型)的相关文章

html实践——IFE task 02(CSS选择器)

====任务描述==== [原链接]http://ife.baidu.com/task/detail?taskId=2 任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基本的CSS编码,包括以下但不限于: 了解CSS的定义.概念.发展简史 掌握CSS选择器的含义和用法 实践并掌握CSS的颜色.字体.背景.边框.盒模型.简单布局等样式的定义方式 任务描述

网页布局02 盒子模型

基本概念 盒子模型,英文即box model.无论是div.span.还是a都是盒子,他们在网页上都要占据一定的空间,在进行布局的时候需要考虑他们所占据的空间大小. 例外情况:图片.表单元素作为文本处理,不作为盒子模型计算. 盒子模型主要CSS属性 盒子的属性有5个:width.height.padding.border.margin.如下: width和height:内容的宽度.高度(不是盒子的宽度.高度).padding:内边距.border:边框.margin:外边距. 盒子模型的类型 通

02 AppCan入门学习之弹性盒子模型

弹性盒子模型 效果: 一.弹性盒子模型 1. 流式布局 <!-- 流式布局--> <divstyle='display: inline;border: 1px solid orange'> <divstyle='display: inline;background: #66ccff'>流式文件左边</div> <divstyle='display: inline;background: #ffffff'>流式文件右边</div> &l

(5)css盒子模型

CSS 盒子模型概述 ***什么是CSS的盒子模型呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content).边框(border).内边距(padding).外边距(margin), CSS盒子模型都具备这些属性. ***属性我们可以把它转移到我们日常生活中的盒子(箱子)来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模型. 盒子模型是css控制页面是一个很重要的概念. 所有网页的页面中的元素都可以看成是一个盒子,占据着一定的页面空间. 一

前端重要盒子模型 浮动 定位 块级元素、行元素 7.9

1.块级元素的特点: (1)块级元素里面的内容,或者背景图片,默认显示在块的左上角 (2)块级元素,默认情况下,单独占满一行. 常用的块级元素:div.p.h1-h6.hr.ul li.ol li.table.body... 2.浮动:float 作用:通过漂浮,让块级元素实现并排 float:left 或 right 注意:如果div左边或者右边的块存在浮动,会对此div产生影响,此时需要清除左右方的浮动 清除浮动:clear:left(清除左边div的浮动)或right(清除右边div的浮动

CSS基础学习十五:盒子模型补充之外边距合并

今天继续接着CSS盒子模型补充,CSS基础学习十三:盒子模型和CSS基础学习十四:盒子模型补充之display属 性设置都是介绍了盒子模型中的内容概括.开始今天的主题:外边距合并. 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合 并的外边距的高度中的较大者. (1)外边距合并 外边距合并叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,外 边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的

css盒子模型 ( 基本针对兼容性问题有点帮助 )

(一).CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 1.更改样式,格式化默认值: * { margin: 0; padding: 0; } 2.外边距合并 外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆. 简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 当一个元素出现在另一个元素上面时,第一个元素的下外边距与

聊聊css盒子模型

css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式. CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素内容(element content).内边距(padding).边框(border)

CSS学习笔记06 盒子模型

1.盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. 用公式表示就是:盒子=边框+内边距+内容区域+外边距 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 注意:背景应用于由内容和内边距.边框组成的区域.       可以看到背景色穿