css-3(行元素 块元素 流 盒子模型)
选择器深入探讨
1.类选择器和id选择器都可以有父子选择器
2.一个元素可以同时有id选择器和类选择器
3.当id选择器和类选择器发生冲突时,ID选择器优先级高于类选择器
4.一个元素最多有一个id选择器,但可以有多个类选择器
5.当多个类选择器发生冲突时,则以写在css文件中后面的那个选择器为准
6.我们可以把某个css文件中的多个选择器共有的部分独立写出来
行内元素(inline element),又叫内联元素：
行内元素只能容纳文本或者其他内联元素,只占据能显示自己内容的宽度，常见的行内元素有<span><a><input type="xxx"/>
块元素(block element):
块元素一般都重新开行,可以容纳文本,其他内联元素和其他块元素，即使不能占满一行,块元素也要把整行占满。常见块元素有<div><p>
注意:行内元素和块元素可以相互转换
display:inline 表示按行元素显示
display:block 表示按块元素显示
css之间可以相互引用,通过@import指令来完成
@import url("被引用的css文件")；
如果希望在html文件中引用某个xx.cs文件也可以在<style>标签中
<style>
@import url("某个css文件");
</style>
流：在网页设计中指元素(标签)的排列方式。
标准流：元素在网页中就像流水,排在前面的元素(标签)内容在前面出现,排在后面的元素(标签)在后面出现。
非标准流：当某个元素(标签)脱离了标准流（比如因为相对定位）排列
，我们统称为非标准流排列。
盒子模型
盒子模型案例：
box.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3c.org/TR/html4/loose.dtd">
<html>
<head>
<title>盒子模型</title>
<link rel="stylesheet" type="text/css" href="box.css">
</head>
<body>
<div class="dog">
<img src="dog.jpg"/>
</div>
</body>
</html>
box.css
body{
/*1px 表示边框的宽度 solid表示实线 red表示颜色*/
border:1px solid red;
width:200px;
height:200px;
/*如何让body自动居中*/
margin:0 auto;
}
/*盒子模型 margin，padding，border，content*/
.dog{
width:50px;
height:50px;
border:1px solid blue;
margin-left:5px;
margin-top:5px;
}
.dog img{
width:40px;
height:40px;
margin-left:5px;
margin-top:5px;
}
效果：
盒子深入探讨案例：
box1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3c.org/TR/html4/loose.dtd">
<html>
<head>
<title>盒子模型深入理解</title>
<link rel="stylesheet" type="text/css" href="box1.css">
</head>
<body>
<div class="dog">
<ul class="ul">
<li><img src="dog.jpg"></li>
<li><img src="dog.jpg"></li>
<li><img src="dog.jpg"></li>
<li><img src="dog.jpg"></li>
<li><img src="dog.jpg"></li>
<li><img src="dog.jpg"></li>
<li><img src="dog.jpg"></li>
</ul>
</div>
</body>
</html>
box1.css
.dog{
width:500px;
height:300px;
border:1px solid red;
}
.dog img{
width:50px;
height:50px;
}
.ul{
width:300px;
height:250px;
border:1px solid gray;
margin-left:5px;
padding-left:5px;
}
.ul li{
list-style-type:none;
/*左浮动*/
float:left;
width:50px;
height:52px;
border:1px solid red;
margin-right:5px;
margin-top:15px;
}
效果：