html中box标签的作用,CSS3的box-sizing属性的作用及使用

先用大白话通俗说一下，先给div设置宽高为200px,这是在加上padding：10px; , 此时div宽高加上padding值后实际宽高变成了220px(等于上下左右各加了10px的padding),那么我又给div加了一个border 1px，此时div的实际宽高变成了221px。此时在给div加上box-sizing: border-box后，div的总宽高就会变为200px,也就是说此时padding 与border是算在自身之内的，可以理解成，向内挤。

w3c 盒子模型：标准盒模型，是指块元素box-sizing属性为content-box的盒模型。一般在现代浏览器中使用的都是标准盒模型，它也是标准 w3c 盒子模型。

IE盒子模型：怪异盒模型，是指块元素box-sizing属性为border-box的盒模型。一般在IE浏览器中默认为是怪异盒模型，但由于其自身的特殊性，手机页面中也有使用怪异盒模型。

box-sizing：content-box | border-box

默认值：content-box

适用于：所有接受width和height的元素

1、content-box：

padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即width + border + padding，表现为标准模式下的盒模型。box-sizing默认值为content-box，可以不写。

#square{

width:300px;

height:300px;

background:red;

padding:10px;

border:10px solid transparent;

}

2、border-box：

padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义border和padding也不会改变对象的实际宽度，表现为怪异模式下的盒模型。

#square{

width:300px;

height:300px;

background:red;

padding:10px;

border:10px solid transparent;

box-sizing:border-box;

}

注意：box-sizing 属性是CSS3的新特性——IE、Opera 以及 Chrome 支持 box-sizing 属性；Firefox需要加上-moz前缀；Safari需要加上-webkit前缀。

box-sizing: border-box的典型应用：

创建一个width为100%，border为10px的div。

问题：不设置box-sizing的情况下，div会溢出。

解决方法：设置box-sizing: border-box。

#square{

width:100%;

height:100px;

border:10px solid grey;

box-sizing:border-box;

background:red;

}

html中box标签的作用,CSS3的box-sizing属性的作用及使用相关推荐

html中span标签w3c,HTML col 标签
HTML 标签标签用于为表格中的一列或多列设置属性值. 标签只能在实例和标签为表格中的三个列设置了背景色: ISBN Title Price 3476896 My first HTML $53 ...
HTML5中常用的标签(及标签的属性和作用)
1.标签:<!DOCTYPE> 作用:声明是文档中的第一成分,位于<html>标签之前. 2.标签:<html> 作用:此元素可告知浏览器其自身是一个HTML文档. ...
html中投影效果图,利用CSS3（box shadow）制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
php中pre标签,html中pre标签与code标签的作用与用法
HTML 标签定义和用法 pre 元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. 标签的一个常见应用就是用来表示计算机的源代码. 可以导致 ...
idea中@Data标签getset不起作用
原 idea中@Data标签getset不起作用 2017年06月08日 11:22:40 seapeak007 阅读数 27070 spring cloud中使用@Data标签,不用手动添加get ...
html中属性的作用,html的标签中 unselectable=on 属性的作用
在IE浏览器中,当input获得焦点时,点击有unselectable="on"属性的标签时,不会触发onblur事件. 加上该属性的元素不能被选中. < !DOCTYPE ...
Html中meta标签的用法和作用
mate标签的用法和作用: meta标签一般用于网页中的<head>与</head>之间,meta标签的种类有很多.在我们网页设计中用的比较多的有keywords,descr ...
在html中base的作用,html中base标签的作用是什么
html中base标签的作用是什么? 作用:为页面上的所有链接规定默认地址或默认目标,是一种表达路径和连接网址的标签. 说明:通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 UR ...
html方法标签不起作用,Angular中innerHTML标签的样式不起作用的原因解析
1.背景在最近angular的项目中,需要用到[innerHTML]标签来指定一个div的样式: //HTML部分 //TS部分 contents = ' 商品信息栏位商品信息介绍 '; 但是上面的 ...
html当中的属性cellspacing,html中table标签之cellspacing属性的作用
html中table标签之cellspacing属性的作用发布时间:2020-12-05 10:11:23 来源:亿速云阅读:60 作者:小新这篇文章给大家分享的是有关html中table标签之 ...

html中box标签的作用,CSS3的box-sizing属性的作用及使用

html中box标签的作用,CSS3的box-sizing属性的作用及使用相关推荐

最新文章

热门文章