文档章节

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
粉丝 78
博文 299
码字总数 91232
作品 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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

qduoj~前端~二次开发~打包docker镜像并上传到阿里云容器镜像仓库

上一篇文章https://my.oschina.net/finchxu/blog/1930017记录了怎么在本地修改前端,现在我要把我的修改添加到部署到本地的前端的docker容器中,然后打包这个容器成为一个本地镜像,然后把这...

虚拟世界的懒猫
今天
1
0
UML中 的各种符号含义

Class Notation A class notation consists of three parts: Class Name The name of the class appears in the first partition. Class Attributes Attributes are shown in the second par......

hutaishi
今天
1
0
20180818 上课截图

小丑鱼00
今天
1
0
Springsecurity之SecurityContextHolderStrategy

注:下面分析的版本是spring-security-4.2.x,源码的github地址是: https://github.com/spring-projects/spring-security/tree/4.2.x 先上一张图: 图1 SecurityContextHolderStrategy的三个......

汉斯-冯-拉特
今天
1
0
LNMP架构(Nginx负载均衡、ssl原理、生成ssl密钥对、Nginx配置ssl)

Nginx负载均衡 网站的访问量越来越大,服务器的服务模式也得进行相应的升级,比如分离出数据库服务器、分离出图片作为单独服务,这些是简单的数据的负载均衡,将压力分散到不同的机器上。有时...

蛋黄_Yolks
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部