每天学点前端——基础篇1:css盒子模型,绝对定位和相对定位

什么是css盒子模型(Box Model)?

W3C中解释为:规定了元素框处理元素内容、内边距、边框和外边距的方式;

MDN:文档中的每个元素被描绘为矩形盒子。渲染引擎的目的就是判定大小,属性——比如它的颜色、背景、边框方面——及这些盒子的位置。

背景会应用于元素内容、内边距、边框三者组成的区域;

margin值可以设置为负值,很多情况下会需要使用margin负值;padding没有负数;

浏览器的兼容性:IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。

目前最好的解决方案是回避这个问题。也就是,不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。

那么什么是相对定位和绝对定位?

position:absolute | relative | fixed | static | inherit

absolute:绝对定位;相对于除了static定位以外的第一个父元素进行定位;

relative:相对定位;生成相对定位的元素,相对于其正常位置进行定位。

fixed:固定定位;生成绝对定位的元素,相对于浏览器窗口进行定位。

static:默认值;

inherit:继承

绝对定位:

相对于元素最近的已经定位的祖先元素定位,如果没有,则相对于body进行定位;

已经脱离文档流,可以通过z-index控制元素的覆盖关系;

绝对定位会隐式改变元素的display类型,同元素设置float:left | right;时一样,都会隐式将元素的display设置为inline-block;

但是float在IE6下的双边距bug就是用display:inline; 来解决的。

相对定位:

相对定位是相对于元素在文档中的初始位置

在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间,移动元素会导致它覆盖其它框。

position:relative不会隐式改变display的类型。

时间: 2024-10-20 08:39:14

每天学点前端——基础篇1:css盒子模型,绝对定位和相对定位的相关文章

CSS基础学习-8.CSS盒子模型_标准盒子

原文地址:https://www.cnblogs.com/songsongblue/p/11047179.html

深入理解CSS盒子模型

前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverflow上求助.ifaou在帮助我解决我问题的同时,还推荐我阅读一篇有关CSS盒子模型的文章<The CSS Box Model>,阅读之后受益匪浅,才知道自己对盒子模型知识还是如此欠缺.恰逢学期末,项目验收后暂时告一段落,有空闲的时间.于是想把这篇文章翻译出来,一方面再给自己一点挑战和锻炼,另一方面也给大家参考,让更多的人受益. 这篇文章适合初级web设计朋友,让你对盒子模型有更近一步的理解.但是在阅读这篇文

&lt;转&gt;HTML+CSS总结/深入理解CSS盒子模型

原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverflow上求助.ifaou在帮助我解决我问题的同时,还推荐我阅读一篇有关CSS盒子模型的文章<The CSS Box Model>,阅读之后受益匪浅,才知道自己对盒子模型知识还是如此欠缺.恰逢学期末,项目验收后暂时告一段落,有空闲的时间.于是想把这篇文章翻译出来,一方面再给自己一点挑战和锻炼,另一方

前端基础知识之css

前端基础知识之css   https://www.cnblogs.com/liwenzhou/p/7999532.html#autoid-4-5-0 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素.   css就是修饰那些html元素的 其主要内容为两大块: 找到标签 和  修饰标签 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). 每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. cs

前端基础——CSS盒子模型

现在许多网页都是由许多个"盒子"拼接.嵌套而成,所以多少接触过网页设计的朋友一定都对CSS盒子模型有所了解. 为了更好的说明,先举个通俗的例子:在一个仓库中放了10个纸箱,每个纸箱之间有一定距离,每个纸箱内放的是一台电脑并且纸箱和电脑之间都有一层泡沫来隔绝防震(这里假设纸箱和电脑都是正方体),以这个例子为背景接着说盒子模型. 其实一张图片就可以把CSS盒子模型形象地表述出来,网上一搜一大堆: 正如上图所示:CSS中的盒子模型通常由四部分组成:内容(content).填充(padding

前端学习(十三):CSS盒子模型

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

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

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

从CSS盒子模型说起

前言 总括: 对于盒子模型,BFC,IFC和外边距合并等概念和问题的总结 原文地址:从CSS盒子模型说起 知乎专栏:前端进击者 博主博客地址:Damonare的个人博客 为学之道,莫先于穷理:穷理之要,必先于读书. 正文 ? CSS盒子模型是CSS基础中的基础,个人之前对于这块的理解有偏差?,由于涉及知识点比较多所以写一篇总结备忘.之前打算的是两周一次更新博文的,但是时间用在了刷题上,做了很多leetcode上算法数据结构的题记录在github,但其实也有在更新啦~只不过是对之前的一些博文进行纠

我给女朋友讲编程CSS系列(4) CSS盒子模型

什么是CSS盒子模型?如何学习CSS的盒子模型? 这篇文章,以 [分享 + 结论]  的方式来写. 1,  看w3school的[CSS 框模型概述] 网址为: http://www.w3school.com.cn/css/css_boxmodel.asp 接着把[CSS内边距],[CSS外边距],[CSS外边距合并]看看. 小结: (1)    一般,在样式表中,都会先把所有元素的外边距和内边距设置为0 * {   margin: 0;  padding: 0;  } * 是通配符,就是一个符