文档章节

css学习-可视化格式模型

bosscheng
 bosscheng
发布于 2015/04/12 17:23
字数 1200
阅读 90
收藏 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

bosscheng

粉丝 80
博文 317
码字总数 107223
作品 0
南京
前端工程师
私信 提问
加载中

评论(0)

数据可视化 Tableau Echarts Illustrator

学最有用的 第一章 : 导论 1-1 数据可视化应用及学习技巧 数据可视化作用: 1.信息记录(使用图形化的数据记录信息) 2.抽象 现实的一种抽象 3.展示隐含模式 4.传播思想 为什么: 1.信息可视...

osc_uc866nar
2019/02/08
9
0
能在不同的深度学习框架之间转换模型?微软的MMdnn做到了

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

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

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

长征2号
2017/08/08
0
0
【Tool】 深度学习常用工具

caffe 网络结构可视化 http://ethereon.github.io/netscope/quickstart.html 将网络结构复制粘贴到左侧的编辑框,按Shift+Enter就可以显示出你的网络结构 2. caffe计算图片的均值 使用caffe...

osc_yo4ttf5q
2018/03/06
1
0
10 款非常棒的CSS代码格式化工具推荐

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

红薯
2011/12/14
3.9K
2

没有更多内容

加载失败,请刷新页面

加载更多

君子动手不动口,阿里云喊你做云上体验官啦!

想要免费搭建云上博客?想要玩转全云端开发?想要挑战AI经典命题?想要7天进阶成为云计算专家?想要初始化你的云原生工程?快来阿里云 Hands-on Labs! Hands-on Labs 是阿里云全新推出的云上...

osc_18ydlfr7
23分钟前
16
0
CAD图纸转换成图片格式后,如何快速分享给同事?

我们常见的图片格式有PNG与JPG两种,这两种图片在很多平台上都能兼容,所以使用的几率特别高,很多办公室人员都会遇到把CAD图纸转换成PNG与JPG格式的工作。那么我们把CAD图纸转换成图片格式后...

真不莲
24分钟前
25
0
测试真的是一个无聊又没前途的岗位吗?是吗?不是吗?

同事小王:你第一份工作同事咋样?为什么离职? 测试小张:第一份工作就是测试,微软外包。别人在测试完了以后不知道干嘛,我抓紧时间看vs的源代码,抓紧时间看pheonix的源代码,抓紧时间看微...

osc_3zq7ptf4
24分钟前
13
0
怎么在电脑上进行视频截图?视频截图的简单步骤介绍

怎么在电脑上进行视频截图?小编最近在网上看到不少关于郑爽的话题文章,而不少文章都是通过视频截图的形式把她以前的影视作品截图下来,然后对她的演技和人品进行议论和评判。如果大家也想对...

玛哈菲亚
24分钟前
20
0
CAAI云课堂丨第十三期,北京交通大学人工智能研究院院长于剑开讲

     开启云端互动,CAAI带你与名师面对面。中国人工智能学会积极探索学术交流创新模式,围绕AI+学术、AI+技术以屏幕架起连接智能科技知识的桥梁,探索新型模式,开设CAAI云课堂等系列活...

osc_j5pkc521
25分钟前
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部