css样式中position:absolute和position:relative水平居中

首先我们要了解样式中的这两种定位;

absolute(绝对定位):将被赋予的对象从文档流中拖出,使用left,right,top,bottom等属性相对于最接近的一个最有定位设置的父级对象进行绝对定位,如果父级没有进行定位属性设置,则按照默认规则来设定(根据body左上角作为参考进行定位),同时绝对定位的对象可层叠。

relative(相对定位):对象不可重叠,使用left,right,top,bottom等属性在正常的文档流中进行定位,其对象不可以层叠。

居中:

1,对于使用了absolute定位的对象为了达到自适应居中的效果,要设置其作用对象的宽度;例如以下代码实现的居中

.ceshi
    {
        position:absolute;
        bottom: 10%;
        display: block;
        width: 250px;
        left:50%;
        margin-left:-125px;
        }

2,对于使用了relative定位的对象达到居中的效果,因为其在正常的文档流中,所以其参考对象为其自身,可以进行如下设置:

.ceshi2

{

margin:0 auto;

}

时间: 2024-10-16 10:47:08

css样式中position:absolute和position:relative水平居中的相关文章

css样式中position和_position的区别

position:fixed; 相对于浏览器窗口绝对定位._position:absolute; 只有IE6能识别, IE6不支持fixed, 所以针对IE6使用absolute绝对定位, 一般还要配套一个expression脚本来实现 属性expression_r:针对ie6写的 CSS的出现使网页制作者在对网页元素的控制方便许多,当然,有利必有弊,CSS只能对颜色.大小.距离等静态样式有效,对于要实现某些html元素的动态样式就显得有些力不从心. 有了CSS的自定义属性expression_

css样式中常见的属性

一 CSS文字属性: color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/ font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/ v

CSS样式中ClearBoth的理解

在CSS中我们会经常要用到“清除浮动”Clear,比较典型的就是clear:both; CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边.这个属性是用来控制float属性在文档流的物理位置的. 当属性设置float(浮动)时,其所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清除. 比如: 这个是第1列, 这个是第2列, 这个是第3列.

position ="absolute" 与 position="fixed的异同"

position ="absolute" position="fixed" 相同点 第一,完全脱离标准文档流 第二,未设置偏移量时,都定位在父元素左上角 不同点一: 设置偏移量时,偏移量的基准 absolute 1.无已定位的祖先元素,以<html>为基准 2.有已定位的祖先元素,以最近的父元素的为基准偏移 fixed 有无已定位的祖先元素都以浏览器的可视窗口为基准偏移 不同点二: 表现形式:(产生滚动条时) absolute:位置会随滚动条变化 fix

css样式中如何设置中文字体?

代码如下: .selector{ font-family: SimHei,"微软雅黑",sans-serif; } 注意:加上中文名“微软雅黑”是为了兼容opera浏览器,中文字体名必须加上引号(单引号双引号都可以). MicrosoftJhengHei为微软正黑体,STHeiti为华文黑体,MingLiu记得11px下的中文有着不凡的效果. 在css中推荐使用中文字体的英文表示法,以下附常见中文字体的英文名: 华文细黑:STHeiti Light [STXihei] 华文黑体:STH

CSS样式中visited,hover,active , focus这四个分别表示什么意思?

CSS伪类用于向某些选择器添加特殊的效果.CSS又名层叠样式表,所谓层叠,就是后面的样式会覆盖前面的样式,所以在样式表中,各样式排列的顺序很有讲究. :link 与 :visited 在样式文件中的顺序可以随便放置. :focus,: hover,:active这几个,如果你设置的顺序不同,会直接影响样式的显示效果. :focus -> :hover -> :active 有些人可能会困惑,为什么必须要按这样的顺序,而不能打乱呢? 其实他们每一个选择器都代表一个含义. :link代表为访问链接

css样式中的空格

1.css中的空格 2. jQuery的空格则表示:下一级 .filter这个样式的下一级标签li,li的下一级标签a(jQuery很强大,样式下的标签都能拿到,i 服了 you) 原文地址:https://www.cnblogs.com/Each-Person-Got-a-Dream/p/8949639.html

CSS样式中常用的字体名称

css中引入字体: @font-face { font-family: "AncientWar"; src: url('style/css/fonts/AncientWar.ttf'); } 常用的CSS字体名称 宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 MingLiU 标楷体 DFKai-SB 仿宋 FangSong 楷体 KaiTi

CSS样式中字体和大小

1.css中引入外部字体文件: @font-face 被列为了 CSS3 的一项新特性,其实它并不是什么新鲜技术,它最早出现在 CSS2 的规范定义中,但是在 CSS2.1 中又被删除,现在被正式列入 CSS3.目前主流的浏览器(IE 4+/Firefox 3.5+/Chrome 1+/Safari 3.1+/Opera 10+)都能够支持这个属性,所以不用担心会有浏览器兼容性问题. @font-face 允许您在网页中使用电脑中没有安装的字体,完全摆脱安全字体的限制.只需将字体包安装在服务器上