current position:Home>CSS box model

CSS box model

2021-08-27 07:26:00 Cherry dance

This article has participated in the third phase of nuggets creators training camp 「 High yield Gengwen 」 Track , View details : Project digging | The third phase of the creator training camp is under way ,「 Write 」 Personal influence .

1. Category

  1. IE The box model -border-box
  2. W3C Standard box model -content-box

2. characteristic ( notes : Picture source network , Invasion and deletion )

2.1 W3C Standard box model
   width=content;
   height=content;
 Copy code 

 The standard model

2.2 IE The box model
width=content+padding+border
height=content+padding+border
 Copy code 

 Insert picture description here

3. CSS How to set up these two models

The standard model :box-sizing:content-box IE Model :box-sizing:border-box

4. JS How to set up / Get the width and height of the box model

  1. dom.style.width/height: Width and height of inline style , Return value with unit , The data type of the return value is string--300px

  2. dom.currentStyle.width/height: Final width and height after rendering ( Old edition IE Use in ), The data type it gets is string , Such as 300px

  3. window.getComputedStyle(dom).width/height:DOM standard , I won't support it IE

  4. dom.getBoundingClientRect().width/height: The data type it gets is string , Such as 300px

5. Compatible writing :

var oAbc = document.getElementById("abc");
if(oAbc.currentStyle) {
	alert(" I support currentStyle");
	alert(oAbc.currentStyle.width);
} else {
	alert(" I don't support currentStyle");
	alert(getComputedStyle(oAbc,false).width);
}
 Copy code 
5. Margins overlap
5.1 Boundary overlap refers to two or more boxes ( It can be adjacent or nested ) The adjacent boundaries of ( There is no non empty content in it 、 filler 、 Frame ) They overlap to form a single boundary .

example 1:

       .neighbor{
			height: 100px;
			background: red;
		}
		.father{
			background: #f436365e;
		}
		.child{
			height: 100px;
			margin-top: 10px;
			background: #00800047;
		}
		<div class="neighbor">
		this is neighbor
	</div>
	<div class="father">
		<div class="child">
			this is child
		</div>
	</div>
 Copy code 

The actual effect :  The actual effect But the effect we expect is the following :  Expected effect Solution : Use BFC

.father{
			background: #f436365e;
			overflow: hidden;
		}
 Copy code 
5.2 The vertical adjacent boundaries of two or more block level boxes will coincide , Their boundary width is the largest of the adjacent boundary widths . Note that the horizontal boundaries do not coincide .

example 2:

<style type="text/css">
		
		.father{
			background: #f436365e;
			overflow: hidden;
		}
		.child{
			height: 20px;
			margin: 30px auto 30px;
			background: #00800047;
		}
	</style>
	<div class="father">
		<div class="child">
			this is child1
		</div>
		<div class="child">
			this is child2
		</div>
		<div class="child">
			this is child1
		</div>
	</div>
 Copy code 

The actual effect : The interval is just 30px  The actual effect

Expected results : It is expected that 60px  Insert picture description here

Solution : Use BFC

<div class="father">
		<div class="child">
			this is child1
		</div>
		<div style="overflow: hidden;">/* In the second div Added a new layer div*/
			<div class="child" >
				this is child2
			</div>
		</div>
	
		
		<div class="child">
			this is child1
		</div>
	</div>
 Copy code 

copyright notice
author[Cherry dance],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827072558568q.html

Random recommended