CSS盒模型详解(图文教程)
本文最初发表于博客园,并在GitHub上持续更新。以下是正文。
盒子模型
前言
盒子模型,英文即box model。无论是div、span、还是a都是盒子。
但是,图片、表单元素一律看作是文本,它们并不是盒子。这个很好理解,比如说,一张图片里并不能放东西,它自己就是自己的内容。
盒子中的区域
一个盒子中主要的属性就5个:width、height、padding、border、margin。如下:
- width和height:内容的宽度、高度(不是盒子的宽度、高度)。
- padding:内边距。
- border:边框。
- margin:外边距。
盒子模型的示意图:
代码演示:
上面这个盒子,width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。
注意:宽度和真实占有宽度,不是一个概念!来看下面这例子。
标准盒模型和IE盒模型
我们目前所学习的知识中,以标准盒子模型为准。
标准盒子模型:
IE盒子模型:
上图显示:
在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式:
- width和height:内容的宽度、高度(不是盒子的宽度、高度)。
- padding:内边距。
- border:边框。
- margin:外边距。
CSS盒模型和IE盒模型的区别:
在 标准盒子模型中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。
IE盒子模型中,width 和 height 指的是内容区域+border+padding的宽度和高度。
注:Android中也有margin和padding的概念,意思是差不多的,如果你会一点Android,应该比较好理解吧。区别在于,Android中没有border这个东西,而且在Android中,margin并不是控件的一部分,我觉得这样做更合理一些,呵呵。
<body>
标签也有margin
<body>
标签有必要强调一下。很多人以为<body>
标签占据的是整个页面的全部区域,其实是错误的,正确的理解是这样的:整个网页最大的盒子是<document>
,即浏览器。而<body>
是<document>
的儿子。浏览器给<body>
默认的margin大小是8个像素,此时<body>
占据了整个页面的一大部分区域,而不是全部区域。来看一段代码。
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title><style type="text/css">div{width: 100px;height: 100px;border: 1px solid red;padding: 20px;margin: 30px;}</style></head><body><div>有生之年</div><div>狭路相逢</div></body></html>
上面的代码中,我们对div标签设置了边距等信息。打开google浏览器,按住F12,显示效果如下:
认识width、height
一定要知道,在前端开发工程师眼中,世界中的一切都是不同的。
比如说,丈量稿纸,前端开发工程师只会丈量内容宽度:
下面这两个盒子,真实占有宽高,都是302*302:
盒子1:
.box1{width: 100px;height: 100px;padding: 100px;border: 1px solid red;}
盒子2:
.box2{width: 250px;height: 250px;padding: 25px;border: 1px solid red;}
真实占有宽度 = 左border + 左padding + width + 右padding + 右border
上面这两个盒子的盒模型图如下:
如果想保持一个盒子的真实占有宽度不变,那么加width的时候就要减padding。加padding的时候就要减width。因为盒子变胖了是灾难性的,这会把别的盒子挤下去。
认识padding
padding区域也有颜色
padding就是内边距。padding的区域有背景颜色,css2.1前提下,并且背景颜色一定和内容区域的相同。也就是说,background-color将填充所有border以内的区域。
效果如下:
padding有四个方向
padding是4个方向的,所以我们能够分别描述4个方向的padding。
方法有两种,第一种写小属性;第二种写综合属性,用空格隔开。
小属性的写法:
padding-top: 30px;padding-right: 20px;padding-bottom: 40px;padding-left: 100px;
综合属性的写法:(上、右、下、左)(顺时针方向,用空格隔开。margin的道理也是一样的)
padding:30px 20px 40px 100px;
如果写了四个值,则顺序为:上、右、下、左。
如果只写了三个值,则顺序为:上、右、下。??和右一样。
如果只写了两个值,比如说:
padding: 30px 40px;
则顺序等价于:30px 40px 30px 40px;
要懂得,用小属性层叠大属性。比如:
padding: 20px;
padding-left: 30px;
上面的padding对应盒子模型为:
下面的写法:
padding-left: 30px;
padding: 20px;
第一行的小属性无效,因为被第二行的大属性层叠掉了。
下面的题,会做了,说明你明白了。
一些题目
题目1:说出下面盒子真实占有宽高,并画出盒模型图。
div{width: 200px;height: 200px;padding: 10px 20px 30px;padding-right: 40px;border: 1px solid #000;}
答案:
题目2:说出下面盒子真实占有宽高,并画出盒模型图。
div{width: 200px;height: 200px;padding-left: 10px;padding-right: 20px;padding:40px 50px 60px;padding-bottom: 30px;border: 1px solid #000;}
答案:
padding-left:10px;
和padding-right:20px;
没用,因为后面的padding大属性,层叠掉了他们。
盒子模型如下:
题目3:现在给你一个盒子模型图,请写出代码,试着用最最简单的方法写。
答案:
width:123px;height:123px;padding:20px 40px;border:1px solid red;
题目4:现在给你一个盒子模型图,请写出代码,试着用最最简单的方法写。
答案:
width:123px;height:123px;padding:20px;padding-right:40px;border:1px solid red;
一些元素,默认带有padding
一些元素,默认带有padding
,比如ul标签。如下:
上图显示,不加任何样式的ul,也是有40px的padding-left。
所以,我们做站的时候,为了便于控制,总是喜欢清除这个默认的padding。
可以使用*
进行清除:
*{margin: 0;padding: 0;}
但是,*
的效率不高,所以我们使用并集选择器,罗列所有的标签(不用背,有专业的清除默认样式的样式表,今后学习):
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;
}
认识border
border就是边框。边框有三个要素:像素(粗细)、线型、颜色。
颜色如果不写,默认是黑色。另外两个属性不写,要命了,显示不出来边框。
border-style
border的所有的线型如下:(我们可以通过查看CSS参考手册
得到)
比如border:10px ridge red;
这个属性,在chrome和firefox、IE中有细微差别:(因为可以显示出效果,因此并不是兼容性问题,只是有细微差别而已)
如果公司里面的设计师是处女座的,追求极高的页面还原度,那么不能使用css来制作边框。就要用到图片,就要切图了。
所以,比较稳定的border-style就几个:solid、dashed、dotted。
border拆分
border是一个大综合属性。比如说:
border:1px solid red;
就是把4个边框,都设置为1px宽度、线型实线、red颜色。
PS:小技巧:在sublime text中,为了快速输入border:1px solid red;
这个属性,可以直接输入bd
,然后选第二个后回车。
border属性是能够被拆开的,有两大种拆开的方式:
(1)按三要素拆开:border-width、border-style、border-color。(一个border属性是由三个小属性综合而成的)
(2)按方向拆开:border-top、border-right、border-bottom、border-left。
现在我们明白了:一个border属性,是由三个小属性综合而成的。如果某一个小属性后面是空格隔开的多个值,那么就是上右下左的顺序。举例如下:
border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;
效果如下:
(1)按三要素拆:
border-width:10px; //边框宽度
border-style:solid; //线型
border-color:red; //颜色。
等价于:
border:10px solid red;
(2)按方向来拆:
border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;
等价于:
border:10px solid red;
(3)按三要素和方向来拆:(就是把每个方向的,每个要素拆开。3*4 = 12)
border-top-width:10px;border-top-style:solid;border-top-color:red;border-right-width:10px;border-right-style:solid;border-right-color:red;border-bottom-width:10px;border-bottom-style:solid;border-bottom-color:red;border-left-width:10px;border-left-style:solid;border-left-color:red;
等价于:
border:10px solid red;
工作中到底用什么?很简答:什么简单用什么。但要懂得,用小属性层叠大属性。举例如下:
为了实现上方效果,写法如下:
border:10px solid red;
border-right-color:blue;
为了实现上方效果,写法如下:
border:10px solid red;
border-style:solid dashed;
border可以没有:
border:none;
可以某一条边没有:
border-left: none;
也可以调整左边边框的宽度为0:
border-left-width: 0;
举例:利用border属性画一个三角形(小技巧)
步骤如下:
(1)当我们设置盒子的width和height为0时,此时效果如下:
(2)然后将border的底部取消:
(3)最后设置border的左边和右边为白色:
这样,一个三角形就画好了。
我的公众号
想学习代码之外的软技能?不妨关注我的微信公众号:千古壹号(id:qianguyihao
)。
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:
转载于:https://www.cnblogs.com/qianguyihao/p/7256371.html
CSS盒模型详解(图文教程)相关推荐
- CSS盒子模型详解(清除无序列表的项目符号)
CSS盒子模型详解(清除无序列表的项目符号) 网页的布局过程 准备好相关的网页元素(盒子) 利用CSS设置好盒子的样式以及在网页中的摆放位置 往盒子里面装东西 盒子模型(box model) 网页中, ...
- css弹性盒模型详解----flex-direction
本篇文章详细介绍flex-direction flex-direction 是控制盒模型容器下一级子元素的排列方式的属性 一共有四种row(默认值):主轴为水平方向,起点在左端.row-reverse ...
- 06-CSS盒模型详解
本文最初发表于博客园,并在GitHub上持续更新.以下是正文. 盒子模型 前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并 ...
- css弹性盒模型详解----flex-wrap
本篇文章详细介绍flex-wrap flex-wrap是控制盒模型容器下一级子元素的在一行显示的时候是否换行nowrap(默认值):不换行wrap:自动换行wrap-reverse:换行,第一行在下方 ...
- 【网站制作视频教程】-第22讲 css盒子模型详解!-传智播客
传智播客( http://icd.itcast.cn/)是一家网页平面设计培训学院,专注于网页设计培训,平面设计培训,fash培训,ui设计培训. 网页设计视频教程下载地址:http://icd ...
- 阿里云备案流程和操作步骤详解(图文教程)
备案前准备: 注册账号--备案前您需要拥有一个阿里云账号(支付宝账户可直接登录) 域名准备--备案前需完成域名注册及实名认证 服务器准备--购买阿里云大陆境内服务器,或获取服务器的备案服务号 备案负责 ...
- 腾讯云首次域名备案超详细步骤详解(图文教程)
一. 办理幕布拍照 登录 腾讯云网站备案控制台. 单击[申请幕布],根据您的实际需要,选择邮寄幕布自行拍照或前往拍照点进行拍照. 二. 验证备案信息 验证备案云服务 登录 腾讯云网站备案控制台. 单击 ...
- 从零开始学前端 - 7. CSS盒模型 margin和padding详解
作者: 她不美却常驻我心 博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享 每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
- CSS盒模型(详解)
目录 前言 一.什么是CSS盒模型 二.标准模型+IE模型的区别 1.CSS如何设置两种盒模型 2.JS如何设置/获取盒模型对应宽高: 前言 什么是css,css有几种,让我带你来了解一下 一.什么是 ...
- 会说话的狗狗本电脑版_一看就会用!Fotor 电脑版 图片后期处理详解系列教程 第一节...
Fotor 电脑版 图片后期处理详解系列教程 第一节 这节课我们先来了解一下 Fotor 电脑版的界面功能,为了能用 Fotor 电脑版修图处理打基础. 如图示,启动 Fotor 以后出面界面,有编辑 ...
最新文章
- 使用命令将单个java文件打包为jar
- API网关—系统的门面要如何做呢?
- 现实版“奇异博士”?原来是这款神秘的“数学黑盒”
- 围成面积(信息学奥赛一本通-T1359)
- JavaEE笔记(十)
- python 爬取实时数据django显示_python脚本采集服务器数据通过API提交到django web服务器,然后展示在页面上...
- Java程序设计基础思维导图
- 工业相机参数及选型参考
- matlab设计椭圆低通滤波器,基于MATLAB的椭圆数字低通滤波器设计.doc
- 主流芯片解决方案Ambarella的高清网络摄像机、德州仪器和控制海思
- jmeter监听器之图形监控扩展
- ubuntu14.04安装谷歌输入法
- 生产者消费者算法的实现
- 头条号nx配置文件mysql_后端开辟必备的MySQL日记文件知识点
- 成功的四大天敌(一)
- 辽宁大学--数据库应用技术--新闻网站--期末大作业
- LeetCode练习题C#源码
- 温文尔雅的伤感空间日志:你心里的痛,是我永远的殇
- linux屏幕滑动效果实现代码,使用swipe方法模拟屏幕滑动与手势密码绘制
- android MMS接受因联网被拒失败分析