盒模型--边框(一)

盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

如下面代码为div来设置边框粗细为2px、样式为实心的、颜色为红色的边框:

div{
border:2px solid red;
}

上面是border代码的缩写形式,可以分开写:

div{
border-width:2px;
border-style:solid;
border-color:red;
}

注意:

1、border-style(边框样式)常见样式有:

dashed(虚线)| dotted(点线)| solid(实线)。

2、border-color(边框颜色)中的颜色可设置为十六进制颜色,如:

border-color:#888;//前面的井号不要忘掉。

3、border-width(边框宽度)中的宽度也可以设置为:

thin | medium | thick(但不是很常用),最常还是用象素(px)。

 

盒模型--边框(二)

现在有一个问题,如果有想为p标签单独设置下边框,而其它三边都不设置边框样式怎么办呢?css样式中允许只为一个方向的边框设置样式:

div{border-bottom:1px solid red;}

同样可以使用下面代码实现其它三边上、右、左边框的设置:

border-top:1px solid red;
border-right:1px solid red;
border-left: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>

盒模型--宽度和高度

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的,css内定义的宽(width)和高(height),指的是填充以里的内容范围。

因此一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

元素的高度也是同理。

比如:

css代码:

div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}

html代码:

<body>
<div>文本内容</div>
</body>

元素的实际长度为:10px+1px+20px+200px+20px+1px+10px=262px。在chrome浏览器下可查看元素盒模型,如下图:

<!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;
width:200px;height:30px;
}
</style>
</head>
<body>
<ul>
<li>别让不会说话害了你</li>
<li>二十七八岁就应该有的见识</li>
<li>别让不好意思害了你</li>
</ul>
</body>
</html>

盒模型--填充

元素内容与边框之间是可以设置距离的,称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码:

div{padding:20px 10px 15px 30px;}

顺序一定不要搞混。可以分开写上面代码:

div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left: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:100px;
height:100px;
padding:10px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="box1">盒子1</div>
</body>
</html>

盒模型--边界

元素与其它元素之间的距离可以使用边界(margin)来设置。边界也是可分为上、右、下、左。如下代码:

div{margin:20px 10px 15px 30px;}

也可以分开写:

div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}

如果上右下左的边界都为10px;可以这么写:

div{ margin:10px;}

如果上下边界一样为10px,左右一样为20px,可以这么写:

div{ margin:10px 20px;}

总结一下:padding和margin的区别,padding在边框里,margin在边框外。

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

html学习第三天—— 第11章 盒子模型 div的更多相关文章

  1. HTML网页设计基础笔记 • 【第7章 盒子模型】

    全部章节   >>>> 本章目录 7.1 盒子模型原理 7.1.1 盒子模型概述 7.1.2 盒子的大小 7.1.3 盒子之间的关系 7.2 标准文档流 7.2.1 标准文档流 ...

  2. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

  3. ThinkPHP 学习笔记 ( 三 ) 数据库操作之数据表模型和基础模型 ( Model )

    //TP 恶补ing... 一.定义数据表模型 1.模型映射 要测试数据库是否正常连接,最直接的办法就是在当前控制器中实例化数据表,然后使用 dump 函数输出,查看数据库的链接状态.代码: publ ...

  4. html (第四本书第六章盒子模型参考)

    上机1 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...

  5. HTML5学习笔记(七):CSS盒子模型

    在CSS中,盒子模型有W3C标准盒子模型和IE盒子模型两种,这里所谈的是基于W3C标准的盒子模型. 所有HTML元素都可以看作盒子,即所有HTML标签都支持盒子模型的属性,在CSS中,"bo ...

  6. HTML第六章 盒子模型

    什么是盒子模型: (1)边框: (2)内边距: (3)外边距: (4)元素内容·: (5)背景色·: 边框: 属性: 颜色(border-color),粗细(border-width),样式(bord ...

  7. javascript权威指南第11章 DOM扩展

    //javascript 权威指南 第三版 第11章 DOM扩展 //取得body元素 var body = document.querySelector("body"); //取 ...

  8. QT学习(三)

    首先整理一下编码的方法.对于一个待解决的问题,首先应该将大问题分解成小问题,将小问题划分为小小问题... 然后再进行类的抽象,将划分成的问题和类进行对应.然后再对划分的小..问题进行具体的处理分析,划 ...

  9. CSS学习篇核心之——盒子模型

    概述 关于CSS的一些基础知识我们在前面文章中已经有所了解,这篇文章我们主要来学习下CSS中的核心知识盒子模型的知识. 盒子模型 元素框的最内部分是实际的内容(element),直接包围内容的是内边距 ...

随机推荐

  1. 面向对象编程(OOP)

    什么是面向对象编程,对于面向对象编程与面向过程编程的解释随处可见,个人认为对面向对象编程解释最好的一个定义是:依赖倒转原则是面向对象编程的标志,面向对象编程是一种思想,无论使用哪一种编程语言,如果在编 ...

  2. 【转载】--仅用 []()+! 就足以实现几乎任意Javascript代码

    最近在做CTF的题目,遇见了一个都是[]()+!这样的文件,于是百度了一下,发现这个博客对这个有解释. G Reader里Dexter同学的分享,来自sla.ckers.org的又一神作 点我测试 G ...

  3. Ruby安装Scss

    Ruby安装Scss 引言 已经许久不写HTML了,今天有点以前的东西要改.但是刚装的Windows10,已经没有以前的Web开发环境了.只好重新安装. 结果Webstorm装好后配置Scss出现错误 ...

  4. D2js 的邦联式架构

    d2js 的接口单独看有点像小手工业者,每个人摆弄着自己的小功能,但是在 update 的一声号令下,它们也可以组合起来,发挥出整体的功效,变为流水线上的工人--这一切是自然而隐蔽的进行的,小手工业者 ...

  5. java从基础知识(九)I/O

    java中的流可以从不同的角度进行分类 按流的方向:输入流.输出流(注意这里的输入(read).输出是相对于程序而言的(writer),个人认为从读.写角度理解更为直观) 按处理数据单位:字节流.字符 ...

  6. [转]SpringMVC Controller介绍及常用注解

    一.简介 在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理层处理之后封装成一个Model ,然后再把该Mo ...

  7. Mongodb系统管理员权限设置

    管理员账号无法执行show dbs .show collections Js代码   { "_id" : ObjectId("52a82bb26cea234c4deb06 ...

  8. composer 使用笔记

    使用composer 更新项目比如: composer create-project topthink/think wwwroot dev-master --prefer-dist提示openssl异 ...

  9. 微软往年校招招面试题AC全解。

    因为4月初要参加微软的online.所以今天把微软的面试题拿出来做了,自己解答了题目.下面附上我的解答代码. -----------16年9月校招:  第一道题:Farthest Point(最远的整 ...

  10. [PHP][位转换积累]之异或运算的简单加密应用

    异或的符号是^.按位异或运算, 对等长二进制模式按位或二进制数的每一位执行逻辑按位异或操作. 操作的结果是如果某位不同则该位为1, 否则该位为0. xor运算的逆运算是它本身,也就是说两次异或同一个数 ...