box-sizing

        在通常的网页布局都是由一个个div等元素构成盒子形成形形色色的网页结构,在网页的构成中我们还要进行各种元素的修饰,叫做:盒子模型.

        比如边框的增加,内容进行内边距的使用,增加了原来的盒子模型的尺寸,但是我们又不想改变这个,我们又要重新减小盒子模型原来的尺寸.实属麻烦,在css3种,加入box-sizing:border-box就可以解决这个问题,盒子原来尺寸变.加入边框,内边距会重新适当的修饰元素内的内容格局,总的盒子模型不会发生改变!

box-sizing应用小例子:

	<style type="text/css">
			div{
				width:20%;
				height:200px;
				float:left;
				background: orange;
				border: 5px solid #26ffff;
				box-sizing: border-box;
			}
		</style>
	</head>
	<body>
		<!--
        	作者:24920@163.com
        	时间:2018-01-30
        	描述:box-sizing:border-box表示不改变盒子的整体大小
        -->
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</body>

应用说明:在网页进行布局5个div,每个div宽度占浏览器的20%,5个正好可以排下,但是给每个div加上5px的边框,5个div就出现6个边框,多出6*5px多出30px在一行无法排列则进行换行,这个肯定不是我们要的效果!然而使用了box-sizing属性,神奇的发现在一行排列了!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一天带入门到放弃vue.js(三)

    自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是vue的指令if,f...

    十月梦想
  • 移动端适配之百分比适配

    前面简单了了解了一下移动端,包括移动端的设备独立像素,物理像素,渲染像素以及像素比(DPR)等相关知识!接下来简单介绍一个比较简单的移动端适配方案!

    十月梦想
  • css的position定位详解

    iii.  父级元素定位(绝对定位absolute)的子元素absolute定位情况:都不保留原文档流空白

    十月梦想
  • 利用JQuery实现鼠标移动到图片上方的时候显示二维码,离开的时候不显示二维码

    今天给大家介绍一下怎样利用JQuery实现鼠标移动到图片上方的时候显示二维码,离开的时候不显示二维码的功能。 其实主要注意几点细节就可以轻松实现这样的功能了,第...

    林老师带你学编程
  • vue弹出层 +内容手风琴 简单实现

    yangdongnan
  • HTML5选择器

    czjwarrior
  • 原生JS实现拖拽鼠标绘画

    越陌度阡
  • flex 布局

    CSS3 为我们提供了一种可伸缩的灵活的 web 页面布局方式 flexbox 布局,它具有很强大的功能,可以很轻松实现很多复杂布局。可以简便、完整、响应式地实...

    Krry
  • jquery选择器

    jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。

    Devops海洋的渔夫
  • 网页html结构搭建方法总结

    windseek

扫码关注云+社区

领取腾讯云代金券