CSS学习笔记
HTML与CSS布局
1、html布局标签：
推荐使用有具体语义的标签，而不是一味的使用div。
头部标签：header，适用于一个区域头部的内容。
底部标签：footer，适用于一个区域底部的内容。
主标签：main，控制页面主要内容区域。
导航标签：nav
内容标签：article，适用于独立的内容区域。
局部标签：section，适用于内容区域很多相似区域的组合，与ul，li类似。
挂件标签：aside，适用于挂件区域，侧边栏。
2、html文本标签
段落标签：p
换行标签：br
水平线标签：hr
无语义的文件标签：span
申明一段文本采用标签：small
时间标签：time
进度条标签：progress
强调标签：strong
3、盒子模型
外边距：margin（上右下左）一个控制四个边，两个：第一个控制上下，第二个控制左右
内边距：padding（同上）
边线：border（样式宽度颜色）
盒子居中，margin：0 auto
外边距可以有负值
边距合并：如果有一个向下的边距，一个向上的边距，实际的边距是取这两个边距的我最大值。
控制div大小：不受内边距的影响，box-sizing：border-box。
圆角：border-radius属性
轮廓线：outline
溢出：overflow：scroll（滚动条），overflow：auto（内容装不下显示滚动条，显示的我下不显示滚动条）
文本溢出显示点点：三个属性控制，overflow：hidden，white-space：nowrap，text-overflow：ellipsis。
盒子大小控制：max-width，min-width，max-height，min-height
块级元素撑满父级元素：height：fill-available
行级元素撑满父级元素：首先讲行级元素变成块级元素然后进行操作。display：inline-block height：fill-available weight：fill-available
宽度随内容自适应：width：fit-content
盒子根据内容尺寸自适应：父级元素，width：max-content，width：min-content
文本缩进：text-indent
盒子阴影：box-shadow：
4、选择器
选择器是快速找到页面中的元素，并对其进行操作。
结构选择器：空格表示后代，包括子代孙代等，>表示子代。
后代选择器：作用于某一类元素
main article section
子代选择器：作用于特定的元素
main article>section
兄弟选择器：作用于同一级别的元素
main article h1～h2
main article h1+h2（作用于临近h1的h2）
属性选择器：
h1[title] h1[title="name"]
伪类选择器：结构
div :first-child（div后代里面的第一个元素）
div>:first-child（div中的第一个元素）
div h1:first-of-type（div中类型为h1的第一个元素）
div :nth-child (1) （元素编号）
div h1:nth-of-type (1) （与上面一样）
input:checked+label（表示input选中紧挨着的label元素）
input:valid（验证有效）
input:invalid（验证无效）
table tr:nth-child (odd) （奇数行）
table tr:nth-child (even) （偶数行）
5、背景与渐变
背景颜色：background-color
背景图片：background-image
背景裁切：background-clip
背景重复：background-repeat
背景固定：background-attachment
背景定位：background-position
背景尺寸：background-size
线性渐变：background：linear-gradient(90deg,red,yellow,blue)
镜像渐变：background：radial-gradient(10px10px,red,green,blue)
标志位：background：linear-gradient(45deg,red50%,green 50%)
6、Float（浮动）
行级元素float之后会变成块级元素。
清除浮动：clear：
父级div中含有两个子级div，两个子级div采用浮动，如果不设定父级div的高度，父级则无法感知子级div的高度。如何不设定父级div的高度解决这个问题？
（1）两个子级div后再设定一个块级标签，将其清除浮动，那么父级能够感知其位置，则自然能够适应上面两个子级div的高度。
（2）采用伪类元素方法，在父级元素之后追加一个内容，将其清除浮动，并设置为块级元素。main::after{content:"",display:block,clear:both}
（3）触发BFC机制：在父级元素中设置：overflow:hidden或者overflow:auto
7、定位
相对定位：position：relactive，其空间位是保留的。相对于原来的位置进行偏移操作。
绝对定位：position：absolute，其空间位是丢失的。默认情况下是参照页面进行偏移，如果想要其没有那么灵活，则需要对其父元素也设定定位属性，那么子元素就会参照父元素的位置进行偏移操作。
如果子元素没有设定宽度和高度，父元素和子元素都设定了定位元素，那么可以改变子元素的尺寸。
如果子元素相对于父元素进行定位，如果父元素有滚动条的时候，那么子元素也会跟着滚动条进行滚动。
定位元素遇到多个div层叠时候，需要z-index属性来控制叠层的优先级，一般定位元素的优先级大于非定位元素，多个定位元素，后加载的定位元素优先级大于先加载。
粘性定位：position：sticky top：0 将其定位到父元素的顶部。
固定定位：position：fixed，参照页面进行偏移，将元素固定在页面的某个位置。
8、弹性盒子
（1）基本元素：盒子和元素，弹性盒子模型解决的就是如何将元素放到盒子里面。
（2）普通盒子变成弹性盒子display：flex
（3）弹性盒子布局的方向
行排列：flex-direction：row/row-reverse
列排列：flex-direction：column/column-reverse
（4）弹性盒子的元素，默认会随着弹性盒子的大小进行压缩，如果不让其压缩，则可以换行排列，属性：flex-wrap：wrap
（5）元素控制方向和折行属性：flex-flow：row wrap
（6）主轴对齐方式：justify-content：flex-start/flex-end/center/space-between/space-around/space-evenly（主轴的开始/主轴的结尾/中间/两端对齐/左右两边等边距/完全平均分配）
（7）交叉轴对齐方式：align-items：flex-start/flex-end/center/stretch（交叉轴开始/结尾/中间/拉称）
（8）换行交叉轴对齐方式：align-content：flex-start/flex-end/center/space-between/space-around（只适用于多行显示的弹性容器，它的作用是当flex容器在交叉轴上有多余的空间时，对元素的对齐处理。）
（9）单个元素对齐方式（设置的是弹性盒子里面的元素）：align-self：flex-start/flex-end/center/stretch（拉撑时高度不能够设置固定）
（10）元素可用空间的分配：元素自动占满剩余的弹性盒子：flex-grow：1（如果存在多个元素则多个元素平均分配）每个元素1等份flex-grow：0默认大小。
（11）元素缩小：flex-shrink：0/1/2不缩小，每个元素都是指定的宽度或者高度。其计算方式每个元素的宽度和高度之和减去弹性盒子宽度或者高度剩余下来的除以flex-shrink之和，每个元素缩小的宽度和高度就可以知道。
（12）弹性元素组合定义：flex-grow，flex-shrink，flex-basis（主轴基准尺寸类似于宽度和高度，优先级大于宽度和高度，小于最大宽度高度）flex：1 2 200px
（13）元素的排列顺序：order 默认都是0顺序越大越靠后。
9、栅格布局
（1）栅格布局就是使用水平线和垂直线划好的一块一块的小格子。首先是容器，然后是栅格，最后是栅格里的元素。
（2）栅格属性：display:grid。
（3）水平线属性：grid-template-rows：repeat(5,20%)，垂直线属性：grid-template-columns：repeat(5,20%)。一般推荐重复形式，也可以直接写数值。
（4）绘制栅格的方法：
1）数值法，grid-template-rows：50px 50px
2）重复法，grid-template-rows：repeat(2,50%)
3）自动填充法：grid-template-rows：repeat(auto-fill,100px)
4）比例法：grid-template-rows：repeat(3,1fr)
5）限定法：控制栅格的水平方向或者垂直方向的范围：grid-template-rows：repeat(2,minmax(50px,100px))
（5）栅格间距属性：row-gap：5px， column-gap：5px，gap：5px 5px。
（6）控制元素在栅格中的位置：
1）栅格线编号法：grid-row-start（行开始）grid-row-end（行结束）grid-column-start（列开始）grid-column-end（列结束）
简写方式：grid-row： 1/2 grid-column：1/2
2）栅格命名法：grid-template-row：repeat（3 [r-start] 1fr [r-end]），
grid-template-column：repeat（3 [c-start] 1fr [c-end]）
grid-row-start：r-start 1（列同上）
grid-row-end：r-end 1（列同上）
简写方式：
3）偏移量法：偏移量法是首先确定元素行的开始位置和列的开始位置，然后进行偏移确定所占的空间。
grid-row-start：2 grid-column-start：2
grid-row-end：span 3 grid-column-end：span 3
简写方式：grid-row：1/span 1 grid-column：1/span 3
4）区域定位法：与边线法类似，都是控制边线，grid-area：2/2/3/3（行的开始/列的开始/行的结束/列的结束）（上左下右）
5）区域命名法：首先画好栅格，然后对栅格每一块区域进行命名。grid-template-area："header
header" "nav main" "footer footer"（该法是对每一行的栅格进行命名）然后根据grid-area指定元素所在的区域，grid-area：header，footer，nav，main，复杂的布局可以栅格里面在进行栅格划分。
6）区域占位，栅格划好之后，如果想对指定区域不需要进行合并，则不需要对区域进行命名，可以采用.进行占位。grid-template-area：“. .”“. .”“footer footer”
（7）栅格的流动方向：栅格默认的流动方向是从左到右，从上到下。行排列。
grid-auto-flow：row
（8）栅格对齐的方式：如果栅格不占满整行或者整列，则需要考虑其对齐方式，对齐方式与弹性盒子类似，水平对齐方式：justify-content：start/center/end/space-around/space-between/space-evenly，
垂直对齐方式：align-content：start/center/end/space-around/space-between/space-evenly简写：place-content：center end（垂直方向 水平方向）
（9）栅格元素的对齐方式：元素水平对齐方式：justify-items：start/end/center/stretch（开始/结束/中间/拉撑）元素垂直对齐方式：
align-items：start/end/center/stretch（开始/结束/中间/拉撑）简写：place-items：center end（垂直方向 水平方向）
（10）栅格元素独立控制对齐方式：水平独立控制：justify-self：
start/end/center（开始/结束/中间）垂直独立控制：align-self：
start/end/center（开始/结束/中间）简写：place-self：center end（垂直方向 水平方向）
10、变形与透视
（1）移动
属性：transform：translateX()
/translateY() /translate3d(x，y，z）向X轴或者Y轴或者3D进行移动。transition：移动过程。简写：transform：translate(x轴移动量，y轴移动量)
控制。
（2）缩放
属性：transform：scaleX()/scaleY()简写：scale(x,y) 。缩放Z轴是将父元素的Z轴的我距离进行放大或者缩小，因此作用在父元素上。transform：scaleZ() 。简写：transform:scale3d(x,y,z) 作用在父元素上。
（3）旋转
属性：transform：rotateX()
/rotateY()/rotate Z() 简写：transform：rotate3d(1,0,0,90deg) 3d中表示的是xyz旋转的向量，向量越大，旋转的力度就越大，后面表示旋转角度。
（4）倾斜
属性：transform：skewX()
/skewY() 简写：skew(45deg,45deg)
（5）参考基点
2D基点属性：transform-origin：left top/50%50%
3D基点属性：transform-origin：left top 100px，由于Z轴无穷大，因此只能用数值表示。
（6）透视
基本属性：transform：perspective(100px)
3d样式：transform-style:preserve-3d
