HTML连载40-盒子宽度和高度的练习、box-sizing属性
一、判断方法
1.判断是否元素宽高为200的盒子
只需要看：边框+内边距+内容宽度/内容高度的值是否等于200
2.判断是否内容宽高为100的盒子
只需要看：width和heght的值是否等于100
3.判断是否元素空间宽高为300的盒子
只需要看：外边距+边框+内边距+内容宽度/内容高度的值是否等于300
二、使用方法
我们拿到对元素、元素空间、内容的大小的要求的时候，我们需要按照公式进行计算来达到我们的需求。
三、box-sizing属性
div.content>div.aside+div.article然后按下table会自动填充成
<div class="content">
<div class="aside"></div>
<div class="article"></div>
</div>
下面我们讲解box-sizing属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>d113_height_and_width_of_box</title>
<style>
.content{
width:300px;
height:300px;
background-color: red;
}
.aside{
width: 100px;
height:200px;
background-color: blue;
float:left;
}
.article{
width:200px;
height:200px;
background-color: yellow;
float:right;
}
</style>
</head>
<body>
<div class="content">
<div class="aside"></div>
<div class="article"></div>
</div>
</body>
</html>
我们在类article中加一个属性
border:20px solid black;
这种情况溢出了，这在后面编辑网页的时候会经常遇到，需要已经写好了，但是又在该需求，这种牵一发而动全身，因此我们引入box-sizing属性
效果可见下面的属性值
box-sizing: border-box;
解释：
我们的属性值：
content-box 表示里面的元素的宽高 = 边框 + 内边距 + 内容宽高
border-box 表示里面的元素恒等于width属性
四、源码：
d114_attribute_of_box-sizing.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/d114_attribute_of_box-sizing.html
2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包
HTML连载40-盒子宽度和高度的练习、box-sizing属性的更多相关文章
- HTML连载39-外边距合并现象、盒子模型以及宽度和高度
一. 在默认布局的垂直方向上,默认情况下外边距是是不会叠加的,会出现合并现象,谁的外边距较大,就听谁的:但是在水平方向就不会出现这种状况,我们举个例子 span{ display: inline-bl ...
- Canvas 宽度、高度设置
在HTML5中插入一个Canvas元素,如下: <canvas id="mycanvas"></canvas> 要想在该画板上进行操作,则需要先取得其执行上 ...
- 如何改变span元素的宽度与高度
内联元素:也称为行内元素,当多个行内元素连续排列时,他们会显示在一行里面. 内联元素的特性:本身是无法设置宽度和高度属性的,但是可以通过CSS样式来控制,达到我们想要的宽度和高度. span举例1: ...
- jquery动态改变div宽度和高度
效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...
- android 修改videoview的宽度和高度
如果直接用android的videoview.他是不允许你随意的修改宽度和高度的,所以我们要重写videoview! package com.hysmarthotel.view; import and ...
- Feathers组件的宽度或高度属性,为什么我得到的值是0
Feathers组件使用一个失效系统延迟一会儿繁重的重绘,这样你可以在一个时间内改变多个属性.如果你还没有明确地设置宽度和高度,他们会自动 调整自身到一套“理想”的尺度.然而,这并不会发生,直到他们验 ...
- js和jquery如何获取图片真实的宽度和高度
按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度 1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...
- js和jquery获取图片真实的宽度和高度
1.什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往 ...
- AC日记——二叉树最大宽度和高度 1501 codevs
1501 二叉树最大宽度和高度 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题目描述 Description 给出一个二叉树,输出它的最大宽 ...
随机推荐
- 深入理解ES6之解构
变量赋值的痛 对象 let o = {a:23,b:34}; let a = o.a; let b = o.b; 如上文代码,我们经常会遇到在各种场合需要获取对象中的值的场景,舒服一点的是获取单个属性 ...
- [03-2]VS2017 创建 ASP.NET Core Web 程序
VS2017 创建 ASP.NET Core Web 程序 本文作者:梁桐铭- 微软最有价值专家(Microsoft MVP) 文章会随着版本进行更新,关注我获取最新版本 本文出自<从零开始学 ...
- 【转】linux下使用sqlplus执行包含语句块的sql文件，运行时会不断显示行号，而在plsqldev中能执行
一.数据库:Oracle数据库 二.sql文件内容: --创建函数 CREATE OR REPLACE function fun_createuid1 return varchar2 is Resul ...
- Java设计模式：Builder(构建器)模式
概念定义 Builder模式是一步一步创建一个复杂对象的创建型模式.该模式将构建复杂对象的过程和它的部件解耦,使得构建过程和部件的表示隔离开来. 应用场景 对象创建过程比较复杂,或对创建顺序或组合有依 ...
- zabbix 监控项报"Value "(No info could be read for "-p": geteuid()=1002 but you should be root"
zabbix 监控项报错如下: “Value "(No info could be read for "-p": geteuid()=1002 but you shoul ...
- 【git】代码回退指定commit
[注意:如果提交的错误代码较少,可以在本地修改成 commit之前的正确代码样子,然后再提交一次即可.不用麻烦的操作回滚.] 开发人员错误将代码提交到gitlab的远程dev分支,回滚方法如下: 1. ...
- 在IDEA中用Maven打包大项目时失败问题
今天在完成公司里某项功能开发时,准备用Maven打包,后来在打包的过程中报错:OutOfMemoryError.如下图: 后来经过查找资料,发现可以配置一下Maven的参数即可解决此问题. 配置参数为 ...
- MSSQL查询当前登录进程以及执行状态
--当前连接进程declare @tempTable table (SPID INT,Status VARCHAR(255), Login VARCHAR(255),HostName VARCHAR( ...
- Web前端基础(1):HTML(一)
1. HTML概述 1.1 什么是HTML HTML称为超文本标记语言,是一种标识性的语言.它包括一系列标签．通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体.H ...
- Javase之多线程（2）
多线程(2) 线程的生命周期 新建:创建线程对象 就绪:有执行资格,没有执行权 运行:有资格运行,有执行权 阻塞:由一些操作让线程处于改状态.没有执行资格,没有执行权,而通过另一些操作激活它,激活 ...