盒子模型
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-width: 10px;
border-style: dashed;
boeder-color:blue;
也可以这样使用,优化书写
border:10px dashed blue;
outline:轮廓线,用法同border
元素定位
定位方式有:static(静态的)、fixed(固定的)、relative(相对的)、absolute(绝对的);
s tatic 静态定位(默认)
无定位,元素正常出现了流中,不受left、right、top、bottom属性影响
<style type="text/css ">
div{
width:200px;
height:200px;
background-color:red;
position:static;
}
</style>
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;
position:fixed;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
静态定位
</body>
<style type="text/css">
#div1{
width:200px;
height:200px;
background-color:red;
left:30px;
top:20px;
position:fixed;
}#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无效、、、、、、
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background-color: rgba(225,0,0,0.7);
}#div2{
width: 200px;
height: 200px;
background-color: greenyellow;
position: relative;
top:20px;
left: 30px;
}
</style>
<style type="text/css">
#div1{
width:200px;
height:200px;
background-color:rgba(225,0,0,0.7);
}#div2{
width:200px;
height:200px;
background-color:greenyellow;
position:relative;
top: 20px;
left: 30px;
}
#div3{
width:100px;
height:100px;
background-color:blue;
}
</style>
从结果可以看出,相对定位是从原有位置进行位移,并不影响后续元素的位置
3 选择器
所谓选择器,指的是选择是加样式目标的方式
元素选择器
用标签名作为选择器,选中所有相应的元素。
<style type="text/css">
div{
font-size:24px;
background-color:purple;
}
p{
font-size:32px;
color:aqua;
}
</style>
id选择器
顾名思义,是根据id来选择元素。其样式定仪形式为:
#idname{....}
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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:maroon;
}
#div2{
width:200px;
height:200px;
background-color:red;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
显示结果
类选择器
根据class属性选择元素,其样式定仪形式为:className{...
}
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<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:maroon;
}
.odd{
width:200px;
height:200px;
background-color:red;
}
</style>
</head>
<body>
<div class="odd" ></div>
<div class="even"></div>
<div class="odd"></div>
</body>
</html>
X显示结果为
从结果可以看出:.odd{
‘’}
定仪的样式会施加到所有class=“odd”的元素上。比如说上例中的第一个和第三个div。当然也包括class=“odd”的《p》
属性选择器
根据某个属性特性(比如有无、值等)来选择
(1) 根据有无属性来选择
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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) 根据属性的值来选择
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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的元素