css之旅(一)css盒模型

本文讲解css中w3标准盒模型IE标准盒模型的区别。
所有的html元素都可以看做是一个盒子,它包括边距margin边框border填充padding内容content几部分组成。
css中的盒模型分为两种,分别为w3标准盒模型和IE盒模型,它们的区别在于大小不同

  • w3标准盒模型的width,height就是指content的区域
  • IE标准盒模型的width,height指的是content + padding + border

一、w3标准盒模型

w3标准盒模型的width,height就是指content的区域。


<html>
<head>
	<style>
		.w3{
			width: 150px;
			height: 20px;
			border: 10px solid black;
			padding: 10px;
			margin: 10px;
		}
	style>
head>
<body>
	<div class="w3" >
		W3标准盒模型
	div>
body>
html>

css之旅(一)css盒模型_第1张图片
可以看到,width为150,height为20,都是在content区域。

二、IE标准盒模型

IE标准盒模型的width,height指的是content + padding + border。


<html>
<head>
	<style>
		.ie{
			width: 150px;
			height: 20px;
			border: 10px solid black;
			padding: 10px;
			margin: 10px;
			box-sizing: border-box;
		}
	style>
head>
<body>
	<div class="ie" >
		IE标准盒模型
	div>
body>
html>

css之旅(一)css盒模型_第2张图片
可以看到,width 150 = content 110 + padding-left 10 + padding-right 10 + border 20; 而 高度设置为20,content直接变成了0(没变成负的);

三、两种盒模型之间的切换

css有个box-sizing属性,可以切换盒模型

  • w3标准盒模型(默认值):content-box
  • IE标准盒模型:border-box

<html>
<head>
	<style>
		.w3{
			width: 150px;
			height: 50px;
			border: 10px solid black;
			padding: 10px;
			margin: 10px;
			box-sizing: content-box;
		}

		.ie{
			width: 150px;
			height: 50px;
			border: 10px solid black;
			padding: 10px;
			margin: 10px;
			box-sizing: border-box;
		}
	style>
head>
<body>
	<div class="w3" >
		W3标准盒模型
	div>
	<div class="ie" >
		IE标准盒模型
	div>
body>
html>

你可能感兴趣的:(html)