初学Web笔记 css day07

固定定位
高级选择器
弹性盒模型布局

一.行内块
1.行内块水平居中
给父盒子设置文本水平居中 text-align:center;
2.去除行内块自带外边距
给父盒子设置字体大小为0 font-size:0;

二.固定定位
position: fixed;
会脱离文档流，相对于当前的窗口
三.高级选择器
1.属性选择器
标签[属性名] 查找标签中含有指定属性
标签[属性名=”属性值”] 查找标签中属性为固定值的
标签[属性名^=”属性值”] 查看属性中以指定的值开始的元素
标签[属性名$=”属性值”] 查看属性中以指定的值结束的元素
标签[属性名*=”属性值”] 查找属性中含有某个值的元素
2.结构伪类选择器
查找第1个
:nth-child(1) 或者 :first-child
查找最后1个
:nth-child(最后一个的编号) 或者 :last-child
查找第n个
:nth-child(n)
查找倒数第n个
:nth-last-child(n)
查找奇数
:nth-child(odd) 或者 :nth-child(2n+1) 或者 :nth-child(2n-1)
查找偶数
:nth-child(even) 或者 :nth-child(2n)
查找倍数
:nth-child(3n)
3.目标伪类选择器
:target
通过a标签的href属性触发目标伪类选择器，通过关联元素的id来进行查找，在目标元素上添加 :target
文字1

三.弹性布局
之前接触的布局方式：流失布局、浮动布局、定位布局。
弹性布局（flex布局）：flexbox，弹性盒模型
优势：自动分配空间，不需要计算
劣势：父盒子需要高度
1.开启弹性布局
在父盒子中添加属性 display: flex
2.主轴的排列方向
flex-direction
分为行(横向)模式和列(纵向)模式
row 行模式，正向排列 （默认的）
row-reverse 行模式，反向排列
column 列模式，正向排列
column-reverse 列模式，反向排列
说明：主轴可以是水平，也可以是垂直；如果设置主轴为水平，垂直方向为交叉轴，如果设置主轴为垂直，水平方向为交叉轴。
3.容器和项目
父盒子叫做容器，给父盒子开启弹性布局
子盒子叫做项目，会将行内元素块状化
4.主轴的对齐方式
Justify-content 定义项目在主轴上的对齐方式
flex-start 主轴起点对齐
flex-end 主轴终点对齐
center 居中对齐
space-between 两端对齐
space-around 每个项目平均分配间距
space-evenly 项目之间的间距是相同的
5.项目的换行
flex-wrap
no-wrap 不换行，默认的
wrap 换行，当容器的宽度小于项目宽度，会出现换行
wrap-reverse 在换行的同时，反向排列
6.主轴排列和项目换行的综合写法
flex-flow: 主轴排列 项目换行
例如： row wrap
7.交叉轴对齐方式
align-items:
flex-start 起点对齐
flex-end 终点对齐
center 居中对齐
注意事项：只是针对于交叉轴只有一行