定义DIV时,CSS样式中的right属性和margin-right属性的作用分别的什么?

html-css09

定义DIV时,CSS样式中的right属性和margin-right属性的作用分别的什么?,第1张

!important指的是优先级最高,会覆盖其他样式。float:right

!important;指的就是这个元素会右浮动,margin-right:0%

!important;指的是这个元素的右外边距为0,就算有其他同属性的样式,也会被带有!important的属性覆盖。

你的需求是这样么?你只要控制一下父级和子级的包含关系就可以实现了:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<style type="text/css">

* {

margin: 0

padding: 0

}

hr{margin: 10px 0 10px 0 }

li {

list-style: none

}

.nav {

height: 35px

position: relative

}

.bar{

position: absolute

right: 0

}

.bar ul li {

float: left

background: #3695D5

width: 50px

height: 35px

line-height: 35px

text-align: center

}

.box{border: 1px solid #000000}

</style>

<body>

<div class="nav">

<div class="bar">

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

</ul>

</div>

</div>

<div class="box">

<ul>

<li>1212</li>

<li>2323</li>

<li>3434</li>

<li>4545</li>

</ul>

</div>

<hr>

<div class="box">

<div class="nav">

<div class="bar">

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

</ul>

</div>

</div>

<ul>

<li>1212</li>

<li>2323</li>

<li>3434</li>

<li>4545</li>

</ul>

</div>

</body>

</html>

right 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。

注释:如果 "position" 属性的值为 "static",那么设置 "right" 属性不会产生任何效果。(内容来至w3c的css参考手册)。元素的position属性默认值是static,可以修改position为absolute