One, Div and span
(1) block-level tags: div
(2) Inline tags: span
：
Second, box model (important)
Note: The browser's debugging tools can be used to view the box
(1) Margin: box margin
(2) Padding: Box inner margin (will change the size of the block)
(3) Border: Box Border width
(4) Width: Box width
(5) Height: box height
Example:
①: Difference between margin and inner margin:
Demo.html
<!doctype html>②: Box Model div Placement Example:
Demo.html
<!doctype html>Third, layout-related attributes (important)
(1) Position positioning method ①. Normal positioning: Relative②. Locate according to parent element: Absolute③. Locate according to the browser window: Fixed④. No location: Static⑤. Inheritance: Inherit (2) positioning ①.left: Xxpx (left) distance from page vertex ②.right:xxpx (right) distance from page vertex ③.top:xxpx (top) distance from page vertex ④.bottom:xxpx (bottom) distance from page vertex (3) Z-index layer overrides precedence (priority) ①.-1, 0,1,2,3; When 1, the layer is the lowest
(4) Display properties (toggle between block-level labels and inline tags)
①.display:none layer does not display
②.display:block block display, wrapping after element, showing next block element
③.display:inline inline display, multiple blocks can be displayed in one line
(5) Float Float property
①.left: Left float
②.right: Right Float
[b] (6) clear clears floating [/b]
①.clear:both
[b] (7) overflow overflow handling [/b]
①.hidden hiding content beyond the layer size
②.scroll Add scroll bars regardless of whether the content exceeds the layer size
Automatically add scroll bars when ③.auto is exceeded
[b] Example: [/b]
①: Fixed position and layout demo<!doctype html>②: Floating and overflow effects demo
<!doctype html>The above is the CSS folding style (4) ――div+css layout content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
