CSS Small details Summary

CSS Small details Summary

1, use Max-width to prevent the picture bursting container

img{

Display:inline-block;

max-width:100%;

}

2, use Pointer-event to disable the event

This property can do:

Prevent the execution of any click action;

Make the link appear as the default cursor (Cursor:default);

Prevent triggering of hover and active states

Block the triggering of JavaScript click events

. disabled{pointer-event}

3. Use User-select to disable text selection

Ie6-9 does not support this property, it can be done by adding a onselectstart = "return false" inline JavaScript statement to the body

Body{user-select = none;} The text in the page cannot be selected

4. Use Caret-color to customize the style of the cursor

input,textarea,[contenteditable]{caret-color:red;}

5. Use Table-layout to control the width of table cells

Because the width of the table cell is adjusted according to its content, perhaps you set the width of the table, but it does not work, root planing is because the table has a property called Table-layout, whose browser is known as auto in mischief, when we set this value to fixed, the th, The width of the TD label setting can play a role

table{

table-laout:fixed;

width:100%;

}

6, use: Valid:invalid to do form timely verification

: Required pseudo-class specifying form elements with required attributes

: Valid pseudo-class specifies a required form element by matching the correct

: Invalid pseudo-class specifies a form element that does not match the specified requirement

　　

<div class= "Container" >
<div class= "Row" style= "MARGIN-TOP:2REM;" >
<form>
<div class= "Form-group" >
<label>name</label>
<input type= "text" Required placeholder= "Please enter name" >
</div>
<div class= "Form-group" >
<label>email</label>
<input type= "Email" required placeholder= "Please enter your email" >
</div>
<div class= "Form-group" >
<label>homepage</label>
<input type= "url" placeholder= "Please enter blog url" >
</div>
<div class= "Form-group" >
<label>Comments</label>
<textarea required></textarea>
</div>
</form>
</div>
</div>

. form-group {
Width:32rem;
Padding:1rem;
border:1px solid Transparent;
}
. form-group:hover{
Border-color: #eee;
Transition:border. 2s;
}

. Form-group Label {
Display:block;
Font-weight:normal;
}

. Form-group Input,.form-group TextArea {
Display:block;
width:100%;
Line-height:2rem;
padding:. 5rem. 5rem. 5rem 1rem;
border:1px solid #ccc;
Outline:none;
}
. Form-group input:valid,. Form-group textarea:valid {
Border-color: #429032;
Box-shadow:inset 5px 0 0 #429032;
}
. Form-group input:invalid,. Form-group textarea:invalid {
Border-color: #D61D1D;
Box-shadow:inset 5px 0 0 #D61D1D;
}

7, using: Target to achieve the folding panel

<div class= "container";
<div class= "Row" style= "MARGIN-TOP:2REM;"
<div class= "t-collapse" ><a class= "Collapse-target" href= "#modal1" >target 1</a>
< Div class= "collapse-body" id= "Modal1",
<a class= "Collapse-close" href= "#" >target 1</a>
<p
CSS3 explicitly specifies that a pseudo-class is represented by a colon: and the pseudo-element is represented by a two colon::. The
pseudo-class is more defined as a state, such as hover, or a specific special element that can be decorated with CSS, such as: First-child
Common Pseudo-class:: Hover:active:focus:visited:link:lang: First-child:last-child:not
</p>
</div>
</div>
<div class= "T-collapse" ><a class= "Collapse-target" href= "#modal2" >target 2</a>
<div class= "Collapse-body" id= "Modal2";
<a class= "Collapse-close" href= "#" >target 2</a>
<p>
pseudo element simply means a virtual element that does not exist in the DOM document tree. They are like HTML elements, but you cannot use JavaScript to get them, such as: Before
Common pseudo-elements::: Before:: After:: First-letter:: First-line
</p>
</div>
</div>
</div>
</div>

. t-collapse {
border:1px solid #ccc;
Margin-top: -1px;
&:first-child {
margin-top:0;
}
. collapse-target,.collapse-close {
Cursor:pointer;
Height:3rem;
Line-height:2rem;
padding:. 5rem 2rem;
Text-decoration:none;
User-select:none;
Background: #eee;
}
>.collapse-target {
Display:block;
}
>.collapse-body {
position:relative;
Display:none;
Padding:2rem;
. collapse-close {
Display:none;
Position:absolute;
Top: -3rem;
width:100%;
left:0;
}
&:target {
Display:block;
. collapse-close {
Display:block;
border-bottom:1px solid #ddd;
}
}
}
}

8, use: Not to exclude other selectors

Used to set the state of the form element outside the readonly and disabled states, so that the element does not have a disabled state when the element is readonly and hover hover

@mixin ButtonStyle ($border, $background, $color, $hoverBorder, $hoverBackground, $hoverColor) {
Color: $color;
Border-color: $border;
Background-color: $background;
&:not (. ReadOnly): Not ([readonly]): Not (. Disabled): not ([disabled]) {
&:hover,
&:active {
Color: $hoverColor;
Border-color: $hoverBorder;
Background-color: $hoverBackground;
}
}
}

9, using: Nth-child (even/odd) to achieve interlaced color

UL {
&.odd {
>li:nth-child (Odd) {
background:red;
}
}
&.even {
>li:nth-child (even) {
Background:green;
}
}
}

10, use:: Selection to beautify the selected text

:: selection{
Color: #fff;
Background-color: #6bc30d;
}

11, use::p Aaceholder to beautify the placeholder

input::-webkit-input-placeholder{
Color: #f00;
}
input::-moz-placeholder{
Color: #f00;
}
input:-ms-input-placeholder{
Color: #f00;
}

12, use:: First-letter to achieve the paragraph drop cap

p::first-letter{
Font-size:6em;
Line-height:1;
Float:left;
}

13, use :: First-line to special mark the first line of paragraph

p::first-line{
Color:red
}

14, use font-size:0 to clear the spacing

<div class= "Items" >
<div class= "Item" >1</div>
<div class= "Item" >2</div>
<div class= "Item" >3</div>
<div class= "Item" >4</div>
</div>

*{
Box-sizing:border-box;
}
. Items {
font-size:0;
>. Item {
Display:inline-block;
width:25%;
height:50px;
border:1px solid #ccc;
Text-align:center;
line-height:50px;
Background-color: #eee;
font-size:16px; Don't forget to set the font size for child elements
}
}

CSS Small details Summary