1, text beyond the part to show ellipsis overflow single line text to show ellipsis (must have width)
p{
width:200rpx;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}Multiple lines of text overflow show ellipsis
p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}2. Word-break :break-all only works for English, word-wrap only works for English, white-space:pre-wrap only works for Chinese. Text-shadow adds a shadow to the font on the web page by setting the associated property value to the text-shadow property. Text-shadow: [x-offset, y-offset,Blur,Color]; text-shadow: [x-offset, y-offset,Blur,Color]; X-offset: The shadow is at the horizontal offset of the font. Y-offset: The shadow is at the vertical offset of the font. Blur: The fuzzy value of the shadow. Color: the color of the shadow;
h1{
text-shadow: 5px 5px 5px #FF0000;
}Set the font style for the placeholder placeholder
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: red;
}
input::-moz-placeholder { /* Firefox 19+ */
color: red;
}
input:-ms-input-placeholder { /* IE 10+ */
color: red;
}
input:-moz-placeholder { /* Firefox 18- */
color: red;
}Method 1: Pseudo-element and inline-block/vertical-align (compatible with IE8)
.box-wrap:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; Margin - right: 0.25 em. }. Box {display: inline-block; vertical-align: middle; }Method 2: Flex (not compatible with IE8 or below)
.box-wrap {
height: 300px;
justify-content:center;
align-items:center;
display:flex;
background-color:#666;
}Method 3: Transform (not compatible with IE8 below)
.box-wrap { width:100%; height:300px; Background: rgba (0,0,0,0.7); position:relative; } .box{ position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); }Method four: set margin:auto (this method is not strictly a fixed width and height, but 50% of the parent width and height.)
.box-wrap {
position: relative;
width:100%;
height:300px;
background-color:#f00;
}
.box-content{
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
width:50%;
height:50%;
margin:auto;
background-color:#ff0;
}6, solve the iOS page sliding lag
body,html{
-webkit-overflow-scrolling: touch;
}7. Set the scroll bar style
.test::-webkit-scrollbar{/* Width: 10px; width: 10px; /* The height of the scroll bar is 1px; }. Test ::-webkit-scrollbar-thumb {/* border-radius: 10px; background-color: skyblue; background-image: -webkit-linear-gradient(45deg, RGBA (255, 255, 255, 0.2) 25%, Transparent 25%, Transparent 50%, RGBA (255, 255, 255, 255, 0.2) 50%, RGBA (255, 255, 255, 0.2) 75%, Transparent 75%, Transparent); }. Test ::-webkit-scrollbar-track {/* scrollbar-track */ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background : #ededed; border-radius: 10px; }8, realize the hidden scroll bar can scroll at the same time
.demo::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.demo {
scrollbar-width: none; /* firefox */
-ms-overflow-style: none; /* IE 10+ */
overflow-x: hidden;
overflow-y: auto;
}9. CSS to draw triangles
Ordinary triangle
div {
width: 0;
height: 0;
border-width: 0 40px 40px;
border-style: solid;
border-color: transparent transparent red;
}A triangle with a border:
<div id="blue"><div>
#blue {
position:relative;
width: 0;
height: 0;
border-width: 0 40px 40px;
border-style: solid;
border-color: transparent transparent blue;
}
#blue:after {
content: "";
position: absolute;
top: 1px;
left: -38px;
border-width: 0 38px 38px;
border-style: solid;
border-color: transparent transparent yellow;
}Note: If you want to draw a right triangle, set the left border to 0; If you want to draw a left triangle, set the right border to 0 (the same applies in other cases).
10. Merge the Table border
table,tr,td{
border: 1px solid #666;
}
table{
border-collapse: collapse;
}11, CSS select the NTH tag element first-child first-child means select the first tag in the list. Last child last child(3) is the last tag in the list. Last child(3) is the third tag in the list. Last child(2n) is the even number tag in the list. So this is going to select the odd tags in the list, nth-child(n+3), and this is going to select the tags in the list from the third to the last. Nth-child (-n+3) : select tags from the list from 0 to 3 (< 3). The nth-last-child(3) tag selects the third from the bottom of the list.
li:first-child{}By default, the key on the soft keyboard is the text of “go” or “confirm”. In order to turn it into a search text, a type declaration should be added on the input:
<input type="search" placeholder=" placeholder "; name="search" /> </form>You need a form tag wrapped around it, and you need to set the action property so that the bottom right corner of the input method will automatically change to search. At the same time, if you use the search type, the search box will come with a delete button by default.
When using OnError exception processing, if the picture of OnError also has problems, then the picture display will be trapped in an infinite loop, so after the assignment of abnormal picture, set the address blank
<img onerror="this.src='url; this.onerror=null'" />14. Size of the background image
.bg-img{ background:url(.. /img/find_pw_on_2.png) no-repeat center center ! important; background-size: 27px auto ! important; /*background-size: 100% 100%; */ /*background-size: 50px 100px*/ }Text -indent, letter-spacing
P {text-indent: 10px; // spacing spacing: 10px; } / / spacing16, Elements take up the entire screen Heigth is 100% based on the height of the parent, so use 100vh.
.dom{
width:100%;
height:100vh;
}17, CSS to achieve text at both ends of the alignment
.wrap { text-align: justify; text-justify: distribute-all-lines; //ie6-8 text-align-last: justify; // align the last line of a block or line -moz-text-align-last: justify; -webkit-text-align-last: justify; }18. Vertical text typesetting is realized
Wrap {width: 25px; line-height: 18px; height: auto; font-size: 12px; padding: 8px 5px; word-wrap: break-word; // wrap {height: 210px; // wrap {height: 210px; line-height: 30px; text-align: justify; writing-mode: vertical-lr; // From left to right writing mode: tB-lr; // Writing-mode: Vertical-rl; // Writing-mode: TB-RL; -- from right to left}Disable the element mouse event
.wrap {// If you press Tab to select the element, such as Button, then press Enter to perform the corresponding event, such as Click. pointer-events: none; cursor: default; }20. Disallow user selection
.wrap {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}21. Use hardware acceleration to enable hardware acceleration in the browser with CSS to enable the GPU (Graphics Processing Unit) to function and thus improve performance. Hardware acceleration is especially useful on the mobile side because it reduces resource usage. Currently, the major browsers will detect that a DOM element on a page has applied some CSS rules and will turn on 3D transformations of the most prominent elements. If we don’t use 3D morphing, we can do the following:
.wrap {
transform: translateZ(0);
}In Chrome and Safari, pages may twinkle when we use CSS transforms or animations. The following code fixes this problem:
.cube {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
/* Other transform properties here */
}Another method that works well in WebKit-centric browsers
.cube {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
/* Other transform properties here */
}23. Conversion of letters to case
P {text-transform: lowercase} // Uppercase: p {text-transform: lowercase} // Uppercase: p {text-transform: lowercase} // Uppercase: p {text-transform: lowercase} Capitalize} P {font-variant: small-caps} // Change the font to small capitalized letters24. Make a container transparent
.wrap { filter:alpha(opacity=50); Moz - opacity: 0.5; - KHTML - opacity: 0.5; Opacity: 0.5; }25. Eliminate Transition flash screen
.wrap {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}26, Recognize the ‘\n’ character in the string and the newline generally returns the label in rich text that is not the newline character and \n. Without using regular conversions, line breaks can be implemented using the following styles.
body {
white-space: pre-line;
}27. Remove the border of the “a” TAB being clicked on
A {outline: none; // outline: 0 text-decoration:none; // Cancel the default underscore}28. CSS displays the URL after the link
< a href = "/ / www.webqdkf.com" > network before class end < / a > < style > a: after {content: "(" attr (href)") "; } </style>29. Select content is centered and drop-down content is right-aligned
select{
text-align: center;
text-align-last: center;
}
select option {
direction: rtl;
}30. Modify the color of the cursor in the Input box without changing the color of the font
input{
color: #fff;
caret-color: red;
}31, Child element fixed width parent element width is stretched
Wrap {white-space: nowrap; wrap {white-space: nowrap; } // If the child element under the parent element is a block-level element. Wrap {white-space: nowrap; Display: inline-block; display: inline-block; }32. Make the image and text in the div center at the same time. Through the vertival – align
.wrap { height: 100, line-height: 100} img {vertival-align: middle} // Vertical-align CSS property Vertical-align is used to specify the vertical alignment of inline or table-cell elements. Only for inline elements, table cell elements effect, can't use it vertically aligned block-level elements / / vertical - align: baseline/top/middle/bottom/sub/text - top;33. Realize wide and high proportion adaptive rectangle
.scale { width: 100%; Padding - bottom: 56.25%; height: 0; position: relative; } .item { position: absolute; width: 100%; height: 100%; background-color: 499e56; } <div class="scale"> <div class="item"> </div> </div> </div> <div class="item">The rotate attribute of transfrom is invalid under the span tag
span {
display: inline-block
}35, CSS loading animation is mainly through the implementation of CSS rotation animation:
.dom{ -webkit-animation:circle 1s infinite linear; } @keyframes circle{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); }}Achieve the following effect:
<div class="loader"></div>
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 80px;
height: 80px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>36, text gradient effect
<div class="text_signature ">fly63 {-webkit-background-clip: text; <div class="text_signature" >fly63 {-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #ec2239, #40a4e2,#ea96f5); width: 320px; } </style>37, good-looking border shadow
<div class="text_shadow"></div>
<style>
.text_shadow{
width:500px;
height:100px;
box-shadow: 0px 0px 13px 1px rgba(51, 51, 51, 0.1);
}
</style>38. Nice background gradient
<div class="text_gradient"></div>
<style>
.text_gradient{
width:500px;
height:100px;
background: linear-gradient(25deg, rgb(79, 107, 208), rgb(98, 141, 185), rgb(102, 175, 161), rgb(92, 210, 133)) rgb(182, 228, 253);
}
</style>Realize the effect of stereo words
</div> <div class=" solid" class="text_solid" style =" text-align: center; text-align: center; text-align: center; text-align: center;" text-align: center; font-weight: bold; line-height:100px; text-transform:uppercase; position: relative; background-color: #333; color:#fff; text-shadow: 0px 1px #c0c0, 0px 2px #b0b0b0, 0px 3px #a0a0a0, 0px 4px #909090, 0px 5px 10px rgba(0, 0, 0, 0.6); } </style>Full-screen background picture realization
.swper{ background-image: url(./img/bg.jpg); width:100%; height:100%; // If the parent height is not 100%, please use 100VH zoom: 1; background-color: #fff; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-position: center 0; }41, the realization of the text stroke in two ways:
.stroke {
-webkit-text-stroke: 1px greenyellow;
text-stroke: 1px greenyellow;
}Method 2:
.stroke {
text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
-webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
-moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
*filter: Glow(color=#000, strength=1);
}42. Implementation of element transparency
The dom {opacity: 0.4; filter:alpha(opacity=40); /* Internet Explorer 8 and earlier */}Use rgba() to set the color transparency.
The demo {background: rgba (255,0,0,1); }Description: RGBA stands for Red, Green, Blue, and Alpha. 43, solve the problem of 1px border thickening
.dom{ height: 1px; background: #dbdbdb; The transform: scaleY (0.5); }PS: The reason for 1px thickening, for example, when the screen is 2x, 1px pixel corresponds to 2 physical pixels.
44, CSS different units of operation CSS itself can also carry out a simple operation, mainly used in the Calc function. Realize the addition and subtraction operation of different units:
.div{
width: calc(100% - 50px);
}45, CSS to achieve text blur effect
.vague_text{
color: transparent;
text-shadow: #111 0 0 5px;
}Let the icon gray through the filter a color picture can achieve the mouse into the color, move out of the gray effect.
<a href='' class='icon'><img src='01.jpg' /></a>
<style>
.icon{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
.icon:hover{
filter: none;
-webkit-filter: grayscale(0%);
}
</style>Background-size :cover/contain is usually used when the proportion of a picture is not fixed, but this only applies to the background. You can use the Object-Fit property in CSS3 to solve the problem of images being stretched or scaled. Precondition used: the parent container of the image must be high and wide.
img{
width: 100%;
height: 100%;
object-fit: cover;
}Fill: Default. Stretch content to fill the entire content box, not guaranteed to keep the original ratio. Contain: keep the original size and proportion. The long side of the length and height is the same size as the container, and the short side is scaled proportionally, so there may be some white space. Cover: Keep the original size and proportion. The shorter side of the width and height is the same size as the container, and the longer side is scaled proportionally. Some areas may not be visible. (commonly used) none: to maintain the original scale. At the same time keep the original size of the replacement content. Scale-down: Keep the original size scale. If the container size is larger than the image content size, keep the original size of the image to avoid amplification and distortion. If the size of a container is smaller than the contents of the picture, use it the same way as if it were contained.
Inline tag element gap problem 1: parent font-size is set to 0
.father{
font-size:0;
}Set word-spacing to an appropriate negative value on the parent element
.father{
word-spacing:-2px
}Other options: 1. Write the inline elements into one line (affects reading). Use a floating style (which affects the layout).
When using vertical-align:middle to implement vertical centring, you will often find that the vertical-align attribute does not work. Note the conditions that need to be met for it to work:
Context: The parent element sets line-height. It has to be the same height. Or set the display property to table-cell to turn block elements into cells. Object: Inline-block and inline elements in child elements.
<div class="box" <img SRC =".\test.jpg"/> </span> </div> </div> <style>. line-height: 300px; font-size: 16px; } .box img{ width: 30px; height:30px; vertical-align:middle } .box span{ vertical-align:middle } </style>PS: vertical-align is not inheritable and must be set separately for child elements. Note that the height of the line-height is based on the font-size. If the text is changed to a new line, an exception will be made. Source: Web front-end development public number