层叠、优先级和继承
可以被继承的属性:
与文本相关的属性
color、font、font分解属性、line-height、letter-spacing、text-aligh、text-indent、text-transform、white-space、word-spacing
列表属性
list-style、list-style-type、list-style-position、list-style-image
表格边框属性
border-collapse、border-spacing
第二章 相对单位
:root{
font-size: 0.75em;
}
@media only screen and (min-width: 800px) {
:root{
font-size: 0.875em;
}
}
@media only screen and (min-width: 1200px){
:root{
font-size: 1em;
}
}
屏幕越大,字体越大,在开发的时候尽量使用如下规则:
font-size
使用rem,border使用绝对值px,其他属性使用em单位
视口相对单位
vw:视口宽度的1/100
vh:视口高度的1/100
vmin:视口宽度和高度较小的一方1/100
vmax:视口宽度和高度较大的一方1/100
使用vw和calc也可以实现达到定义字号的目的,并且平滑过渡
:root {
font-size: calc(0.5em + 1vw);
}
CSS变量
CSS原生已经支持了变量,使用方法
:root {
font-size: calc(0.5em + 1vw);
--my-color:red
}
h1 {
color: var(--my-color);
}
变量也可以被继承,也可以重写,在父元素上重写
第三章 盒模型
目前普遍做法是在项目开始将所有容器盒模型设置为border-box
*,::before,::after{
box-sizing: inherit;
}
:root{
box-sizing: border-box;
}
之所以没有直接将所有模型的box-sizing
直接设置为border-box
是因为可能有一些第三方CSS库最开始并没有注意这个问题,可能会使用默认的content-box进行编写,使用继承的形式,可以在遇见这种情况的时候在父容器中设置border-box:content-box
即可
负外边距
- 设置左边和上边的负外边距,元素会向相应方向移动,设置右边和底部的负外边距元素不会移动,会将其后边的元素拉入。
- 猫头鹰选择器
.demo + .demo
会选择除第一个外的兄弟元素,在多个元素间产生间距时很有用 - 外边距折叠问题解决办法
over-flow非visibility、flex、table-cell、浮动、定位、添加padding或者border进行隔离。清楚浮动基本上也是这些解决方法(上下文隔离)
第四章 理解浮动
页面外容器居中布局
<style>
:root{
box-sizing: border-box;
}
*,::before,::after{
box-sizing: inherit;
}
.container{
max-width: 1080px;
margin: 0 auto;
height: 2em;
background-color: red;
}
</style>
<div class="container"></div>
使用max-width
保证在小容器上占满,比如小屏幕上沾满这个屏幕
- 浮动不会增加高度的原因在于设计初衷浮动是用来为改变嵌入图片的位置的,如果在段落中图片浮动能够增加高度,那么就会造成段落高度变大,接下来的文字不会形成围绕图片的形式
- 浮动理论上是在浮动元素上方设置足够大的margin来达到包含浮动元素的目的
网格系统
:root{
box-sizing: border-box;
}
*,::before,::after{
box-sizing: inherit;
margin: 0;
padding: 0;
}
.row::after{
content: '';
display: block;
clear: both;
}
[class*='column-']{
float: left;
}
.column-1{width: 8.3333%;}
.column-2{width: 16.6667%;}
.column-3{width: 25%;}
.column-4{width: 33.3333%;}
.column-5{width: 41.6667%;}
.column-6{width: 50%;}
.column-7{width: 58.3333%;}
.column-8{width: 66.6667%;}
.column-9{width: 75%;}
.column-10{width: 83.3333%;}
.column-11{width: 91.6667%;}
.column-12{width: 100%;}
第五章 Flexbox
flex元素向有余下空间的一方的反方向设置margin-left(right):auto
元素会向该方向移动占据空间
第七章 定位和层叠上下文
- 粘性定位(目前处于实验阶段),
position:sticky
元素会处于当前位置,当滚动条到底元素后元素会处于设置一直处于设置所在的位置
第八章 响应式设计
- 小屏幕上table无法换行的一种解决方法
table{
width: 100%;
border-spacing: 0;
}
@media screen and (max-width: 50em){
/* 变为块元素竖直排列 */
table,thead,tr,td,th{
display: block;
}
/* 将表头移除 */
thead tr{
position: absolute;
top: -999px;
left: -999px;
}
/* 每个行之间添加间隔 */
tr{
margin-bottom: 1em;
}
}
- img标签src对于不同分辨率使用不同图片可以使用
srcset
属性实现
<img
src="cat-small.jpg"
srcset="cat-small.jpg 560w,
cat-medium.jpg 800w,
cat-big.jpg 1280w
" alt="小猫">
第十二章 对比、颜色和间距
- 标题、段落等内容高度是由行高决定的,所以内容盒子高度是大于字号高度的,网页中的默认行高是1.4,从
<body>
继承