div+css 选择器,块元素和行内元素,盒子模型经典案例!

1.选择器

一个元素最多有一个ID选择器,但是可以有多个类选择器.

 

方法如下:

<元素 class=”类选择器1  类选择器”/>

 

特别注意:

当两个类选择器发生冲突了,则以写在css,文件中的后面的那个类选择器为准.

 

把各个类选择器的公共部分,单独抽取写一份,好处是可以减少CSS的冗余.

 

我们可以把某个cssy文件中的,共有的部分,独立写出来一份.

 

说明:css文件本身也会被浏览器从服务器下载到本地,方能显示效果.

 

2.块元素和行内元素

 

行内元素它只占能显示自己内容的宽度,而且他不会占据整行.而块元素它不管自己的内容有多少,会占据整行,而且会换行显示

 

常见的行内元素有:<a> <span> <input type=”xxxx”>

 

常见的块元素有:<p> 

 

建议:尽可能使用块元素div定位,

 

注意:行内元素和块元素是可以互换的.

 

使用

Display:inline 使用行内元素当块元素使用;

Display:inline 使用块元素当行内元素使用;

 

代码:

.s1{

background-color:red;

display:block;/*使用s1,当块元素使用*/

}

.s2{

background-color:green;

width:100px;

display:inline;/*使用块元素,当行内使用*/

}

 

 

Css文件之间的相互引用指令

 

@import url(“被引入的cssurl”)

展示图:

 

 

3.标准流/非标准流

:Html元素在网页中显示的顺序

标准流:html文件中,写在前面的元素在前面显示,写在后面的html元素在后面显示

非标准流:html文件中,当某个元素脱离的标准流,那么它就是处于非标准流.

 

4.css盒子模型

盒子模型示意图:

 

Margin-边距 (div与外的距离)

border:边框  (div的边框)

Content:div存放的内容(图片.文章)

Paddin:内边距(内容与div的距离)

 

经典案例:

 

Html文件:

<html>
<head>
<title>盒子的模型</title>
</head>
<body>
<link rel="stylesheet type="text/css" href="borks.css"/>
<div class="div1">
<img src="1.jpg"/>
</div>
<body>
</html>

 

Css文件:

body{
border:1px solid red;
width:700px;
height:500;
/*如休让body自动居中*/
margin:5 auto;/*auto表示自动居中*/
}
/*盒子模型概念:margin padding border content */
.div1{
width:100px;
height:100px;
border:1px solid blue;
/*margin-top:5px;
margin-left:5px;*/
margin: 5px 0px 0px 5px;
/*padding-top:3px;*/
 
}
.div1 img{
width:80px;
height:80px;
margin-top:10px;
margin-left:10px;
}

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注