CSS writes adaptive size squares

Code:

<style type="text/css"Word-wrap: break-word! Important; "> < span style =" max-width: 100%; height: 0; padding-bottom: 100%; // Overflow: hidden; background:url(.. /res/images/haha.png) center/100% 100% no-repeat; } .img img{ width: 100%; Img {position: relative; width: 100%; height: 0; padding-bottom: 100%; // Overflow: hidden; } .img img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; } </style> <div class="img"></div>
Copy the code

Effect:

Principle:

All four values are calculated based on the width of the current element

The padding can only be top or bottom, and the adaptive square should have the same value as the width. Of course, other rectangles of different proportions can be obtained by setting the padding of different proportions

Two, many row contour height

Code:

<style type="text/css"> .web_width{ width: 100%; overflow: hidden; }.left{float: left;
		width: 20%;
		min-height: 10em;
		background: #66afe9;padding-bottom: 2000px; Margin-bottom: -2000px; }.right{float: right;
		width: 80%;
		height: 20em;
		background: #f00;
	}
</style>
Copy the code

Effect:

Principle:

Padding compensation method

Add a positive padding-bottom and a negative margin-bottom value to the small element, and overflow: hidden to the parent to hide the padding-bottom of the child element

Note:

  1. Padding - bottom, the margin - bottomThe sum should be equal to 0 (not too large, just enough)
  2. Code for neutron element unitsemThis is to make the GIF effect more obvious

(I found it in my notes and used it to solve many layout problems)

3. Draw a triangle

code

<style type="text/css">
.demo {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 50px solid red;
}
</style>
Copy the code

Effect:

Principle:

Utilize the border property in the box model

Note:

  1. As a box modelwidth/heightTo zero,borderThe side shape is a triangle, by setting only three sidesborderAnd draw the adjacent sides of the triangleborderThe color is set totransparentAnd finally through adjustmentborder-widthDraw your own triangles to the scale you need

Draw a triangle to detail the address

Four, hide the scroll bar (this is relatively boring, mainly at that time there was a need to hide)

code

<style type="text/css">
	* {
		margin: 0;
		padding: 0
	}
	
	section {
		width: 300px;
		height: 500px;
		margin: 20px auto;
		overflow: hidden;
	}
	
	div {
		width: calc(100% + 20px);
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
	}
	
	p {
		width: 100%;
		height: 200px;
		background: # 999;
		overflow: hidden
	}
	p:nth-child(2n){
		background: #f60;
	}
</style>
<section>
	<div>
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<p>4</p>
		<p>5</p>
	</div>
</section>
Copy the code

Effect:

Principle:

The scroll bar is hidden by extending the width of the scroll element beyond the width of the parent element

Five, border font color (2018.06.06)

code

<style>
	#app {
		width: 200px;
		height: 200px;
		color: # 000;font-size: 30px; */ border: 50px solid currentColor; /* solution 2 */ border: 50px solid; /* or */ border-width: 50px; border-style: solid; } </style>Copy the code

Effect:

Principle:

  1. Scheme 1: CSS3currentColorRepresents the current text color
  2. Scheme 2:borderThe default value of initial iscurrentColorI can just write it asborder: 50px solid; savecolorThe value of the

CurrentColor -CSS3 High school with CSS variables

Vi. Display node Hierarchy (2018.06.11)

This is a really weird trick. No more talking. Serve

Code:

/* add */ * {background-color: rgba(255,0,0,.2); } * * {background-color: rgba(0,255,0,.2); } * * * {background-color: rgba(0,0,255,.2); * * * *} {background - color: rgba (255,0,255, 2); * * * * *} {background - color: rgba (0255255, 2); * * * * * *} {background - color: rgba (255255, 0, 2); } /* const m_style = document.createElement('style');
const m_style_text = '* {background - color: rgba (255, 0, 2)} * * {background - color: rgba (0255, 0, 2)} * * * {background - color: rgba (0,0,255,. 2)} * * * * {background - color: rgba (255,,0,255. 2)} * * * * * {background - color: rgba (0255255, 2)} * * * * * * {background - color: rgba (255255, 0, 2)} ';
m_style.appendChild(document.createTextNode(m_style_text));
document.getElementsByTagName('head')[0].appendChild(m_style)
Copy the code

The effect

Principle: CSS wildcard selector (*) selector with descendant selector

Boring water knows what to see — original address

The above content comes from the summary of stepping pit to find a scheme, do not like spray, thank you for your cooperation

If you have other useful tips, please feel free to share them in the comments section

Note: the tips mentioned in the comment section will be added after the test is completed. After all, you should send a document with your heart, and you can’t just casually water experience. Don’t worry, ladies and brothers

The first two original addresses