python-book
  • 目录
  • 第2章 Python基础 (旧版)
    • 2.1 上节拾遗
    • 2.2 二进制
    • 2.3 字符编码
    • 2.4 基本数据类型——数字
    • 2.5 基本数据类型——字符串
    • 2.6 基本数据类型——列表
    • 2.7 基本数据类型——元组
    • 2.8 可变、不可变数据类型和hash
    • 2.9 基本数据类型——字典
    • 2.10 基本数据类型——集合
    • 2.11 collections模块
    • 2.12 本章小结
      • 习题答案
  • 第3章 Python基础—文件操作&函数(旧版)
    • 3.1 上节拾遗
    • 3.2 三元运算
    • 3.3 字符编码转换
    • 3.4 文件处理
    • 3.5 函数
    • 3.6 函数进阶
    • 3.7 生成器&迭代器
    • 3.8 本章小节
      • 习题答案
  • 第4章 Python基础—常用模块(旧版)
    • 4.1 模块、包介绍和相关语法
    • 4.2 time & datetime 模块
    • 4.3 random 模块
    • 4.4 os 模块
    • 4.5 sys 模块
    • 4.6 shutil 模块
    • 4.7 json & pickle 模块
    • 4.8 shelve 模块
    • 4.9 xml 模块
    • 4.10 ConfigParser 模块
    • 4.11 hashlib 模块
    • 4.12 subprocess 模块
    • 4.13 logging 模块
      • python日志重复输出
    • 4.14 re 模块
    • 4.15 软件开发目录规范
    • 4.16 本章小结
      • 习题答案
  • 第5章 面向对象编程设计与开发
    • 面向对象介绍
    • 类、实例、属性、方法详解
    • 5.1 什么是面向对象的程序设计
    • 5.2 类与对象
    • 5.3 属性查找与绑定方法
    • 5.4 小结
    • 5.5 继承与派生
    • 5.6 组合
    • 5.7 抽象类
    • 5.8 多态与多态性
    • 5.9 封装
    • 5.10 绑定方法与非绑定方法
    • 5.11 内置方法
    • 5.11 内置方法(补充)
    • 5.12 元类
    • 5.13 面向对象的软件开发
    • 5.14 领域模型
    • 5.15 异常处理
    • 5.16 本章总结
  • 第6章 网络编程-SOCKET开发
    • 6.1 C/S架构介绍
    • 6.2 TCP/IP 各层详解
    • 6.3 Socket介绍
    • 6.4 Socket代码实例
    • 6.5 粘包现象与解决方案
    • 6.6 通过socket发送文件
    • 6.7 本章总结
  • 第7章 并发编程
    • 7.1 操作系统介绍
      • 附录1:操作系统介绍
    • 7.2 并发编程之多进程
      • 7.2.1 进程理论
      • 7.2.2 开启进程的两种方式
      • 7.2.3 join方法
      • 7.2.4 守护进程
      • 7.2.5 互斥锁
      • 7.2.6 队列
      • 7.2.7 生产者消费者模型
    • 7.3 并发编程之多线程
      • 7.3.1 线程理论
      • 7.3.2 开启线程的两种方式
      • 7.3.3 多线程与多进程的区别
      • 7.3.4 Thread对象的其他属性或方法
      • 7.3.5 守护线程
      • 7.4.6 GIL全局解释器锁
      • 7.4.7 死锁现象与递归锁
      • 7.4.8 信号量,Event,定时器
      • 7.4.9 线程queue
      • 7.4.10 进程池与线程池
    • 7.4 并发编程之协程
      • 7.4.1 协程介绍
      • 7.4.2 greenlet模块
      • 7.4.3 gevent模块
    • 7.5 IO模型
      • 7.5.1 IO模型介绍
      • 7.5.2 阻塞IO
      • 7.5.3 非阻塞IO
      • 7.5.4 多路复用IO
      • 7.5.5 异步IO
      • 7.5.6 IO模型比较分析
      • 7.5.7 selectors模块
    • 7.6 本章小结
  • 第8章 MySQL数据库
    • 8.1 初识数据库
      • 8.1.1 数据库管理软件的由来
      • 8.1.2 数据库概述
      • 8.1.3 mysql安装与基本管理
      • 8.1.4 初识sql语句
    • 8.2 库操作
      • 8.2.1 库的增删改查
    • 8.3 表操作
      • 8.3.1 存储引擎介绍
      • 8.3.2 表的增删改查
      • 8.3.3 数据类型
        • 1 数值类型
        • 2 日期类型
        • 3 字符串类型
        • 4 枚举类型与集合类型
      • 8.3.4 完整性约束
    • 8.4 数据操作
      • 8.4.1 数据的增删改
      • 8.4.2 单表查询
      • 8.4.3 多表查询
    • 8.5 Navicat工具与pymysql模块
      • 8.5.1 图形工具Navicat
      • 8.5.2 pymysql模块
    • 8.6 mysql内置功能
      • 8.6.1 视图
      • 8.6.2 触发器
      • 8.6.3 事务
      • 8.6.4 存储过程
      • 8.6.5 函数
      • 8.6.6 流程控制
    • 8.7 索引原理与慢查询优化
      • 8.7.1 索引原理与慢查询优化(1)
      • 8.7.2 索引原理与慢查询优化(2)
    • 8.8 本章小结
      • 8.8.1 章节作业
  • 第9章 前端开发
    • 9.0 前端内容介绍
      • 前端究竟是个什么鬼?
    • 9.1 HTML
      • 9.1.1 HTML简介
      • 9.1.2 开发环境
      • 9.1.3 HTML标签介绍
      • 9.1.4 HTML文档结构(重点)
      • 9.1.5 HTML注释
      • 9.1.6 head标签相关内容
      • 9.1.7 body标签相关内容(重点)
        • 常用标签一
        • 常用标签二
      • 9.1.8 HTML标签属性
      • 9.1.9 HTML标签分类(重点)
      • 9.1.10 标签嵌套规则(重点)
      • 9.1.11 HTML练习题
    • 9.2 CSS
      • 9.2.1 CSS介绍
      • 9.2.2 CSS语法
      • 9.2.3 CSS引入方式
      • 9.2.4 基本选择器
      • 9.2.5 组合选择器
      • 9.2.6 属性选择器
      • 9.2.7 分组选择器
      • 9.2.8 伪类选择器
      • 9.2.9 伪元素选择器
      • 9.2.10 选择器的优先级(重点)
      • 9.2.11 字体属性
      • 9.2.12 文字属性
      • 9.2.13 背景属性
      • 9.2.14 display属性(重点)
      • 9.2.15 盒模型(重点)
      • 9.2.16 浮动与清除浮动(重点)
      • 9.2.17 background属性(侧重点)
      • 9.2.18 定位(重点)
      • 9.2.19 z-index(重点)
      • 9.2.20 css练习题
    • 9.3 JavaScript
      • 9.3.1 JavaScript简介
      • 9.3.2 ECMAScript 5.0
      • 9.3.3 正则表达式
      • 9.3.4 DOM(重点)
      • 9.3.5 client、offset、scroll系列
      • 9.3.6 定时器
      • 9.3.7 BOM
      • 9.3.8 练习题
    • 9.4 jQuery
      • 9.4.1使用js的一些疼处
      • 9.4.2 js和jquery的区别
      • 9.4.3 jquery文件的引入
      • 9.4.4 jquery选择器用法
      • 9.4.5 jquery对象和DOM对象的转换
      • 9.4.6 jquery的效果
      • 9.4.7 jquery的属性操作
      • 9.4.8 操作input的value值
      • 9.4.9 jquery文档操作
      • 9.4.10 jquery的CSS
      • 9.4.11 jquery的筛选方法
      • 9.4.12 jquery的事件
      • 9.4.13 jquery的Ajax
      • 9.4.14 补充内容
      • 9.4.15 练习题
    • 9.5 Bootstrap
      • 9.5.1 Bootstrap的介绍和响应式@metia媒体查询
      • 9.5.2 Bootstrap的引入和使用
      • 9.5.3 Bootstrap插件的一些常用属性介绍
    • 9.6 前端内容流程导图
  • 第10章 Django
    • 10.1 web应用与http协议
      • 10.1.1 web应用与web框架
    • 10.2 http协议简介
    • 10.3 Django简介
    • 10.4 Django-2的路由层(URLconf)
    • 10.5 Django的视图层
    • 10.6 Django模板层
    • 10.7 Django模型层
      • 模型层一单表操作
      • 模型层二多表操作
    • 10.8 Django组件-cookie与session
    • 10.9 Django组件-forms组件
    • 10.10 Django组件-用户认证
    • 10.11 Django组件-中间件
    • 10.12 Django组件-分页器
    • 10.13 Django与Ajax
    • 10.14习题
  • 第11章 BBS项目(博客系统)
    • 11.1 基于Ajax和用户认证系统的登录验证
    • 11.2 基于Ajax和forms组件的实现注册功能
    • 11.3 系统首页的布局渲染
    • 11.4 个人站点的文章,标签,分类查询
    • 11.5 文章详细页的设计
    • 11.6 点赞与踩灭功能的实现
    • 11.7 评论功能的实现
    • 11.8 基于富文本编辑器框和beautifulSoup模块防止xss攻击
  • 第12章 CRM项目
    • 12.1 权限组件之权限控制
  • 第1章 Python基础(旧版)
    • 1.1 编程语言介绍
    • 1.2 Python介绍
    • 1.3 Python安装
    • 1.4 第一个Python程序
    • 1.5 变量
    • 1.6 程序交互
    • 1.7 基本数据类型
    • 1.8 格式化输出
    • 1.9 基本运算符
    • 1.10 流程控制之 if ... else
    • 1.11 流程控制之 循环
    • 1.12 开发工具IDE
    • 1.13 本章小节
      • 习题答案
    • 1.14 Python开发规范指南
      • 1.14.1 Python风格规范
      • 1.14.2 Python语言规范
  • 第1章 Python基础语法(new)
    • 1.1 编程语言介绍与分类
    • 1.2 Python介绍、发展趋势
    • 1.3 Python环境安装
    • 1.4 开发你的第一个Python程序
    • 1.5 选择最好用的PyCharm IDE
    • 1.6 变量
    • 1.7 注释
    • 1.8 基本数据类型
    • 1.9 读取用户指令
    • 1.10 格式化打印
    • 1.11 运算符
    • 1.12 流程控制之if...else
    • 1.13 流程控制之while循环
    • 1.14 本章练习题&作业
  • 第2章 Python基础-数据类型和文件操作(new)
    • 2.1 上章补充-Bytes类型
  • 第3章 Python基础-函数编程(new)
  • 第4章 Python基础 常用模块(new)
Powered by GitBook
On this page
  • width:内容的宽高
  • height:内容的高
  • padding:内边距
  • border:边框
  • margin:外边距
  • 盒模型的概念
  • 盒模型示意图
  • 盒模型的属性
  • 盒模型的计算
  • padding
  • padding的设置
  • 一些标签默认有padding
  • 按照3要素来写border
  • 按照方向划分
  • 使用border来制作小三角
  • margin

Was this helpful?

  1. 第9章 前端开发
  2. 9.2 CSS

9.2.15 盒模型(重点)

Previous9.2.14 display属性(重点)Next9.2.16 浮动与清除浮动(重点)

Last updated 5 years ago

Was this helpful?

width:内容的宽高

height:内容的高

padding:内边距

border:边框

margin:外边距

盒模型的概念

在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。

盒模型有两种:标准模型和IE模型。我们在这里重点讲标准模型。

盒模型示意图

盒模型的属性

width:内容的宽度

height: 内容的高度

padding:内边距,边框到内容的距离

border: 边框,就是指的盒子的宽度

margin:外边距,盒子边框到附近最近盒子的距离

如果让你做一个宽高402*402的盒子,您如何来设计呢?

答案有上万种,甚至上一种。

盒模型的计算

如果一个盒子设置了padding,border,width,height,margin(咱们先不要设置margin,margin有坑,后面课程会讲解)

盒子的真实宽度=width+2*padding+2*border

盒子的真实宽度=height+2*padding+2*border

那么在这里要注意看了。标准盒模型,width不等于盒子真实的宽度。

另外如果要保持盒子真实的宽度,那么加padding就一定要减width,减padding就一定要加width。真实高度一样设置。

padding

padding:就是内边距的意思,它是边框到内容之间的距离

另外padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域

padding的设置

padding有四个方向,分别描述4个方向的padding。

描述的方法有两种

1、写小属性,分别设置不同方向的padding

padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;

2、写综合属性,用空格隔开

/*
上 右 下 左
*/

padding: 20px 30px 40px 50px ;

/*
上 左右  下
*/

padding: 20px 30px 40px;

/*
 上下 左右
*/

padding: 20px 30px;

/*
上下左右
*/
padding: 20px;

一些标签默认有padding

比如ul标签,有默认的padding-left值。

那么我们一般在做站的时候,是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。

我们现在初学可以使用通配符选择器

*{
  padding:0;
  margin:0;    
}

But,这种方法效率不高。

所以我们要使用并集选择器来选中页面中应有的标签(不同背,因为有人已经给咱们写好了这些清除默认的样式表,reset.css)

边框

border:边框的意思,描述盒子的边框

边框有三个要素: 粗细 线性样式 颜色

border: solid

如果颜色不写,默认是黑色。如果粗细不写,不显示边框。如果只写线性样式,默认的有上下左右 3px的宽度,实体样式,并且黑色的边框。

按照3要素来写border

border-width: 3px;
border-style: solid;
border-color: red;

/*

border-width: 5px 10px;
border-style: solid dotted double dashed;
border-color: red green yellow;

*/

按照方向划分

border-top-width: 10px;
border-top-color: red;
border-top-style: solid;

border-right-width: 10px;
border-right-color: red;
border-right-style: solid;

border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;

border-left-width: 10px;
border-left-color: red;
border-left-style:solid;

上面12条语句,相当于 bordr: 10px solid red;

另外还可以这样:

border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10px solid red;

清除边框的默认样式,比如input输入框

 border:none;
 border:0;

使用border来制作小三角

/*小三角 箭头指向下方*/
        div{
            width: 0;
            height: 0;
            border-bottom: 20px solid red;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }

margin

margin:外边距的意思。表示边框到最近盒子的距离。(兄弟之间)

/*表示四个方向的外边距离为20px*/
margin: 20px;
/*表示盒子向下移动了30px*/
margin-top: 30px;
/*表示盒子向右移动了50px*/
margin-left: 50px;
margin-bottom: 100px;

https://meyerweb.com/eric/tools/css/reset/