current position:Home>Some knowledge points in CSS
Some knowledge points in CSS
2021-08-27 09:39:49 【Fenghou Qimen_】
This is my participation 8 The fourth of the yuegengwen challenge 23 God , Check out the activity details :8 Yuegengwen challenge
css The box model
Is the rectangular area used to hold the elements on the page .CSS The box model in includes IE Box model and standard W3C Box model .
box-sizing( Yes 3 A value ):border-box,padding-box,content-box.
Standard box model :
IE Box model :
difference : As we can see from the picture , The main difference between the two box models is width The scope of , In the standard box model ,width finger content The width of the part , stay IE In the box model ,width Express content+padding+border The width of these three parts , Therefore, this makes a difference in calculating the width of the whole box :
The box width of the standard box model :width
IE The box width of the box model : about border+ about padding+width
stay CSS3 Introduced in box-sizing attribute ,box-sizing:content-box; Represents the standard box model ,box-sizing:border-box It means IE Box model box-sizing The three values of property :
- content-box: The default value is ,border and padding It doesn't count width Within the scope of , Analytical calculation with standard model , yes W3c The standard model of (default)
- border-box:border and padding Put it under width Within the scope of , The strange mode is used to analyze and calculate , yes IE The weird box model of
- padding-box: take padding Count in width Range
Last , We also mentioned earlier ,box-sizing:padding-box, The width of this property value includes left and right padding+width It's also a good understanding of sexual memory , What does it contain ,width From what .
BFC( Block level formatting context , For clear floating , prevent margin Overlap, etc. )
Block level formatting context , Is a separate rendering area , And there are certain layout rules .
BFC Area will not be associated with float box overlap
BFC It's a separate container on the page , Child elements do not affect the outside
Calculation BFC Altitude time , Floating elements also participate in the calculation
Those elements will generate BFC:
Root element
float Not for none The elements of
position by fixed and absolute The elements of
display by inline-block、table-cell、table-caption,flex,inline-flex The elements of
overflow Not for visible The elements of Here you can refer to my article BFC
The way to center vertically
- margin:auto Law
css:
div{
width: 400px;
height: 400px;
position: relative;
border: 1px solid #465468;
}
img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
html:
<div>
<img src="mm.jpg">
</div>
Copy code
The positioning is up, down, left and right 0,margin:0 It can be separated from the document flow .
- margin Negative value method
.container{
width: 500px;
height: 400px;
border: 2px solid #379;
position: relative;
}
.inner{
width: 480px;
height: 380px;
background-color: #746;
position: absolute;
top: 50%;
left: 50%;
Copy code
margin-top: -190px; height Half of
margin-left: -240px; width Half of
Add : In fact, you can also marin-top and margin-left Replace negative values with , transform:translateX(-50%) and transform:translateY(-50%)
- table-cell( Not detached from the document stream )
Set the display:table-cell, also vertical-align:middle, In this way, the child elements can be vertically centered .
div{
width: 300px;
height: 300px;
border: 3px solid #555;
display: table-cell;
vertical-align: middle;
text-align: center;
}
img{
vertical-align: middle;
}
Copy code
- utilize flex
Set the parent element to display:flex, And set up align-items:center;justify-content:center;
The problem of double distance overlap ( collapsing margins )
Multiple adjacent ( Brother or father son relationship ) The vertical direction of the block element of a normal stream marigin It will overlap
The result of folding is :
When two adjacent outer margins are both positive , The result of folding is a larger value between them .
When two adjacent outer margins are negative , The result of folding is the greater of the absolute values of the two .
When two outer edges are one positive and one negative , The result of folding is the sum of the two .
copyright notice
author[Fenghou Qimen_],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827093946337l.html
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich