Position is everything?(css定位学习的一些心得)(一)

最近在用css,因为定位问题搞了不少问题,于是去系统学了下。主要的学习资料:w3cschool,css mastery。下面就自己遇到的问题整理一下学习内容。

我要解决的问题是这样的,在一个div中正中间放置另一个div。一开始自己简单搜索了下,写出的代码是这样的

<div id="outer">
            <div id="inner"></div>
 </div>
#outer{
    background-color: blueviolet;
    width: 100;
    height: 100;
}

#inner{
    margin-top: 25;
    margin-left: 25;
    background-color: aqua;
    width: 50;
    height: 50;
}

那么发生了什么,可以发现inner确实右移了25,但是他的上方并没有距outer下移25,而是他连着outer整体一起下移了25。为什么?margin-top就连着父元素一起移动了,margin-left就自己移动了。这就是margin-collapsing,而解释margin-collapsing之前我先简单介绍一下基本的盒模型。

如图,最中间的width为70的是盒模型的content部分,他的高,宽由属性height,width确定。padding为内边距,背景与内容相同,margin为外边距。 margin-collapsing外边距合并,即当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

可以发现,当上下俩个外边距相遇时被合并成了一个。而我之前遇到的问题则可以通过下图看出

当一个元素被另一个元素包裹在内时,他们的margin也被合并了,因此之前在垂直方向加margin-top时,inner首先向下移动25,然后由于外边距合并,outer也使用inner的margin-top:25,它也同时下移25,而左右方向没有外边距合并,因此outer并没有右移。

时间: 2024-10-24 10:30:44

Position is everything?(css定位学习的一些心得)(一)的相关文章

CSS 定位学习

一 CSS布局的三种机制 1.标准流 2.浮动(盒子脱离标准流 浮起来 盒子水平排列) 3.定位(将盒子定在某一位置 自由的漂浮在其他盒子上面 css 离不开定位 特别是js特效) 二 为什么使用定位 要实现以上效果,不使用定位是非常困难的 将盒子定在某一个位置,自由的漂浮在其他盒子(包括标准流和浮动之上) 所以我们脑海中应该有三种布局机制的上下顺序 标准流(最底层) ->浮动的盒子在中间层->定位的盒子在最上层 三 定位详解 定位也是用来布局的,有两部分组成 定位 = 定位模式 + 边偏移

CSS学习------CSS定位(position)与浮动(float)

position属性:用来对元素进行定位 定位的意义: 定位允许你定义元素框相对于其正常位置应该出现的位置. 相对于父元素. 相对于另一个元素. 相对于浏览器窗口本身的位置. 定位分为:绝对定位和相对定位. 相对定位: 如果对一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直或水平位置,让这个元素"相对于"它的起点进行移动. 在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间.因此,移动元素会导致它覆盖其它框. 示例: <html>   <

css定位、position与float同时使用的情况

一.css定位 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 1.普通流:未专门指定的元素都在普通流中定位,position:static/relative;和float:none;也在普通流中定位. 2.绝对定位:position:absolute/fixed;元素框脱离普通文档流. 3.浮动:float:left/right;元素脱离普通文档流. 二.对元素同时使用position和float的情况 经过实践发现,无论position和float谁写在前面或后面,都是positio

CSS浮动和定位学习笔记

1.首先先看一下浮动 (1)左浮动:元素本身经可能的左移动,知道碰到边框或者是别的浮动元素,把他右边的位置让给别的元素.如果右边的空间不够则自动换行.浮动对于快元素和行内元素都生效. (2)右浮动:与左浮动相反. 2.CSS中的几种定位方式 (1)static:默认的定位方式. (2)relative(相对定位):元素偏离某个距离,元素保持未定位前的形状,他原本占有的空间保留,从这一角度看,好像元素本身仍然在文档刘/标准流中一样.relative的参照点是他原来应该出现的位置. (3)absol

《css定位 position》课程笔记

这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三种布局:标准流,浮动,定位 两大元素:块级元素(div,h1-6,table,ol,ul,li,p),内联元素(a,span,img,input) position可选参数 static(标准流中正常排列) relative(相对定位) absolute(绝对定位) fixed(脱离正常的文档流,登

web前端css定位position和浮动float

最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框”.与之相反,span和h3等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”. 在这种情况下,这个框称为无名块框,因为它不与专门定义的元素相关联. 块级元素的文本行也会发生类似的情况.假设有一个包含三行文本的段落.每行文本形成一个无名框.无法直接对无名块或行框应用样式,因为没有可以

css 定位属性position的使用方法实例-----一个层叠窗口

运行结果: <!DOCTYPE html> <html> <head> <title>重叠样式窗口</title> <style type="text/css"> div.window{ /*指定窗口的尺寸和边框*/ position:absolute; /*position在其他地方指定*/ width: 300px; /*窗口尺寸,不含边框*/ height: 200px; border: 3px outset

div+css定位position详解

div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局的多样性,让我们的网页丰富多彩起来. 首先解释relative(相对定位),顾名思义,定位是相对的,那他是相对于什么呢?参照物是什么? 看如下代码: 2 2.预览效果,现在是三个并列的div 3 3.给中间的div增加定位属性:position:relative; top:10px; left:10

CSS定位属性position

CSS定位元素有3种方式 :普通流.相对位置.绝对位置.通过设置position属性来实现. position属性取值的含义 inherit 继承父元素position 属性的值. static 默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). relative 生成相对定位的元素,相对于元素本身正常位置进行定位.因此,"left:20" 会向元素的 LEFT 位置添加 20 像素. absolute 生成绝