您的位置：首页 > Web前端 > CSS

CSS常用知识点

2016-06-23 14:21 656 查看

块级元素：width宽和height高有效。

内联元素：width宽和height高无效。

1.float:该属性的值指出了对象是否及如何浮动。

none：设置对象不浮动
left：设置对象浮在左边
right：设置对象浮在右边

2.clear:该属性的值指出了不允许有浮动对象的边。

none：允许两边都可以有浮动对象
both：不允许有浮动对象
left：不允许左边有浮动对象
right：不允许右边有浮动对象

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>float和clear的例子</title>
<style type="text/css">
.float {
height: 200px;
width: 200px;
margin-left: 10px;
margin-top: 10px;
background-color: blue;
float: left;
}

.nofloat {
height: 200px;
width: 200px;
background-color: red;
margin-left: 10px;
margin-top: 10px;
}

.clear{
clear: both;
}

</style>
</head>

<body>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="clear"></div>
<div class="nofloat"></div>
<div class="nofloat"></div>
</body>

</html>

3.position:设置或检索对象是否及如何显示。

static：对象遵循常规流。此时4个定位偏移属性不会被应用。(top，right，bottom，left无效)
relative：对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。(就是其他元素位置不受影响，但本身发生了偏移)
absolute：对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素(父级元素为relative和absolute)，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
fixed：与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。

4.line-height

normal：允许内容顶开或溢出指定的容器边界。
<length>：用长度值指定行高。不允许负值。(line-height:32px)
<percentage>：用百分比指定行高，其百分比取值是基于字体的高度尺寸。不允许负值。 (line-height:100%)
<number>：用乘积因子指定行高。不允许负值。(line-height:2)

5.水平居中垂直居中

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>垂直居中</title>
<style type="text/css">
.center {
width: 200px;
height: 200px;
background-color: yellow;
text-align: center;
line-height: 200px;
margin-left: auto;
margin-right: auto;
}

.center1 {
width: 200px;
height: 200px;
background-color: yellow;
display: table;
margin-left: auto;
margin-right: auto;
}

.inner {
display: table-cell;
vertical-align: middle;
}
</style>
</head>

<body>
<div class="center">水平居中垂直居中</div>
<div class="center1">
<div class="inner">
水平居中垂直居中水平居中垂直居中水平居中垂直居中水平居中垂直居中水平居中垂直居中水平居中垂直居中水平居中垂直居中水平居中垂直居中水平居中垂直居中水平居中垂直居中水平居中垂直居中水平居中垂直居中水平居中垂直居中
</div>
</div>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航