文档章节

CSS的盒模型

博为峰教研组
 博为峰教研组
发布于 2017/03/10 18:30
字数 185
阅读 9
收藏 0

一个盒子中主要的属性就5个:width、height、padding、border、margin。

width是“宽度”的意思,CSS中width指的是内容的宽度,而不是盒子的宽度。

height是“高度”的意思,CSS中height指的是内容的高度,而不是盒子的高度

padding是“内边距”的意思

border是“边框”

margin是“外边距”

下面就是盒模型的属性的值

这里我们定义一个div

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

div{

width: 200px;

height: 200px;

padding: 10px;

border:6px solid red;

         

}

</style>

</head>

<body>

<div></div>

</body>

</html>

上述代码,我们设置width=200px,height: 200px;但是盒子占据的真实的宽度和高度是200+10*2+6*2=232.即232*232。

 

 

 

© 著作权归作者所有

博为峰教研组
粉丝 51
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
10分钟复习CSS盒模型与BFC

css盒模型与BFC 本文为收集整理总结网上资源 旨在系统复习css盒模型与bfc 节省复习时间 阅读10分钟 什么是盒模型 每一个文档中,每个元素都被表示为一个矩形的盒子,它都会具有内容区、paddi...

coderLfy
2018/06/30
0
0
IE浏览器和CSS盒模型

IE浏览器和更符合WEB标准的现代浏览器之间的差别在CSS盒模型这个问题上为很多前端初学者制造了不少的麻烦。因为盒模型是浏览器用来计算元素总宽度和高度的保证,所以就不难理解为什么当浏览器...

黄金林
2016/12/20
7
0
弹性盒模型案例讲解

弹性盒模型的设置的方法为display:box 或display:inline-box box-orient 为定义盒模型的布局方向,由于盒模型的只有在webkit或moz的内核才生效,故我们在使用这个属性之前要在它前面加上-webk...

爱前端的小白
2017/07/06
0
0
CSS:弹性盒模型(Flexible Box)学习

关于w3school对弹性盒模型的解释,只找到这些相关的属性: w3school原文中提到 浏览器支持 目前没有浏览器支持 box-flex 属性。 Firefox 支持替代的 -moz-box-flex 属性。 Safari、Opera 以及...

唐佳
2016/09/18
32
0
jQuery HTML操作学习笔记

学习资料 jQuery教程 获取 1.获取、设置元素的内容 1.1获取或设置目标元素的文本内容 语法 $(selector).text(); 获取元素文本内容$(selector).text(content);设置元素的文本内容$(selector)...

inw3cschool
2017/04/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Handler简解

Handler 这里简化一下代码 以便理解 Handler不一定要在主线程建 但如Handler handler = new Handler(); 会使用当前的Looper的, 由于要更新UI 所以最好在主线程 new Handler() { mLooper = Lo...

shzwork
24分钟前
3
0
h5获取摄像头拍照功能

完整代码展示: <!DOCTYPE html> <head> <title>HTML5 GetUserMedia Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum......

诗书易经
27分钟前
3
0
正向代理和反向代理

文章来源 运维公会:正向代理和反向代理 1、正向代理 (1)服务对象不同 正向代理服务器的服务对象是客户端,可以将客户端和代理服务器看作一个整体。 (2)配置方法不同 需要在客户端配置代...

运维团
43分钟前
4
0
5个避免意外论文重复率高的方法

即使你不是故意抄袭,但你可能在无意中抄袭了别人的论文, 这个叫做意外抄袭,它可能正发生在你身上,如果你不熟悉学术 道德规范,这里将告诉你5个基本的方法来避免意外抄袭。 Tip1 熟悉其他...

论文辅导员
44分钟前
4
0
Maven通过profiles标签读取不同的配置

<profiles> <profile> <id>dev</id> <properties> <profiles.active>dev</profiles.active> </properties> ......

时刻在奔跑
50分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部