CSS DIV Day 2_html/css_WEB-ITnose

Start the second day. Yesterday I learned the basic usage of css, including css references and some common css attributes. Mastering the basic usage of CSS is only the first step in CSS div layout. When it comes to layout, the most important thing is positioning. When we use tables for typesetting, we directly draw grids on the web page and fill the content into the corresponding grids. The same principle applies when using CSS, but CSS cannot draw grids directly. It has its own set of positioning methods. Today’s goal is to master the positioning of css.

First, introduce two definitions: relative positioning and absolute positioning. Relative positioning allows for offsets from the original position of the document. Absolute positioning allows arbitrary positioning. The following are several attributes needed for positioning:

Because positioning is not generally important, here is a detailed introduction to the role of each parameter:

position: static | absolute |relative
static: No special positioning, the object follows HTML positioning rules
absolute: Drag the object out of the document flow, using left, right, top, bottom and other attributes Perform absolute positioning. And its cascading is defined through the z-index attribute. At this time, the object does not have margins, but there are still padding and borders
//We generally use this attribute when using absolute positioning.
relative: Objects cannot be stacked, but will be offset in the normal document flow based on left, right, top, bottom and other attributes

left: auto|lenth
auto : No special positioning, allocated in the document stream according to HTML positioning rules
length : A length value composed of a floating point number and a unit identifier | Percentage. The position attribute value must be defined as absolute or relative for this value to take effect.
Example: div { position: absolute; left: 1in; }
The usage of top and left are the same. It should also be noted that the position attribute value must be defined as absolute or relative for this value to take effect.

width: auto|lenth
auto: no special positioning, allocated in the document stream according to HTML positioning rules
length: composed of floating point numbers and unit identifiers Length value | Percent.
height has exactly the same syntax as width. And it does not need to define position must be absolute

clip : auto | rect ( number number number number )
auto : Object without clipping
rect ( number number number number ) : Based on The order of top-right-bottom-left provides four offset values ​​calculated from the upper left corner of the object as the (0,0) coordinate. Any of these values ​​​​can be replaced with auto, that is, this edge is not cut

overflow: visible | auto | hidden | scroll
visible: Does not cut content or add scroll bars. If this default value is explicitly declared, the object will be clipped to the size of the window or frame containing the object. And the clip attribute setting will be invalid
//The result of this attribute is like when there is no div, as much content as there is will be displayed.
auto: This is the default value of the body object and textarea. Cut content and add scrollbars when needed
hidden: Don’t show content that exceeds object size
scroll: Always show scrollbars

z-index: auto | number
auto: Follow the positioning of its parent object
number: A unitless integer value. Can be negative
//It should be used to produce some three-dimensional effects

visibility: inherit | visible | collapse | hidden
inherit: Inherit the visibility of the previous parent object
visible: Object visible hidden: Object hidden
collapse: Mainly used to hide table rows or columns. Hidden rows or columns can be used by other content. For other objects outside the table, its function is equivalent to hidden. IE5.5 does not yet support this property.

The position, width, height, left, top, z-index in the above attributes are used to position the div, and the clip, overflow, and visibility are used to control the alignment. For content display, these properties can be regarded as the basic properties of a layer. After mastering the basic properties of layers, we can look at an example of using layers to position and control display:

　
　
!--
　 #container1{position: absolute; top: 100}
//*position: absolute; define container1 as the absolute position*//
#container2{position: absolute; top: 100; visibility: hidden;}
　　　　//*Define container2 as absolute positioning, and the initial visibility is hidden*//
　　 p{font-size: 12pt;}//*Define the font of p*//
　 -->
　　
　　
　　 ;color:#cc33cc”>
　 Please select a picture:

//*Set font size, name, color*//
　

　

　 //*Import an image with the identifier container1*//
　 < p style="font-family:cursive script;color:#cc9933;font-size:12pt">
　Name: Desert

//*Set font name, color, size*//
　　

　　

　　

　　

　 //*Import another type of image, the identifier is container2*//
　

　onclick="container1.style.visibility='visible';
　container2.style.visibility=' hidden'">
//*Define the mouse click event to make picture 1 visible and picture 2 invisible*//
　 　container1. style.visibility='hidden';
onclick="container2.style.visibility='visible';
container1.style.visibility='hidden'">

Define mouse click event picture 1 as invisible, picture 2 as visible*//
　
　Techniques to control the visibility value in css.

The above example only talks about the flat layout. Tutuo’s previous css knowledge ends here. However, there is a z-index parameter above, which is used to Stereoscopically positioned, so div can also be stereoscopic. Here is a simple stereoscopic example:

　
　

　　
　
　ss01010.jpg" class="pile" id="image"
Style="z-index:1">
//*Import an image to make it a pile class, z-index attribute definition is 1, the position is at the bottom
　　*//
　　

　style="color:#ffff33;z-index:2" > This paragraph The text will be overlaid on the image.
　

//*Define the color and z-index attributes of a piece of text to be 2, in the middle position*//
　　style="z-index:3">
　　 //*Import the second image, make it the "pile1" class, the z-index attribute is 3, and the position is at the top
Square*//
　　
　　

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn