Html盒子模型学习总结

Html的盒子模型

1.总的来说Html元素可以分为两类：即块状元素和行内元素。

2.块状元素（Block）类型的元素可以设置Width和Height值属性，而行内（Inline）类型无效。

3.浏览器在读取Html源代码的时候是根据元素在代码中出现的顺序读取，是依据元素的盒子模型来决定的。即行内元素从左道右，块状

元素从上到下的顺序来呈现。

4.块级框从上到下一个接一个的排列，框之间的垂直距离是由框的垂直外边距计算出来。

5.行内框在一行中水平布置，可以使用水平内边距，边框和外边距调整他们的距离。

6.盒子模型在CSS中如果没有给元素指定定位模式，默认的认为Position定位为静态定位，元素出现在正常流中，这是给元素指定Top,

bottom,right,left或者Z-index声明无效。

文章摘自：艾维艾科技

时间： 2024-08-27 01:35:21

Html盒子模型学习总结的相关文章

10.css学习-盒子模型

<html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css"> /* 盒子模型: 盒子模型就是把一个html边框比作成了一个盒子的边框,盒子模型要做用于操作数据与边框之间的距离或者是边框与边框之间的距离. 盒子模型主要是用于操作内边距(padding)与外边距(margin) */ div{ border-style:solid; width:10

CSS基础学习十四：盒子模型补充之display属性设置

我在CSS基础学习十三:盒子模型的i博文只是阐释了CSS盒子模型,并没有过多的使用实例来演示.这篇博文就来做一些盒子模型知识的补充.这一部分对于网页总体布局还是蛮重要的,过去大多数使用HTML中的table元素和框架标签来进行网页的整体布局,现在我们使用最多的是DIV+CSS网页布局.所以一定要掌握好盒子模型,记住 content,border,padding和margin各自在盒子中的作用和使用方式. 先来看一个完整元素的盒子模型实例: <!DOCTYPE html PUBLIC "

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

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

javascript基础学习系列-DOM盒子模型常用属性

最近在学习DOM盒子模型,各种属性看着眼花缭乱,下面根据三个系列来分别介绍一下: client系列 clientWidth :width+(padding-left)+(padding-right)->和内容溢出无关系 clientHeight:height+(padding-top)+(padding-bottom)->和内容溢出无关系 clientLeft:左边框的宽度 clientTop:上边框的高度(border[Left/Top]Width) offset系列 offsetParen

前端学习（十三）：CSS盒子模型

进击のpython 前端学习--CSS盒子模型在前面的时候也说过,包括分析网页结构的时候,提到了,网页就其实就是一个一个盒子叠起来的那现在就是有装饰的盒子,难度就变得深刻所以说为了能够让你更好地理解,在说盒子模型之前,我要先向你介绍一下标签对!就是html里面的那些标签标签分类在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(也叫行内元素)和内联块元素 html标签甚至有好几百个,我们之前学习大约有30个标签,你所看到的很多大型网站我们都能通过这些标签来搭

CSS学习笔记（float和盒子模型）

1.当元素或者是它的包裹层设置了绝对定位或者是浮动,那么margin:0 auto;自动居中的效果就不会实现. 2.盒子模型的三位立体结构图中从第一层到第五层依次为:border.content+padding.background-image.background-color.margin. 3. 设置了浮动属性(float)的元素: 1.会向指定方向(left或right)一直移动,直到容器边缘: 2.处于标准文档流中: 3.若不设置宽高,则以内容的宽高为准: 4.仅对紧邻的后续元素造成影响

[CSS3] 学习笔记--CSS盒子模型

1.CSS盒子模型概述盒子模型的内容范围包括:margin(外边距).border(边框).padding(内边距).content(内容)部分组成. 2.内边距内边距在content外,border内,属性有5个: padding:设置所有边距 padding-bottom:设置底边距 padding-left:设置左边距 padding-right:设置右边距 padding-top:设置上边距 3.边框我们可以创建效果出色的边框,并且可以应用于任何元素.边框的样式为border-st

CSS基础学习十三：盒子模型

一CSS盒子模型概述 CSS盒子模型规定了元素框处理元素内容.内边距.边框和外边距的方式.一个完整元素包括内容(content),内边距(填充)(padding),边框(border)和外边距(空白)(margin). 盒子模型图: 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框. 边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素.故背景应用于由内容和内边距组成的区域. 内边距.边框和外边距都是可选的,默认值是零.但是,许多元

html学习第三天—— 第11章盒子模型 div

盒模型--边框(一) 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为div来设置边框粗细为2px.样式为实心的.颜色为红色的边框: div{ border:2px solid red; } 上面是border代码的缩写形式,可以分开写: div{ border-width:2px; border-style:solid; border-color:red; } 注意: 1.border-style(边框样式)常见样式有: dashed