2.3 背景相关属性
body{
background-color:
#37ff68;
background-image:
url(
"../pic/js.jpg");
background-repeat:
no-repeat;
background-position:
bottom;
}
background-color:背景 {MOD}
background-image:设定背景图片，需要设置图片的url地址
background-repeat:图片的复制选项
repeat：在水平和垂直两个方向上进行复制
no-repeat:不复制
repeat-x:在水平方向上复制
repeat-y：在垂直方向上复制
也可以将这一组属性值封装到一个属性background中，书写书序是：
背景 {MOD}background-color
背景图片background-image
重复方式background-repeat
位置backgroud-position
表达更加简洁
background:
green url(
"../pic/js.jpg")
no-repeat right top;
2.4 尺寸相关属性
height:高度
width:宽度
div{
width:
200px;
height:
200px;
background-color:
red;
}
max-width:最大宽度
max-height：最大高度
min-width：最小宽度
min-height：最小高度
2.5 显示相关属性
隐藏元素的方法：
（1）visibility：hidden，仅仅隐藏内容，该元素所占位置依然存在；
（2）display：none，不仅隐藏内容，且不占位置
div{
height:
100px;
/*visibility:hidden;*/
display:
none;
}
display可以设置元素的显示模式
inline:将块级元素以内联元素形式显示，此时width和height属性无效，其空间取决于元素的内容。
inline-block: 将块级元素以内联元素形式显示,同时兼具块级元素的某些特征，比如可以使用width和height设置所占位置大小。
li{
/*display:inline;*/
display:
inline-block;
width:
200px;
background-color:
blueviolet;
}
span{
display:
block;
}
也可以将内联元素以块级元素形式来显示，即display:block。
2.6 盒子模型
margin：外边距
margin-top、margin-right、margin-bottom、margin-left
使用方式
（1）margin:30px;表示上下左右外边距都未30px；
（2）margin-left：30px；单独设置上下左右外边距
（3）margin：10px 20px 30px 40px；分别设置上右下左四个边距为10px 20px30px 40px
padding:内边距
也有上下左右边距，和margin类似，不再赘述。
border:边框
border-width: 边框宽度;
border-style: 边框线条类型;
border-color: 边框的颜 {MOD};
word中设置边框的操作
也可以使用更优化的书写方式
border:10px dashed blue;
outline：轮廓线，用法同border
2.7 定位
定位方式有：static、fixed、relative、absolute。
static 静态定位（默认）
无定位，元素正常出现了流中，不受left、right、top、bottom属性的影响。
div{
width:
200px;
height:
200px;
background-color:
red;
position:
static;
}
显示效果
fixed
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<title>title>
<style type="text/css">
#div1{
width:
200px;
height:
200px;
background-color:
red;
}
#div2{
width:
200px;
height:
200px;
background-color:
greenyellow;
}
style>
head>
<body>
<div id="div1">div>
<div id="div2">div>
body>
显示效果为
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<title>title>
<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:
greenyellow;
}
style>
head>
<body>
<div id="div1">div>
<div id="div2">div>
body>
从结果可以看出，fix定位会将元素从流中“摘”出来单独进行定位，其定位取决于left、top。
重新定位之后可能会出现重叠，通过z-index可以调整其顺序，但是静态定位z-index无效。
relative
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<title>title>
<style type="text/css">
#div1{
width:
200px;
height:
200px;
background-color:
rgba(
255,
0,
0,
1);
}
#div2{
width:
200px;
height:
200px;
background-color:
greenyellow;
position:
relative;
top:
20px;
left:
30px;
}
#div3{
width:
100px;
height:
100px;
background-color:
aqua;
}
style>
head>
<body>
<div id="div1">div>
<div id="div2">div>
<div id="div3">div>
body>
显示结果为
从结果可以看出，相对定位是从原有位置进行位移，但并不影响后续元素的位置。
absolute 绝对定位
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<title>title>
<style type="text/css">
#div1{
width:
200px;
height:
200px;
background-color:
rgba(
255,
0,
0,
1);
}
#div2{
width:
200px;
height:
200px;
background-color:
greenyellow;
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参照根元素（html）
absolute参照父容器
3 选择器
所谓选择器，指的是选择施加样式目标的方式。
3.1 元素选择器
用标签名作为选择器，选中所有相应的元素
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<title>title>
<style type="text/css">
div{
font-size:
24px;
color:
red;
}
p{
font-size:
32px;
color:
blue;
}
style>
head>
<body>
<div>元素选择器
div>
<p>元素选择器1
p>
<p>元素选择器2
p>
body>
3.2 id选择器
顾名思义，是根据id来选择元素，其样式定义形式为：
#idname{
……
}
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<title>title>
<style type="text/css">
#div1{
width:
200px;
height:
200px;
background-color:
red;
}
#div2{
width:
200px;
height:
200px;
background-color:
blue;
}
style>
head>
<body>
<div id="div1">div>
<div id="div2">div>
body>
html>
显示结果为
3.3 类选择器
根据class属性来选择元素，其样式定义形式为：
.className{
……
}
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<title>title>
<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"的
元素上，比如上例中的第一个和第三个
，当然也包括class="odd"的
。
3.4属性选择器
根据某个属性的特性（比如有无、值等）来选择
（1）根据有无某属性来选择
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<title>title>
<style type="text/css">
[title]{
width:100px;
height:50px;
background-color:red;
border:1px solid green;
}
style>
head>
<body>
<div title="div1">1div>
<div title="div2">2div>
<div >3div>
<div title="a div">4div>
<div title="div a">5div>
body>
运行结果：
从结果可以看出，所有具有title属性的元素都应用了红 {MOD}背景 {MOD}的样式。
（2）根据属性的值来选择
=
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<title>title>
<style type="text/css">
[title='div2']{
width:100px;
height:50px;
background-color:red;
border:1px solid green;
}
style>
head>
<body>
<div title="div1">1div>
<div title="div2">2div>
<div >3div>
<div title="a div">4div>
<div title="div a">5div>
body>
显示结果为
从结果可以看出，只有第二个div应用了红 {MOD}背景的样式，因为只有第二个div的title属性等于div2
~=：选中属性值包含指定完整单词的元素,类似word中的全字匹配
title ^= 'div':选中title属性值以'div'开头的元素
title $= 'div':选中title属性值以'div'结尾的元素
title *= 'div':选中title属性值包含'div'的元素
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.xiaopingtou.cn//data/attach/topic/topicKPo7gB.jpg', '推荐 chuishazuoshi 的文章《HTML5背景属性、盒子模型和选择器》','https://www.xiaopingtou.net/article-63094.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}