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