定位体系

盒模型，定位

1.盒模型用到的属性width,height,padding,border,margin

普通文档流的上下垂直margin会叠加

2.块级框 与 行内框， 利用display属性来改变特性，display：block，display：inlne-block

3. 3种基本的定位机制：普通流，绝对定位，浮动

4.相对定位

是普通流定位的一部分，与文档流相关，根据自身原先的位置进行移动

无论是否移动都占据原来空间position:relative

设置top,right,bottom,left的属性值进行移动

5.绝对定位

不占空间与文档流无关，

根据距离最近的已定位的祖先元素进行定位position:absolute

text-align:top / right / bottom / left

固定定位

是绝对定位的一种position:fixed

差异是包含块是视口

时间： 2024-11-01 11:43:30

定位体系的相关文章

三种定位体系简介

框( 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中的定位体系帮助作者使他们的文档更容易理解,并不需要使用标记的手段(如,不可见的图片)达到布局的效果.

盒子定位体系

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

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.盒模型 在网页中,一个盒子占有空间的大小由几个部分构成

元素在页面上的定位体系

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

定位方案（Positioning schemes）

在这个系列第一章里可视化格式模型里就说到过,影响框的布局的几个因素: 1.框的尺寸和类型 2.定位体系 3.文档树中元素间的关系 4.外部信息 其中,我觉得在实际工作中处理最多的还要属定位体系的问题.定位体系,主要分三种,常规流(normal flow).浮动(floats).绝对定位(absolute positioning),这一节将大致的描述一下这三种定位体系,有一个大概的印象,知道到底是什么,然后后面的章节会一个一个具体的分析. 一.常规流 从直观上理解,常规流指的是html中的元素,按

不同浏览器和浮动及定位

background:lineer-gradient(to right/90deg,red,yellow) 渐变/横向 border-radius:50% *** 圆角 box-shadow:x y 模糊值 外延线 颜色: BEM 块-元素-修饰符 margin,占用 不加margin 实际面积 W3C标准盒模型算法 box-sizing:content-box/boder-box 控制计算方式/标准/IE计算方式 过渡 *** transi/tion:all linear 2s: all值可变

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

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