盒子定位体系

一、         基本概念

  1. 视觉格式化模型(visual formatting model):CSS的一种机制,它规定了页面中的多个盒子如何布局
  2. 视觉格式化模型:是一套非常复杂的机制,包含错综复杂的CSS规范;本章的课程从实用的角度出发,仅学习在划分页面区域的时候需要的核心知识;由于划分页面区域时几乎都使用的是块盒,因此,本章仍然只涉及块盒
  3. 多个盒子如何布局:HTML中的每个元素都会在页面中生成盒子;这些盒子如何排列、如何相互影响,由视觉格式化模型定义。
  4. 主要受到两个因素的影响元素的盒模形;元素的定位体系。

4.

二、视口

  1. 视口:可视窗口,通常指浏览器的可视区域(视口的尺寸仅受到浏览器可视窗口大小的影响,和内容无关;当网页内容的尺寸超过视口尺寸时,浏览器会出现滚动条)
  2. 包含块每个元素都有一个包含块,它是指元素在页面中摆放的区域;通常情况下,元素的包含块是它父元素的内容盒(content-box);根元素的包含块是初始化包含块(initial containing block)。

2.

三、定位体系概述

三、1、视觉格式化模型规定,定位体系一共有三种:常规流(normal flow);浮动(float);绝对定位(absolute positioned)

2、任何一个元素,必须属于其中一种定位体系;不同的定位体系中,元素在包含块中的尺寸和位置会有一些差异。

定位体系判断:

四、         盒模型和定位体系

盒模型=盒子尺子            定位体系=盒子位置

定位体系影响盒模型。

和模型中的尺寸:margin:px、em、%、auto。

                Border:px、em。

                Padding:px、em、%、auto。

                Width:px、em、%、auto。

                Height:px、em、%、auto。

 尺寸为设定的值,与定位体系无关。

尺寸是包含块尺寸的百分比:margin、padding、width的百分比:是包含块宽度的百分比height的百分比很少用。

模型中的尺寸-auto尺寸受到定位体系的影响,不同的定位体系,auto的计算规则不一样

五、         常规流

常规流:又叫做普通流、文档流、普通文档流;常规流是最常见的定位体系,所有元素默认状态下都是常规流定位

常规流盒子水平方向上的尺寸,必须等于包含块的宽度

水平方向:常规流盒子水平方向上的尺寸,必须等于包含块的宽度;如果不行,则强行将margin-right设置为auto

盒子位置:盒子在包含块的垂直方向上依次摆放:依次摆放:按照HTML元素的书写顺序从上到下摆放;盒子在包含块中占据的尺寸是整个盒子的尺寸

垂直方向上,若两个外边距相邻,则进行合并(折叠)

垂直方向:水平方向上的外边距不会合并

外边距相邻:两个外边距之间没有border、padding和content

合并:均为正数取最大,均为负数取最小,一正一负则相加

六、         浮动

当元素的float属性取值为left或right时,元素属于浮动定位,浮动不可继承;默认值none;left左浮动;right右浮动。


属性


常规流


浮动


Margin-left:auto


尽量撑满包含块


0px


Margin-right:auto


尽量撑满包含块


0px


Margin-top:auto


0px


0px


Margin-bottom:auto


0px


0px


Width:auto


尽量撑满包含块


适应内容宽度


Height:auto


尽量撑满包含块


适应内容宽度

浮动盒子的位置:

  1. 左浮动的盒子向上向左排列
  2. 右浮动的盒子向上向右排列
  3. 浮动盒子的顶边不得高于上一个盒子的顶边
  4. 若剩余空间无法放下浮动的盒子,则该盒子向下移动,直到具备足够的空间能
  5. 容纳盒子,然后再向左或向右移动

5.常规流遇上浮动:

常规流盒子和浮动盒子混合摆放

  1. 1.        浮动盒子在摆放时,要避开常规流盒子
  2. 2.        常规流盒子在摆放时,无视浮动盒子
  3. 3.        常规流盒子的自动高度计算时,无视浮动盒子 —— 高度坍塌

3.

清除浮动

对一个元素清除浮动,可以让该元素在摆放时,出现在浮动元素的下方

对最后一个子元素使用clear:both,可防止父元素高度坍塌

Clear:不可继承;默认值none

     取值:none不清除浮动;

           Left:清除左浮动,元素在左浮动的盒子下方摆放

right:清除右浮动,元素在右浮动的盒子下方摆放

both:清除左右浮动,元素在浮动的盒子下方摆放

盒子的相对位置:

相对位置,是指相对于盒子在原本定位体系下的位置

将盒子的position属性设置为relative,以启用相对位置

Position:不可继承,默认值static;

        取值:static:静态位置,盒子在原本定位体系下的位置

relation:相对位置,盒子相对于原本的位置进行偏移

absolute:绝对位置

fixed:固定位置

Position:relation:可通过left、top、right、bottom设置偏移量

当浮动元素被设置为绝对定位:

某个元素:float:left; position:absolute; 元素只能属于一种定位体系

如果元素被设置为绝对定位,float属性会被强制设置为none

绝对定位元素不会对其他任何元素造成任何影响

可通过left、top、right、bottom来设置

绝对定位元素的包含块

通常情况下,元素的包含块是它父元素的内容盒(content-box)

绝对定位元素除外

绝对定位中,盒子的位置由left、top、right、bottom四个属性决定;它们表示盒子离包含块边缘的距离


属性


浮动


margin-left:auto


0px


margin-right:auto


0px


margin-top:auto


0px


margin-bottom:auto


0px


width:auto


适应内容宽度


height:auto


适应内容宽度

少部分情况下,盒子中auto值需要适应盒子的位置

堆叠级别:它决定了元素谁显示在前谁显示在后;通常情况下,堆叠级别越高,显示越靠前;通过z-index属性可设置元素的堆叠级别;

z-index;不可继承;默认值auto;

       取值:auto:自动,通常情况下,书写顺序靠后的元素靠前显示

             数值:手动设置堆叠级别,堆叠级别高的元素靠前显示

 

使用z-index属性时需要注意的:不要用于静态位置的元素;尽量不要使用z-index

 

原文地址:https://www.cnblogs.com/caoxiangwang/p/11372393.html

时间: 2024-10-11 10:40:28

盒子定位体系的相关文章

CSS中的定位体系

一.概述 ????1.什么是定位体系 ????视觉格式化模型规定,定位体系共有三种 ????????????a.常规流(normal flow) ????????????b.浮动(float) ????????????c.绝对定位(absolute posotioned) ????任何一个元素,必须属于其中一种定位系统 二.定位体系判定 ???? 三.盒模型和定位体系 1.盒模型=盒子体系 ????定位体系=盒子位置 2.盒模型中的尺寸 margin:px.em.%.auto border:px

层叠和继承的概念,选择器的优先级,盒模型,元素在页面上的定位体系,常规流

1.层叠和继承的概念: CSS层叠性是指CSS样式在针对同一元素配置同一属性是,依据层叠规则(权重)来处理冲突,选择应用权重高的CSS选择器所指定的属性,一般也被描述为权重高的覆盖权重低的,因此也称作层叠. 继承:子元素会自动拥有父元素的某些CSS属性,通常来说,文本类的属性会被继承(字体.字号.颜色) 2.选择器的优先级 !important>id选择器>类选择器>标签选择器>子选择器>后代选择器>伪类选择器 3.盒模型 在网页中,一个盒子占有空间的大小由几个部分构成

三种定位体系简介

框( box )布局影响因素之一,便是定位体系.定位体系也是其最为重要的影响因素. CSS2.1 中,一个框可以根据三种定位体系布局.CSS2.1 中的定位体系帮助作者使他们的文档更容易理解,并不需要使用标记的手段(如,不可见的图片)达到布局的效果. 常规流( Normal flow ) 常规流,是对 "normal flow" 的直译. 之称之为常规流,是因为这是相对于后面的浮动和绝对定位的一个概念,浮动和绝对定位元素都脱离了当前的常规流. 在 CSS2.1中,常规流包括块框( bl

定位体系(定位机制)

原文 简书原文:https://www.jianshu.com/p/65bfdbe42fb1 大纲 1.定位体系的意义 2.定位体系的分类 3.常规流:( Normal flow ) 4.浮动(Floats) 5.绝对定位(Absolute positioning) 6.选择定位方案 1.定位体系的意义 CSS2.1中,一个框(box,就是元素形成的方块等)可以根据三种定位体系布局.CSS2.1中的定位体系帮助作者使他们的文档更容易理解,并不需要使用标记的手段(如,不可见的图片)达到布局的效果.

元素在页面上的定位体系

共有三大体系:常规流(normal flow) 浮动(float) 绝对定位(absolute position) 常规流:在没有css的干预下,块级元素独占一行,宽高可设:行内元素并排显示,宽高自动. 当元素浮动后,脱离文档流.因为子级元素浮动后导致父级高度坍塌. 浮动:1.左浮动的元素向上向左排列 2.右浮动的元素向上向右排列: 3.浮动盒子的顶边不得高于上一个盒子的顶边: 4.若剩余空间无法放下浮动的盒子,则该盒子向下移动,直到具备足够的空间能容纳盒子,然后再向左边或右移动(包裹性:块级元

内嵌盒子定位和居中问题,在缩放浏览器情况下,不会影响盒子的布局

问题描述:第一眼我们看到上图,可能就想到用浮动来布局,但是在用浏览器调试缩放时“您好中国”盒子会自然成列.那么怎么让他们自适应,让好和中之间始终处于浏览器中间位置? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; p

定位体系

盒模型,定位 1.盒模型用到的属性width,height,padding,border,margin 普通文档流的上下垂直margin会叠加 2.块级框 与 行内框, 利用display属性来改变特性,display:block,display:inlne-block 3. 3种基本的定位机制:普通流,绝对定位,浮动 4.相对定位 是普通流定位的一部分,与文档流相关,根据自身原先的位置进行移动 无论是否移动都占据原来空间position:relative 设置top,right,bottom,

盒子基础

padding(外边框.填充区) 含义:表示边框到内容之间的距离:上(top).右(right).下(bottom).左(left). 类似于箱子和物品之间的填充物. border边框 dasher(虚线) dotted(点线) soild(实线) 圆角 border-radius:半径值: 一个值表示四个角的半径 两个值的话,第一个表示左上右下.第二个表示左下右上. border-bottom-right-radius:半径值 半径值: 指定右下角的半径,第一个是水平,第二个是垂直. bord

从输入url开始,完善前端体系架构

原文链接: https://segmentfault.com/a/1190000013662126 从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系! javascript 前端 232 前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. 关于这道题目的吐槽暂且不提(这是一道被提到无数次的题,得到不少人的赞同,也被很多人反感),本文的