首页 > 代码库 > css基础和心得（四）
css基础和心得（四）
现在来说相对定位：
如果想为元素设置层模型中的相对定位，需要设置position:relaive（表示相对
定位），它通过left、right、top、bottom属性确定元素在正常文档流中便宜位
置。相对定位完成的过程是首先按static(float)方式生成一个元素（并且元素像
层一样浮动了起来），然后相对于以前的位置移动，移动的方向和幅度由left、right、
top、bottom属性确定，偏移前的位置保留不动。那么，什么叫“偏移前的位置保
留不动呢？”就是div元素相对于以前的位置产生偏移，但是div元素以前的位置
还保留着，所以在div元素里面的标签内的东西是不会偏离的。说简单点就是原来
div里面比如有一段文字，文字是不会动的，只是动div。
第三种是固定定位：
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图
（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动
条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的
显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受
文档流动影响，这与background-attachment:fixed;属性功能相同。这个官方意思
说的太复杂，要我说就是你们看的某些网站上面有一些什么普京啦等等赌博类型广
告在左右侧，你还无法关闭的那种东西。明白了嘛？/斜眼笑
学了绝对定义的方法：使用position:absolute可以实现被设置元素相对于浏览器
（body）设置定位以后，有没有想过可不可以相对于其他元素进行定位呢？答案是
肯定的。但是使用position:relative来帮忙，但是必须要遵循几个规范：
1、参照定位的元素必须是相对定位元素的前辈元素：
<div id="box1"><!--参照定位的元素-->
<div id="box2">相对参照元素进行定位</div><!==相对定位元素-->
</div>
从上面可以看出box1是box2的父元素（父元素当然是前辈元素了）
2、参照定位的元素必须加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
3、定位元素加入position:absolute，便可以使用top、bottom、left、right进行
偏移定位了。
#box2{
position:absolute;
top:20px;
left:30px;
}
这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了
而可以自由设置了。）这里一定要记住前后呼应，子元素要参照父元素的标准，
所以父元素是参照物，一定要加position:relative;子元素中要加position:absolute;
然后容易错的地方就是写html的时候，没有把子元素放在父元素中去，那么就不
能称之为父元素和子元素了。
然后我们来接着上面的说一下简写，这样做有个好处，就是缩减带宽，减少资源占
用。盒子模型中记得是什么样的吗？上(top)右(right)下(bottom)左(left)如：
margin:10px 15px 12px 14px;/*上设置为10px 右设置为15px 下设置为12px 左设
置为14px*/
通常有下面三种缩写方法：
1、如果top、right、bottom、left值相同，如：
margin:10px 10px 10px 10px;可以缩写为：margin:10px;
2、如果top和bottom相同，right和left相同，如：
margin:10px 20px 10px 20px;可以缩写为：10px 20px;
3、如果left和right相同，如：
margin:10px 20px 30px 20px;可以缩写为：margin:10px 20px 30px;
注意：padding、border的缩写方法和margin是一致的。
再注意一点啊：padding（拍腚）的意思是里面的内容到边框的距离又称之为填充
物！margin（妈个鹰）是在外面的！是包含整个的！border（包的）就是边框！包
起来的！
然后说颜色值缩写。这个嘛。。。找w3cschool慢慢查。。。我这个真不好写。
接着说字体缩写，网页中的字体css样式代码也有他自己的缩写方式，具体百度。
然后说长度值，这里要总结一下，常用到的px（像素）、em、%百分比，要注意其
实这三中单位都是相对单位。
1、像素
像素为什么是相对单位呢？因为像素指的是显示器上的小点（css规范中假设"90px=1英寸"）
实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向
于使用像素(px)作为单位
2、em
就是本元素给定字体的font-size值，如果元素的font-size为14px，那么1em=14px；
如果font-size为18px，那么1em=18px。如下：
p{font-size=12px;text-indent:2em;}这行代码就是可以实现段落首行缩进24px（
也就是两个字体大小的距离）
注意一个情况：当font-size设置单位为em时，此时计算的标准以p的父元素的font-size
为基础。如：
html:
<p>以这个<span>例子</span>为例。</p>
css:
p{font-size:14px}
span{font-size:0.8em;}
结果span中的字体“例子”字体大小就为11.2px(14*0.8=11.2px)
3、百分比
p{font-size:12px;line-height:130%}
设置行高（行间距）为字体的130%（12*1.3=15.6px）
我们实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题
一般都是水平居中显示的。
这里我们又得分两种情况：行内元素还是块状元素，块状元素里面又分为定宽块
状元素以及不定宽块状元素。我们来了解一下行内元素怎么进行水平居中？
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置一行
代码:text-algin:center来实现的。
但是当被设置元素为块状元素时用：text-align:center就不起作用啦，这时也分
两种情况：定宽块状元素和不定宽块状元素。
顶宽块状元素的情况是满足顶宽和块状两个条件的元素是可以通过设置"左右margin"
值为"auto"来实现居中的。如：
html:
<body>
<div>我是顶宽块状元素，要水平居中。</div>
</body>
css:
<style>
div{
border:1px solid red;/*为了显示居中效果，设置div边框*/
width:200px;/*定宽*/
margin:20px auto/*margin-left与margin-right设置为auto*/
}
</style>
也可以写成：
margin-left:auto;
margin-right:auto;
注意：元素的"上下margin"是可以随意设置的。
在实际工作中我们会遇到需要为"不定宽度的块状元素"设置居中，比如网页上的分
页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来显示它的弹性
（不定块状元素：块状元素的宽度width不固定）
不定宽度的块状元素有三种方法居中（这三种方法目前使用都比较多）：
1、加入table标签
2、设置display:inline方法与第一种类似，显示类型设为行内元素，进行不定宽
元素的属性设置
3、设置position:relative和left:50%：利用相对定位的方式，将元素向左偏移50%
即达到居中的目的。
先讲一下第一种，为什么选择方法--加入table标签？是利用table标签的长度自适
应性--即不定义其长度也不默认父元素body长度（table其长度根据其文本长度决
定）因此可以看做一个定宽度快元素，然后再利用定宽度块状居中的margin方法，
使其水平居中。
第一步：为需要设置的居中的元素外面加入一个table标签（包括<tbody>、<tr>、
<td>）
第二步：为这个table设置左右margin居中（这个和定宽块状元素方法一样）
第二种方法是改变元素的display类型为行内元素，利用其属性直接设置。改变块
级元素的display为inline类型（设置为行内元素显示）然后使用text-align:center
来实现居中效果。
html:
<body>
<div class="container">
<ul>
<li><a href="http://www.mamicode.com/#">1</a></li>
<li><a href="http://www.mamicode.com/#">2</a></li>
<li><a href="http://www.mamicode.com/#">3</a></li>
</ul>
</body>
css:
.container{
text-align:center;
}
/*margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
.container li{
margin-right:8px;
display:inline;
}
这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它
将块状元素的display类型改为inline，变成了行内元素，所以少了一些功能，比
如设定长度值。
除了插入table以及改变元素的display类型，可以使不定宽块状元素水平居中之外
还有第三种方法，设定浮动和相对定位来实现。
通过给弗雷元素设置float，然后给父元素设置position:relative和left:50%子元
素设置position:relative和left:-50%来实现水平居中。我们可以这样理解：假想
ul层（下面例子的div层）的浮层中间有条平分线将ul层的父层（div层）平均分为
两份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而
li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，
从而实现li层的居中。代码如下：
html:
<body>
<div class="container">
<ul>
<li><a href="http://www.mamicode.com/#">1</a></li>
<li><a href="http://www.mamicode.com/#">2</a></li>
<li><a href="http://www.mamicode.com/#">3</a></li>
</ul>
</div>
</body>
css:
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>
我们在实际工作中也会遇到需要设置垂直居中的场景，比如很多保值和文章标题左
右一侧时，常常会设置为垂直居中，为了用户体验性好。然后这里又得分为两种情
况：父元素高度确定的单行文本以及父元素高度确定的多行文本。
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height和line-height
高度一致来实现的。（height:该元素的高度，line-height:顾名思义，行高，又
称行间距，指在文本中，行与行之间的基线间的距离。）
line-height与font-size的计算值之差，在css中称为"行间距"。分为两半，分别
加到一个文本行内容的顶部和底部。这种文字行高与块高一致带来一个弊端，当文
字内容的长度大于块的宽时，就有内容脱离了块。如：
<div class=""container>
hi,baby!
</div>
css:
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>
父元素高度确定的多行文本、图片等的竖直居中的方法有两种：
方法一：使用插入table（包括tbody、tr、td）标签，同时设置vertical-align:middle
css中有一个用于竖直居中的属性vertical-align，在父元素设置此样式时，会对
inline-block类型的子元素都有用。如：
html:
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否居中</p>
</div>
</td></tr></tbody></table>
</body>
css:
table td{height:50px;background:#ccc}
因为td标签默认情况下就默认设置了vertical-align为middle，所以我们不需要显
式的设置了。
除了table标签还有一种，我就不细说了，因为兼容性比较差。做前端最重要的一
点就是兼容性的问题。ie6，ie7不支持的东西就拉倒了。
最后说一点，隐性改变display类型。
有一个有趣的现象就是当元素（不论之前是什么类型的元素，display:none除外）
设置一下2个语句之一：1、position:absolute 2、float:left或float:right
简单点来说，只要html代码中出现以上两句之一，元素的display显示类型就会自
动变为以display:inline0-block（块状元素）的方式显示，当然就可以设置元素
的width和height了，且默认宽度不占满父元素。
如下，都知道a标签是行内元素，所以设置它的width是没有效果的，但是设置为
position:absolute（绝对定位）以后就可以了。
html:
<div class="container">
<a href="http://www.mamicode.com/#" title="">进入</a>
</div>
css:
<style>
.container a{
position:absolute;
width:200px;
background:#ccc;
}
</style>
如果想不起来display:line-block是什么的可以回头看看"元素分类-内联块状元素"
到这里，css的一些基础方面知识就说的差不多了。希望各位记住一点，一定要端
正自己的态度，态度决定高度。一定不能眼高手低，不然会跟我一样吃了很多很多
亏才好不容易绕回来。
css基础和心得（四）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。