css学习笔记3
margin 合并
列表样式
<style type="text/css">
.box {
height: 200px;
width: 200px;
}
.box1 {
background-color: red;
margin-bottom: 40px;
}
.box2 {
background-color: yellow;
margin-top: 80px;
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
</body>
元素分类
举例
/*选择器：
* 通配符
*
* */
* {
margin: 0;
padding: 0;
}
div {
height: 100px;
width: 100px;
background-color: red;
}
p {
height: 100px;
width: 100px;
background-color: yellow;
}
span {
height: 100px;
width: 100px;
background-color: yellow;
}
input {
height: 40px;
}
</style>
</head>
<body>
<div></div>
<p></p>
<span>你好，span在此~~~</span>
<span>你好，span在此</span>
<span>你好，span在此~~~</span>
<span>你好，span在此</span>
<span>你好，span在此~~~</span>
<span>你好，span在此</span>
<span>你好，span在此~~~</span>
<span>你好，span在此</span>
<span>你好，span在此~~~</span>
<span>你好，span在此</span>
<span>你好，span在此~~~</span>
<span>你好，span在此</span>
<br />
<!--span：设置的width heigth无效
它的宽度就是它的内容的宽度
行内元素
换行：
div p 独占一行
width heigth 有效
块级元素
其他的块级元素：
-->
<!--input img-->
<input type="text" />
<input type="text" />
<br />
<img src="img/preact.png"/>
<img src="img/preact.png"/>
<img src="img/preact.png"/>
</body>
元素状态改变
<style type="text/css">
* {
/*margin: 0;
padding: 0;*/
}
span {
/*转换一下
* block 块
* inline 行内
* inline-block 行内块
* */
display: block;
height: 200px;
width: 200px;
background-color: yellow;
}
div {
display: inline;
height: 100px;
width: 100px;
background-color: pink;
}
i {
width: 300px;
height: 300px;
background-color: palegoldenrod;
display: inline-block;
}
h2 {
width: 200px;
height: 200px;
background-color: hotpink;
/*隐藏一个元素*/
/*
*
* display: none; 实现元素的隐藏,并且不占位置
visibility: hidden;实现元素的隐藏,但是位置依然存在
*/
display: none;
/*visibility: hidden;*/
/*让一个元素显示出来*/
display: block;
}
</style>