一：盒模型

1、  盒模型的概念

　　广义盒模型：文档中所有功能性及内容性标签，及文档中显示性标签

　　侠义盒模型：文档中以块级形式存在的标签（块级标签拥有盒模型100%特性且最常用）

　　盒模型组成：margin + border + padding + content

v_hint（提示）：content = width x height

2、  盒模型成员介绍

　　content  \  border  \  padding  \  margin

　1. content

  • 通过设置width与height来规定
  • 块级标签，可以设置自身宽高，默认宽父级宽（width = auto）、高为0（可由内容决定）
  • 内联标签，不可以设置自身宽高，默认宽高均为0，宽高一定是由内容决定的

  2.border

　border（边框）由border-width（宽度）、border-color（颜色）、border-style（风格）三部分组成

　　border成员：border-left 、border-right 、border-top 、border-bottom

　　

　3.padding

  • padding成员：padding-left 、padding-right 、padding-top 、padding-bottom
  • 整体设置

4.margin

  • margin成员：margin-left 、margin-right 、margin-top 、margin-bottom
  • 整体设置

二：盒模型布局

　　分为两大布局：

　　　　影响自身布局

　　　　影响兄弟布局

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>盒模型布局</title>

    <style>

        /*做页面必备reset操作*/

        html, body {

            margin: 0

        }

        .box, .wrap {

            width: 200px;

            height: 200px;

            background-color: red;

        }

        .wrap {

            background: orange;

        }

        /*影响自身布局*/

        /*.box {

            margin-top: 30px;

            margin-left: 100px;

        }*/

        /*影响兄弟布局*/

        /*margin-bottom影响上下兄弟,尽量别对margin-right进行设置*/

        /*margin-right影响左右兄弟,尽量别对margin-bottom进行设置*/

        .box {

            /*margin-bottom: 30px;*/

            margin-right: 100px;

        }

        /*display:显示方式*/

        /*块:block*/

        /*内联:inline*/

        /*内联块:inline-block*/

        .box, .wrap {

            display: inline-block;

            /*vertical-align: top;*/

        }

        /*兄弟坑*/

        /*盒模型布局坑只出现在和margin-top相关的地方*/

        .s1, .s2 {

            width: 100px;

            height: 100px;

            background-color: pink;

        }

        /*重叠取大值*/

        .s1 {

            margin-bottom: 30px;

        }

        .s2 {

            margin-top: 50px;

        }

        /*父子坑*/

        .sup {

            width: 200px;

            height: 200px;

            background-color: cyan;

        }

        .sub {

            width: 100px;

            height: 100px;

            background-color: orange;

        }

        /*父子top重叠,取大值*/

        .sup {

            margin-top: 50px;

        }

        .sub {

            margin-left: 50px;

        }

        /*解决盒模型经典布局坑*/

        /*1.将父级固定*/

        .sup {

            /*border-top: 1px solid black;*/

            /*border-top: 1px solid transparent;*/

            /*保证显示区域 200*200 */

            /*height: 199px;*/

        }

        .sub {

            /*margin-top: 50px;*/

        }

        /*2.通过padding*/

        .sup {

            padding-top: 50px;

            height: 150px;

        }

    </style>

</head>

<body>

    <div class="box"></div>

    <div class="wrap"></div>

    <!-- 坑 -->

    <section class="s1"></section>

    <section class="s2"></section>

    <div class="sup">

        <div class="sub"></div>

    </div>

</body>

</html>

盒模型的两种布局方式

python 46 盒模型 与盒模型布局的更多相关文章

  1. python操作三大主流数据库(9)python操作mongodb数据库③mongodb odm模型mongoengine的使用

    python操作mongodb数据库③mongodb odm模型mongoengine的使用 文档:http://mongoengine-odm.readthedocs.io/guide/ 安装pip ...

  2. tensorflow初次接触记录，我用python写的tensorflow第一个模型

    tensorflow初次接触记录,我用python写的tensorflow第一个模型 刚用python写的tensorflow机器学习代码,训练60000张手写文字图片,多层神经网络学习拟合17000 ...

  3. [Python] Django框架入门2——深入模型

    说明: 本文主要深入了解模型(models.py),涉及ORM简介.模型定义.模型成员.模型查询.自连接等.需要一定基础,可以先走一走基本入门流程. 附录一使用mysql数据库,附录二Django开发 ...

  4. 【6】TensorFlow光速入门-python模型转换为tfjs模型并使用

    本文地址:https://www.cnblogs.com/tujia/p/13862365.html 系列文章: [0]TensorFlow光速入门-序 [1]TensorFlow光速入门-tenso ...

  5. 用python+sklearn(机器学习)实现天气预报数据 模型和使用

    用python+sklearn机器学习实现天气预报 模型和使用 项目地址 系列教程 0.前言 1.建立模型 a.准备 引入所需要的头文件 选择模型 选择评估方法 获取数据集 b.建立模型 c.获取模型 ...

  6. python 并发编程 多进程 生产者消费者模型介绍

    一 生产者消费者模型介绍 为什么要使用生产者消费者模型 生产者指的是生产数据的任务,消费者指的是处理数据的任务, 生产数据目的,是为了给消费者处理. 在并发编程中,如果生产者处理速度很快,而消费者处理 ...

  7. Python实现 利用朴素贝叶斯模型（NBC）进行问句意图分类

    目录 朴素贝叶斯分类(NBC) 程序简介 分类流程 字典(dict)构造:用于jieba分词和槽值替换 数据集构建 代码分析 另外:点击右下角魔法阵上的[显示目录],可以导航~~ 朴素贝叶斯分类(NB ...

  8. Python数据科学手册-机器学习之模型验证

    模型验证 model validation 就是在选择 模型 和 超参数 之后.通过对训练数据进行学习.对比模型对 已知 数据的预测值和实际值 的差异. 错误的模型验证方法. 用同一套数据训练 和 评 ...

  9. W3c盒子模型+IE盒子模型+box-sizing属性

    1.盒子模型有两种,标准盒模型和IE盒模型,其中W3C标准的盒模型就是在网页的顶部加上 DOCTYPE 声明. (1)W3C标准的盒模型 W3C盒子模型包括4部分:margin,border,padd ...

随机推荐

  1. java主要集合类的数据结构

    1).ArrayList  ArrayList维护着一个对象数组.如果调用new ArrayList()后,它会默认初始一个size=10的数组.  每次add操作都要检查数组容量,如果不够,重新 ...

  2. iOS 9 中可用的受信任根证书列表

    iOS 受信任证书存储区包含随 iOS 预安装的可信根证书.  https://support.apple.com/zh-cn/HT205205 关于信任和证书 iOS 9 受信任证书存储区包含三类证 ...

  3. Android 双屏异显

    android双屏是克隆模式,如果要在第二屏幕显示不同内容,需要自定义一个Presentation类 1.先设置权限 (刚开始折腾很久没有效果,后来发现是没设置权限) <!-- 显示系统窗口权限 ...

  4. ESLint =》tslint.json

    结论:将ESLint提示注意()里面的规则属性在tslint.json中"rules": { } 里设置为false 1.ES6: ESLint提示"Require Ob ...

  5. HTML5轻松实现全屏视频背景

    想在你的网页首页中全屏播放一段视频吗?而这段视频是作为网页的背景,不影响网页内容的正常浏览.那么我告诉你有一款Javascript库正合你意,它就是Bideo.js. 参考网址: https://ww ...

  6. Neo4j图数据库从入门到精通

    目录 第一章:介绍 Neo4j是什么 Neo4j的特点 Neo4j的优点 第二章:安装 1.环境 2.下载 3.开启远程访问 4.启动 第三章:CQL 1.CQL简介 2.Neo4j CQL命令/条款 ...

  7. Python 输出带颜色的文字方法

    输出文字带颜色 书写格式,和相关说明如下: #格式: 设置颜色:  \033[显示方式;前景色;背景色m     \033[0m 方法: 字体色 背景色 颜色 -------------------- ...

  8. Python 元组和列表

    Python 元组 Python的元组与列表类似,不同之处在于元组的元素不能修改. 元组使用小括号,列表使用方括号. 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可. 如下实例: tup1 ...

  9. 浏览器控制之 selenium,phantomJs谷无头浏览器

    目录 浏览器控制之 selenium,phantomJs谷无头浏览器 selenium phantomJs 需求是尽可能多的爬取豆瓣网中的电影信息 谷歌无头浏览器 浏览器控制之 selenium,ph ...

  10. linux 头文件和库文件的设置

    GCC/G++会查找系统默认的include和link的路径,以及自己在编译命令中指定的路径.自己指定的路径就不说了,这里说明一下系统自动搜索的路径. [1]include头文件路径 除了默认的/us ...