您的位置：首页 > Web前端 > CSS

css-3(行元素 块元素 流 盒子模型)

2017-10-21 16:16 302 查看
选择器深入探讨
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;
}

效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html css
相关文章推荐
新的分享
章节导航