css
1.div{
text-transform: capitalize;/*英字与英字首字母大写*/
word-spacing: 20px;/*英字与英字间隔*/
letter-spacing: 50px;/*字与字间隔*/
text-indent: 20px; /*首行缩进*/
background-color: darkturquoise;
height: 50px;/*背景高*/
/*text-align: center;*/ /*文本置中*/
/*line-height: 50px;*/ /*行高*/
2..q{
width: 220px;
height: 220px;
/*border: 1px solid red;/*实线*/
/*border: 2px dashed yellow; /*虚线*/
border-color: red;/*边框颜色*/
border-style: dashed;/*虚线*/
border-width:20px;/*宽度*/
border-left-color:royalblue ;/*左线颜色*/
}
</style>
</head>
<body>
<div class="q">nihao</div>
</body>
3.前面不同点
ol,ul{
/*list-style: circle;/*序列变成空心点*/
list-style: none;/*去点*/
}
<body>
<ol>
<li>111</li></ol>
<ol>
<li>222</li></ol>
<ul>
<li>333</li></ul>
<ul>
<li>444</li></ul>
<dl>
<dd>22</dd>
<dt>33</dt>
</dl>
</body>
4.内联不能设置长宽，外联不能在一行显示。
display: inline;/*块变内联*/
display:block;/*内联变块联*/
display: inline-block;/*内联块联功能并存*/
word-spacing: -5px; /*标签位移*/
display: none;/*隐藏*/
.div2,p,span,a{
width: 100px;
height: 100px;
}
.div2{
background-color: royalblue;
display: none;/*隐藏*/
}
p{
background-color: red;
}
span{
background-color: yellow;
display:inline-block;
}
a{
background-color: cyan;
display: inline-block;/*内联块联功能并存*/
}
.div1{
word-spacing: -5px; /*标签位移*/
}
</style>
</head>
<body>
<div class="div2">111</div>
<p>22</p>
<div class="div1">
<span>333</span>
<a>4444</a>
</div>
</body>
</html>
4.内外间距
padding: 40px;/*内间距*/
margin: 40px;/*外间距*/
float: left;/*浮动*/
.div1:after{
content: "";
display: block;
clear: both;
} 清除浮动
*{
margin: 0;
padding: 0;
}
.div1{
border: 2px solid lawngreen ;
width: 400px;
}
.div2{
width: 200px;
height: 100px;
background-color: blue;
float: left;
}
.div3{
width: 100px;
height: 200px;
background-color: yellow;
float: right;
}
.div4{
height: 200px;
background-color: cyan;
}
<div class="div1">
<div class="div2">向左浮动</div>
<div class="div3">向右浮动</div>
</div>
<div class="div4"></div>
5.定位
1.position: relative;/*相对定位*/
top: 100px;
left: 200px;
2.position: absolute;/*绝对定位*/
top: 220px;
left: 500px;
3.position: fixed;/*以窗口进行定位*/
置顶按窗口定位的
a.cc1{
text-align: center;
width: 80px;
height: 50px;
background-color: darkgray;
position: fixed;/*以窗口进行定位*/
bottom: 20px;
right: 5px;
color: blue;
line-height: 50px;
<div id="cc" class="cc2" > </div>
<div>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
</div>
<a href="#cc" class="cc1" >返回顶部</a>
伪类
6.看，悬，点，反
<head>
<style type="text/css">
a:link{color:red;}
a:visited{color:blue;}
a:hover{color:green;}
a:active{color:yellow;}
.a:after{content:"加入内容"}
</style>
</head>
