How does CSS actually work?
When a browser displays a document, it must combine the document's content with its style information. It processes the document in two stages:
1.The browser converts HTML and CSS into the DOM (Document Object Model). The DOM represents the document in the computer's memory. It combines the document's content with its style.
2.The browser displays the contents of the DOM.
How does CSS actually work
background-clip
background-clip
background-clip
border-image-repeat
stretch
repeat
round
border-image-repeat
border-image-repeat
box-shadow
box-shadow
You'll see that we've got four items in the box-shadow property value:
The first length value is the horizontal offset — the distance to the right the shadow is offset from the original box (or left, if the value is negative).
The second length value is the vertical offset — the distance downwards that the shadow is offset from the original box (or upwards, if the value is negative).
The third length value is the blur radius — the amount of blurring applied to the shadow.
The color value is the base color of the shadow.
Filters
filters
filters
Different types of selectors
Pseudo-classes and pseudo-elements
Combinators and multiple selectors
Combinators and groups of selectors
Unitless line height
unitless line height
Here the font-size is 16px; the line height will be 1.5 times this, or 24px.
HTML syntax
The syntax is simple. Any attribute on any element whose attribute name starts with data- is a data attribute. Say you have an article and you want to store some extra information that doesn’t have any visual representation. Just use data attributes for that:
html syntax
Reading the values of these attributes out in JavaScript is also very simple. You could use getAttribute() with their full HTML name to read them, but the standard defines a simpler way: a DOMStringMap you can read out via a dataset property.
To get a data attribute through the dataset object, get the property by the part of the attribute name after data- (note that dashes are converted to camelCase).
javascript access
Each property is a string and can be read and written. In the above case setting article.dataset.columns = 5 would change that attribute to "5".
You can also use the attribute selectors in CSS to change styles according to the data:
css access
Pseudo-classes
A CSS pseudo-class is a keyword added to the end of a selector, preceded by a colon (:), which is used to specify that you want to style the selected element but only when it is in a certain state.
:active :checked :default :dir() :disabled :empty :enabled :first
:first-child :first-of-type :fullscreen :focus :focus-within :hover
:indeterminate :in-range :invalid :lang() :last-child :last-of-type
:left :link :matches() :not() :nth-child() :nth-last-child()
:nth-last-of-type() :nth-of-type() :only-child :only-of-type :optional
:out-of-range :read-only :read-write :required :right :root
:scope :target :valid :visited
Pseudo-elements
Pseudo-elements are very much like pseudo-classes, but they have differences. They are keywords, this time preceded by two colons (::), that can be added to the end of selectors to select a certain part of an element.
::after ::before ::first-letter ::first-line ::selection ::backdrop
CSS Priority
For Different Level:
!important > inline styles > id selector > class selector > element selector > universal selector（*）> inheritance > browser's default attribute
For Same Level:
later rules will win over earlier rules
Specificity
The amount of specificity a selector has is measured using four different values (or components), which can be thought of as thousands, hundreds, tens and ones — four single digits in four columns:
Thousands: Score one in this column if the declaration is inside a style attribute (such declarations don't have selectors, so their specificity is always simply 1000.) Otherwise 0.
Hundreds: Score one in this column for each ID selector contained inside the overall selector.
Tens: Score one in this column for each class selector, attribute selector, or pseudo-class contained inside the overall selector.
Ones: Score one in this column for each element selector or pseudo-element contained inside the overall selector.
Note: Universal selector (*), combinators (+, >, ~, ' ') and negation pseudo-class (:not) have no effect on specificity.
specificity
Note: If multiple selectors have the same importance and specificity, which selector wins is decided by which comes later in the Source order.
Controlling inheritance
Sets the property value applied to a selected element to be the same as that of its parent element.
Sets the property value applied to a selected element to be the same as the value set for that element in the browser's default style sheet. If no value is set by the browser's default style sheet and the property is naturally inherited, then the property value is set to inherit instead.
Resets the property to its natural value, which means that if the property is naturally inherited it acts like inherit, otherwise it acts like initial.
Reverts the property to the value it would have had if the current origin had not applied any styles to it. In other words, the property's value is set to the user stylesheet's value for the property (if one is set), otherwise the property's value is taken from the user-agent's default stylesheet.
Note: initial and unset are not supported in Internet Explorer.
html
css
result
grid
CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward.
A grid will typically have columns, rows, and then gaps between each row and column — commonly referred to as gutters
grid
Defining a grid
Defining a grid
Flexible grids with the fr unit
Flexible grids with the fr unit
Gaps between tracks
To create gaps between tracks we use the properties grid-column-gap for gaps between columns, grid-row-gap for gaps between rows, and grid-gap to set both at once.
Gaps between tracks
gap
Repeating track listings
Repeating track listings
repeat
The implicit and explicit grid
The implicit and explicit grid
The implicit and explicit grid
The minmax() function
The minmax() function
As many columns as will fit
As many columns as will fit
As many columns as will fit
This works because grid is creating as many 200 pixel columns as will fit into the container, then sharing whatever space is leftover between all of the columns — the maximum is 1fr which, as we already know, distributes space evenly between tracks.
Line-based placement
We now move on from creating a grid, to placing things on the grid. Our grid always has lines, these lines start at 1 and relate to the Writing Mode of the document. Therefore in English, column line 1 is on the left hand side of the grid and row line 1 at the top. In Arabic column line 1 would be on the righthand side, as Arabic is written right to left.
We can place things according to these lines by specifying the start and end line. We do this using the following properties:
grid-column ——> grid-column-start grid-column-end
grid-row ——> grid-row-start grid-row-end
These let you specify the start and end lines at once, separated by a / — a forward slash character
Line-based placement
Line-based placement
Note: you can also use the value -1 to target the end column or row line, and count inwards from the end using negative values. However this only works for the Explicit Grid. The value -1 will not target the end line of the implicit grid.
Positioning with grid-template-areas
An alternative way to place items on your grid is to use the grid-template-areas property and giving the various elements of your design a name.
Remove the line-based positioning from the last example (or re-download the file to have a fresh starting point), and add the following CSS.
Positioning with grid-template-areas
Reload the page and you will see that your items have been placed just as before without us needing to use any line numbers!
Positioning with grid-template-areas
The rules for grid-template-areas are as follows:
1、You need to have every cell of the grid filled.
2、To span across two cells, repeat the name.
3、To leave a cell empty, use a . (period).
4、Areas must be rectangular — you can’t have an L-shaped area for example.
5、Areas can't be repeated in different locations.
You can play around with our layout, changing the footer to only sit underneath the content and the sidebar to span all the way down for example. This is a very nice way to describe a layout as it is obvious from the CSS exactly what is happening.
A CSS Grid, grid framework
Grid "frameworks" tend to be based around 12 or 16 column grids and with CSS Grid, you don’t need any third party tool to give you such a framework — it's already there in the spec.
This contains a container with a 12 column grid defined, and the same markup as we used in the previous two examples. We can now use line-based placement to place our content on the 12 column grid.
A CSS Grid, grid framework
A CSS Grid, grid framework
Flexbox
Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces.
Following 6 properties is for ancestors elements
flex-direction
row | row-reverse | column | column-reverse;
flex-direction
flex-wrap
nowrap | wrap | wrap-reverse;
flex-wrap
nowrap
wrap
wrap-reverse
flex-flow(shorthand of flex-direction and flex-wrap)
flex-flow: flex-direction || flex-wrap
justify-content
flex-start | flex-end | center | space-between | space-around;
justify-content
align-items
flex-start | flex-end | center | baseline | stretch;
align-items
align-content
flex-start | flex-end | center | space-between | space-around | stretch;
align-content
Following 6 properties is for single item
order flex-grow flex-shrink flex-basis flex align-self
order
order: 1;
order
flex-grow
flex-grow:1;
flex-grow
flex-shrink
flex-shrink: 1;
flex-shrink
flex-basis
.item {flex-basis: | auto;/* default auto */}
flex
.item {flex:none | [<'flex-grow'><'flex-shrink'>? ||<'flex-basis'> ]}
align-self
auto | flex-start | flex-end | center | baseline | stretch;
align-self
Float
float
The elements of normal document flow occupy one row, the element with the float set on it (the element in this case) is taken out of the normal layout flow of the document and stuck to the left hand side of its parent container (<body>, in this case). Any content that comes below the floated element in the normal layout flow will now wrap around it, filling up the space to the right-hand side of it as far up as the top of the floated element
3 boxes and a paragragh of text
add float left to box1
Clearing floats
We have seen that the float is removed from normal flow and that other elements will display beside it, therefore if we want to stop a following element from moving up we need to clear it. This is achieved with the clear property
—— The first way for clear floats is add clear: both to elements that need to be cleared
clear:both
Clearing boxes wrapped around a float
You now know how to clear something following a floated element, but take a look at what happens if you have a tall float and a short paragraph, with a box wrapped around both elements. Change your document so that the first paragraph and our floated box are wrapped with a class of wrapper.
Clearing boxes wrapped around a float
Clearing boxes wrapped around a float
—— The second way for clear floats is use the clearfix hack
the clearfix hack
clearfix hack
—— The third way for clear floats is add overflow:auto to parent wapper
An alternative method is to set the overflow property of the wrapper to a value other than visible.
overflow:auto;
—— The fourth way for clear floats is set display:flow-root property to parent wrapper, it's also the modern way of solving this problem .This exists only to create a BFC without using hacks — there will be no unintended consequences when you use it. Remove overflow: auto from your .wrapper rule and add display: flow-root. Assuming you have a supporting browser, the box will clear.
display:flow-root;
Positioning
Positioning allows you to take elements out of normal document layout flow, and make them behave differently
position:static;
Static positioning is the default that every element gets — it just means "put the element into its normal position in the document layout flow
position: absolute;
absolute positioning fixes an element in place relative to the <html> element or its nearest positioned ancestor
absolute
absolute
position: relative;
the relative positioned element has taken its place in the normal layout flow, you can then modify its final position, including making it overlap other elements on the page
relative
You can see above , the yellow box is relative to its original positioning , and it's in the normal document flow because the following elements doesn't occupy its original position
position: fixed;
fixed positioning fixes an element in place relative to the browser viewport itself
position: sticky
This is basically a hybrid between relative and fixed position, which allows a positioned element to act like it is relatively positioned until it is scrolled to a certain threshold point (e.g. 10px from the top of the viewport), after which it becomes fixed. This can be used to for example cause a navigation bar to scroll with the page until a certain point, and then stick to the top of the page.
stick
here is the link of sticky positioning : https://codepen.io/pen/
Multiple-column layout
column-count:3;
column-width:200px;
column-gap:20px;
column-rule:4px dotted rgb(79,185,227);
网友评论