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 给出一个二叉树,输出它的最大宽 ...
随机推荐
- LeetCode 136：只出现一次的数字 Single Number
题目: 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. Given a non-empty array of integers, every e ...
- wpf source path
<Image Source="pack://application:,,,/Images/Folder-icon.png"/> <Image Source=&qu ...
- WPF ListBox 隐藏滑块
<ListBox ScrollViewer.VerticalScrollBarVisibility = "Disabled"; </ListBox>
- ASP.NET MVC IOC 之 Autofac（一）
新建一个MVC项目,如 AutoFacTest,引用autofac,如下图: 接下来就是开始进行编程了 首先,新建一个类库,名为 AutoFacTest.Service,该类库编写服务层代码,我们的接 ...
- 解决sublime快捷键回车换行问题
鼠标右键sublime 以管理员身份运行 打开首选项里面的按键绑定用户 将下面的代码粘贴复制 { "keys": ["enter"], "comman ...
- Redis中使用redis-cli及密码登录
使用redis-cli登录后如果Redis中设置了密码那么输入密码可能会出现: NOAUTH Authentication required的错. 这个时候可以输入:auth password 进行登 ...
- Model赋值返回json
DataTable resultList = bll.GetResultListByCondition(bureauCode, deptCode, fileTitle); IList<GanBu ...
- iOS多线程比较
.iOS的三种多线程技术 .NSThread 每个NSThread对象对应一个线程,量级较轻(真正的多线程) .以下两点是苹果专门开发的“并发”技术,使得程序员可以不再去关心线程的具体使用问题 ØNS ...
- nRF24L01+启用自动应答ACK及自动重发的实战分享
ACK模式(自动应答)功能的官方说明 当用W_TX_PAYLOAD命令对发送端TX FIFO写数据时,将数据打包后,数据包中包控制字段NO_ACK 标志位复位.接收端接收到一帧有效数据后, 产生RX_ ...
- 究竟是什么毁了我的impl实现
Impl模式早就有过接触(本文特指通过指针完成impl),我晓得它具有以下优点: 减少头文件暴露出来的非必要内部类(提供静态库,动态库时尤其重要): 减小文件间的编译依存关系,大型代码库的编译时间就不 ...