文档章节

css学习-可视化格式模型

bosscheng
 bosscheng
发布于 2015/04/12 17:23
字数 1200
阅读 14
收藏 0
css

盒模型

widht height padding border margin


IE和盒模型


对于ie6的盒模型中,浏览器的width属性不是内容的宽度,而是内容加上内边距加上边框的总和。


没有特殊要求的话,不要给元素添加指定宽度的内边距,而尝试将内边距或者外边距添加到元素的父元素或者子元素上面去。


外边距叠加

当两个或者更多的垂直外边距相遇的时候,他们将形成一个外边距,这个外边距的高度等于两个发生叠加的外边距的高度的较大者。

当一个元素包含在另外一个元素中,他们顶部和底部边距也会发生叠加。

例如一个空元素,他有外边距,但是没有边框或者内边距,在这种情况下面,顶外边距与底外边距就会碰到一起去,发生了叠加。

空元素中已经叠加的外边距与另外一个空元素的外边距发生叠加。


ps: 针对于行内框,浮动框,绝对定位框的外边距是不好叠加的。


定位概念


块级元素

行内元素

display block, display none;

在css中存在三种定位机制:普通流,浮动流,绝对定位流。


对于行内框,可以使用水平内边距,边框,外边距,但是垂直行内边距,边框,外边距不影响行内框的高度。

在行内框中设置显示的高和宽是没有影响的。

由一行形成的水平框称之为行框


设置行高可以增加框的高度,因此修改行内框的唯一方法就是修改行高或者水平边框,内边距,外边距。



在css2.1中,可以将原始设置为display:inline-block 

设置了这样之后,可以是得原始像行内元素一样水平的排列,但是,框的内容依旧符合块级的行为,例如可以显示的设置宽度和高度,垂直外边框和内边距。


匿名块框


相对定位

position :relative

如果一个元素进行了相对定位,他将出现在他所在的位置上,然后可以通过设置垂直或者水平位置,让这个元素相对的移动起来。

ps: 相对于本来应该存在位置上面。

pps: 在使用相对位置的时候,无论是否移动了,元素仍然占据原来的空间。因此移动元素会导致他覆盖其他框。


绝对定位“:

相对定位实际上被看做普通定位模型的一部分,因为元素的位置相对于他在的普通流中的位置,

而对于绝对定位,使得元素的位置与文档无关,因此不占据空间。

ps: 绝对定位的位置是相对于距离他最近的那个已经定位好的祖先的元素确定的。

如果元素没有已经定位好的祖先,那么他的位置就是相对于初始包含块的,根据用户代理的不同,初始包含块可能是画布也可能是html

对于绝对定位,可以从她的包含块向上,下,左,右移动。


可以结合 z-index 设置文档叠加顺序。


ps: bug:::::


浮动

浮动会导致元素脱离文档流。


要想阻止浮动,可以对这些行框的元素应用clear属性。left,right,both ,none; 表示那一边不应该挨着浮动框。


对于清除浮动  

方法1

div{
clear:both;
}

方法二

overflow属性定义在包含的内容对于指定的尺寸太大的情况下回怎么办,默认情况下面,内容会溢出。进入到相邻的空间去。

但是,如果使用hidden 或者 auto的overflow会有一个副作用,会自动清除包含任何浮动元素。

因此这是一种有用的元素清理方法,不需要添加额外标记。但是这种方式不适合所有的场景,因为设置框的overflow属性会影响他的表现。这种方式会造成产生滚动轴或者截断内容。


在css的使用,结合使用:after伪类和内容声明在指定的现有内容的末尾添加新的内容。

因为不希望新内容占据垂直空间或者在页面上面显示,所以需要将height设置为0,将visitibility 设置为hidden。因为被清的元素在他们的顶外边距上面添加了内容,所以生成了内容需要将他的display属性设置为block。

.clearfix:after{
  content:'';
  height:0;
  visibility:hidden;
  disply:block;
  clear:both;
}

.clearfix{
display:inline-block;
}


© 著作权归作者所有

共有 人打赏支持
bosscheng
粉丝 80
博文 303
码字总数 95443
作品 0
南京
前端工程师
私信 提问
能在不同的深度学习框架之间转换模型?微软的MMdnn做到了

Microsoft/MMdnn:深度学习框架随心切换 学习深度学习的各位同学都希望自己的模型能在不同的深度学习框架之间随意转换,比如,斯坦福大学CVGL实验室的Saumitro Dasgupta就做过一个把Caffe模型...

dqcfkyqdxym3f8rb0
01/05
0
0
Web开发系列 - ExtJS

什么是EXT 1、ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用JavaScript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。因此,可以把ExtJS用在.Net、Java、P...

长征2号
2017/08/08
0
0
前端开发人员必须了解的七大技能图谱之CSS

CSS是层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页...

web前端02
02/03
0
0
10 款非常棒的CSS代码格式化工具推荐

如果你刚开始学习CSS,这意味着你的很多代码或结构可能需要优化,比如你可能过多使用了类、添加了多余的间隔或空行等等,这将导致代码臃肿、混乱,可读性和执行效率将大大降低。 本文为你整理...

红薯
2011/12/14
3.9K
2
一行 Python 能实现什么丧心病狂的功能?

解码一个 base64 编码格式的文件 一行python解八皇后,其中一大半代码是用于打印出来带格式的 打印出输入文件中的每行代码,但移除前两个字段 终端路径切换到某文件夹下,键入: 然后浏览器打...

加米谷大数据
07/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

深入解析JSON与XML优缺点对比

本文从各个方面向大家对比展示了json和xml的优缺点,十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 #1. 定义介绍 1.1 XML定义 扩展标...

前端攻城老湿
刚刚
0
0
Vue 单页应用(spa)前端路由实现原理

一文搞懂单页应用原理Vue项目History模式路由机制 源码分析VueVueRouter Vue 单页应用(spa)前端路由实现原理 写在前面:通常 SPA 中前端路由有2种实现方式: window.history location.hash...

前端攻城小牛
2分钟前
0
0
Vuex的初探与实战小结

1.概述 每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。 Vuex 和单纯的全局对象有以下两点不同: 1.Vuex 的状态存储是响...

peakedness丶
4分钟前
0
0
CSS 背景图片全屏显示

<style> html { background: url(./static/login/xia.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; ......

SummerGao
7分钟前
0
0
Supplier函数式接口

Supplier接口的不传入参数,返回一个值。真是一个无私奉献的接口,还没有default方法。 下面就想用一个接口试试,其实我本来用的是IntSupplier,但是发现在使用方法引用的时候,不好把Math....

woshixin
21分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部