python 46 盒模型 与盒模型布局
一:盒模型
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 盒模型 与盒模型布局的更多相关文章
- python操作三大主流数据库(9)python操作mongodb数据库③mongodb odm模型mongoengine的使用
python操作mongodb数据库③mongodb odm模型mongoengine的使用 文档:http://mongoengine-odm.readthedocs.io/guide/ 安装pip ...
- tensorflow初次接触记录,我用python写的tensorflow第一个模型
tensorflow初次接触记录,我用python写的tensorflow第一个模型 刚用python写的tensorflow机器学习代码,训练60000张手写文字图片,多层神经网络学习拟合17000 ...
- [Python] Django框架入门2——深入模型
说明: 本文主要深入了解模型(models.py),涉及ORM简介.模型定义.模型成员.模型查询.自连接等.需要一定基础,可以先走一走基本入门流程. 附录一使用mysql数据库,附录二Django开发 ...
- 【6】TensorFlow光速入门-python模型转换为tfjs模型并使用
本文地址:https://www.cnblogs.com/tujia/p/13862365.html 系列文章: [0]TensorFlow光速入门-序 [1]TensorFlow光速入门-tenso ...
- 用python+sklearn(机器学习)实现天气预报数据 模型和使用
用python+sklearn机器学习实现天气预报 模型和使用 项目地址 系列教程 0.前言 1.建立模型 a.准备 引入所需要的头文件 选择模型 选择评估方法 获取数据集 b.建立模型 c.获取模型 ...
- python 并发编程 多进程 生产者消费者模型介绍
一 生产者消费者模型介绍 为什么要使用生产者消费者模型 生产者指的是生产数据的任务,消费者指的是处理数据的任务, 生产数据目的,是为了给消费者处理. 在并发编程中,如果生产者处理速度很快,而消费者处理 ...
- Python实现 利用朴素贝叶斯模型(NBC)进行问句意图分类
目录 朴素贝叶斯分类(NBC) 程序简介 分类流程 字典(dict)构造:用于jieba分词和槽值替换 数据集构建 代码分析 另外:点击右下角魔法阵上的[显示目录],可以导航~~ 朴素贝叶斯分类(NB ...
- Python数据科学手册-机器学习之模型验证
模型验证 model validation 就是在选择 模型 和 超参数 之后.通过对训练数据进行学习.对比模型对 已知 数据的预测值和实际值 的差异. 错误的模型验证方法. 用同一套数据训练 和 评 ...
- W3c盒子模型+IE盒子模型+box-sizing属性
1.盒子模型有两种,标准盒模型和IE盒模型,其中W3C标准的盒模型就是在网页的顶部加上 DOCTYPE 声明. (1)W3C标准的盒模型 W3C盒子模型包括4部分:margin,border,padd ...
随机推荐
- Codeforces_733C
C. Epidemic in Monstropolis time limit per test 1 second memory limit per test 256 megabytes input s ...
- 企业级mysql数据库完全备份、增量备份脚本
企业完全备份脚本 [root@client ~]# vim /opt/mysql_bak_wanbei.sh #!/bin/bash #MySQL数据库完全备份脚本 #设置登录变量 MY_USER=& ...
- mybatis批量操作(foreach)
foreach可以在SQL语句中通过拼接的方式进行集合迭代.foreach元素的属性主要有collection,item,index,separator,open,close. item属性:表示循环 ...
- ModelBinder 请求容错性
代码 //using System.Web.Mvc; public class TrimToDBCModelBinder : DefaultModelBinder { public override ...
- 原始js表单文本框初始化获取焦点和选中
发现: 1 使用dom对象.focus() 放在 window.onload 时可以 让这个DOM对象获取焦点. 2 使用DOM对象.select() 可以选中文本框中的文字. 3 不要加上on , ...
- 第十六节:pandas之日期时间
Pandas日期功能扩展了时间序列,在财务数据分析中起主要作用.
- Divisible Group Sums
Divisible Group Sums Given a list of N numbers you will be allowed to choose any M of them. So you c ...
- Mac OSX:添加host地址
Mac OSX的hosts文件位于/private/etc/hosts.记得用sudo权限编辑即可.在文件中添加如下内容: xxx.xxx.xxx.xxx (ip地址) abc.com(你的h ...
- Axure RP一个专业的高速原型设计工具
Axure RP是一个专业的高速原型设计工具.Axure(发音:Ack-sure),代表美国Axure公司.RP则是Rapid Prototyping(高速原型)的缩写. Axure简要介绍 Axur ...
- [自己动手改wordpress.1]wordpress的插件User-Access-Manager在新的php版本号里面无法执行的bug.
近期同事在玩wp, 就顺带一起看了下. 她说插件有个不能用. 是一个叫User Access Manager 的插件 详细表现就是在后台填好相应的roles角色的时候, 点提交就会跳到一个错误的页面 ...