盒子模型1

来源：互联网发布：网络优化大师下载编辑：程序博客网时间：2024/04/27 23:49

①父子选择器

类选择器和id选择器都可以有父子选择器

总结：
1.父子选择器可以有多级（但是实际开发中不要超过三层）
2.父子选择器有严格的层级关系
3.父子选择器不局限于什么类型选择器
比如：
#id span span
.s1 #id span
div #id .s2

②一个元素可以同时有id选择器和类选择器

对一个元素而言，不能有多个id选择器，只能有一个id选择器。
<span class="s1" id="news_specail">新闻一</span>

③一个元素可以同时有id选择器和类选择器
当id选择器和类选择器发生冲突时，id选择器优先级高于类选择器
优先级：id选择器>类选择器
比如：id选择器指定字体为红色，而类选择器指定字体为蓝色，则页面显示红色。

④一个元素最多有一个id选择器，但是可以有多个类选择器

<元素 class="类选择器1 类选择器2" />
<span class="cls1 s1">新闻三</span>

细节：
（1）一个元素既有类选择器，又有id选择器，id选择器的优先级高
（2）一个元素有两个类选择器，当发生属性冲突的时候，以谁为准呢
如：<span class="s1 cls1">新闻三</span>
.s1有 color:black;
.cls1有 color:blue;
不以class="s1 cls1"的先后顺序为准
而是以css文件中.s1和.cls1，谁在文件最后出现，以谁的属性为准。即在css文件出现的先后顺序，谁后出现以谁为准。
特别注意：当两个类选择器发生冲突了，则以写在css文件中的后面的那个类选择器为准。

⑤当一个元素被id选择器，类选择器，html选择器同时限定时，优先级是：id选择器>类选择器>html选择器>通配符选择器

demo.html

[html] view plaincopy
<html>  
    <head>  
        <link rel="stylesheet" type="text/css" href="demo.css" />  
    </head>  
    <body>  
        <span class="s1" id="news_specail">新闻一</span>  
        <span class="s1">新闻二</span>  
        <span class="s1 cls1">新闻三</span>  
        <span class="s1">新闻四</span>  
        <span class="s1">新闻五</span>  
    </body>  
</html>  

demo.css

[html] view plaincopy
.s1{  
    background-color: pink;  
    font-size: bold;  
    font-size: 16px;  
    color: black;  
}  
/*对新闻一做一个特别的修饰*/  
#news_specail{  
    color: red;  
    font-style: italic;  
}  
/*给新闻三再配置一个class选择器*/  
.cls1{  
    font-style: italic;  
    text-decoration: underline;  
    color: blue;  
}  

⑥在css文件中，如果多个类/id选择器它们都有相同的部分，我们可以把相同的css样式放在一起。

注意：浏览器会向服务器发出请求，单取这个css文件，和取一个图片没什么区别的，都是取资源。css文件本身也会被浏览器从服务器下载到本地，才能显示效果。

案例代码

[html] view plaincopy
/*招生广告*/  
.ad_stu{  
    width: 136px;  
    height: 196px;  
    background-color: #FC7E8C;  
    margin: 5px 0 0 6px  
    float: left;  
}  
  
/*广告2*/  
.ad_2{  
    background: #7CF574;  
    height: 196px;  
    width: 457px;  
    float: left;  
    margin: 5px 0 0 6px  
}  
  
/*房地产广告*/  
.ad_house{  
    background: #7CF574;  
    height; 196px;  
    width: 152px;  
    float: left;  
    margin: 5px 0 0 6px  
}  
  
/*把各个类选择器的公共部分，单独抽取写一份，好处是可以减少css的冗余*/  
  
/*招生广告*/  
.ad_stu{  
    width: 136px;  
    background-color: #FC7E8C;  
}  
/*广告2*/  
.ad_2{  
    background: #7CF574;  
    width: 152px;  
}  
/*房地产广告*/  
.ad_house{  
    background: #7CF574;  
    width: 152px;  
}  
.ad_stu, .ad_2, .ad_house{  
    height: 196px;  
    float: left;  
    margin: 5px 0 0 6px  
}  

块元素和行内元素——区别

1.行内元素只占内容的宽度，块元素内容不管内容多少都要占全行。
2.行内元素只能容纳文本和其它行内元素，块元素可以容纳文本，行内元素和块元素。（与浏览器类版本和类型有关）
3.一些css属性对行内元素不生效，比如margin,left,right,width,height.建议尽可能使用块元素div定位。（与浏览器版本和类型有关）

块元素和行内元素——概念
行内元素（inline element），又叫内联元素：
内联元素只能容纳文本或其他内联元素，常见内联元素<span><a>

块元素（block element）：
块元素一般都从新行开始，可以容纳文本，其它内联元素和其它块元素，即使内容不能占满一行，块元素也要把整行占满。常见块元素<div><p>
★★★这个概念非常的重要★★★

从上面可以看出，行内元素它只占能显示自己内容的宽度，而且他不会占据整行，而块元素他不管自己的内容有多少，会占据整行，而且会换行显示。
常见的行内元素：<a> <span> <input>
常见的块元素有：<div><p>

块元素和行内元素——相互转换
请注意：行内元素和块元素可以相互转换
display:inline ->转为行内元素（比如div）
display:block ->转为块元素（比如a）

css不区分大小写，但是统一为好。

demo2.html

[html] view plaincopy
<html>  
    <head>  
        <link rel="stylesheet" type="text/css" href="demo2.css" />  
    </head>  
    <body>  
        <!--行内元素以能够显示自己为目标-->  
        <span class="s1">span1</span>  
        <span class="s1">span1</span>  
        <!--input元素也是行内元素-->  
        <span class="s1">span1</span><input type="text" name="username" />  
  
        <!--虽然只有3个字母，但是以沾满整行为目的-->  
        <!--块元素以占据整行为目标，不会因为内容少，而只占据那么一部分-->  
        <!--给div设置宽度，设置的窄一些，默认情况下，下面的div也不会上来，不会因为自己变窄了，就不占据一行了-->  
        <div class="s2">div</div><input type="text" name="hello" />  
        <!--div老霸气了，除非上面的div左浮动，虽然上面的div右边是空白，但是input元素还是被挤到下一行-->  
        <div class="s3">div</div>  
        <!--p元素也是块元素-->  
        <p style="background-color: silver">这是一个段落</p>  
  
        <!--此时的行内元素转成块元素显示，并占据整行，input元素被挤到下一行，上面的情况做对比-->  
        <span class="s4">span1</span><input type="text" name="pigname" />  
        <!--此时的行内块元素转成行内元素显示，紧跟着上面的input元素，自身后面的input元素也没有换行显示，和上面的情况形成对比-->  
        <div class="s5">div</div><input type="text" name="hello" />  
    </body>  
</html>  

demo2.css

[html] view plaincopy
.s1{  
    background-color: pink;  
}  
.s3{  
    background-color: gray;  
}  
.s2{  
    background-color: pink;  
    width: 100px;  
}  
.s4{  
    background-color: pink;  
    display: block; /*把使用s4类选择器的元素，按照块元素显示*/  
}  
.s5{  
    background-color: gray;  
    display: inline; /*把使用s5类选择器的元素，按照行元素显示*/  
}  

CSS文件的相互引用
a.css b.css c.ss
如果希望在a.css中使用到b.css c.css的选择器
可以通过@import指令来完成

@import url（"被引用的css文件"）

如果希望在html或者php文件中引用某个xxx.css也可以在<style>标签中
<style>
@impurt url("某个css文件")
</style>

把公共的部分提取出来

★★★一个非常重要的概念★★★

标准流/非标准流
流：在现实生活中就是流水，在网页设计中就是指元素（标签）的排列方式。（html元素在网页中显示的顺序）
标准流：元素在网页中就像流水，排在前面的元素（标签）内容前面出现，排后面的元素（标签）内容后面出现。
非标准流：当某个元素（标签）脱离了标准流[比如因为相对定位]排列，我们统称为非标准流排列。关于非标准流，将在定位小结讲解。

盒子模型——概念（★★★★★css核心内容）
要搞清楚盒子模型，就必须先明白下面几个概念：

在网页设计中常听的属性名：内容（content）、填充（padding）、边框（border）、边界（margin），css盒子模型都具备这些属性。

形象理解：把div看做一个盒子，里面装了一个古董花瓶（内容content），为防止被撞坏了就在盒子里填充了泡沫之类紧紧包裹着花瓶，泡沫就是padding，盒子和墙边的距离就是margin。

亲自动手绘制下图，就会理解清楚了。

盒子模型——经典案列（必须掌握★★★★★★）
从简单盒子到复杂盒子

一点点引出知识点，知识点不可能一步到位的讲解。
<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。
该标签声明三种DTD类型，分别表示严格版本，过渡版以及基于框架的HTML文档。
国内门户网站用的多为
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

注意：图片也是盒子，想把图片压下来该怎么处里？
如果是在div中设置margin:5px 0px 0px 5px;虽然把图片向下压了，但是div也随着变长了，div自适应的增长了。在div img中设置margin-top: 5px;把img也当做盒子，div的内边距，就是img的外边距，这样就不会出现盒子被撑破自增长了，对比上面的。详细看css文件，自己实际操作下就会明白。
★★★辩证的看，div的内边距就是img的外边距★★★

素材

====

box.html

[html] view plaincopy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
    <head>  
        <link rel="stylesheet" type="text/css" href="box.css" />  
    </head>  
    <!--在IE浏览器下，会发现body被包全了，并没有按照css文件中的width:600px;，height:500px;显示，这时候需要引入<!doctype标签>-->  
    <body>  
        <div class="div1">  
            <img src="m4.jpg" />  
        </div>  
    </body>  
</html>  

box.css

[html] view plaincopy
body{  
    /*边框粗细，边框，边框颜色*/  
    border: 1px solid red; /*1px表示边框的宽度 solid实线 red表示颜色*/  
    width: 600px;  
    height: 500px;  
    /*如何让body自动局中*/  
    margin: 0 auto;/*第一个用于上-下，第二个用于左-右 auto表示自动局中*/  
}  
/*盒子模型 margin ,padding,border,content*/  
.div1{  
    width: 90px;  
    height: 90px;  
    border: 1px solid blue;  
    /*margin-top: 5px;  
    margin-left: 5px;*/  
    margin: 5px 0px 0px 5px;  
    /*虽然把图片向下压了，但是div也随着变长了，div自适应的增长了*/  
    /*padding-top: 20px;*/  
  
}  
  
.div1 img{  
    width: 80px;  
    height: 80px;  
    /*把img也当做盒子，div的内边距，就是img的外边距，这样就不会出现盒子被撑破自增长了，对比上面的*/  
    margin-top: 5px;  
    margin-left: 5px;  
}  

如果把，css中的div img属性设置为margin-left: 35px;则图片要离盒子而去，所以事先要测量好。

修改的css代码

[html] view plaincopy
.div1 img{  
    width: 80px;  
    height: 80px;  
    /*把img也当做盒子，div的内边距，就是img的外边距，这样就不会出现盒子被撑破自增长了，对比上面的*/  
    margin-top: 5px;  
    margin-left: 35px;  
}  

0 0