Regarding the implementation of some special styles that I have encountered before, I will make a summary today. The purpose is twofold: First, record these methods so that they can be found and used when needed in the future. The second is to carry forward the crystallization of the wisdom of these great gods, so that the majority of front-end programmers can avoid detours. This post is an update. If there are good CSS styling techniques in the future, I will update it from time to time.
1. Center the elements horizontally and vertically (Special thanks to: Xin Life. Brother Xin’s products must be high-quality products! I admire you)
For the horizontal and vertical centering of a block element, there is no need to say much about the horizontal centering method. Generally, it can be achieved by using margin:auto; and other methods. As for vertical centering, although there is a vertical-align:middle attribute, it only applies to table tags, and everyone knows that the effect of table tags is difficult to control. . . Therefore, our commonly used method is to set the inline-block attribute of the child element, and set the value of its line height attribute: line-height to the same height as the parent element. Here, I want to promote a method derived from "Xin Life"
http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D %E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85% E4%B8%AD/
The code is as follows:
html aspect:
<body> <p class="big"> <p class="small"></p> </p> </body>
css:
.big{
width:500px;
height:500px;
border:1px solid red;
position:relative;
}
.small{
width:200px; /*自己元素宽高可任意设定 */
height:200px;
position:absolute;left:0px;top:0px;rightright:0px;bottombottom:0px;
margin:auto;
}
In the above code, the width and height of the child elements are set arbitrarily. This element can be displayed horizontally and vertically centered in the parent element. In the parent element, we use the relative attribute of position. In the child element, after we set its position attribute to absolute, we set the values in all four directions to 0px. And make his margin value adaptive. From inspecting the elements, we can find that after this setting, the margin area of the child element will fill the entire parent element, and the left and right margin values are equal, as are the upper and lower margin values. However, this does not comply with the rule that when code values conflict, top and left values are parsed first. Because Xiaoge doesn’t know what the principle is. . If anyone knows about it, I hope he can enlighten me. But this is a good method, and I hope everyone can learn and use it.
2. After pseudo-class clear float
Usually after we set the float of the block element, we need to clear the float to avoid layout confusion. . There are two common methods of clearing floats: 1) Write "clear: both;" in the subsequent sub-element css. 2) Write "overflow:hidden" in the parent element of the floating element. Now, we can use the third method, using the after pseudo-class to write a floating attribute, so that whenever there is a place where floating is needed, we can just add such a floating attribute to its parent element.
The code is as follows:
.clearfix:after{
content:"";
display:table; /*利用table不允许浮动的属性来清除浮动。也可以替换成"overflow:hidden;"*/
clear:both;
}
This method has the advantage that it can be written into reset and can be called multiple times later.
The above article summarizes (recommended) some clever methods of CSS style, which is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.
For more ingenious methods of css style, please pay attention to the PHP Chinese website for related articles!
So Many Color LinksApr 13, 2025 am 11:36 AMThere's been a run of tools, articles, and resources about color lately. Please allow me to close a few tabs by rounding them up here for your enjoyment.
How Auto Margins Work in FlexboxApr 13, 2025 am 11:35 AMRobin has covered this before, but I've heard some confusion about it in the past few weeks and saw another person take a stab at explaining it, and I wanted
Moving Rainbow UnderlinesApr 13, 2025 am 11:27 AMI absolutely love the design of the Sandwich site. Among many beautiful features are these headlines with rainbow underlines that move as you scroll. It's not
New Year, New Job? Let's Make a Grid-Powered Resume!Apr 13, 2025 am 11:26 AMMany popular resume designs are making the most of the available page space by laying sections out in a grid shape. Let’s use CSS Grid to create a layout that
One Way to Break Users Out of the Habit of Reloading Too MuchApr 13, 2025 am 11:25 AMPage reloads are a thing. Sometimes we refresh a page when we think it’s unresponsive, or believe that new content is available. Sometimes we’re just mad at
Domain-Driven Design With ReactApr 13, 2025 am 11:22 AMThere is very little guidance on how to organize front-end applications in the world of React. (Just move files around until it “feels right,” lol). The truth
Detecting Inactive UsersApr 13, 2025 am 11:08 AMMost of the time you don’t really care about whether a user is actively engaged or temporarily inactive on your application. Inactive, meaning, perhaps they
Wufoo ZapierApr 13, 2025 am 11:02 AMWufoo has always been great with integrations. They have integrations with specific apps, like Campaign Monitor, Mailchimp, and Typekit, but they also
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Atom editor mac version download
The most popular open source editor
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
Dreamweaver CS6
Visual web development tools
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
