文档章节

css学习-可视化格式模型

bosscheng
 bosscheng
发布于 2015/04/12 17:23
字数 1200
阅读 13
收藏 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
博文 302
码字总数 94883
作品 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
一行 Python 能实现什么丧心病狂的功能?

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

加米谷大数据
07/23
0
0
可视化大数据分析挖掘工具--OpenFEA

一、简介 FEA是一站式大数据敏捷分析中间件,融合了内存计算、机器学习、交互分析、可视化分析等技术,涵盖数据收集、数据探索、构建模型、发布模型、可视化展示、分析门户等功能,无需复杂编...

openfea
2017/05/27
5K
2
通过KNN分类算法模型为案例进行机器学习研究

基于KNN分类算法模型为案例进行机器学习研究 (白宁超 2018年7月24日08:52:16 ) 导读:机器学习算法中KNN属于比较简单的典型算法,既可以做聚类又可以做分类使用。本文通过一个模拟的实际案例...

伏草惟存
07/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

一个可能的NEO链上安全随机数解决方案

0x00 困境 链上安全随机数生成应该算是一个比较蛋疼的问题,哪怕你的系统再牛逼,合约程序困在小小的虚拟机里,哪怕天大的本事也施展不开。 更悲催的是,交易执行的时候,是在每一个节点都执...

暖冰
31分钟前
0
0
【大福利】极客时间专栏返现二维码大汇总

我已经购买了如下专栏,大家通过我的二维码你可以获得一定额度的返现! 然后,再给大家来个福利,只要你通过我的二维码购买,并且关注了【飞鱼说编程】公众号,可以加我微信或者私聊我,我再...

飞鱼说编程
今天
1
0
Spring5对比Spring3.2源码之容器的基本实现

最近看了《Spring源码深度解析》,该书是基于Spring3.2版本的,其中关于第二章容器的基本实现部分,目前spring5的实现方式已有较大改变。 Spring3.2的实现: public void testSimpleLoad(){...

Ilike_Java
今天
1
0
【王阳明心学语录】-001

1.“破山中贼易,破心中贼难。” 2.“夫万事万物之理不外于吾心。” 3.“心即理也。”“心外无理,心外无物,心外无事。” 4.“人心之得其正者即道心;道心之失其正者即人心。” 5.“无...

卯金刀GG
今天
2
0
OSChina 周三乱弹 —— 我们无法成为野兽

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ _刚刚好: 霸王洗发水这波很骚 手机党少年们想听歌,请使劲儿戳(这里) hahahahahahh @嘻酱:居然忘了喝水。 让你喝可乐的话, 你准忘不了...

小小编辑
今天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部