一、位置

1、绝对定位

position:absolute:绝对定位。

绝对位置的意思就是相对于浏览器边框的位置,回归到它应有的位置。也就是说,一个div使用绝对定位后是在浏览器边框的最左上角位置。而此时,可以利用上下左右的标签进行更改位置。

            #a1{
width: 200px;
height: 200px;
background-color: burlywood;
position:absolute;
top: 10px;
left: 10px;
}
</style


2、固定位置

position:fixd:固定位置

同样的,固定位置也是相对有浏览器边框而定。但注意的是,值不可为负。

position:fixed;


3、相对位置

position:relative:相对位置

相对于自身原来出现的位置,进行移动。

            #a1{
width: 200px;
height: 200px;
background-color: burlywood;
position: relative;
top: 50px;
}


二、流

1、float:流

往哪个方向流,那么元素就跟着全部往哪个方向去。

            #liu{
width: 900px;
height: 50px;
}
.lift{
float: left;
}

2、清流

不管是float还是position,都是浮在上面一层。当我们都使用float流的时候,下面的一层就会覆盖住上面一层。而这个时候避免出现问题,我们就需要清流。

Bug:

这个时候就需要我们清除一个流:

clear:both:清除所有


三、文字样式居中

            .lift{
float: left;
width: 100px;
height: 50px;
text-align: center;
vertical-align: middle;
line-height: 50px;
margin-left: 7px;
background-color: cornflowerblue;
}


四、Z-index分层

相当于Z轴的一个序列号。

属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

Z-index 只能在定位元素上有效果(例如 position:absolute;)

 
            #no1{
width: 200px;
height: 100px;
background-color:black;
position: absolute;
z-index: ;
}
#no2{
width: 300px;
height: 50px;
background-color: yellow;
position: absolute;
z-index: ;
}

Z-index的值越大越靠上

Css格式与布局的更多相关文章

  1. 关于CSS格式与布局中的基础知识的简单操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. CSS格式与布局中三种位置的理解与应用

    第一种位置关系:position:fixed  锁定位置(相对于整个浏览器的位置),常用在各大网站的右下角或其它位置的小广告. 如果需要调整锁定位置,需要使用如下方式:<div style=&q ...

  3. css样式表 格式与布局

    1 样式表  内联样式表  内嵌样式表  外部样式表 2 选择器 标签选择器 <style type="text\css" class 选择器  以.开头 ID选择器 以#开 ...

  4. css样式表:样式分类,选择器。样式属性,格式与布局

    样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...

  5. css样式,边界和边框,格式和布局

    1.大小:width:宽:heigh:高 2.背景:1)background-color:背景颜色 2)background-image:背景图片url路径 3)background-repeat:图 ...

  6. HTML css 格式布局

    CSS(cascading style sheets,层叠样式表),作用是美化HTML网页. /*注释*/   注释语法 2.1 样式表的基本概念 2.1.1样式表的分类 1.内联样式表 和HTML联 ...

  7. css样式表----------样式属性(背景与前景、边界和边框、列表与方块、格式与布局)

    一.背景与前景 (1).背景 line-height: 1.5 !important;">90; /*背景色(以样式表为主,样式表优先.)*/ background-image:url ...

  8. 9月11日上午HTML有序列表、无序列表、网页的格式和布局

    样式表 六.列表方块 1.有序列表变无序列表 <ol> <li>张店</li> <li>桓台</li> <li>淄川</l ...

  9. 一起学HTML基础-格式与布局fixed/absolute/relative/z-index/float

    很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给di ...

随机推荐

  1. Java开发环境搭建——Tomcat配置

    指定tomcat的JDK版本可能由于种种原因,系统的JAVA_HOME配置的JDK版本并不是当前需要的版本,而tomcat默认使用的是JAVA_HOME的JDK.可以通过修改tomcat/bin/ca ...

  2. linux下cetos7无线网络设置办法

    首先检查是否安装了networkmanger wifi.RPM 检查方法,终端输入rpm一qa 如果不存在,利用rpm一ivh 文件名 进行安装,并且重启

  3. 【JavaWeb】Spring+SpringMVC+MyBatis+SpringSecurity+EhCache+JCaptcha 完整Web基础框架(一)

    Spring+MyBatis 首先要搭建的是Spring+MyBatis的整合框架,毕竟Spring是整个Web框架的核心部位,而数据库操作是一切测试的基础嘛. 目录结构 ━java ┣ contro ...

  4. python网络编程

    Socket是网络编程的一个抽象的概念. 通常我们用一个Socket表示"打开了一个网络链接",而打开一个Socket需要知道目标计算机的IP地址和端口号,再指定协议类型即可. 套 ...

  5. webView和js交互

    与 js 交互 OC 调用 JS // 执行 js - (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *title = [web ...

  6. C++ cast

    excerpted from Type conversions K&R Section 2.7 p59 对type conversion 的解释: The precise meaning of ...

  7. Linux服务管理

  8. hibernate学习四(关系映射一对一与组件映射)

    一.关系映射简介 在数据库中,表与表的关系,仅有外键.但使用hibernate后,为面向对象的编程,对象与对象的关系多样化:如 一对一,一对多,多对多,并具有单向和双向之分. 开始练习前,复制上一次项 ...

  9. 引入DecimalFormat类进行数字格式化操作

    引入语句:import java.text.DecimalFormat; 首先创建DecimalFormat类对象,利用类对象调用Format()方法进行格式化操作.这里有两种方法:①.Decimal ...

  10. Maven之构件

    定义 构件:在Maven中,任何依赖(jar包,tomcat等),或项目(自己打包的jar,war等)输出都可成为构件.每个构件都有自己的唯一标识(唯一坐标),由groupId,artifactId, ...