代码改变世界

第一章入门篇CSS样式的分类、盒模型

2018-11-21 12:03  若藜520  阅读(194)  评论(0)  编辑  收藏  举报

1.CSS样式的分类

CSS样式分为一项4种：

1.内联样式表，直接写在元素style属性里面的样式，如

<p style="color:red;">内联样式</p>

2.内部样式表，写在<head><.head>标签内部<style></style>标签里面的样式

<head>
    <meta charset="utf-8" />
    <title>无标题文档 </title>
    <style>
           .colorred{
                 color:red;
                    }
    </style>
</head>

3.外部样式表，通过link方式链接的样式

<link rel="Stylesheet" href="Styles/StyleSheet1.css" type ="text/css" />

4.导入样式表，通过import标签导入的样式，import标签必须在style标签内部，也可以在一个样式表文件中导入其他样式表文件，导入的样式表必须写在样式表的第一行，但是浏览器在最后解释，有可能造成闪屏

 <style>
        
        @import url("Styles/StyleSheet1.css");/*导入样式表*/
</style>

 

2.盒模型

网页上的每个元素都是以一个矩形的形式存在,每个矩形由元素内容、内边距、边框、外边距组成。如下图元素的最内部分是元素内容，包裹这内容的是内边距，内边距外面的边框，最外面的外边距。

元素盒模型的大小直接影响到元素占用的空间。盒模型的宽度、高度计算方式

盒模型的宽度：margin-left+border-left-width+padding-left +width+padding-right+border-right-width+margin-right

盒模型的高度：margin-top+border-top-width+padding-top+height+padding-bottom+border-bottom-width+margin-bottom

 

以上的盒模型计算方式是大部分浏览器都适用的，但是在ie6及更低版本的浏览器中有可能触发怪异模式

低版本的ie浏览器存在两种渲染模式：标准模式和怪异模式，没有标明DOCTYPE 或者DOCTYPE拼写错误会导致IE触发怪异模式

怪异模式下面的盒模型宽度高度是盒模型的宽度和高度，不是元素的宽度和高度

怪异模式下的盒模型宽度、高度计算方式

宽度：margin-left+width+margin-right

高度：margin-top+height+margin-bottom

如果盒模型的内边距和边框加起来超过设定的宽度和高度会撑大元素，并且会随着元素内容的增大而变大

3.外边距合并

当两个垂直外边距相遇时，外边距会发生合并，合并后的外边距等于两个发生合并的外边距中的较大者

1.当一个元素在另一个元素上面时，第一个元素的下外边距和第二个元素的上外边距会发生合并

<html>
<head>

<style type="text/css">
* {
  margin:0;
  padding:0;
  border:0;
}

#d1 {
  width:100px;
  height:100px;
  margin-top:20px;
  margin-bottom:20px;
  background-color:red;
}

#d2 {
  width:100px;
  height:100px;
  margin-top:10px;
  background-color:blue;
}

</style>
</head>

<body>

<div id="d1">
</div>

<div id="d2">
</div>

<p>请注意，两个 div 之间的外边距是 20px，而不是 30px（20px + 10px）。</p>
</body>
</html>
View Code

2.当一个元素包含在另一个元素里面，他们的上或下外边距会发生合并（如果没有边框或内边距把外边距和内容分开），左右外边距不会发生合并

<html>
<head>

<style type="text/css">
* {
  margin:0;
  padding:0;
  border:0;
}

#outer {
  width:300px;
  height:300px;
  background-color:red;
  margin-top:20px;
}

#inner {
  width:50px;
  height:50px;
  background-color:blue;
  margin-top:10px;
}

</style>
</head>

<body>

<div id="outer">
  <div id="inner">
  </div>
</div>

<p>注释：请注意，如果不设置 div 的内边距和边框，那么内部 div 的上外边距将与外部 div 的上外边距合并（叠加）。</p>
</body>
</html>
View Code

3.假如有一个空元素，它有外边距，没有边框和填充，那它的上下外边距会发生合并