1, float float
From the document flow: left or right along the parent container arranged
Document flow
document is a document stream may be arranged at the position of the object is occupied
float properties
left, right, none
float points Note:
only affects the back of the element, for the element before the element is floating without any influences of the
contents of the default lifting half layer, may be implemented photo-text style
default content determined by the width of
line feed arrangement , fit a line floating element rows will change
the main element is added to the block, but may also be added to the inline element
How to remove floating?
Vertically arranged: Clear, clears float: left, right, both
nested arrangement:
a fixed width and height: Not recommended, not fixed to the die height, the effect is not suitable for adaptive
parent floating elements: not recommended, because the parent is also a floating vessel will affect the elements behind the
overflow: hidden (BFC specification), if there are child elements wanted to overflow, it will be affected, but not overflow
display: inline-block (BFC specification) is not recommended, the parent element will affect the elements behind
set empty label: not recommended, will add more than one label
after pseudo-class: recommended is an enhanced version of an empty tag, the current practice of major companies.
(Clear property only operation block tag, the tag does not work inline)
written: .clear :: after {content: ' '; clear: both; display: block;}
2, position positioning
position characteristic
CSS position attribute specifies a targeting element in the document, top, right, bottom, left attribute determines the final position of the element
position values:
static (default)
relative :( relative positioning)
Absolute
Fixed
Sticky
relative :( relative positioning)
if the offset is not located, has no effect on the element itself: left: 100px; top: 100px ; left positive value indicates rightward
without departing from the document flow element
does not affect other elements
left, right, top , bottom element itself relative to the current offset of
absolute :( absolute positioning)
the element completely out of the document flow (similar to the float)
the width and height of an inline element supports
the block elements default width (to make blocks have properties inline) based on the content of the decision
if there is positioned ancestor, the relative positioning shifted ancestor, the ancestor element is not positioned relative to the entire document is offset (e.g., with respect to the html tag, the upper left corner as the origin offset)
Example:
# box1 {width: 300px by; height: 300px by; border: 1px Black Solid; margin: 20px Auto; position: relative;}
# BOX2 {width: 100px; height: 100px; background: Red; position: Absolute; Top: 0; left: 0;}
BOX2 ancestor element box1 positioning element relative ( absolute, relative, are fixed to one line) so that, BOX2 upper left corner as the origin offset box1
fixed :( fixedly positioned)
so that the element completely out of the document flow
of the inner element with high support wide (so inline element includes a block characteristic)
that the wide block elements according to the default content determination (block includes inline so characteristic)
with respect to the entire browser window operation, independent of the browser scroll bar (such as pop, top buttons, etc.)
viscous sticky :( positioned)
at a predetermined position, the operation for viscous
(p fast write mode tag} p {aaaaa content * 6)
z-index :( positioned level)
The default is 0 layers
nested hierarchy when problems:
first with the parent container level to compare, if the parent container is not level with the level of sub-elements only to compare
3, css ellipsis
width
must have a fixed width of
white-space: nowrap
prevent content wrap;
overflow: hidden
hidden contents spilled
text-overflow: ellipsis
ellipsis
4, css Sprite
characteristics:
css css Sprite also known as Elf, is a web application picture processing mode, which allows you to a page related to all major European sporadic pictures included a large figure to load.
In fact, use a background image with the icons which are targeted to different regions, namely the background positioning
advantage:
you can reduce the picture quality, fast image loading speed of pages
to reduce the number of requests of the picture, to speed up the web page open
5, css fillet
border-radius: four values are writable, upper left, upper right, lower left, lower right
6, PC side of the layout?
Banner, version of the heart
7, HTML and XHTML difference:
DOCTYPE documentation and coding
elements of the case: html: sensitive label can; Xhtml: only lowercase
attribute Boolean value: html: checked; xhtml: checked = "checked"
attribute quotes: xhtml attribute values must be quoted: <div title = "hello"> </ div >
image alt attribute: xhtml: img tag must write the alt attribute
wording single label: the end xhtml single label must be added /: <meta />
double label closed: html dual label may or may not write complete (very not recommended), it was not xhtml
8, strong and b, em, and i
Manifestations are text and bold and italic text
except that: strong and em are provided semantic (recommended), and b i are not available and semantic.
b i and applications: simplified operation of the selector when more class.
9, reference label
blockquote: quotations large segment of the explanation
q: reference subparagraph phrase to explain
abbr: abbreviation or acronym
address: address information referenced documents
cite: reference book title
The benefits of semantic labels: in favor of computer or browser easy to resolve, make it easier for search engines to search for desired content; specification extent of regulation coded for easy multiplayer collaborative development. In fact, can use div and span (equivalent to inline div) instead, but using the appropriate tag in the right context is more compliant
10, iframe nested page labels (phishing sites often)
iframes. Contain additional elements create a document inline frame (i.e., rows within the frame).
That is: the other can be introduced into the current html display html
Mainly using iframe attributes adjusting pattern
scenarios: data transfer, shared code, partial refresh, and other third party intervention
11, br and wbr?
br: single label, is wrap, WBR is soft wrap: added to the long words there will a portion of the wrap, not the entire word a line feed: Http <wbr> Html <wbr> XhtmlCss Html and Http sequentially wrap, the long words are not disposable wrap
12, pre and code
Display program code for a web page (code text surrounded by automatically generated label span the like)
output angle brackets to Advanced lt escape &; (<); & gt; (>)
pre-definable preformatted text tags . Pre element is enclosed in the text generally reserved spaces and line breaks
code Tags: code text which surrounds the
pre element as the outer layer, the inner element may be implemented as code display code.
* Major understand the meaning of that is: the final implementation code shows these two labels, generally do not write directly instead of using the markdown syntax to automatically generate
13, map the area?
To add a graphic picture of the special link, the shape of the hot zone area added: rectangular, circular, polygonal,
rectangular: write only to the upper left and lower right corner coordinates of the
circle: center coordinates and radius of
the polygon: write multi-point coordinates
14, embed and object? (With less)
expressed inserted some media, such as flash animation, plug-ins. Basically not much difference, mainly for compatibility with different browsers
object param element element needs to cooperate with the completion of
15, audio and video
of new features belonging to the H5
audio tag represents the embedded audio files, video label indicates the embedded video files. The default controls are not displayed, the controls can be displayed by controls property
In order to improve compatibility with the source to label
16, text annotations?
ruby, rt such a composition
css implemented oppositely oriented text, text BDO tag achieve reverse order.
17, the extended link tags
major role in the introduction of an external file
to add a small icon in the title bar before the URL
<link rel = "icon" type = "/ image / x-icon" href = "http://www.mobi/favicon.ico ">
introduced into the pre-resolving DNS
<link rel =" dns-prefetch "href =" // res.mmstat.com "/>
18, meta extended learning?
Optimize Website
meta add some supplementary information:
You can also add some of the features: rendering mode, refresh, cache
ctrl + f find text
* Note: the accumulation of large websites meta and link all what is written, it may help to power the interview
19, HTML5 new semantic tags
generally only occur once a page
header: header
footer: footer
main: the main
hgroup: Title combination
nav: Navigation
article: independent content (focusing on independence)
aside: the contents of auxiliary information
section: region (focusing divided area)
Figure: describe the image or video
figcaption: description title picture or video section
Note: Although you can use div to do, however, benefit above semantic tags have already been discussed
datalist: option list
details / summary: Document details / title of the document
progress / meter: definitions progress bar / metric measurement range of
time: the definition of a date or time
mark: text with marks
(title attribute to hover message appears)
(recommended to div into the corresponding semantic labels)
20, the table extensions
add singlet: border-collapse: collapse
hide empty cells: empty-cells: hide
slash Category: border / rotate
grouping columns: colgroup / col
21, the extended form
Beautification form controls: 1, with pseudo-classes, primarily label tags: the checked 2, position + Opacity
label should be increased in selected areas checkbox
The new input controls:
Email: Enter the email address box
url: URL input box
number: numerical input box
range: slider
date / month / week: date control
search: search box
color: Color Control
tel: telephone number input box (in mobile terminal will default invoking the numeric keypad)
time: time control
properties of the new form:
autoComplete: automatically default: ON \ OFF
the autofocus: get the focus
required: can not be empty
pattern: regular verification, continues to run through verification
method: data transmission
enctype: data transfer type
name / value: the key data
Extension tag
fieldset: within form elements grouped
legend: fieldset element to define the title
optgroup: customization options group
22, BFC specification
Formatting context (context format) is a conceptual W3C CSS2.1 specification, which is a rendering area of the page, and a set of rendering rules that determine how to position its child elements, and relationships as well as other elements and interaction
BFC i.e. Block Formatting Contexts (context block level format), it belongs to one of the foregoing specification BFC element having characteristics can be seen as isolated in separate containers, inside the container element does not affect the layout on the outside element, and BFC having some features that are not common container.
Trigger elements BFC specification, may form a separate container, not subject to outside influence, in order to address some of the positioning of
the trigger BFC
floats: float value other than none of
absolutely positioned elements: position (Absolute, Fixed)
Run the display is inline-block , Table-cells, Flex
overflow in addition to the visible value (hidden, auto, scroll)
BFC properties and its application
to solve the problem of superposition margin of
solving margin delivery problems
to solve the problem of floating
solve the coverage problem