div的浮动、定位、和框架模型概念介绍

可视化模型:浮动、定位和框架模型是CSS的3个最重要的概念，这些概念控制在页面上安排和显示元素的方式.形成CSS的基本布局。
视觉可视化模型:p、h1、div等元素常常被称为块级元素。这就意味着这些元素显示为一块内容。即“块框”。与之相反。strong和span等元素称为行内元素，因为它们的内容显示在行中。即“行内框”。
可以使用display属性改变生成的框的类型.通过将display属性设t为block，可以让行内元素表现像块级元素一样。还可以将display属性设none.让生成的元素根本没有框。这样这个框及其所有内容就不显示了，不占用文档中的空间。
CSS中有3种基本的定位
机制，分别是普通流、浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。
块级框从上到下.一个接一个地排列，框之间的垂宜距离由框的垂直空白边计算出来
行内框在一行中的水平位置，可以使用水平填充、边框和空白边设置，它们之间的水平间距。但是垂直填充、边框和空白边不影响行内框的高度。
由于一行形成的水平框称为行框，行框的高度足以容纳它包含的所有行内框，设置行高可以增加这个框的高度。
框可以按照XHTM的嵌套方式包含其他的框。大多数框由显示定义的元案形成。但是在一些情况下，即使没有进行显示定义，也会创建块级元素。这种情况发生在将一些文本添加到一些块级元素(比如DIV)的开头时，即使没有把这些文本定义为段落，它也会被认为是段落:
公司简介
公司领导介绍
在这种情况下，这个框为无名块框，因为它不与专门定义的元素相关联。块级元素内的文本行也会发生类似的情况。假设有一个包含3行文本的段落，每行文本形成一个无名行框.则无法直核对无名框或行框应用样式，因为没有可以应用样式的地方。但是。这有助于理解在屏幕上看到的所有东西都形成某种框。
浮动定位:还有一种定位模型为浮动模型。浮动的框可以左右移动，直到它外边缘碰到包含框或另一个浮动框的边缘。因为浮动根不在文档的普通流中，所以文档流中的块框表现得就像浮动框不存在一样。
float可选参数有以下几个。
inherit:继承父级元素的浮动属性。
Lift:元素会移至父元素中的左侧。
none：默认值。
right:元素会移至父元素中的右侧。
position定位:position定位与float一样.也是CSS排版中非常里要的概念。position的字面意思是指定块的位置，即块相对子其父块的位置和相对于它自身应该在的位置。
position属性值有以下几种。
absolute:绝对，将对象从文档流中拖出.通过width、height、left right、top、bottom等属性与margin,padding、border进行绝对定位，绝对定位的元素可以有边界，但这些边界不压缩。而其层叠通过z-index属性定义。
fixed:悬浮，使元素固定在屏幕的某个位置，其包含块是可视区域本身.因此它不随滚动条的滚动而滚动。 inhert:继承上级元素position值。
relative:相对，对象不可层叠但将依据left, right、top, bottom等属性在正常文档流中偏移位置。
static:静态(默认)，无特殊定位。

本文题目：div的浮动、定位、和框架模型概念介绍
URL地址：https://www.cdcxhl.com/news12/292762.html

成都网站建设公司_创新互联，为您提供自适应网站、电子商务、网站营销、搜索引擎优化、关键词优化、网站排名

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联