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

Editor to share with you how to achieve CSS streaming layout, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

1. Html structure

Streaming layout

Home page

Navigation one

This is the sidebar.

Here's the content.

Here is the footer.

2. Fixed layout style

@ charset "utf-8"

* {

Margin: 0

Padding: 0

}

# wrapper {

Margin-right: auto

Margin-left: auto

Width: 960px

Border: 1px solid red

}

# header {

Margin-right: 10px

Margin-left: 10px

Width: 940px

}

# navgation {

Padding-bottom: 25px

Margin-top: 26px

Margin-left:-10px

Padding-right: 10px

Padding-left: 10px

Width: 940px

}

# navigation ul li {

Display: inline-block

}

# navigation ul li a {

Text-decoration: none

Color: black

}

# content {

Margin-top: 58px

Margin-right: 10px

Float: right

Width: 698px

Border-bottom: 1px solid red

Height: 100px

}

# sidebar {

Border-right-color: # e8e8e8

Border-right-style: solid

Border-right-width: 2px

Margin-top: 58px

Padding-right: 10px

Margin-right: 10px

Margin-left: 10px

Float: left

Width: 220px

Border-bottom: 1px solid red

Height: 100px

}

# footer {

Float: left

Margin-top: 20px

Margin-right: 10px

Margin-left: 10px

Clear: both

Width: 940px

}

.clearfix: before

.clearfix: after {

Content: ""

Display: block

Clear: both

Width: 0

Height: 0

Visibility: hidden

Font-size: 0

}

3. Change the fixed layout to streaming layout.

Converts a fixed pixel width to a corresponding percentage width formula:

Target element width / context element = percentage width

@ charset "utf-8"

* {

Margin: 0

Padding: 0

Box-sizing: border-box

}

: root {

/ *

* in the initial state, 1em = 16px

* set the font size of the root element to 62.5%

* at this point, 1em = 10px

, /

Font-size: 62.5%

}

# wrapper {

Margin-right: auto

Margin-left: auto

Width: 96%

Border: 1px solid red

}

# header {

Margin-right: 1.04166667%

Margin-left: 1.04166667%

Width: 97.9166667%

Border-bottom: 1px solid red

Font-size: 4.8em

}

# navgation {

Padding-bottom: 25px

Margin-top: 26px

Margin-left:-1.04166667%

Padding-right: 1.04166667%

Padding-left: 1.04166667%

Width: 100%

}

# navigation ul li {

Display: inline-block

}

# navigation ul li a {

Text-decoration: none

Color: black

}

# content {

Margin-top: 58px

Margin-right: 1.04166667%

Float: right

Width: 72.7083333%

Border-bottom: 1px solid red

Height: 100px

Font-size: 2em

}

# sidebar {

Border-right-color: # e8e8e8

Border-right-style: solid

Border-right-width: 2px

Margin-top: 58px

Padding-right: 1.04166667%

Margin-right: 1.04166667%

Margin-left: 1.04166667%

Float: left

Width: 22.7083333%

Border-bottom: 1px solid red

Height: 100px

Font-size: 2em

}

# footer {

Float: left

Margin-top: 20px

Margin-right: 1.04166667%

Margin-left: 1.04166667%

Clear: both

Width: 97.9166667%

Height: 100px

Font-size: 1.2em

}

.clearfix: before

.clearfix: after {

Content: ""

Display: block

Clear: both

Width: 0

Height: 0

Visibility: hidden

Font-size: 0

}

The above is all the content of the article "how to achieve streaming layout 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.