Stack Overflow is the most popular q&A platform for programmers. If a question is popular on Stack Overflow, you’ve probably already encountered or will encounter the same type of question.
Here I’ve rounded up five of the most popular CSS-related questions on Stack Overflow that I hope will help you.
Copyright Notice: The content on Stack Overflow is distributed based on CC BY-SA.
Chrome Devtools
When explaining CSS related knowledge, I think a GIF is much better than ordinary text. So in this article, I won’t be using too much conceptual language. Instead, I’ll use Chrome DevTools to create some expressive GIFs.
To help you understand the rest of this article, let me take a quick look at some tips for debugging CSS in Chrome Devtools.
If you’re not familiar with Chrome Devtools, check out my previous post:
10 Tips for Using Chrome Devtools (with lots of GIFs)
Suppose we have an HTML page that looks like this:
<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, < span style> < span style> div {text-align: left; } </style></head><body> <div>Hello Friend! </div></body></html>Copy the codeThen we open the page in a browser, open Chrome Devtools and go to the Element panel. At this point you should see the following screen:
In the interface above:
- Area 1 is our web page
- Area 2 is the DOM structure of the current page
- Area 3 is some properties of the node currently mouse-selected
Area 3 is still blank, so if we mouse over
, field 3 will show the specific attributes of this node:
Then let’s analyze the region:
In the interface above, area 1 shows the CSS properties as the browser’s default style. Then the CSS properties shown in area 2 are the CSS styles we set for this node in the HTML file.
We can check or deselect a CSS property directly here:
We can also change the value of the CSS property here:
Finally, area 3 is a special area that Chrome provides for debugging CSS styles. If we add a CSS style here, it will apply directly to the element we currently select.
The three techniques mentioned above can help you debug CSS effects and will be used extensively in the following articles.
TOP1: Disable text selection
- Views: 2.2 million
- Number of pros: 5,511
- Collection number: 1337
In general, the user can highlight text on a web page with the mouse:
If we want to disable highlighting, what should we do?
It’s as simple as adding one line of code:
user-select: none;
Copy the codeHere’s how it looks:
TOP2: center an element horizontally
- Read number: 4.3 million
- Number of pros: 4,594
- Collection number: 1027
Suppose this is our HTML page:
<head> <style> #outer { border: 1px solid red; } #inner { background-color: antiquewhite; } </style></head><body> <div id="outer"> <div id="inner">bytefish</div> </div></body>
Copy the codeThere are many ways to center elements horizontally, but here are two of the most common.
1. margin: auto
We can set the width of the child element to 50%, and set its margin left and margin right properties to Auto, and the element will automatically be horizontally centered:
#inner{
width: 50%;
margin: 0 auto;
}
Copy the code
2. The flex layout
In flex layout, context-content: center; This property can also center elements horizontally
If you’re interested in how to center an element horizontally and vertically, check out an article I wrote earlier:
10 Ways to Center a Div Horizontally and Vertically in CSS
TOP3: Modify the color of a project box
- Read number: 1.8 million
- Number of endorsements: 4112
- Collection number: 1033
Placeholder The placeholder of the input box is not a standalone DOM element, but it can still be selected by a special selector ::placeholder.
The code is as follows:
Here is the effect:
TOP4: Usage of the table tag
The original question on Stack Overflow only mentioned some usage details of this tag, so I’ve expanded it to make it easier for you to understand. Here’s how to use this tag.
Here is a common use of the table tag:
<table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr></table>Copy the codeIt looks like this on the page:
Among them
<table>The tag is the root tag used to create a table<tr>The tag is used to create a rowThe < th > and < td >The tag is used to create a vertical row. Among them<th>The tag is kind of similar<h1>And the text gets bigger and bolder. while<td>The text in the tag will display normally.
Let’s create the appropriate style for this DOM element using CSS:
Add a border
Adding a border to a table is very simple. Just like any OTHER HTML tag, add a border attribute directly:
table, th, td { border: 1px solid black; }Copy the codeHere’s how it looks:
We can also change the border value in Chrome Devtools:
Then we see that there are gaps between the cells in the table. If we don’t want the gap, then what do we do?
In fact, we can control this style with CSS, which is border-collapse
By default, the value of this property is separate;
table {
border-collapse: separate;
}
Copy the codeAs the name suggests, separate means to separate different cells. We can collapse this property by changing it to collapse:
table {
border-collapse: collapse;
}
Copy the codeDebug in Chrome Devtools:
Finally, like most other tags, we can also set the padding of each cell:
td { padding: 1px; }Copy the code
The question on Stack Overflow actually asks how to set the padding.
TOP5: make it impossible for the user to change the size of the text box
In many cases, we don’t want the user to be free to adjust the size of the text box. In this case, we can set the CSS property for the text box:
textarea {
resize: none;
}
Copy the codeThe debugging result is as follows:
summary
Thank you for reading.
It will also be published in English on Medium.