本文章记于2021.04.26
1.默认的，一个块级元素的内容宽度是其父元素的100%，其高度与其内容高度一致
内联元素的height width与内容一致
2.块级元素是垂直组织的
每个块级元素会在上一个元素下面另起一行，它们会被设置好的margin 分隔
3.如果两个相邻的元素都设置了margin 并且两个margin有重叠，那么更大的设置会被保留，小的则会消失 --- 这被称为外边距叠加
4.可以指定 flex 的最小值
每个flex 项将首先给出200px的可用空间，然后，剩余的可用空间将根据分配的比例共享
article {
flex: 1 200px;
}
article:nth-of-type(3) {
flex: 2 200px;
}
5.flex缩写
flex:flex-grow flex-shrink flex-basis
6.水平垂直对齐
align-items 控制 flex 项在交叉轴上的位置
默认的值是 stretch，其会使所有 flex 项沿着交叉轴的方向拉伸以填充父容器
如果父容器在交叉轴方向上没有固定宽度（即高度），则所有 flex 项将变得与最长的 flex 项一样长（即高度保持一致）
在默认情况下得到相等的高度的列
center 值会使这些项保持其原有的高度，但是会在交叉轴居中
这就是那些按钮垂直居中
justify-content控制 flex 项在主轴上的位置
默认值是 flex-start，使所有 flex 项都位于主轴的开始处
stretch，center，flex-start，flex-end
space-around 是很有用的——使所有 flex 项沿着主轴均匀地分布，在任意一端都会留有一点空间
space-between，不会在两端留下任何空间（和 space-around 非常相似）
7.flex显示顺序order
- 所有 flex 项默认的order值是 0
- order 值大的 flex 项比 order 值小的在显示顺序中更靠后
- 相同 order 值的 flex 项按源顺序显示。所以假如有四个元素，其 order 值分别是2，1，1和0，那么它们的显示顺序就分别是第四，第二，第三，和第一
- 第三个元素显示在第二个后面是因为它们的 order 值一样，且第三个元素在源顺序中排在第二个后面
8.网格布局
网格是由一系列水平及垂直的线构成的以一种布局模式
一个网格通常具有许多的列（column）与行（row），以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽（gutter）
除了长度和百分比，我们也可以用fr这个单位来灵活地定义网格的行与列的大小。这个单位表示了可用空间的一个比例
fr单位分配的是可用空间而非所有空间，所以如果某一格包含的内容变多了，那么整个可用空间就会减少，可用空间是不包括那些已经确定被占用的空间的
使用 grid-column-gap 属性来定义列间隙；使用 grid-row-gap 来定义行间隙；使用 grid-gap 可以同时设定两者
间隙距离可以用任何长度单位包括百分比来表示，但不能使用fr单位
可以使用repeat来重复构建具有某些宽度配置的某些列
隐式网格就是为了放显式网格放不下的元素，浏览器根据已经定义的显式网格自动生成的网格部分
minmax函数为一个行/列的尺寸设置了取值范围。比如设定为 minmax(100px, auto)，那么尺寸就至少为100像素，并且如果内容尺寸大于100像素则会根据内容自动调整
也可以用-1来定位到最后一条列分隔线或是行分隔线，并且可以用负数来指定倒数的某一条分隔线
但是这只能用于显式网格，对于隐式网格-1不一定能定位到最后一条分隔线
grid-template-areas属性的使用规则如下：
需要填满网格的每个格子
对于某个横跨多个格子的元素，重复写上那个元素grid-area属性定义的区域名字
所有名字只能出现在一个连续的区域，不能在不同的位置出现
一个连续的区域必须是一个矩形
使用.符号，让一个格子留空
9.浮动
float属性最初只用于在成块的文本内浮动图像
浮动内容仍然遵循盒子模型诸如外边距和边界
浮动通常用于创建多个列布局
所有在浮动下面的自身不浮动的内容都将围绕浮动元素进行包装
此处清除浮动clear: both;
clear可以取三个值：
-
left：停止任何活动的左浮动 -
right：停止任何活动的右浮动 -
both：停止任何活动的左右浮动
box-sizing: border-box;盒子的宽度取值为 content + padding + border，当增加内边距或边界的宽度时，不会使盒子更宽——而是会使内容调整得更窄
10.定位
（1）静态定位：static
静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置
（2）相对定位：relative
修改元素的位置，需要使用top，bottom，left和right属性
（3）绝对定位：absolute
定位上下文：
哪个元素是绝对定位元素的“包含元素“？这取决于绝对定位元素的父元素的position属性
如果所有的父元素都没有显式地定义position属性，那么所有的父元素默认情况下position属性都是static。结果，绝对定位元素会被包含在初始块容器中
绝对定位元素会被放在<html>元素的外面，并且根据浏览器视口来定位
绝对定位元素在HTML源代码中，是被放在<body>中的，但是在最终的布局里面，它离页面(而不是<body>)的左边界、上边界有30px的距离
改变定位上下文 —— 绝对定位的元素的相对位置元素
通过设置其中一个父元素的定位属性 —— 也就是包含绝对定位元素的那个元素（如果要设置绝对定位元素的相对元素，那么这个元素一定要包含绝对定位元素）
网页也有一个z轴：一条从屏幕表面到人脸的虚线
z-index：
默认情况下，定位的元素都具有z-index为auto，实际上为0
z-index只接受无单位索引值
（4）固定定位：fixed
绝对定位固定元素是相对于<html>元素或其最近的定位祖先，而固定定位固定元素则是相对浏览器视口本身
（5）sticky
相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起10像素）为止，此后它就变得固定了
用法：是创建一个滚动索引页面
在此页面上，不同的标题会停留在页面顶部
11.多列布局
column-count 将创建指定数量的列，使用 column-gap改变列间间隙
用 column-rule在列间加入一条分割线
column-rule 是 column-rule-color 和column-rule-style的缩写，接受同 border 一样的单位
值得一提的是这条分割线本身并不占用宽度
它置于用 column-gap 创建的间隙内
如果需要更多空间，需要增加 column-gap 的值
多列布局的内容被拆成碎块
增加旧属性 page-break-inside: avoid 能够获得更好的浏览器支持
break-inside: avoid;
page-break-inside: avoid;
12.响应式网页设计（responsive web design，RWD）
RWD指的是允许Web页面适应不同屏幕宽度因素等，进行布局和外观的调整的一系列实践
设计网站时，有两个选择：
可以创建一个“液态”站点，它会拉伸以充满整个浏览器视窗；
或是一个“固定宽度”站点，它有一个以像素计的固定尺寸
响应式设计,描述为三种技术的混合使用
- 液态网格
- 液态图像，通过使用相当简单的将设置max-width属性设置为100%的技术，图像可以在包含它们的列变得比图像原始尺寸窄的时候，缩放得更小，但总不会变得更大
- 媒体查询，和所有尺寸的屏幕都使用一种布局不同的是，布局是可以改变的：侧栏可以在小屏幕上重新布局，而替代用的导航栏也可以显示出来
使用视口单位vw来实现响应式排版,使用了calc()，如果将vw单位加到了使用固定大小（例如em或者rem）的值组，那么文本仍然是可放缩的
响应式Web设计不是单独的技术，它是描述Web设计的一种方式、或者是一组最佳实践的一个词，它是用来建立可以响应查看内容的设备的样式的一个词
媒介查询：
媒体查询，以及样式改变时的点，被叫做断点
使用媒体查询时的一种通用方式是，为窄屏设备（例如移动设备）创建一个简单的单栏布局，然后检查是否是大些的屏幕，在知道有足够容纳的屏幕宽度的时候，开始采用一种多栏的布局
这经常被描述为移动优先设计
视口元标签
<meta name="viewport" content="width=device-width,initial-scale=1">
这个元标签告诉移动端浏览器，它们应该将视口宽度设定为设备的宽度，将文档放大到其预期大小的100%，在移动端以希望的为移动优化的大小展示文档
视口元标签一起，可以使用另外几个设定，但大体说来，上面那行就是要使用的
initial-scale：设定了页面的初始缩放，我们设定为1
height：特别为视口设定一个高度
minimum-scale：设定最小缩放级别
maximum-scale：设定最大缩放级别
user-scalable：如果设为no的话阻止缩放
13.媒介查询
@media media-type and (media-feature-rule) {
/* CSS rules go here */
}
由以下部分组成：
一个媒体类型，告诉浏览器这段代码是用在什么类型的媒体上的（例如印刷品或者屏幕）；
一个媒体表达式，是一个被包含的CSS生效所需的规则或者测试；
一组CSS规则，会在测试通过且媒体类型正确的时候应用
（1）媒体类型为：
all
print
screen
speech
媒体类型是可选的，如果你没有在媒体查询中指示一个媒体类型的话，那么媒体查询默认会设为用于全部媒体类型
（2）媒体特征规则
最常探测的特征是视口宽度，而且我们可以使用min-width、max-width和width媒体特征
一个受到良好支持的媒体特征是orientation，我们可以用它测得竖放（portrait mode）和横放（landscape mode）模式
标准的桌面视图是横放朝向的，在这种朝向上能够表现良好的设计，在处于竖放模式的手机或平板电脑上可能不会表现得这么好。对朝向的测试可以建立一个为竖放设备优化的布局
四级规范的一部分，hover媒体特征被引入了进来。这种特征意味着可以测试用户是否能在一个元素上悬浮，这也基本就是说他们正在使用某种指点设备，因为触摸屏和键盘导航是没法实现悬浮的
@media (hover: hover) {
body {
color: rebeccapurple;
}
}
四级规范中，出现了pointer媒体特征。它可取三个值：none、fine和coarse
fine指针是类似于鼠标或者触控板的东西，它让用户可以精确指向一片小区域
coarse指针是你在触摸屏上的手指。none值意味着，用户没有指点设备，也许是他们正只使用键盘导航，或者是语音命令
（1）媒体查询的与逻辑：
为了混合媒体特征，可以以与在上面使用and很相同的方式，用and来混合媒体类型和特征。
@media screen and (min-width: 400px) and (orientation: landscape) {
body {
color: blue;
}
}
（2）媒体查询的或逻辑：
使用逗号分开这些查询
媒体查询的非逻辑：
用not操作符让整个媒体查询失效，直接反转了整个媒体查询的含义
@media not all and (orientation: landscape) {
body {
color: blue;
}
}
网友评论