CSS布局中的问题
1. 高度自适应的问题
1. 一个元素是否可以使用百分比显示,取决于它的父级元素,所以如果需要给此元素设置100%,那么需要先给父元素设置高100%。
2. 一级元素的父元素是body,所以如果我们想让高度100%的话,那就给body设置高100%,但是又因为body的父元素是html,所以我们同时也要给html高设置成100%。
2. 什么是盒模型
就是每个盒子都由内容(content)、填充(padding)、边框(border)、边界(margin)
3. 上下margin叠加的由来
css设计者考虑到我们要对段落进行控制,比如多个p标签,如果这些p标签都具备margin属性的话,那么它们中的第一个段落距离顶部的外边距是10px,而后面的其他p标签具离顶部都是20px,这样的话排版就不一致,所以设计出这种空白边距叠加规则。
4. 解决margin上下叠加问题
设置:float
追梦子博客。
5. IE6左右margin加倍问题以及解决
单我们将一个盒模型设置成float以后如果有左右margin那么这个margin会是双倍的,解决方法:设置display:inline;
6. 文档流
元素的排列方式
7. 文字围绕浮动之谜
现象1、为什么IE6下非浮动元素不会被浮动元素覆盖?
在IE中有特有的hasLayout规则,当一个元素拥有了布局,那么它忽略浮动元素应该占有的空间,所以它不会被覆盖,而是排列在浮动元素的右侧。布局就是给元素添加了宽,高等。解决方法就是不去触发IE的hasLayout。
现象2、为什么在IE8等浏览器下,虽然非浮动元素按照我们的理解,它是被浮动元素覆盖了,但是它包含的文字为什么不会被覆盖,而是围绕浮动元素呢?
浮动只会占据文本的,而不会占据块级元素。可以这样理解,但是从原理是不是这样,技术有限请自行查资料。
8. z-index的由来
由于当我们使用了定位属性position以后,那么这个元素将脱离了文档流,并且这个定位的元素总是会覆盖前面的元素,所以设计者设计了z-index用来自由的改变覆盖的顺序。
CSS布局中的问题的更多相关文章
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- CSS布局中的水平垂直居中
CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...
- DIV CSS布局中position属性用法深入探究
本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...
- 认识和理解css布局中的BFC
认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Con ...
- DIV CSS布局中绝对定位和浮动用法
转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...
- DIV+CSS布局中自适应高度的解决方法
div乱跑问题 (文件<DIV+CSS布局中自适应高度的解决方法.rar>) float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...
- CSS布局中最小高度的妙用
CSS布局中最小高度的妙用 --最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持B ...
- CSS布局中——导航是非常常见的
导航绝对是页面布局中最常见的,为了不用每次去写,稍微贴个简单的导航模版出来,方便以后使用. <title>CSS菜单</title> <style type=" ...
- CSS布局中一个简单的应用BFC的例子
什么是BFC BFC(Block Formatting Context),简单讲,它是提供了一个独立布局的环境,每个BFC都遵守同一套布局规则.例如,在同一个BFC内,盒子会一个挨着一个的排,相邻盒子 ...
随机推荐
- http协议与网页优化泛谈
最近公司开展职业技能培训,本人招录了部分内容写成博客,若有纰漏,欢迎拍砖. http简述: http又称超文本传输协议,是一种无状态&无记忆协议的运用层协议,处于tcp传输层协议之上,采用请求 ...
- http://blog.csdn.net/chenriwei2/article/details/38047119
SSP或者说是空间金字塔匹配(spatial pyramid matching or SPM)是BoW的一个扩展,它把一张图片划分为从不同的分辨率级别然后聚合这些不同分辨率的图像,在深度学习之前SPM ...
- Mac OS 系统工具使用
1. 截屏的处理 Command + Shift + 4
- CSDDN特约专稿:个性化推荐技术漫谈
本文引自http://i.cnblogs.com/EditPosts.aspx?opt=1 如果说过去的十年是搜索技术大行其道的十年,那么个性化推荐技术将成为未来十年中最重要的革新之一.目前几乎所有大 ...
- mysql 性能配置优化
修改mysql配置文件 my.cnf ,内容如下: [mysqld]datadir=/data/mysql/datasocket=/var/lib/mysql/mysql.sockuser=mysql ...
- jsti 和EL用法注意点
今天使用stl 结合El做jsp页面展现,出现了个问题,怎么调也调不好,最后将jstl的源码拿来跟踪调了一下才明白其中的道理. 在使用jstl tag <c:forEach var=" ...
- yii2 mpdf
安装 php composer.phar require kartik-v/yii2-mpdf "*" 或者把 "kartik-v/yii2-mpdf": &q ...
- C语言采用文本方式和二进制方式打开文件的区别分析
稍微了解C程序设计的人都知道,文本文件和二进制文件在计算机上面都是以0,1存储的,那么两者怎么还存在差别呢?对于编程人员来说,文本文件和二进制文件就是一个声明,指明了你应该以什么方式(文本方式/二进制 ...
- 黑马程序员——HTML表格布局
---------------------- <a href="http://edu.csdn.net"target="blank">ASP.Net ...
- 《你必须知道的.NET》读书笔记:从Hello World认识IL
通用的语言基础是.NET运行的基础,当我们对程序运行的结果有异议的时候,如何透过本质看表面,需要我们从底层来入手探索,这时候,IL便是我们必须知道的基础. 一.IL基础概念 1.1 什么是IL? IL ...