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

This article introduces the knowledge of "how to automatically fill the parent class box with html5". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Xiaomi layout case 1: product module layout analysis

Similar to this product module, using css+html layout to complete.

MI

* {

Margin: 0

Padding: 0

}

Body {

Background-color: # f5f5f5

}

.box {

Width:1100px

Height:400px

Margin: 200px auto

}

.box1 {

Width:200px

Height:350px

Background-color: white

Margin: 10px 10px 10px 20px

Display:inline-block

Padding: 10px

Overflow: hidden

Transition: all 1s

}

.box1: hover {

Transform: scale (1.07)

}

.box1 img {

Width: 100%

}

.box1 h6 {

Text-indent: 25px

}

.box1 p {

Font-family: song style

Font-size: 10px

Color: # 9e9494

Margin-top: 20px

}

.box1 h5 {

Font-family: Microsoft Yahei

Color:red

Margin-top: 20px

Text-indent: 2em

Float: left

}

# lgprice {

Margin-top: 20px

Color: # 9e9494

}

Fillet border

The higher the border-radius:length;// number, the more round it is. You can follow four values in a clockwise direction.

Border-top-left-radius:xxpx;// sets the upper left corner.

Box shadow

Box-shadow:h-shadow v-shadow blur spread color inset;// writes in strict order

Value

Description

H-shadow

Must, the part of the horizontal shadow can be negative.

V-shadow

Must, the part of the vertical shadow can be negative.

Blur

Optional, blur distance.

Spread

Optional, the location of the shadow size.

Color

Optional, the color of the shadow.

Inset

Optionally, you can change external shadows to internal shadows, but the default outset is not necessary.

Xiaomi layout case 2: add Shadow effect

Box-shadow: 10px 10px 10px rgba (0. 0. 0. 0. 0. 3)

It is obvious that the effect of shadow will come out.

Float

Why do you need to float?

Gaps appear when using inline blocks.

The first rule of web page layout: multiple block-level elements are arranged longitudinally to find the standard stream, and multiple block-level elements are arranged horizontally to find floating.

What is floating?

The float property is used to create a floating window, moving it to one side until the left or right edge touches the edge of the containing block or another floater.

This is the end of the content of "how to automatically fill the parent class box with html5". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.