If css hover is given to an element, then only those inside a can be selected. If it is given to outside elements like div, ul li, it can also be selected outside the element.
Full stack: understand both web front-end and web back-end.
When adjusting the size of the picture, it is generally sufficient to give a width (width), and the picture will be enlarged or reduced in the same proportion, so that the picture will not be distorted.
HTML comments:<!-- 内容 -->
CSS comments: /* 内容 */(CSS comments are the same as C language)
CSS inheritance
Width, height, line height, text size, font thickness, text type (Arial, Microsoft Yahei, etc.. Generally set for body, uniform font for the entire website), font color, text-align, etc. can be inherited.
The background color cannot be inherited.
For small icons, logos, or oversized background images, I like to use background images, and for product display, I like to use insert images.
If you move the position of the background picture, you need to use background-position: 0 0;
if you move the position of the inserted picture, you need to use padding or margin.
text-align line-height set parent tone
Set attributes in the parent element, and adjust the content of the child element.
Text: the center line is aligned with the x baseline, the picture: the bottom is aligned with the x baseline
font-style: normal; Italics are no longer oblique.
The border color defaults to the font color
resize: none; Prevent the user from dragging and dropping the textarea.
object-fit: The value inside can adjust the way the picture is displayed in the box.
There are two big boxes in a big box. If you center the big box vertically, the two small boxes inside will be centered inside the big box. This is the inheritance of the box centering style.
Child elements can inherit the style of the parent element (text-, font-, line- these elements can be inherited at the beginning), as well as the color attribute.
When viewing elements in the background, as long as there is a cross-out, the style is overlapped.
JavaScript comments:
单行的注释：// 内容
多行的注释：/*内容*/ （跟css注释一样）
多行注释快捷键：alt + shift + a
Get the logo of a web site
https://www.baidu.com/favicon.ico
or
https://www.baidu.com/favicon
Add logo to browser tab
1. Put the .ico picture in the root directory
ico can be generated online here http://www.bitbug.net/
2. Add in the html page
<link rel="icon" type="image/x-icon" href="__ROOT__/logo.ico" />
<base target="_blank" />
- base can set the open state of the overall link
- base is a single label
- base write to
- Add target="_blank" to all connections by default
background-position: center top;
This way of writing is generally what we will do for oversized background pictures in the future.
Ruan Yifeng css grid grid layout
http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
text-align: center; is effective for inline elements and inline block elements.
css changes the background and color of the selected text in the web page
::selection {
background-color: rgb(51,51,51);
color: white;
}
Shortcut key for comment: Ctrl + / This is the same operation if you cancel the comment.
Absolute address: an address that can be found under any circumstances (for example: the detailed address of your home)
Relative address: You must know the current location to find it (for example: the upper floor of my house)
Inline elements do not support setting the width and height directly.
No line breaks. Words overflowing in a single line of text are indicated by ellipsis:
width：多少px自己决定;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
注：ellipsis : 当对象内文本溢出时显示省略标记
助记：WTO
Multi-line text overflow hiding:
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
Treatment of height collapse after floating:
.clearfix:: before,
.clearfix:: after{
content: '';
display: table;
clear: both;
}
.clearfix:after {
content:"";
display: block;
clear:both;
}
PS: Press Alt + the eyes of the picture layer to remove the PSD picture individually. Everything else is hidden. Hold down Alt and click your eyes, and all other pictures will come out.
Picture blank resolution: vertical-align: bottom/top will do.
Remove the points in front of li and ul:
<ul style="list-style-type: none;"></ul>
<li style="list-style-type: none;"></li>
也可以写成：list-style:none;
Line spacing: set by line-height.
The table is a block element, but the width of the label is not 100% by default.
vertical-align: middle Vertically center.
text-align: center horizontally centered
margin: 0 auto (this value is given to box1).
display: table-cell sets the element as a cell (this value is given to box1). Then vertical-align: middle. Box2 in box1 is centered horizontally.
When measuring the height of the box, do not measure the border.
The child box in the parent box (a single box is fine), if there is no width or height, the padding will not open the box. If you give the width or height, the box will be opened.
For small icons, logos, or oversized background images, I like to use background images, and for product display, I like to use insert images.
If you move the position of the background picture, you need to use background-position: 0 0;
if you move the position of the inserted picture, you need to use padding or margin.
The outer container can be set when the line box is centered: text-align: center
Floating, if the height is not set, it will cause the height to collapse
border: 1px solid red will occupy the size of the box.
outline: 1px solid red does not occupy the size of the box.
Transition is used to set the animation effect for the style (used when Super Brother made the QR code of Xiaomi)
Transition: height 3s; means that when the height changes, it takes me 3s to switch.
border-radius: 50% set circle
div tags cannot be placed in the label tag, but span tags can be placed
display: none hide
Four properties of overflow:
overflow: visible
overflow: hidden
overflow: scroll
overflow: auto
overflow: 属性只要不是visible，那么它就会在里面创建BFC
BFC的盒子会避开浮动元素
Transition, as long as it is a value that can be calculated, it can be transitioned, and the color can also be transitioned.
list-style: none Remove the dot in front of ul li.
Center the box:
1. Center when the box width and height are determined
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto
2. Center when the box width and height are not set
left: 50%;
top: 50%;
transform: translateX( -50%) translateY(-50%);
When there are three boxes in a row, the HTML code should be written as a floating box first, and then a regular flow box.
After you remove the margin of the body, if the page has h1 elements, h1 will also have its own margin. If you don't need it, you should also clear it.
Row height can be inherited.
Transform is a 2D transform by default. To become 3D, you need to set transform-style: preserve-3d;
Floating elements must be block boxes. The line box must be a regular stream.
The reason for removing the dot in front of ul li: The dot in front is not easy to adjust.
href refers to the location of the network resource, and establishes a link with the current element (anchor) or the current document (link), which is used as a hyperlink.
src refers to the location of external resources, and the content pointed to will be embedded in the location of the current tag in the document; when src resources are requested, the pointed resources will be downloaded and applied to the document, such as js scripts, img pictures and frame elements . When the browser parses the element, it will suspend the download and processing of other resources until the resource is loaded, compiled, and executed. The same is true for elements such as pictures and frames, similar to embedding the pointed resource in the current tag. This is why the js script is placed at the bottom instead of the head.
Browser kernel
IE: trident kernel
Firefox: gecko kernel
Safari: webkit kernel
Opera: Previously the presto kernel, Opera has now switched to the Blink kernel of Google Chrome
Chrome: Blink (based on webkit, jointly developed by Google and Opera Software)
javascript is a scripting language that is executed on the client side. Ajax is a technology based on javascript, its main purpose is to provide asynchronous refresh (only refresh a part of the page, instead of refreshing the entire page). One is language and the other is technology. There are essential differences between the two.
AJAX is not a technology, it is actually several technologies, each technology has its own uniqueness, together it becomes a powerful new technology.
Alignment of mobile end block elements (less):
display: flex;
align-items: center;
justify-content: space-between;
text-decoration: none; remove underline
text-indent: -999; Remove the font to make it a hidden effect.
The default font size of the text box is 13.3333px.
Generally, if the navigation bar has sub-menus, we use ul li to layout. If there is no sub-menu, just write the a element in the big box (nav) of the navigation bar and it will be OK.
curser: auto; The browser will change the mouse style according to the specific situation. When encountering links, small hands will appear, when encountering ordinary text, there will be I-shaped characters so that you can copy and paste.
over-flow: auto; The content exceeds, and a scroll bar appears.
When setting the upper and lower borders, the borders between the boxes overlap, setting: margin-top: -1;
If you want to select selected
<ul>
<li>1</li>
<li selected>2</li>
</ul>
<style>
ul li.selected {
color: red;
}
</style>
li.secleted要挨着，不能有空格。
clearfix solves the problem of height collapse, which should be written in the double quotes "" of the element properties.
Private prefix:
-moz-: on behalf of Firefox browser private properties -ms-: on
behalf of IE browser private properties
-webkit-: on behalf of Safari, Chrome private properties
-o-: on behalf of Opera private properties
Create a BFC box to avoid floating boxes.
In absolute positioning, besides top bottom left right, margin-top, margin-bottom, margin-left, and margin-right are used. Remember not to use border.
<div>
<p class=＂123＂>
清华大学
</p>
</div>
这个时候我们选择div .123
给这个p元素一个类，好处就是，以后不用担心p改成其他的元素，这个样式不受影响。
The picture is aligned with the baseline of the text by default. Use vertical-align: middle; to solve it.
PS: Use vertical-align: middle; for vertical centering where there are inline blocks
A fixed position (position: fixed;) box should have a width.
Fixed positioning has nothing to do with the parent, it depends on the screen.
The fixed positioning box is aligned, do not use margin: 0 auto;
To use: left: 0;
transform: translateX(-50%);
Box shadow: box-shadow
Text shadow: text-shadow
a:nth-child(-n+3){
Select the first 3 elements
}
a:nth-child(-n+5){ select the first 5 elements }
first-child:
等于
nth-child(1):
You can use generator if you can't write a certain code
如：要写box-shadow
可以百度 box-shadow generator
在百度里调节好然后再复制代码到编辑器里就OK。
When you don’t know where your box is in the browser: add border
如：boarder: 1px solid red;
vh is the abbreviation of viewpoint high: the height of the viewport.
Deployment: Put the code on the server so that others can see it.
For the distance between the box and the box, margin is the most appropriate.
Set the input text box, the rounded border when focusing can be like this:
input{
border-radius: 5px;
}
input:focus {
outline: none;
border: 1px solid #008c8c;
}
The percentage of positioning refers to the width and height of the parent container
Long word wrap: word-wrap: break-word;
The text does not wrap: white-space: nowrap;
The full name of BFC is "Block Formatting Context" in Chinese as "Block Formatting Context".
Remember this sentence: The principle of BFC element characteristic expression is that no matter how the internal sub-elements are turned over, the overturning of clouds and rain will not affect the external elements.
BFC is an isolated and independent container on the page, and the child elements inside the container will not affect the outside elements.
BFC rules and how to trigger
Margin's merging rules are summarized as three "secrets": "positive and positive take the largest value", "plus and negative values are added together", "negative and negative take the most negative" three "secrets".
CSS priority:! important>inline style>id selector>class selector>tag selector>wildcard>inheritance
color, attributes starting with text-, font-, line- are all inheritable
These text styles can all be inherited; and all the attributes of boxes, positioning, and layout cannot be inherited.
Weights:
!important: ∞ Infinity Inline
style: 1000
id: 100
class: 10
label: 1
asterisk (wildcard): 0
inheritance: 0
Labels cannot be nested arbitrarily.
If nesting is necessary, the following must be met:
Inline elements can only contain inline elements.
Block-level elements can contain all inline elements and some block-level elements.
Neither p tag nor h tag can contain block-level elements
How to write borders: border: border-width border-style border-color;
order of font attributes
font-style(字体样式)：normal（正常）、italic（斜体）或oblique（倾斜）
font-variant(字体异体)： normal（正常）或 small-caps（小体大写字母）
font-weight(字体粗细)：normal（正常）或bold（加粗）
font-size/line-height(字体大小与行高)：14xp/12px、14pt/1.5em、140%、1em等
font-family(字体系列)：宋体、黑体等
顺序：font-style | font-variant | font-weight | font-size | line-height | font-family
animation continuous writing
animation: animation name duration, whether the number of delay repetitions of animation mode is alternate;
animation: move 4s cubic-bezier(0.5,0.9,0.5,0.1) 0s infinite alternate;
Transition format
transition: the transition time of the transition attribute, the motion speed delay time;
Remove the gap between cells border-collapse: collapse;
style=“border-collapse:collapse”
Small attributes cascade big attributes, don’t write small attributes above big attributes, they will be cascaded by big attributes
padding-left: 30px;
padding: 20px;
The width of the small box will inherit from the big box, but the height of the small box will not inherit from the big box!
The attribute margin essentially describes the distance between brothers and brothers; it is best not to use this marign to express the distance between father and son. Therefore, we must be good at using the father's padding instead of the son's margin.
Floating point:
- At the same level, floating elements will only affect the elements below, not the elements above!
- Floating elements will change the display mode: whether the element is an in-line element or a block-level element, it will be displayed in the same row when it is displayed in the future. The display mode is the same as the block-level elements in the line.
- The width and height of the element after floating can be set.
- As long as one of the boxes of brotherhood is floating, the rest must be floating!
When the background color and background image are set at the same time, the background image will be overlaid on the background color.
There are three ways to move the child box inside the parent box:
- Add a border to the parent box, such as 1px solid red
- Give the parent box overflow: hidden
- Add padding to the parent box
<b></b> and <strong></strong> : 表示字体加粗。
<u></u> and <ins></ins> : 表示下划线。
<i></i> and <em></em> : 表示字体倾斜。
<s></s> and <del></del> : 表示删除线。
Deal with the problem that the border of two boxes becomes thick when combined:
border-collapse: collapse; 表示相邻边框合并在一起。
text-indent: 2em; There are two spaces in the first line.
Any tag can be nested in the a tag.
The ID attribute is case sensitive.
Ctrl+0 (zero): After zooming in or zooming out the webpage, quickly restore to 100%.
If you want the box to be centered, you must set the width.
Floating and positioning have a default implicit conversion: inline block elements.
Shellcode is the bytecode that executes the shell.
Browser minimum width setting: min-width:
Once the absolute positioning is offset, it will not occupy space, in other words the box below will occupy its position.
Relative positioning is offset relative to itself, and absolute positioning is offset relative to the entire browser.
Z-index can only work on positioned elements. Use a positive value to indicate that you are closer to us, and the larger the value, the closer. Use a negative value to indicate that you are further away from us.
There are three ways to move the child box inside the parent box:
- Add a border to the parent box, such as 1px solid red;
- Give the parent box overflow: hidden;
- Add padding to the parent box
These properties in CSS can be inherited:
-
Font family attributes:
font-family: font family
font-weight: font weight
font-size: font size
fnot-style: font style -
Text series attributes
text-indent: text indentation
text-align: text horizontal alignment
line-height: line height
word-spacing: spacing between words
letter-spacing: spacing between Chinese or letters
text-transform: control text size
color: text color -
Element visibility
visibility: control element display and hide -
List layout attributes
list-style list style, including list-style-type, list-style-image -
Cursor attributes:
cursor: what form the cursor is displayed in
Block
1.
Word-spacing: separation distance
2.
Letter-spacing: letter-spacing
3. Text alignment
text-align: parameter
The value of the parameter:
left: left alignment
right: right alignment
center: center alignment
justify: relative left and right alignment
4. Vertical alignment
vertical-align: Parameters
top: top alignment
bottom: bottom alignment
text-top: relative text top alignment
text-bottom: relative text bottom alignment
baseline: baseline alignment
middle: center alignment
sub: display
super in the form of the following label : Shown in the above format
5. Text indent
text-indent: Indentation distance of
12px is equivalent to a text distance
6.
White-space: parameter
normal normal
pre keep
nowrap without line break
7. Display style
display: Parameter
Value range:
block: block-level element, wrap before and after the object
inline: do not wrap before and after the object
list-item: wrap before and after the object, add bullets
none: no display
The constructor has no concept of "class" before es6.
To be continued. . .