2.3背景相关属性
background-color背景色
background-img背景图片，需要图片的url地址
background-image: url("乌镇.JPG");
background-repeat:no-repeat;
background-position:right bottom;
background-repeat设置图片的复制排列方式
repeat在水平垂直两个方向复制排列
no-repeat不复制
repeat-x在水平方向复制排列
repeat-y在垂直方向复制排列
background-position设置图片在页面中的位置
也可以将这一组属性值装到一个background属性中，表达更加简洁
background: green url("乌镇.JPG") no-repeatright top;
书写顺序
背景色background-color 背景图片background-img 复制排列方式background-repeat 位置background-position
2.4尺寸相关属性
div{
width:200px;
height:200px;
background-color:red;
}
max-width最大宽度
max-height最大高度
min-width最小宽度
min-height最小高度
2.5显示相关属性
隐藏元素的方法
（1） visibility：hidden 仅仅隐藏内容，该元素所占位置依然存在
（2） display：none 不仅隐藏内容，切不占位置
li{
display:inline-block;
width:200px;
background-color:red;
}
display可以设置元素的显示模式
inline将块级元素以内联元素显示，此时width和height属性无效其空间取决于元素的内容
inline-block将块级元素以内联元素显示，同时兼具块级元素某些特征，比如可以使用width和height设置所占位置大小
block将内联元素以块级元素显示
span{
display:block;
background-color:blue;
width:100px;
}
2.6盒子模型
margin外边距
margin-top margin-right margin-bottommargin-left
使用方式
（1）margin：30px表示上下左右边距都是30px
（2）margin30px 单独设置上下左右外边距
（2）margin：10px 20px 30px 40px 分别设置上右下左四个边距为10px 20px 30px 40px
padding内边距
使用方式和margin类似
border边框
/*border: 50px dotted blueviolet;*/
border-width: 边框宽度
border-style: 边框线条类型
border-color: 边框颜色
border：10px dashed blue
outline轮廓线 用法同border
2.7定位
定位方式有：static、fixed、relative、absolute
static静态定位（默认）
无定位，元素正常出现在（数据）流中，不受left right top bottom属性影响
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: red;
position: static;
}
</style>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background-color: red;
}
#div2{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
<style type="text/css">
#div1{
width:200px;
height:200px;
background-color: red;
position: fixed;
left: 30px;
top: 20px;
}
#div2{
width:200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
从结果可以看出，fix定位会将元素从流中“摘”出来单独进行定位位置取决于left、top
重新定位之后可能会出现重叠，通过z-index可以调整其顺序，但是定位z-index无效
<style type="text/css">
#div1{
width:200px;
height:200px;
background-color: rgb(255,0,0);
}
#div2{
width:200px;
height: 200px;
background-color: green;
position: relative;
top: 20px;
left: 30px;
}
#div3{
width:100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
从结果可以看出，相对单位是从原有位置进行位移，但并不影响后续元素的位置
absolute绝对定位
<style type="text/css">
#div1{
width:200px;
height: 200px;
background-color: rgb(255,0,0);
}
#div2{
width:200px;
height: 200px;
background-color:green;
position: absolute;
top: 20px;
left: 30px;
}
#div3{
width:100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
从结果可以看出：绝对定位的元素将从流中被“摘”出来，依靠left于top属性进行定位
于fixed类似，但是参照物不同
fixed参照根元素（浏览器）
absoult参照父容器
3.选择器
所谓选择器，指的是选择施加样式目标的方式
3.1元素选择器
用标签名作为选择器，选中所有相应的元素
<style type="text/css">
div{
font-size:32px;
color: blue;
}
p{
font-size:42px;
color: red;
}
</style>
</head>
<body>
<div>元素选择器</div>
<p>元素选择器</p>
</body>
3.2id选择器
是根据id来选择元素，其样式定义形成为
#id name{
......
}
<style type="text/css">
div{
width:200px;
height: 200px;
}
#div1{
background-color:red;
}
#div2{
background-color:blue;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
3.3类型选择器
根据class属性来选择元素，其定义样式形式为
.class Name{
......
}
<style type="text/css">
.even{
width:200px;
height: 200px;
background-color: red;
}
.odd{
width:200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="odd"></div>
<div class="even"></div>
<div class="odd"></div>
</body>
从结果可以看出 .odd{......}定义的样式会施加到所有class=“odd”的元素上比如上例中的第一个和第三个div，当然也包括class=“odd”的<p>标签
3.4属性选择器
根据某个属性的特征比如有无、值等来选择
（1）根据有无某属性来选择
<style type="text/css">
[title]{
width: 200px;
height: 100px;
background-color: red;
border: 1px solid green;
}
</style>
</head>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div>3</div>
<div title="adiv">4</div>
<div title="diva">5</div>
</body>
从结果可以看出，所有具有title属性的元素都应用了红色背景色的样式
（2）根据属性的值来选择
<style type="text/css">
[title="div2"]{
width: 200px;
height: 100px;
background-color: red;
border: 1px solid green;
}
</style>
</head>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div>3</div>
<div title="adiv">4</div>
<div title="diva">5</div>
</body>
从结果可以看出，只有第二个div应用了红色背景样式，因为只有第二个div的title属性等于div2
~= 选中属性值包含指定完整单词的元素，类似word中的全字匹配
title^=“div”选中title属性值以“div”开头的元素
title$=“div”选中title属性值以“div”结尾的元素
title*=“div”选中title属性值包含“div”的元素
3.5结构（关系）选择器
（1）后代选择器
可以选择一个元素的后代元素。这个后代元素包括儿子、孙子...
写法（空格）
.content a{
font-size:30px;
}
<body>
<h1>尼泊尔将接入中国互联网</h1>
<div class="content">
<p>此前，尼泊尔互联网主要</p>通过<a href="http://www.baidu.com">锡陀</a>塔那迦、比尔根杰、比拉德讷格尔等南部城镇与印度相连，从而获得入网服务。
</div>
<a href="http://www.baidu.com">查看原文</a>
</body>
（2）子元素选择器
通过某一个元素选中直接后代元素
<style>
.content > a{
font-size: 30px;
}
</style>
</head>
<body>
<h1>尼泊尔将接入中国互联网</h1>
<div class="content">
<p>此前，<span><a href="">尼泊尔</a> </span>互联网主要</p>通过<a href="http://www.baidu.com">锡陀</a>阿萨德<a href="http://www.baidu.com">锡陀</a>塔那迦、比尔根杰、比拉德讷格尔等南部城镇与印度相连，从而获得入网服务。
</div>
<a href="http://www.baidu.com">查看原文</a>
</body>
3.6并选择器
通过将相同的样式的类名放在一起，将类名直接使用逗号分隔.
<style>
.div1,.div2{
position:relative;
width: 100px;
height: 100px;
}
.div1{
border:1px solid yellow;
}
.div2{
border:1px solid blue;
}
</style>
</head>
<body>
<div class="div1">我是div1</div>
<div class="div2">我是div2</div>
</body>
3.7通配符选择器
通配符选择器可以选中页面中所有的标签。
写法 *{
}
注意：通配符选择器对页面所有的元素是都会设置对应的样式，而是实际上呢，有很多默认是不带任何的样式的
3.8兄弟选择器
（1）.go-to + a{
text-decoration:none;
}
选中最近的一个弟弟（元素）
<a class="go-to" href="http：//www，baidu。com">前往现场</a>
<a href="http：//www，baidu。com">前往现场2</a>
<a href="http：//www，baidu。com">前往现场3</a>
不选中自己
选中所有的弟弟（元素）
.go-to ~ a{
text-decoration:none;
}
同样不选中自己
3.9伪类、伪元素选择器
伪类选择器
根据元素不同的状态，自动选择不同的样式
或
直接添加一个class，给这个class设定特殊样式
li:first-child
a:hover鼠标滑过的时候添加样式
a:active被激活时（点击那一刻），添加样式
a:link链接地址未被访问时添加状态。必须设置href状态
a:visited链接地址被访问后添加状态。必须设置href状态
input:focus拥有键盘输入获取焦点的时候添加的样式
伪元素选择器
需要设置特殊效果的内容放到一个元素（标签）里面span
在添加一个class，对class设置特殊样式
p:first-letter <line> p:after p:before
p:after{
content:"。"
}
4.定位相关复习
4.1文档流
是html的布局机制，块元素（block）独占一行，内联元素（inlin）不独占一行
4.2相对定位
就是相对一个东西来定位。这个东西就是它本身。同时可以使用left、top、bottom、right来移动元素位置
相对定位不会脱离文档流
4.3绝对定位
找一个东西相对来绝对（决定）定位，这个东西（element）必须设定position并且定位非static。简而言之，这个小鬼（element）定位可以是他爸爸、他爷爷、他太公...(body)中有钱的（position：absoulute）或者是当官的（position：relative，fixed）不能是程序员（position:static或直接没有写定位）
注意：绝对定位脱离文档流。“父相子绝”。
使用绝对定位设置top：0和不设置top等属性有什么区别
如果没有设置top属性，元素的位置和没有脱离文档流的位置一样
4.4fixed定位
就是相对于浏览器窗口的定位
使用position属性，一般不使用margin，padding属性
扫一扫
163
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
