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>

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>

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

第一章入门篇CSS样式的分类、盒模型的更多相关文章

  1. .NET Core实战项目之CMS 第一章 入门篇-开篇及总体规划

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9977862.html 写在前面 千呼万唤始出来,首先,请允许我长吸一口气!真没想到一份来自28岁老程序员 ...

  2. net core体系-web应用程序-4asp.net core2.0 项目实战（CMS）-第一章 入门篇-开篇及总体规划

    .NET Core实战项目之CMS 第一章 入门篇-开篇及总体规划   原文地址:https://www.cnblogs.com/yilezhu/p/9977862.html 写在前面 千呼万唤始出来 ...

  3. .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

    写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...

  4. .NET Core实战项目之CMS 第二章 入门篇-快速入门ASP.NET Core看这篇就够了

    作者:依乐祝 原文链接:https://www.cnblogs.com/yilezhu/p/9985451.html 本来这篇只是想简单介绍下ASP.NET Core MVC项目的(毕竟要照顾到很多新 ...

  5. .NET Core实战项目之CMS 第三章 入门篇-源码解析配置文件及依赖注入

    作者:依乐祝 原文链接:https://www.cnblogs.com/yilezhu/p/9998021.html 写在前面 上篇文章我给大家讲解了ASP.NET Core的概念及为什么使用它,接着 ...

  6. .NET Core实战项目之CMS 第四章 入门篇-Git的快速入门及实战演练

    写在前面 上篇文章我带着大家通过分析了一遍ASP.NET Core的源码了解了它的启动过程,然后又带着大家熟悉了一遍配置文件的加载方式,最后引出了依赖注入以及控制反转的概念!如果大家把前面几张都理解了 ...

  7. .NET Core实战项目之CMS 第五章 入门篇-Dapper的快速入门看这篇就够了

    写在前面 上篇文章我们讲了如在在实际项目开发中使用Git来进行代码的版本控制,当然介绍的都是比较常用的功能.今天我再带着大家一起熟悉下一个ORM框架Dapper,实例代码的演示编写完成后我会通过Git ...

  8. net core体系-web应用程序-4asp.net core2.0 项目实战（CMS）-第二章 入门篇-快速入门ASP.NET Core看这篇就够了

    .NET Core实战项目之CMS 第二章 入门篇-快速入门ASP.NET Core看这篇就够了   原文链接:https://www.cnblogs.com/yilezhu/p/9985451.ht ...

  9. ASP.NET自定义控件组件开发 第一章 第二篇 接着待续

    原文:ASP.NET自定义控件组件开发 第一章 第二篇 接着待续 ASP.NET自定义控件组件开发 第一章 第二篇 接着待续 很感谢大家给我的第一篇ASP.NET控件开发的支持!在写这些之前,我也看了 ...

随机推荐

  1. tensorflow scope的作用

    我们在使用tensorflow的时候,当你想复用一个函数的模块,调试时候回提示你变量已经出现,提示你是否重用.那我们当然是不重用的,因为每一个变量都是我们需要的. 要体现不同,就在不同的变量中使用na ...

  2. 网站性能优化实战——从12.67s到1.06s的故事

    文章摘自https://juejin.im/post/5b0b7d74518825158e173a0c 作为互联网项目,最重要的便是用户体验.在举国“互联网+”的热潮中,用户至上也已经被大多数企业所接 ...

  3. [archlinux][plasma][screensaver] plasma5配置屏保程序，没成功(-_-#)

    plamsa用了好久,一直没有屏保.我想要玄酷的屏保! 用xscreensaver, 之前用FVWM2的时候,就用过了,很玄酷. 一,安装 pacman -S xscreensaver 二,配置 xs ...

  4. Python Mock的入门（转）

    原文:https://segmentfault.com/a/1190000002965620 Mock是什么 Mock这个词在英语中有模拟的这个意思,因此我们可以猜测出这个库的主要功能是模拟一些东西. ...

  5. （4.23）sql server区服大小写的检索

    是的,SQL Server数据库可以区分大小写.区分大小写意味着SQL Server将为CASE,Case,CaSe等返回不同的结果集,并将所提到的字符串视为3个不同的字符串.区分大小写的数据库具有区 ...

  6. basename 命令

    basename命令的作用是获取脚本的名字 basename 作用:从给定的包含绝对路径的文件名中去除路径,然后返回剩下的文件名 [root@salt-client- sh1]# basename / ...

  7. centos7.6删除重新安装python和yum

    最近在开发一个项目时出现了错误,需要重新安装python和yum,怎么安装呢?随ytkah一起来看看吧.ytkah用的linux分支的centos7.6,各位朋友在下载源的时候要注意版本的区分.现在开 ...

  8. Python日期与字符串互转

    import datetime #str -> date detester = '2017-01-01' date = datetime.datetime.strptime(detester,' ...

  9. HDFS介绍及简单操作

    目录 1.HDFS是什么? 2.HDFS设计基础与目标 3.HDFS体系结构 3.1 NameNode(NN)3.2 DataNode(DN)3.3 SecondaryNameNode(SNN)3.4 ...

  10. 安全易用的云许可-VirboxLM许可管理平台

    Virbox LM是深思推出的基于云许可管理的开放平台,旨在为开发者提供低成本.高强度.操作便捷的一站式软件保护方案. Virbox LM包括用户许可管理工具.加壳工具.API帮助工具.开发商管理工具 ...