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 给出一个二叉树,输出它的最大宽 ...
随机推荐
- 洛谷 P2602（数位DP）
### 洛谷 P2602 题目链接 ### 题目大意:给你一个区间,问你区间所有数字中,0.1.2 .... 9 的个数的总和分别为多少. 分析: 枚举 0 ~ 9 进行数位 DP 即可. 注意记忆化 ...
- C++ day01-C++的函数和对象
C++的函数和对象 1.1 1 混合型语言 c++以.cpp为文件扩展名,有且只有一个名为main的主函数,因保留了这个面向过程的主函数,所以被称为混合语言 2 注释方式 . C++的注释方式有两种, ...
- hyper-v Centos7 网卡配置无效
环境: Win 10 Hyper-v 安装虚拟机:Centos 7 遇到问题: 网络配置无效,使用命令“ip addr” 网卡没有出现在列表中,显示了一个奇怪的网卡名字如“enp0s010f”,配置文 ...
- 利用内存锁定技术防止CE修改
利用内存锁定技术防止CE修改 通过这种在R3环利用的技术,我们可以来达到保护内存的目的,像VirtualProtect等函数来修改页属性根本无法修改. 而CE修改器推测应该使用VirtualProte ...
- .net core入门-项目启动时报错：HTTP Error 502.5 - ANCM Out-Of-Process Startup Failure
在打开Core的项目首页时,页面有时候会出现:HTTP Error 502.5 - ANCM Out-Of-Process Startup Failure的错误,但是这里面看不出任何错误详情,这个时候 ...
- SpringMVC详解------参数绑定
SpringMVC详解------参数绑定 转载于:https://blog.csdn.net/swebin/article/details/92795422 目录 1.SpringMVC 参数绑定 ...
- C++ this指针的理解和作用
01 C++ 程序到 C 程序的翻译 要想理解 C++ 的 this 指针,我们先把下面的 C++ 代码转换成 C 的代码 class Car { public: int m_price; // 成员 ...
- Vue入门、插件安装
一.Vue 1.什么是Vue? (1)官网地址: https://cn.vuejs.org/ (2)Vue是一个渐进式的JavaScript框架.采用自底向上增量开发的设计.可以简单的理解为Vue是一 ...
- 用vue和layui简单写一个响应式数据展示表
在创建项目之前,先把我们需要的文件打包处理 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- java读取文本文件内容
版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/128 java读取文本文件内容 今天写代码写着要调试一个很 ...