frontend-CSS 页面布局
本文记录前端css 页面布局知识
Cascading Style Sheets (css) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS describes how elements should be rendered on screen.
Syntax
statements = rulesets | at_rules | nested_statements
ruleset = selector_list declaration_block
at_rule = "@"identifier others
selector_list = selectors {"," selectors}
declaration_block = "{" {declaration} "}"
declaration = property:value;
selectors = selector{combinator selectors}
combinator = + //next sibling
> // child combinator
|| // column combinator
~ //subsequent sibling combinator
" " // descent combinator
| // namespace separator
selectors = :blank
:active
:first-child
:is()
#tag // id selectors
.tag // class selectors
tag // type selectors
selectors
css selectors are the patterns used to match or select the elements to which a set of css rules are applied along with their specificity. Combinators allow precise selection by enabling selecting elements based on their relationship to other elements.
inheritance
inheritance controls what happens when no value is specified for a property on an element.
- inherited properties, by default are set to computed value of the parent element
- non-inherited properties, which by default are set to initial value of the property
Box model
Everything in CSS has a box around it.
outer display type
if width
not specified, box will extend in the inline direction to fill the container
<h> <p>
use block as default outer display type
.box {
display:block;
width
height
padding
margin
border
}
inline display type
Flex model
Flexbox is a one-dimensional layout method for arranging items in ros or columns. Items flex (expand) to fill additional space or shrink to fit into smaller spaces.
Flex items are laid out along two axes:
- main axis
- cross axis
- felx container parent element
Grid layout
A grid is a collection of horizontal and vertical lines creating a pattern against which we can line up our design elements. A grid will typically have columns, rows.
.container {
display: grid;
grid-template-columns: 200px 200px 200px; // 3 columns
}
Unit
- cm centimeter 1cm = 37.8px
- mm millimeter
- in inches
- pt points 1/72nd of 1in
- px pixels 1/96th of 1in
- em relative to the font size of the parent element
- rem relative t the font size of the root element
- vh viewport’s height
- vw viewport’s width
Less
Less (Leaner Style Sheets) is a backwards-compatible extension for CSS.
@name // variable
#page { // scope
@name:red
#header {
color:@name
}
}
.name() // mixin
#header { // nesting
.logo {
width:300px
}
}
@base:@name*2 // operations
@base:percentage(@base) // functions
@import "library" // import