CSS将边框border设定到宽度和高度中
来源:互联网 发布:怎么找淘宝优惠券 编辑:程序博客网 时间:2024/05/21 07:14
今天偶遇一个css方面的问题,因为以前也为该问题苦恼过,今天得到了解决方案,而且答案很简单,就是给css加上一个属性就搞定了,由于该属性平时很少用,为了方便以后查看,特此记录。
要实现的效果图
我们想实现如下效果:
一般做法
那么我们如何通过使用html+css来实现这个效果呢?按照一般的思维,我们会设计出如下的代码
html代码:
<div class="container"> <div class="content"> </div> <div class="tab"> </div> <div class="tab"> </div></div>
css代码:
.container { margin: 0; background-color: yellow; height: 200px; width: 400px;}.content { width: 85%; height: 100%; float: right; border: 1px solid red;}.tab { width: 15%; height: 30%; float: left; border: 1px solid green;}
此时我们会发现,如果不添加border,左右两边的div可以正常并排,一旦加了border,靠左的两个div会被挤出container之外,并且iframe的高度还会超出container。
如图:
问题解决方法
其实,对css的样式很精通的人,这个应该不算是问题,因为css有一个属性,box-sizing可以很方便的解决这个问题,将该属性值设置为border-box,该值的相关描述如下:
为元素设定的宽度和高度决定了元素的边框盒。
就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
html代码不变
css代码如下
.container { margin: 0; background-color: yellow; height: 200px; width: 400px;}.content { width: 85%; height: 100%; float: right; border: 1px solid red; box-sizing: border-box;}.tab { width: 15%; height: 30%; float: left; border: 1px solid green; box-sizing: border-box;}
1 0
- CSS将边框border设定到宽度和高度中
- CSS将边框border设定到宽度和高度中
- CSS把边框 border变成内边框,就是不改变宽度高度
- 边框宽度 border-width
- 布局控件的宽度和高度设定
- CSS中元素的边框border属性
- CSS中设置图片的宽度和高度
- css中关于各种宽度和高度区别
- CSS border 边框
- CSS设置border边框
- 10015---CSS Border(边框)
- css中的边框border
- CSS-Border(边框)
- css边框border样式
- css之border边框
- 理解CSS边框border
- CSS Border(边框)
- 理解CSS边框border
- 10.4 实现关系下的匿名内部类
- Android系统预装第三方apk
- 欢迎使用CSDN-markdown编辑器
- IOS APP间 互相唤醒 并传递文件
- 局部变量在栈中的存取
- CSS将边框border设定到宽度和高度中
- android studio 升级 gradle成最新的编译不成功
- Quartz Cron Expression 备忘
- 我对Hibernate缓存的认知
- webDriver爬取搜狗微信
- 关于 java.net.SocketException: Connection reset错误
- 创建String的两种方式的区别
- JNI修改Native方法数组参数中数组里面的元素值
- IOS 开发 Xcode 8.1 KSImageName插件失效的问题--完美解决