一、CSS盒模型

1.1、元素分类

在讲解 CSS 布局之前，我们需要提前知道一些知识，在 CSS 中，html 的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素
常用的块状元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有： <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有： <img>、<input>

1.2、元素分类--块级元素

什么是块级元素？在 html 中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置 display:block 就是将元素显示为块级元素。如下代码就是将 内联元素a 转换为 块状元素，从而使 a元素 具有 块状元素 特点。a{display:block;}
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的 100%（和父元素的宽度一致），除非设定一个宽度。

代码示例：

<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>内联块状元素</title><style type="text/css">div,p{background:pink;}</style></head><body><div>我的梦想</div><div>我的梦想</div><p>我的梦想</p></body>
</html>

运行结果：

1.3、元素分类--内联元素

在 html 中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline 将元素设置为内联元素。如下代码就是将块状元素 div 转换为内联元素，从而使 div 元素具有内联元素特点。div{display:inline;}
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

代码示例：

<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>行内元素标签</title><style type="text/css">a,span,em{background:pink; /*设置a、span、em标签背景颜色都为粉色*/}</style></head><body><a href="http://www.baidu.com">百度</a><span>我的梦想</span><span>我的梦想</span><em>我的梦想</em></body>
</html>

运行结果：

1.4、元素分类--内联块状元素

内联块状元素（inline-block） 就是同时具备内联元素、块状元素的特点，代码 display:inline-block 就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input> 标签就是这种内联块状标签。
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。

代码示例：

<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>内联块状元素</title><style type="text/css">a{display:inline-block;width:200px;       /*在默认情况下宽度不起作用*/height:20px;        /*在默认情况下高度不起作用*/background:pink;   /*设置背景颜色为粉色*/text-align:center; /*设置文本居中显示*/}</style></head><body><a>我的梦想</a><a>我的梦想</a><a>我的梦想</a><a>我的梦想</a></body>
</html>

运行结果：

1.5、什么是盒模型

通过图片来描述：padding内边距

通过图片来描述：margin外边距

通过图片来描述：border盒子的边框

通过图片来描述：padding的4个方向

1.6、盒模型--边框（一）

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色 ( 边框三个属性 )。
注意：
1、border-style（边框样式）常见样式有：
        dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
        border-color:#888;       //前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为：
        thin | medium | thick（但不是很常用），最常还是用像素（px）。

代码示例：

<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>边框</title><style type="text/css">p{border:2px dotted #ccc;}</style></head><body><h1>我的梦想</h1><p>我的梦想</p></body>
</html>

运行结果：

1.7、盒模型--边框（二）

现在有一个问题，如果有想为 p 标签 单独设置下边框，而其它三边都不设置边框样式怎么办呢？css 样式 中允许只为一个方向的边框设置样式：div{border-bottom:1px solid red;}

代码示例：

<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>边框</title><style type="text/css">li{border-bottom:1px dotted #ccc;}</style></head><body><ul><li>别让不会说话害了你</li><li>二十七八岁就应该有的见识</li><li>别让不好意思害了你</li></ul></body>
</html>

运行结果：

1.8、盒模型--宽度和高度

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css 内定义的宽（width）和高（height），指的是填充以里的内容范围。
因此一个元素实际宽度（盒子的宽度）= 左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

代码示例：

<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>宽度和高度</title><style type="text/css">li{border-bottom:1px SOLID RED;width:200px;height:30px;}</style></head><body><ul><li>别让不会说话害了你</li><li>十七八岁就应该有的见识</li><li>别让不好意思害了你</li></ul></body>
</html>

运行结果：

1.9、盒模型--填充

元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：div{padding:20px 10px 15px 30px;}
如果上、右、下、左的填充都为10px;可以这么写：div{padding:10px;}
如果上下填充一样为10px，左右一样为20px，可以这么写：div{padding:10px 20px;}

代码示例：

<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>填充</title><style type="text/css">#box1{width:20px;height:20px;padding:20px;border:1px solid red;}</style></head><body><div id="box1">中</div></body>
</html>

运行结果：

1.10、盒模型--边界

元素与其它元素之间的距离可以使用边界 （margin） 来设置。边界也是可分为上、右、下、左。如下代码：div{margin:20px 10px 15px 30px;}

代码示例：

<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>边距</title><style type="text/css">div{width:100px;height:100px;border:1px solid red; }#box1{margin-bottom:10px;}</style></head><body><div id="box1">box1</div><div id="box2">box2</div>   </body>
</html>

运行结果：

此篇博客代码下载地址：CSS教程6代码下载
博主的所有博客目录如下：博客文章目录汇总
Java面试部分的博客目录如下：Java笔试面试目录

转载请标明出处，原文地址：https://blog.csdn.net/weixin_41835916 如果觉得本文对您有帮助，请点击顶支持一下，您的支持是我写作最大的动力，谢谢。

前端开发系列（十一）CSS教程（6）相关推荐

Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第24章 JavaScript简介 1.HTML是网页的结构,CSS是网页的外观,而JavaScript是网 ...
Web前端开发精品课HTML CSS JavaScript基础教程HTML部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第1章 HTML简介 1.前端技术简介 (1)从Web1.0到Web2.0,网页制作已经变成前端开发了. ...
Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第11章 CSS简介 1.HTML是网页的结构,CSS是网页的外观,JavaScript是网页的行为. 2. ...
Web前端开发工程师实战培训教程
Web前端开发工程师实战培训教程现在Web前端开发的工作需求量很大,很多企业都专门去招聘Web前端的开发人员,待遇都是轻松过万的我推荐给你们一套系统性学习Web前端开发的课程,可以完整的学习Web ...
要web开发精品教程吗？免费一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放
要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放大师主讲经验难得由逐浪CMS首席架构师发哥老师,亲自主理讲解. 历时一年精心打造, 汇聚了互联网诞生 ...
前端link标签引入css教程
前端link标签引入css教程首先我们在桌面新建一个文件我们在这个文件里分别新建个存放HTML的文件夹以及css层叠样式表格的文件夹然后我们打开dw,在文件选项找到新建我们新建一个HTML的的 ...
【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果~前端开发网页设计基础入门教程~超简单~
b站视频演示效果: [前端实例代码]Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码 ...
【前端实例代码】Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果！前端开发网页设计基础入门教程！超简单~
b站视频演示效果: [前端实例代码]Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码: <!DOCTYP ...
【前端实例代码】Html5+css3创建拟物风格昏昏欲睡的云朵动画网页效果~前端开发网页设计基础入门教程~适合初学者~超简单~
b站视频演示效果: [前端实例代码]Html5+css3创建拟物风格昏昏欲睡的云朵动画网页效果!前端开发网页设计基础入门教程!适合初学者~超简单~ 效果图: 完整代码: <!DOCTYPE ht ...

前端开发系列（十一）CSS教程（6）

一、CSS盒模型

1.1、元素分类

1.2、元素分类--块级元素

1.3、元素分类--内联元素

1.4、元素分类--内联块状元素

1.5、什么是盒模型

1.6、盒模型--边框（一）

1.7、盒模型--边框（二）

1.8、盒模型--宽度和高度

1.9、盒模型--填充

1.10、盒模型--边界

前端开发系列（十一）CSS教程（6）相关推荐

最新文章

热门文章