HTML5背景属性、盒子模型和选择器
2017-07-13 20:28
573 查看
2.3 背景相关属性
body{
background-color:#37ff68;
background-image:url("../pic/js.jpg");
background-repeat:no-repeat;
background-position:bottom;
}
background-color:背景色
background-image:设定背景图片，需要设置图片的url地址
background-repeat:图片的复制选项
repeat：在水平和垂直两个方向上进行复制
no-repeat:不复制
repeat-x:在水平方向上复制
repeat-y：在垂直方向上复制
也可以将这一组属性值封装到一个属性background中，书写书序是：
背景色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: 边框的颜色;
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;
fd2e
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"的元素上，比如上例中的第一个和第三个<div>，当然也包括class="odd"的<p>。
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">1</div>
<div title="div2">2</div>
<div >3</div>
<div title="a div">4</div>
<div title="div a">5</div>
</body>
运行结果：
从结果可以看出，所有具有title属性的元素都应用了红色背景色的样式。
（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">1</div>
<div title="div2">2</div>
<div >3</div>
<div title="a div">4</div>
<div title="div a">5</div>
</body>
显示结果为
从结果可以看出，只有第二个div应用了红色背景的样式，因为只有第二个div的title属性等于div2
~=：选中属性值包含指定完整单词的元素,类似word中的全字匹配
title ^= 'div':选中title属性值以'div'开头的元素
title $= 'div':选中title属性值以'div'结尾的元素
title *= 'div':选中title属性值包含'div'的元素
body{
background-color:#37ff68;
background-image:url("../pic/js.jpg");
background-repeat:no-repeat;
background-position:bottom;
}
background-color:背景色
background-image:设定背景图片，需要设置图片的url地址
background-repeat:图片的复制选项
repeat：在水平和垂直两个方向上进行复制
no-repeat:不复制
repeat-x:在水平方向上复制
repeat-y：在垂直方向上复制
也可以将这一组属性值封装到一个属性background中，书写书序是：
背景色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: 边框的颜色;
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;
fd2e
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"的元素上，比如上例中的第一个和第三个<div>，当然也包括class="odd"的<p>。
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">1</div>
<div title="div2">2</div>
<div >3</div>
<div title="a div">4</div>
<div title="div a">5</div>
</body>
运行结果：
从结果可以看出，所有具有title属性的元素都应用了红色背景色的样式。
（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">1</div>
<div title="div2">2</div>
<div >3</div>
<div title="a div">4</div>
<div title="div a">5</div>
</body>
显示结果为
从结果可以看出，只有第二个div应用了红色背景的样式，因为只有第二个div的title属性等于div2
~=：选中属性值包含指定完整单词的元素,类似word中的全字匹配
title ^= 'div':选中title属性值以'div'开头的元素
title $= 'div':选中title属性值以'div'结尾的元素
title *= 'div':选中title属性值包含'div'的元素
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 复习：css3核心属性——选择器、盒子模型、多列布局、响应式布局、动画特效
- 【css技术指南笔记】 第三章 盒子模型 浮动 清除浮动 定位 显示属性 背景
- HTML5 教程 - 5 - 选择器属性
- CSS3之盒子模型中的box-sizing属性
- html5 css 盒子模型
- CSS基础学习十四：盒子模型补充之display属性设置
- CSS box-flex属性，然后弹性盒子模型简介(转)
- CSS3 box-sizing属性指定盒子模型
- 探究CSS3 box-sizing属性，重新定义盒子模型with、height尺寸
- CSS box-flex属性，然后弹性盒子模型简介
- HTML前端开发之路——盒子背景属性
- CSS box-flex属性，然后弹性盒子模型简介
- 8.HTML5 CSS3盒模型和布局相关属性
- 转载CSS box-flex属性(弹性盒子模型)
- CSS box-flex属性，然后弹性盒子模型简介
- CSS box-flex属性，然后弹性盒子模型简介
- CSS box-flex属性，然后弹性盒子模型简介
- css中对于盒子模型margin属性的思考---margin折叠问题
- CSS属性，盒子模型以及浮动和定位技术相关
- div+css 选择器分组 属性选择器 css插入方法 css背景属性