Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to use display:inline-block in css", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "how to use display:inline-block in css" this article.

The pseudo-class selector hover can set some special styles when you mouse over the link, such as font size, background color, show hidden, and so on.

Note: the pseudo-class selector hover can work on all elements, not just links.

A selector similar to hover is link,visited,active. The link selector can set the unaccessed link style, the visited selector can set the accessed link style, and the active selector can set the active link style. Students who are not clear can refer to the CSS video tutorial.

Usage 1: change the style of the mouse itself as it passes over the link (hover is directly followed by the style)

Description: when the mouse passes over, the font color of the a tag changes to red and the font becomes larger, the code is as follows:

.aa {text-decoration:none;color:#000000;}

.aa: hover {color:red;font-size:20px;}

Welcome to PHP Chinese website to learn and communicate.

The first picture is the original effect, and the second picture is the effect achieved after the mouse is over.

Bb0.jpg

Bb1.jpg

Usage 2: use the pseudo-class selector hover to control the style of its child elements (hover followed by a space and then to change the style of the element)

Description: when the mouse passes over div, the color of its child elements changes to purple, the font becomes larger, and a red border appears. The code is as follows:

.aa {text-decoration:none;color:#000000;}

.box: hover.aa {color:purple;font-size:30px;border:1pxsolidred;}

Hope for the success of your son and hope for your daughter to become a Phoenix

The effect is shown in the following figure:

Bb3.jpg

Usage 3: control the style of its sibling element when the mouse passes over (hover followed by "+" and then to change the style of the element)

Description: when the mouse passes over, the background color of its brother element changes to yellow, and the font becomes larger, the code is as follows:

.aa {text-decoration:none;color:#000000;}

.box1: hover+.box2 {font-size:30px;background:yellow;}

There is a bright moonlight in front of the bed

Can it be hoar-frost on the ground

Effect picture:

Bb5.jpg

The above introduces the use of pseudo-class selector hover in CSS. Beginners can try it themselves to see if your code can achieve the effect. I hope this article will be helpful to you! We know that the box-direction attribute sets the order of the "child elements" inside the elastic box. In the CSS3 elastic box model, we can also use the box-ordinal-group attribute to set the "exact" display position of each "child element" in the elastic box.

The value of the box-ordinal-group attribute is a natural number, starting with 1, used to set the position sequence number of the child element. The distribution of child elements will be arranged from small to large according to the value of this attribute. By default, child elements are arranged according to the location of the elements.

Note that for child elements that do not specify a box-ordinal-group attribute value, the ordinal of the child element defaults to 1. And child elements with the same ordinal are arranged in the order in which they are loaded in the HTML document.

Let's first look at an example, and then review these knowledge points:

CSS3box-ordinal-group attribute

Body

{

Display:-webkit-box

-webkit-box-orient:horizontal;/* defines the flow of elements within a box element from left to right * /

}

Div {height:100px;line-height:100px;}

# box1

{

Background:red

-webkit-box-ordinal-group:2

}

# box2

{

Background:blue

-webkit-box-ordinal-group:3

}

# box3

{

Background:yellow

-webkit-box-ordinal-group:1

}

Box 1

Box 2

Box 3

Wechat screenshot _ 20181023153640.png first of all we should know the meaning of the inline-block element

Display:inline-block does not set the width, the content spread width; will not occupy a single line, support width and height, code wrapping is parsed into spaces, all in all, inline-block contains the characteristics of elements within the line and the block, that is, the element with the inline-block attribute has the feature that the block element can set width and height, while keeping the inline element without line wrapping.

Now that we know the meaning of inline-block, let's take a look at how to use inline-block.

The usage of the inline-block element:

All the requirements that need to be arranged inline and can be resized can be implemented in inline-block. For example, we can use inline-block for layout. Let's take a look at the specific example. We can use the inline-block element to implement the navigation bar as follows:

Document

Div {

Width:30%

Background:lightblue

Height:100px

Text-align:center

Line-height:100px

}

A {

Color:#fff

Text-decoration:none

Display:inline-block

Width:100px

Height:30px

Line-height:30px

Background:orange

}

Home page

Video

Tools

Log in

The effect of the inline-block element is as follows:

The above effect we can see that there will be a gap between each link, how does this gap appear? This gap is actually caused by characters such as line feeds, tabs (tab), spaces, and so on. There are several ways to remove this gap:

Method 1: write all the code on one line, and there will be no gaps; but this method will be messy when there is too much code, so the code is not recommended for a long time.

Method 2: set a negative value of word-spacing in the css of the parent element

Method 3: add {font-size:0} to the parent element, that is, set the font size to 0, then the blank character becomes 0px, thus eliminating the gap.

The above is all the contents of the article "how to use display:inline-block in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.