第一章入门篇CSS样式的分类、盒模型
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样式的分类、盒模型的更多相关文章
- .NET Core实战项目之CMS 第一章 入门篇-开篇及总体规划
作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9977862.html 写在前面 千呼万唤始出来,首先,请允许我长吸一口气!真没想到一份来自28岁老程序员 ...
- net core体系-web应用程序-4asp.net core2.0 项目实战（CMS）-第一章 入门篇-开篇及总体规划
.NET Core实战项目之CMS 第一章 入门篇-开篇及总体规划 原文地址:https://www.cnblogs.com/yilezhu/p/9977862.html 写在前面 千呼万唤始出来 ...
- .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用
写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...
- .NET Core实战项目之CMS 第二章 入门篇-快速入门ASP.NET Core看这篇就够了
作者:依乐祝 原文链接:https://www.cnblogs.com/yilezhu/p/9985451.html 本来这篇只是想简单介绍下ASP.NET Core MVC项目的(毕竟要照顾到很多新 ...
- .NET Core实战项目之CMS 第三章 入门篇-源码解析配置文件及依赖注入
作者:依乐祝 原文链接:https://www.cnblogs.com/yilezhu/p/9998021.html 写在前面 上篇文章我给大家讲解了ASP.NET Core的概念及为什么使用它,接着 ...
- .NET Core实战项目之CMS 第四章 入门篇-Git的快速入门及实战演练
写在前面 上篇文章我带着大家通过分析了一遍ASP.NET Core的源码了解了它的启动过程,然后又带着大家熟悉了一遍配置文件的加载方式,最后引出了依赖注入以及控制反转的概念!如果大家把前面几张都理解了 ...
- .NET Core实战项目之CMS 第五章 入门篇-Dapper的快速入门看这篇就够了
写在前面 上篇文章我们讲了如在在实际项目开发中使用Git来进行代码的版本控制,当然介绍的都是比较常用的功能.今天我再带着大家一起熟悉下一个ORM框架Dapper,实例代码的演示编写完成后我会通过Git ...
- 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 ...
- ASP.NET自定义控件组件开发 第一章 第二篇 接着待续
原文:ASP.NET自定义控件组件开发 第一章 第二篇 接着待续 ASP.NET自定义控件组件开发 第一章 第二篇 接着待续 很感谢大家给我的第一篇ASP.NET控件开发的支持!在写这些之前,我也看了 ...
随机推荐
- Ubuntu将网卡名称eno160改为eth0并且设置静态IP
修改配置文件/etc/default/grub GRUB_CMDLINE_LINUX="net.ifnames=0 biosdevname=0" 设置生效 update-grub ...
- poj1094 Sorting It All Out【floyd】【传递闭包】【拓扑序】
Sorting It All Out Time Limit: 1000MS Memory Limit: 10000K Total Submissions:39731 Accepted: 139 ...
- .NET Core开发日志——结构化日志
在.NET生态圈中,最早被广泛使用的日志库可能是派生自Java世界里的Apache log4net.而其后来者,莫过于NLog.Nlog与log4net相比,有一项较显著的优势,它支持结构化日志. 结 ...
- djiango web 在进入admin的时候出现'set' object is not reversible错误
解决方案是在你的urls.py 中 把{ } 改为[] 原因不详 治标不治本,并不能改的东西
- PHP利用反射根据类名反向寻找类所在文件
有时候分析源码时,会被博大精深的层层代码搞得晕头转向,不知道类是定义在哪个文件里的,有时候IDE所提供的方法声明未必准确.在这种情况下,我们可以利用反射找到类所在的文件. 在你发现实例化类的地方(例如 ...
- css中display:inline-block display:-moz-inline-box display:-moz-inline-stack 的区别
很多时候我们必须使一些块元素并排显示,一般想到的是必须使用浮动,但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG,所以很多时候不得不把这个块元素套在一个内联元素里面,然后给内联元素 ...
- git修改提交的用户名
场景分析 试想一下这样的场景,你先在自己的电脑上上创建了一个项目,并且把他添加到了git仓库,然后提交到了Github.但是,下一次,你在公司的电脑上clone了这个项目,并且修改了文件,当你提交到G ...
- BTree和B+Tree详解
https://www.cnblogs.com/vianzhang/p/7922426.html B+树索引是B+树在数据库中的一种实现,是最常见也是数据库中使用最为频繁的一种索引.B+树中的B代表平 ...
- SQLAlchemy_ORM
ORM 与 SQLAlchemy 简介: ORM 叫对象关系映射,ORM 将对象转换成SQL,然后使用数据API执行SQL并获取执行结果 SQLAlchemy 是Python 社区最知名的 ORM 工 ...
- 《HTTP - http首部信息》
推荐一首歌 - 僕が死のうと思ったのは (曾经我也想过一了百了) 也就听了几十遍而已 经历一番波折,终于正式到了北京. 刚开始是很艰难的,多走两步就好了,不是么. 1:首部字段 Cache-Contr ...