How to realize streaming layout in CSS
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!
