CSS背景属性 尺寸属性 显示属性 定位及选择器
来源：互联网 发布：pc安装mac os x10.9 编辑：程序博客网 时间：2024/05/16 13:41
基础属性
1.1背景属性
body{
background-color: #37ff68;
background-image: url("head_portrait.jpg");
background-repeat: no-repeat;
background-position:center;
}
background-color:背景颜色
background-image:舍得背景图片，需要设置图片的url地址
background-attachment:设置背景图像是否固定或者随着页面的其余部分滚动(值scroll、fixed、inherit）。
background-repeat:图片的复制选项
repeat：在水平和垂直两个方向上进行复制
no-repeat：不复制
repeat-x:在水平方向复制
repeat-y:在垂直方向复制
也可以将这一组属性值封装到一个属性background中，表达更简洁，书写顺序是：
背景色background-color
背景图片background-image
重复方式background-repeat
位置background-position（设置高度才有效，可以取top、right、left、center、bottom其中两个值或一个值，也可以是百分比和尺寸单位）
background:green url("head_portrait.jpg") no-repeat right;
1.2尺寸相关属性
heiht:高度
width:宽度
div{
width:200px;
height:200px；
background-color:red;
}
max-width:最大宽度
max-height:最大高度
min-width:最小宽度
min-height:最小高度
1.3显示相关属性
隐藏元素的方法：
（1）visibility：hidden，仅仅隐藏内容，该元素所占位置依然存在；
（2）display：none，不仅隐藏内容，且不占位置
display可以设置元素的显示模式
inline:可以将块级元素以内联元素的形式显示，此时width和height属性无效，其空间取决于元素的内容。
inline-block：将块级元素以内联元素形式显示，同时兼具块级元素的某些特征，比如可以使用width和height设置所占位置的大小。
li{
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 20px 30px 40px
padding:内边距
也有上下左右边距，和margin类似
border：边框
/*border:10px dashed blue;*/
border-width:边框宽度
border-style:边框线条类型；
border-color:边框的颜色
word中设置边框的操作
也可以使用更优化的书写方式
border:10px dashed blue;
outline:轮廓，与border类似，用法也一样
2.7定位
定位方式有：static、fixed、relative、absolute。
static静态定位（默认）
无定位，元素正常出现在流中，不受left、right、bottom、top属性的影响。
fixed
<html>
<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>
</html>
从结果可以看出，fix定位会将元素从流中“摘”出来单独进行定位取决于left、top。
重新定位之后可能会出现重叠，通过z-index可以调整他们的层次顺序
relative
<html>
<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;
position:relative;
left:30px;
top:20px;
}
#div3{
width:200px;
height:200px;
background-color:blue;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
从结果可以看出，相对定位是从原有位置进行位移，但并不影响后续位置。
absolute
<html>
<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;
position:absolute;
top:20px;
left:20px;
}
#div3{
width:100px;
height:100px;
background-color:blue;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
从结果可以看出，绝对定位的元素将从流中被“摘”出来，依靠left和top属性进行定位。
与fixed类似，但是参照物不同
fixed参照根元素（HTML）
absolute参照父容器
选择器
3.1元素选择器
用标签名作为选择器，选中所有相应的元素
<html>
<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>元素选择器</p>
</body>
</html>
3.2id选择器
顾名思义，是根据id来选中元素，其样式定义形式为：
#idname{
...
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title></title>
<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>
</html>
3.3类选择器
根据class属性来选中元素，其样式定义形式为
.className{
......
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title></title>
<style type="text/css">
div{
width:200px;
height:200px;
}
.even{
background-color: red;
}
.odd{
background-color: blue;
}
</style>
</head>
<body>
<div class="odd"></div>
<div class="even"></div>
<div class="odd"></div>
</body>
</html>
从结果可以看出：.odd{...}定义的样式会施加到所有class=“odd”的元素上去，比如上例中的第一个和第三个<div>，当然也包括class=“odd”的<p>。
3.4属性选择器
根据某个属性的特性（比如有无、值等）来选择
<html>
<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>
</html>
从结果可以看出，所有具有title属性的元素都应用了红色背景的样式。
（2）根据属性值来选择
=
<html>
<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>
</html>
从结果可以看出，只有第二个div应用了红色背景色的样式，因为只有第二个div的title属性值为div2。
~=：选中属性值包含指定完整单词的元素，类似word中查找的全字匹配。
title^=‘div’:选中title属性以‘div’开头的元素
title$=‘div’：选中title属性以‘div’结束的元素
title*=‘div’：选中title属性值包含‘div’的元素
- CSS背景属性 尺寸属性 显示属性 定位及选择器
- CSS 北京属性 尺寸属性 盒子模型 定位 选择器
- 背景，尺寸及显示的相关属性
- 背景相关属性 定位position类选择器
- CSS定位与CSS属性选择器
- CSS常用属性及选择器
- CSS颜色及背景属性
- css选择器-属性选择器
- CSS选择器-属性选择器
- 浮动、定位及显示属性
- 【CSS】CSS选择器优先级及!important属性
- 【CSS】CSS选择器优先级及!important属性
- div+css 选择器分组 属性选择器 css插入方法 css背景属性
- CSS position 属性：定位属性
- CSS教程：属性选择器
- CSS属性选择器详解
- 再论CSS属性选择器
- css属性选择器
- 将一个正整数分解质因数
- ufldl学习笔记与编程作业：Linear Regression（线性回归）
- hdu 5794
- GitHub入门之一：使用github下载项目
- Dubbo系列-2.环境搭建和入门Demo
- CSS背景属性 尺寸属性 显示属性 定位及选择器
- SQL中char、varchar、nvarchar的区别
- JSP中out.write()和out.print()的区别
- JAVA中的反射机制
- Prime Ring Problem
- Android App支付系列（一）：微信支付接入详细指南(附官方支付demo)
- docker-compose安装
- python 适配器模式
- SPOJ
