current position:Home>HTML and CSS summary, geek University architect training camp Baidu cloud
HTML and CSS summary, geek University architect training camp Baidu cloud
2021-08-26 02:01:39 【Program ape ana】
-
header、footer、nav、section、article、aside
-
Monopolize one line
-
You can set the width and height at will
-
If the height is not set , The default height is determined by the content
In line elements
-
Replacement elements
-
img、input、iframe、canvas、object
-
video、audio
-
It can be displayed on the same line as other inline elements
-
You can set the width and height at will
-
-
Non replaceable elements
-
span、strong、a、em、i
-
It can be displayed on the same line as other inline elements
-
It is not allowed to set the width and height at will
-
If you don't set the width and height , The width and height are determined by the content by default
-
inline-block
-
It can be displayed on the same line as other inline elements
-
You can set the width and height at will
-
If you don't set the width and height , The width and height are determined by the content by default
========================================================================
-
width、min-width、max-width
-
height、min-height、max-height
-
padding、padding-top、padding-right、padding-bottom、padding-left
-
margin、margin-top、margin-right、margin-bottom、margin-left
-
border、border-top、border-right、border-bottom、border-left
-
You can use borders to generate triangles
-
-
box-sizing
-
content-box
- width barring padding and border,height barring padding and border
-
border-box
-
width = padding + border + Content width
-
height = padding + border + Content height
-
-
-
box-shadow
-
box-shadow: 2px 5px 10px 7px rgba(0,0,0,.2) inset
2px: Shift right 2px
5px: Offset down 5px
10px: Blur radius ( Ambiguity , The bigger this is , The more obscure )
7px: Diffusion radius ( The bigger the value is. , The wider the diffusion range )
inset: Shadows are displayed inside the element ( If not inset, Look at what appears outside the element )
-
-
overflow
-
visible
: Overflow content is still visible -
hidden
: Direct hiding of overflow content -
scroll
: Will always show the level 、 Vertical scroll bar -
auto
: It will automatically decide whether to display the scroll bar according to the overflow of the content
-
-
For inline non replacement elements (span、strong、a etc. )
-
margin-top、margin-bottom It doesn't work
-
padding-top、padding-bottom、border-top、border-bottom The effect is special
-
-
For block level elements ( such as div、p etc. )
-
There is margin-top、margin-bottom The problem of transmission ( Passed to the block level parent element )
-
There is margin-top、margin-bottom Folding problem (margin collapse)
-
Contains the width of the block = margin-left + margin-right + The actual width occupied by the block level element
-
-
position:static
-
Default ( Non positioning elements )
-
Not out of standard flow
-
Cannot pass left、right、top、bottom Adjusting position
-
-
position:relative
-
Relative positioning ( Positioning elements )
-
Not out of standard flow
-
Can pass left、right、top、bottom Adjusting position
-
Locate the reference object : My original position
-
-
position:absolute
-
Absolute positioning ( Positioning elements , Absolute positioning elements )
-
Out of the standard stream
-
Can pass left、right、top、bottom Adjusting position
-
Locate the reference object :
-
The nearest locating ancestor element ( Find the nearest location element from the ancestor element )
-
If you can't find such ancestral elements , Then refer to the viewport (viewport)
-
In many cases , The child element will be absolutely positioned with reference to the parent element , The common practice is : The son is the father
- Subelement :
position: absolute
- Parent element :
position: relative
-
-
position:fixed
-
Fixed position ( Positioning elements , Absolute positioning elements )
-
Out of the standard stream
-
Can pass left、right、top、bottom Adjusting position
-
Locate the reference object : viewport (viewport)
-
-
For absolute positioning elements
-
Contains the width of the block = left + right + margin-left + margin-right + The actual occupied width of the element
-
The height of the containing block = top + bottom + margin-top + margin-bottom + The actual occupation height of the element
-
For positioning elements , Sometimes I use left、margin-left Use in conjunction to center an element horizontally :
-
left: Half your width times minus one
-
margin-left: 50%
-
color: The foreground ( Text color 、 Border color 、 Text decorative line color ,
#fff
、#ffffff
、rgb(255,255,255)
、rgba(255,255,255,.5)
) -
text-align, Set the horizontal position of the content of the element in the element
-
left
: Align left -
right
: Right alignment -
center
: In the middle
-
-
text-indent, Generally used to set the indentation of the first line of text
-
Common use :
text-indent: 2em
-
Just indent 2 A word
-
-
text-decoration, Set text decoration line
-
underline
: Underline -
line-through
: Delete line ( For example, the original price of e-commerce websites ) -
none
: Remove the strikeout
-
-
text-overflow, Set the presentation of hidden overflow text content
-
clip
: The overflow content is directly cropped -
ellipsis
: The overflow content is displayed with an ellipsis
-
Let an element always display only one line of text , And the overflow part displays an ellipsis :
white-space: nowrap; /* Always show only one line of text */
overflow: hidden; /* Hide overflow */
text-overflow: ellipsis; /* The hidden content is represented by an ellipsis */
-
font-family: Font name , You can set multiple font names , They are separated by commas
- Generally, the English font is written in the front , The Chinese font is written at the back
-
font-weight: Set weight ( thickness )
-
100~900
-
bold
:700 -
normal
:400
-
-
font-size: Set font size
-
font-size: 10px
-
font-size: 10%
-
Using the parent element font-size multiply 10%
-
Inheriting from the parent element font-size when , Inherited is the calculated value , Not direct inheritance 10%
-
-
font-size: 0.5em
, Using the parent element font-size multiply 50% -
width: 2em
, Use your own font-size multiply 2
-
-
line-height
-
line-height: 20px
-
line-height: 20%
, Use your own font-size multiply 20% -
line-height: 2em
, Use your own font-size multiply 2 -
line-height: 2
, Use your own font-size multiply 2 -
If you want a line of text to center vertically , The common practice is :
Set up line-height and height bring into correspondence with
-
-
font-style
-
normal
: normal -
italic
: Italics -
oblique
: tilt
-
-
font
-
Abbreviated attribute
-
Format :
font-size/line-height font-family
-
-
background-color: Background color
-
background-image: Background image
-
background-repeat
-
repeat
-
repeat-x
-
repeat-y
-
no-repeat
-
-
background-position
-
background-position: 10px 20px
-
background-position: right top;
-
background-position: center top;
-
-
background-size: Set the size of the background image
-
background
-
Abbreviated attribute
-
Format :
background: url("1.png") no-repeat left top/20px 20px #f00;
-
CSS Sprite: Elves picture 、 Sprite pictures
Because the animation part has not been studied in detail , So skip
-
transition
-
Used to determine which CSS Attributes need to participate in animation
-
transition: all 2s;
- All animatable CSS Property modification , Will be in 2s Complete through animation in time
-
-
transform
-
translation
-
translateX(10px)
-
translateY(30px)
-
translate(10px, 30px)
-
-
The zoom
-
scaleX(0.5)
-
scaleY(0.5)
-
scale(0.5)
-
-
rotate
-
rotate(45deg): 2D plane rotation
-
rotateX(45deg): Around x Shaft rotation
-
rotateZ(45deg): Around Z Shaft rotation ( Follow rotate() similar )
-
rotateY(45deg): Around Y Shaft rotation
-
-
transform: translate(20px, 30px) scale(0.5) rotate(45deg);
-
-
animation
- Use steps
summary
Large scale distributed system is like a life , Each service in the system is like a skeleton , The data is like blood , and Kafka Like meridians , Connect the whole system in series . This Kafka The source code notes are displayed through a large number of design drawings 、 The code analysis 、 Sample sharing , hold Kafka The implementation context of is displayed in front of readers , Help readers better study Kafka Code .
You need to get this free of charge Kafka The iron juice of source notes , Please forward this article + Pay attention to me , then You can get it here for free !
copyright notice
author[Program ape ana],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210826020137574y.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