每天学点前端——基础篇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的类型。
每天学点前端——基础篇1:css盒子模型,绝对定位和相对定位的更多相关文章
- 前端面试必备的css盒子模型
今天同学发给了我一份前端基础的面试题,第一道便是对css盒子模型的理解,我看到的第一眼想到的是div,然后就...懵逼了,知其然不知其所以然.所以打算写一写盒子模型的概念理解啥的,如有写的不当的地方, ...
- 【轻松前端之旅】CSS盒子模型
盒子模型,也叫框模型,在CSS里是很重要的概念. 每个元素都可以看做一个盒子.盒子包含四个部分:外边距(margin).边框(border).内边距(padding).元素内容(element con ...
- CSS基础学习-8.CSS盒子模型_标准盒子&&9.CSS怪异盒子
怪异盒模型 box-sizing:content-box;/*正常盒模型,默认值*/ box-sizing:border-box:/*怪异盒模型,固定了盒子的大小,无论是否添加内边距还是边框,盒子的大 ...
- <转>HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
- 小白学Docker之基础篇
系列文章: 小白学Docker之基础篇 小白学Docker之Compose 小白学Docker之Swarm PS: 以下是个人作为新手小白学习docker的笔记总结 1. docker是什么 百科上的 ...
- 前端基础(二):CSS
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 ...
- 前端基础——CSS盒子模型
如今很多网页都是由很多个"盒子"拼接.嵌套而成,所以多少接触过网页设计的朋友一定都对CSS盒子模型有所了解. 为了更好的说明,先举个通俗的样例:在一个仓库中放了10个纸箱,每一个纸 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- 前端之CSS——盒子模型和浮动
一.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...
随机推荐
- java中枚举(enum)小例子。之前学过枚举但是一直没用,这里有个枚举类帮你我理解下(很肤浅)
直接上枚举类,代码简单易懂. package com.jy.modules.cims.data.interact.tbj.loan.request; /** * * @author shengzhou ...
- REST,RESTful
REST(Representational State Transfer)描述了一个架构样式的网络系统. RESTful架构,就是目前最流行的一种互联网软件架构.结构清晰.符合标准.易于理解.扩展方便 ...
- step by step 之餐饮管理系统七(点菜模块实现)
好长时间没有更新这个系列了,一是因为这段时间比较忙,有很多事情,二来要学习新的东西,AngularJs,devExpress这两上框架,都是比较有名的框架,先上图: 上面就是用来点菜的界面,左边是已点 ...
- 使用PouchDB来实现React离线应用
最近听到有同学在讨论关于数据上传遇到离线的问题,因此在这里介绍一下PouchDB. PouchDB 是一个开源的javascript数据库,他的设计借鉴于Apache CouchDB,我们可以使用他来 ...
- IntelliJ IDEA 发布最新版本13.0.1
难闻转自:慧都控件网 值得高兴的消息,IntelliJ IDEA v13.0.1目前已经发布,相对于IntelliJ IDEA v13而言,此次更新内容,是略微改进和提高了性能,如代码输入变化,及完善 ...
- UITextField 的重写
在很多产品设计的时候,产品设计人员设计出来的输入框总会要求,文字的内容距离做边框多少像素,编辑区域的其实点,距离左边多少像素,很多人绝的难以适应!其实这些都不存在很大的技术难度,一下这些方式都可以达到 ...
- hibernate常用API详解
根据个人使用Hibernate的经验,介绍一下Hibernate的多种不同的查询和CUD操作,这些东西在日常开发中非常常用,希望对大家有所帮助. 以下示例均以两张表为例:member和userinfo ...
- Amazon AWS EC2开启Web服务器配置
在Amazon AWS EC2申请了一年的免费使用权,安装了CentOS + Mono + Jexus环境做一个Web Server使用. 在上述系统安装好之后,把TCP 80端口开启(iptable ...
- 开始VS 2012 中LightSwitch系列的第1部分:表中有什么?描述你的数据
[原文发表地址] Beginning LightSwitch in VS 2012 Part 1: What’s in a Table? Describing Your Data [原文发表时间] ...
- 扒皮下GitHub 404的图片层次轴动特效
今天要克隆的前端特效非常有意思,可以参见GitHub404页面 https://github.com/vajoy/master/index.html 记得之前华为在站酷发布EMUI设计大赛的主页也用了 ...