HTML and CSS Knowledge summary

Today summed up the entire HTML and CSS. There may be some negligence, learn together.

"Behavior style three separate"

Do not add inline CSS style, without adding inline JS effect.

Label
1 "single label
<!doctype html> Document header, tell the browser that this is a Web page
BR Line break
img Insert Picture, src Property default has 3 pixels above the picture, spacing

2 "Double label
Body Body, default margin
Span
Div
H1-H6 title label, default font bold, spacing, font size
P paragraph label, default spacing
A hyperlink, you can add width, height property, if the given height or width ratio is not appropriate, the picture will be distorted or stretched, if only given a value, the browser will automatically calculate the ratio; the href attribute can add a link, path, anchor, or javascript: Default style underline, Font Color
Traget attribute traget= ' _blank '; Open from New page
traget= ' _self '; Open from this page
b default font bold with emphasis on meaning
Strong default Font Bold
I default font tilt
Em default font tilt with emphasis on meaning
Ul/ol/li list, default text style small dot, spacing
DL/DT/DD description list, default DT, DD has spacing
Link outer style sheet containing the rel attribute (attribute value stylesheet), href attribute

<iframe src= "Advertising URL interface" width= "height=" "scrolling=" no "marginwidth=" 0 "frameborder=" 0 "></iframe>
scrolling= "0" remove the ad strip
marginheight= "0" content margin top margin is 0
Marginwidth= "0" content margin left margin is 0
Frameborder= "0" remove border

"Form Label"
Inputtext text input box value= ' default text, you need to delete the ' placeholder= ' default text when entering, do not need to delete '
Button value= ' button name '
Password Password box
Radio Radio box checked by default the implement radio function requires the value of name in the option
Submit button
Rersect reset button
<secelt>
<option></option> drop-down menu selected default selected
</select>
CheckBox check box checked selected by default
<label></label> tag tags use ids and for properties to correlate with each other
<texteara></texteara> text field default Style

<form action= "Submit Address" ></form> form element submit data frame

Clear the default style for form elements
Border:none;
padding:0;
Outline:none; Clear Focus Box
Background:none; Clear background color
Resize:none; Clears the default drag of a text field

"TABLE Element"
<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

How the table is centered vertically:
Vertical-align:top the top of a car;
Vertical-align:middle; align in the middle
Vertical-align:bottom; bottom Alignment

Merging of table borders:
Table{border-collapse:collapse;};

Properties of the table
cellpadding= "0";
cellspacing= "0";
rowspan= "2" line merge
colspan= "2" column merge

Properties

Property = ' property value '

href= "link Address"
Src
Type
Name
Value
Title indicates text that appears when the mouse is moved up
alt= ' Replace text ' picture displays text when loading fails
Traget= "_blank" opens the connection from the new window
traget= "_self" open connection from this window

"CSS Style"
Width
Min-width: Minimum width (usually equal to the content width of the page)
Height
border:2px solid/dashed/dotted red; dot line (dotted) displayed as dots in IE Firefox
Border-top/right/bottom/left;
Border-width: Border thickness
Border-style: Border Linear
Border-color: Border Color
border-radius:50%; Rounded corners, percentages equal to the corresponding length or width of the ratio four is worth the direction is left upper, upper right, lower right, lower left
Text-align:left; (default)
Line-height: Text is centered vertically for single-line text when row height is equal to height
Font
Font-style:italic/normal; font tilt
Font-weidth:bold/normal;
Font-size Size of font
font-family: ' Mircosoft Yahei ';
Shorthand: font:italic bold 12px/20px ' Mircosoft Yahei ';
Font shorthand has at least font size and font family
Background
Background-image:url (' Address of picture ');
Background-repeat:no-repeat/repeat-x/repeat-y;
Background-position: If only one value is written, the second defaults to center, and if it is a numeric representation, the first is the x-axis
Shorthand: Background:url () no-repeat position color;
background-position:50% 50%; picture in the middle position
padding: padding (the distance between the content and the border)
padding:10px: The inner margin of the four directions is not 10px
padding:10px 20px; the upper and lower padding is 10px, and the left and right margins are 20px
padding:10px 10px 30px; The top margin is 10, the left and right margins are 20px, and the bottom margin is 30px
padding:10px 20px 30px 40px; The top, right, bottom, and left margins are 10px/20px/30px/40px respectively.
Method of writing:
Padding-top:
Padding-right:
Padding-bottom:
Padding-left:
Margin: Margin
Margins are abbreviated and written in exactly the same way as the padding
Issues with margin:
Margin drag: The margin-top of a subset gives the parent
Solve:
Add a border to the parent
Add Overflow:hidden to the parent level;
Margin-top with parent Padding-bottom instead of subset
Consolidation of margin: Two adjacent elements if all have margin, only the largest one will be executed.
Workaround: Add only one element to the Margin,margin value of the margin value of two elements and
Margin negative: If the box is not set wide, a negative margin can make the box larger

Text-decoration:none/underline/overline/line-through; underline
Text-indent:2em; first Line indent
Opacity: Transparency (values from 0 to 1), self-inheriting parent's opcity
Cursor:pointer; Hand type

Overflow:hidden; overflow hidden
Overflow:scroll; always show scroll bars
Overflow:auto; automatically display scroll bars

White-space:nowrap; no line break
Overflow:hidden; overflow hidden
text-overflow:ellipsis; ellipsis

"CSS Selector"
1 "group selector H1,H2,H3,H4
2 "nested selector p span A also called include selector
3 "Filter Selector div.span.img
4 "Direct own selector Ul>li
5 "Pseudo-class select a:link{} before Access
a:visited{} after Access
a:hover{} move the mouse up
a:active{} Press the mouse down
6 "ID selector #box
7 "class selector. Box
8 "Tag Selector box
9 "Wildcard Selector *


Priority: The smaller the selection, the higher the priority
important> Inline styles > #id > class selector > tag Selector > wildcard characters *

Styles that you own do not inherit the parent's style (for example, a does not inherit the parent's font color); text styles can inherit

"Clear Default Style"
body,h1,h2,h3,h4,h5,h6,p,ol,ul,dl,dt,dd,input,textarea{
padding:0;
margin:0;
}
li{
List-style:none;
}
a{
Text-decoration:none;
Color: #666;
}
img{
Vertical-align:top;
Border:none;
}
input,textarea{
Border:none;
Outline:none;
Background:none;
}
textarea{
Resize:none;
}
body{
font-size:12px;
Color: #666;
}
. w{
width:960px;
margin:0 Auto;
}
. clearfix:after{
Content: ";
Display:block;
Clear:both;
}
. fl{
Float:left;
}
. fr{
Float:right;
}

"Box Model"
Box model: The actual size that a box model occupies

The actual size of the box model is Width/height+padding+border
Box model does not include margin

Floating
Float:right; left float
Float:right; right float

Characteristics of float:
The float has a direction.
Float to make a block inside a line
After floating, the width is narrow to the width of the content (without setting the width)
Floating elements are semi-detached text streams
Parent is not wide enough, the subset falls down

Floating elements:
An element floats, its peers try to float as far as possible
Floating elements are as wide as possible.
Floating will clear the float.

Three ways to clear floating:
Add Overfloat:hidden to the parent of the floating element;
Add a div to a floating element sibling, and set the CSS style clear:both; (You can also float the element where it floats, clear that direction)
Add a style to the parent of a floating element content: ';
Display:block;
Clear:both;

Positioning
Position:relative/avsolute/fixed, relative positioning, decision positioning, fixed positioning
position:relative;
Characteristics of relative positioning:
Reference is your own
Not out of document flow (same as normal elements)
You can't make a block in a row.
Use of relative positioning:
To make absolute positioning a parent
Improve levels
Position:absolute;
Characteristics of absolute Positioning:
The reference is the parent of the position, if not, the reference is the body
Completely out of document flow
Absolute positioning makes the inside of the line fast
Width on the inner brace (without width setting)

A way to center a box model vertically horizontally
Position:absolute;
top:50%;
left:50%;
Margin-top: Half of the negative height;
Margin-left: Half of the width of the negative;
position:fixed;
Characteristics of fixed positioning:
Reference is visible area
Completely out of document flow
Fixed positioning makes the line into a block
Content is large by width (without setting width)

Level: Z-index: Natural number
The hierarchy of subsets is always higher than the parent (regardless of how you set the hierarchy to the parent and yourself)
The level of the subsequent element is greater than the level of the preceding element
Z-index only works on anchor elements

"Block label and inline label"

Block Tags: h1-h6 div p ol ul li DL DT DD
Characteristics:
Width default is the width of the parent
Block labels can be set to a wide height
Block label Exclusive Row
Not affected by spaces
You can set margin and padding in four directions
Used to lay out and block

Inline Tags: span a i em b strong
Characteristics:
Width is large by content
Inline labels cannot be set to width height
Inline labels in one row
Affected by whitespace
can only set margin and padding in horizontal direction
For small decorations and decorative details

The nested rules for block labels and inline labels are:
Block labels can be nested arbitrarily, but p tags cannot nest block labels
Inline labels can only nest inline labels, but a can nest arbitrary labels, but a cannot nest a tags

"A summary of the centering method"
The width of the box and the picture is centered horizontally: margin:0 auto;
Text and insert picture horizontally centered: text-align:center;
Table and insert Picture horizontal position adjustment: Vertical-align:top/middle/bottom

"Compatibility issues"
A package img: with Border
Img{border:none;}

Double margin:
Adding display:inline to floating elements;

Clear float:
Add Zoom:1;zoom:1 to the parent, trigger the parent's haslayout, and let the box display properly

Transparency: opcity:0.2;
Filter:alpha (OPCITY:10); or Filter:alpha (opcity=20);

PNG transparent Picture:
Use JS to solve

Single pixel:
Use even-numbered

Margin Negative:
adding position:relative to elements;

Min. Height:
Element plus Overflow:hidden;

"Some basic little thing."
EM units:
First line indent two characters text-indent:2em;
Search optimization: text-indent:-999em; For website logo and title
The width of the div can hold three characters: Width:3em;

&gt;>
&lt;<
&nbsp; spaces

RGB Primary Colors: Red, green and blue

File path
Absolute path: Starting from the drive letter
Relative path: The path to the currently edited file

HTML and CSS Knowledge summary