CSS knowledge points (continuously updated…)

This article is a collection of personal CSS knowledge points.

1 an easy way to implement centrality

   <div class="wrapper">
	<div class="ite">
	</div>
  </div>
Copy the code

     .wrapper{
        display:flex;
    	}
	.ite{
	  width:100px;
	  height:100px;
	  background:blue;
	  margin:auto;
	}
Copy the code

2. One side is fixed and one side is adaptive

<div class="container"> <div class="one item"> I am fixed </div> <div class="two item"> I am adaptive </div> <div class="three" </div </div>Copy the code

.container{ width:500px; height:500px; border:1px solid black; display:flex; } .item{ height:30px; }. One {/* fixed */ background:gray; flex:0 1 auto; }.two{/* adaptive */ background:# DDD; flex:1 1 auto; }. Three {background:gray; flex:0 1 auto; }Copy the code

3. font-size: 0; Resolves white space between inline elements

< ul > < li > is the first I < / li > < li > I am the second < / li > < li > I am the third < / li > < li > I am the fourth < / li > < / ul > < style > ul {list - style: none; } li { width: 25%; display: inline-block; background: green; text-align: center; height: 40px; line-height: 40px; } </styleCopy the code

It actually looks like this:

4. Use padding-top/padding-bottom percentages for space and height adaptation

In CSS, the padding-top,padding-bottom,margin-top,margin-bottom values are percentages based on the width of the parent element.

For example, if the parent element width is 100px and the child element padding-top is 50%, then the actual padding-top value is 100*50%=50px

For images and other resources, it takes time to load. Even if the loading speed of a web page is very fast, it will inevitably flicker because the height is stretched by images. In this case, the padding-top and other resources come into play.

<div id="container" class="placeholder">
  <img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/8/18/16ca2eb4d2c1c0e6~tplv-t2oaga2asx-image.image" />
</div>
Copy the code

.container {
    width:50%;
}

.placeholder {
    padding-top:50%;
}
Copy the code

In fact, the actual height of each LI is not constrained, the height of the content is the height of the li. Want to achieve the aspect ratio? We need to set the positioning of the image to absolute and add a relative positioning for. Container

  #container {width: 50%; position: relative; background-color: red; overflow: hidden; }. Placeholder {padding-top: 50%; } img { position: absolute; top: 0; width: 100%; }Copy the code

5. The -webkit-overflow-scrolling attribute removes ios rebound effects

-webkit-overflow-scrolling:touch; When the finger is removed from the touch screen, it will keep scrolling for a period of time, which can solve the problem of lag and page missing when the wechat H5 page is swiped up and down on ios terminal

-webkit-overflow-scrolling:auto; When a finger is removed from the touch screen, scrolling stops immediately

6. Text-align-last Implements text alignment at both ends

The name of the < div > < / div > < div > phone number < / div > < div > authentication code < / div > < div > account < / div > < div > password < / div >Copy the code

div{
margin:10px 0; 
width:100px;
border:1px solid red;
text-align-last: justify;
}
Copy the code

7. Realize the shopping cart height increment.

For each additional item added to the cart, the lowest item is the first to be added, and the cart increases in height from bottom to top.

    <div class="content">
	     <ul>
		          <li>66666</li>
			  <li>66666</li>
			  <li>66666</li>
			   <li>66666</li>
			  <li>66666</li>
			  <li>66666</li>
		 </ul>
	</div>
	  .content{
		   width:500px;
		   height:20;
		   border:1px solid blue;
		   position:fixed;
		    right: 0;
                    bottom: 0;
		 }
		 ul{
		 
		   position:absoulte;
		   top:0;
		    right: 0;
		 }
Copy the code

8 Use :valid and :invalid to verify the form

<div class="bruce flex-ct-x">
	<form class="form-validation"> <div> <label> Name </label> <inputtype="text" placeholder="Please enter your name (1 to 10 Chinese characters)" pattern="^ [\ u4e00 - \ u9fa5] {1,} $"Required > </div> <div> <label> Mobile </label> <inputtype="text" placeholder="Please enter your cell phone." pattern="^1[3456789]\d{9}$"Required ></ div> <div> <label> Introduction </label> < Textarea required></textarea> </div> </form> </div>Copy the code

.form-validation {
	width: 500px;
	div {
		margin-top: 10px;
		&:first-child {
			margin-top: 0;
		}
	}
	label {
		display: block;
		padding-bottom: 5px;
		font-weight: bold;
		font-size: 16px;
	}
	input,
	textarea {
		display: block;
		padding: 0 20px;
		outline: none;
		border: 1px solid #ccc;
		width: 100%;
		height: 40px;
		caret-color: $blue;
		transition: all 300ms;
		&:valid {
			border-color: $green;
			box-shadow: inset 5px 0 0 $green;
		}
		&:invalid {
			border-color: $red;
			box-shadow: inset 5px 0 0 $red; } } textarea { height: 122px; resize: none; line-height: 30px; font-size: 16px; }}Copy the code

Disable pointer-events disable event triggering (limited click button (send verification code countdown), disable event bubbling (multiple elements overlap with their own events, a tag jump)

<div class="bruce flex-ct-x">
	<a class="disabled-trigger" href="https://www.baidu.com"</a> </div>Copy the code

.disabled-trigger {
	padding: 0 20px;
	border-radius: 10px;
	height: 40px;
	background-color: $purple;
	pointer-events: none;
	line-height: 40px;
	color: #fff;
}
Copy the code

Distribute bubbling responses using :focus-within

<div class="bruce flex-ct-x">
	<form class="bubble-distribution"> <h3> Register </h3> <div class="accout">
			<input type="text" placeholder="Please enter your mobile phone or email" pattern="^1[3456789]\d{9}$|^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$" required>
			<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/v3/static/img/greeting.1415c1c.png~tplv-t2oaga2asx-image.imag e">
		</div>
		<div class="password">
			<input type="password" placeholder="Please enter your password (6 to 20 characters)" pattern="^ [\ dA Za - z_] 6, 20} {$" required>
			<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/v3/static/img/blindfold.58ce423.png~tplv-t2oaga2asx-image.ima ge">
		</div>
		<div class="code">
			<input type="text" placeholder="Please enter the invitation code (6 digits)" pattern="^[\d]{6}$" maxLength="6" required>
			<button type="button"<img SRC = "button" style = "padding-bottom: 0px; padding-bottom: 0px"https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/v3/static/img/greeting.1415c1c.png~tplv-t2oaga2asx-image.imag e">
		</div>
		<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/v3/static/img/normal.0447fe9.png~tplv-t2oaga2asx-image.image">
		<ul>
			<li>
				<input type="radio" name="sex" id="male">
				<label for="male">Boy</label>
			</li>
			<li>
				<input type="radio" name="sex" id="female">
				<label for="female">Girl</label>
			</li>
		</ul>
		<button type="button"</button> </form> </div>Copy the code

.bruce {
	background-color: # 999;
}
.bubble-distribution {
	position: relative;
	margin-top: 50px;
	padding: 25px;
	border-radius: 2px;
	width: 320px;
	background-color: #fff;
	h3 {
		font-weight: bold;
		font-size: 16px;
		color: # 333;
	}
	div {
		margin-top: 10px;
	}
	img {
		position: absolute;
		left: 50%;
		bottom: 100%;
		margin: 0 0 -20px -60px;
		width: 120px;
	}
	ul {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
		height: 30px;
		line-height: 30px;
	}
	li {
		position: relative;
		width: 45%;
		transition: all 300ms;
		&:focus-within {
			background: linear-gradient(90deg, $blue 50%, transparent 0) repeat-x,
				linear-gradient(90deg, $blue 50%, transparent 0) repeat-x,
				linear-gradient(0deg, $blue 50%, transparent 0) repeat-y,
				linear-gradient(0deg, $blue 50%, transparent 0) repeat-y;
			background-position: 0 0, 0 100%, 0 0, 100% 0;
			background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
			animation: move 500ms infinite linear;
		}
	}
	input[type=text],
	input[type=password] {
		padding: 10px;
		outline: none;
		border: 1px solid #e9e9e9;
		border-radius: 2px;
		width: 100%;
		height: 40px;
		transition: all 300ms;
		&:focus:valid {
			border-color: $blue;
		}
		&:focus:invalid {
			border-color: $red;
		}
	}
	input[type=radio] {
		position: absolute;
		width: 0;
		height: 0;
		&:checked + label {
			border: 3px solid transparent;
			background-color: $blue;
			color: #fff;
		}
	}
	label {
		display: block;
		border-bottom: 1px solid #ccc;
		width: 100%;
		background-clip: padding-box;
		cursor: pointer;
		text-align: center;
		transition: all 300ms;
	}
	button {
		overflow: hidden;
		margin-top: 10px;
		outline: none;
		border: none;
		border-radius: 2px;
		width: 100%;
		height: 40px;
		background-color: $blue;
		cursor: pointer;
		color: #fff;transition: all 300ms; } } .accout, .password, .code { img { display: none; margin-bottom: -27px; } &:focus-within { img { display: block; } & ~ img { display: none; } } } .code { display: flex; justify-content: space-between; button { margin-top: 0; } input { &:not(:placeholder-shown) { width: 70%; & + button { width: 25%; } } &:placeholder-shown { width: 100%; & + button { width: 0; opacity: 0; } } } } @keyframes move { to { background-position: 6% 0, -6% 100%, 0 -6%, 100% 6%; }}Copy the code