文档章节

css学习-可视化格式模型

bosscheng
 bosscheng
发布于 2015/04/12 17:23
字数 1200
阅读 13
收藏 0
点赞 0
评论 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
粉丝 78
博文 211
码字总数 91232
作品 0
南京
前端工程师
能在不同的深度学习框架之间转换模型?微软的MMdnn做到了

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

dqcfkyqdxym3f8rb0 ⋅ 01/05 ⋅ 0

Web开发系列 - ExtJS

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

长征2号 ⋅ 2017/08/08 ⋅ 0

可视化大数据分析挖掘工具--OpenFEA

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

openfea ⋅ 2017/05/27 ⋅ 2

用Pyador进行『异常检测』: 开发无监督机器学习工具库(一)

0. 背景 异常检测(Anomaly Detection)有非常广泛的应用场景: 金融业:从海量数据中找到“欺诈案例” 网络安全:从流量数据中找到“侵入者” 在线零售:从交易数据中发现“恶意买家” 换句话...

阿萨姆 ⋅ 2017/10/04 ⋅ 0

深度学习 21天实战Caffe

帮助 链接:http://pan.baidu.com/s/1hsnIPfe 密码:xjpg 内容简介 · · · · · · 《深度学习:21天实战Caffe》是一本深度学习入门读物。以目前已经大量用于线上系统的深度学习框架Caffe...

x1kz18nkbqg ⋅ 2017/11/22 ⋅ 0

R语言构建层次分析模型不看一下吗~

作者简介 杜雨,EasyCharts团队成员,R语言中文社区专栏作者,兴趣方向为:Excel商务图表,R语言数据可视化,地理信息数据可视化。 个人公众号:数据小魔方(微信ID:datamofang) ,“数据小...

R语言中文社区 ⋅ 05/13 ⋅ 0

史上最全的机器学习资料(上)

摘要: 机器学习牵涉的编程语言十分之广,包括了MATLAB、Python、Clojure、Ruby等等。为了让开发者更加广泛、深入地了解机器学习,云栖社区组织翻译了GitHub Awesome Machine Learning 资源,...

NathanJoy ⋅ 2016/08/30 ⋅ 0

前端开发人员必须了解的七大技能图谱之CSS

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

web前端02 ⋅ 02/03 ⋅ 0

可视化Keras深度学习神经网络模型

为了使开发者更好的理解其开发的神经网络模型,Keras Python深度学习库提供了可视化神经网络模型的工具。这对于产品演示和讲解是非常有用的 在本文,你会学到如何在Keras中总结和可视化深度学...

【方向】 ⋅ 2017/12/13 ⋅ 0

10 款非常棒的CSS代码格式化工具推荐

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

红薯 ⋅ 2011/12/14 ⋅ 2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

6.1 压缩打包介绍 6.2 gzip压缩工具 6.3 bzip2压缩工具 6.4 xz压缩工具

压缩打包介绍 使用压缩工具的好处: 使用压缩文件,不仅可以节省磁盘空间,而且在传输时还能节省网络宽带。 我们通常讲的家用宽带和机房宽带100M是有区别的: 机房宽带的上行和下行都是100M,...

Linux_老吴 ⋅ 14分钟前 ⋅ 0

SpringBoot热部署加持

概述 进行SpringBoot的Web开发过程中,我们很多时候经常需要重启Web服务器才能保证修改的 源代码文件、或者一些诸如xml的配置文件、以及一些静态文件生效,这样耗时又低效。所谓的热部署指的...

CodeSheep ⋅ 20分钟前 ⋅ 0

OSChina 周六乱弹 —— 假如你被熊困到树上

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @小小编辑:推荐歌曲《如果写不出好的和弦就该在洒满阳光的钢琴前一起吃布丁》 《如果写不出好的和弦就该在洒满阳光的钢琴前一起吃布丁》- 谢...

小小编辑 ⋅ 51分钟前 ⋅ 5

vbs 取文件大小 字节

dim namedim fs, s'name = Inputbox("姓名")'msgbox(name)set fs = wscript.createobject("scripting.filesystemobject") 'fs为FSO实例if (fs.folderexists("c:\temp"))......

vga ⋅ 今天 ⋅ 1

高并发之Nginx的限流

首先Nginx的版本号有要求,最低为1.11.5 如果低于这个版本,在Nginx的配置中 upstream web_app { server 到达Ip1:端口 max_conns=10; server 到达Ip2:端口 max_conns=10; } server { listen ...

算法之名 ⋅ 今天 ⋅ 0

Spring | IOC AOP 注解 简单使用

写在前面的话 很久没更新笔记了,有人会抱怨:小冯啊,你是不是在偷懒啊,没有学习了。老哥,真的冤枉:我觉得我自己很菜,还在努力学习呢,正在学习Vue.js做管理系统呢。即便这样,我还是不...

Wenyi_Feng ⋅ 今天 ⋅ 0

博客迁移到 https://www.jianshu.com/u/aa501451a235

博客迁移到 https://www.jianshu.com/u/aa501451a235 本博客不再更新

为为02 ⋅ 今天 ⋅ 0

win10怎么彻底关闭自动更新

win10自带的更新每天都很多,每一次下载都要占用大量网络,而且安装要等得时间也蛮久的。 工具/原料 Win10 方法/步骤 单击左下角开始菜单点击设置图标进入设置界面 在设置窗口中输入“服务”...

阿K1225 ⋅ 今天 ⋅ 0

Elasticsearch 6.3.0 SQL功能使用案例分享

The best elasticsearch highlevel java rest api-----bboss Elasticsearch 6.3.0 官方新推出的SQL检索插件非常不错,本文一个实际案例来介绍其使用方法。 1.代码中的sql检索 @Testpu...

bboss ⋅ 今天 ⋅ 0

informix数据库在linux中的安装以及用java/c/c++访问

一、安装前准备 安装JDK(略) 到IBM官网上下载informix软件:iif.12.10.FC9DE.linux-x86_64.tar放在某个大家都可以访问的目录比如:/mypkg,并解压到该目录下。 我也放到了百度云和天翼云上...

wangxuwei ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部