CSS/CSS3复习

【第一天】

【】选择器：简单选择器、组合选择器、伪类选择器、伪元素选择器、属性选择器

【】选择器优先级：ID选择器 > 类、伪类、属性选择器 > 元素、伪元素选择器 > 通配符、子类选择器、兄弟选择器 > 继承的样式没有权值

【】使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。如果不希望对子元素应用不透明度，可使用 RGBA 颜色值

【】背景属性：background-color. Background-image. Background-repeat(repeat-x / repeat-y / no-repeat). Background-attachment(fixed / scroll). Background-position(right top) 可以按照前面的属性顺序简写 background 属性

【】背景属性还有： background-size(length / percentage / cover / contain). Background-clip. Background-origin(border-box / padding-box / content-box)。前者指定绘制区域，后者指定背景图像位置

【】边框属性： border-style border-width border-color(均可设置一到四个值) 可为一到四条边设置简写边框 border。 边框属性还有 border-radius

【】垂直外边距会发生合并，发生在兄弟元素/父子元素/自身元素中。只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并

【】margin 可以是负值，padding 不可以为负值

【】轮廓（outline）与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。 outline（简写，style必须，其他两可选） outline-style outline-color outline-width outline-offset（指定轮廓与元素的边缘或边框之间的空间）

【】对于 W3C compliant CSS：如果定义了 color 属性，则还必须定义 background-color 属性

【】文本属性：color letter-spacing line-height. Text-align. Vertical-align. Text-decoration. Text-indent. Text-shadow. White-space. Word-spacing text-overflow. Direction. Unicode-bidi. Text-transform

【】字体属性：font（简写属性） font-family（必须） font-size（必须） font-style font-weight font-variant

【】向 HTML 页面添加图标的最简单方法是使用图标库，将指定的图标类的名称添加到任何行内 HTML 元素（如 <i> 或 <span>）

【】链接的四种状态：（:link. :visited. :hover. :active）

【】列表属性： list-style（简写属性，按顺序） list-style-type（none） list-style-position（inside / outside） list-style-image

【】css表格： https://www.w3school.com.cn/css/css_table.asp

【第二天】

【】Display与visibility（hidden / visible），设置元素的 display 属性仅会更改元素的显示方式，而不会更改元素的种类。因此，带有 display: block; 的行内元素不允许在其中包含其他块元素

【】Max-width与width在正常情况下表现一致，区别在于当窗口小于当前宽度时，max-width会缩短，而width是增加滚动条

【】position（static / relative / absolute / fixed / sticky） clip：配合绝对定位，裁剪绝对定位元素，唯一合法的形状值是：rect (top, right, bottom, left)

【】溢出 overflow（visible / hidden / scroll / auto） overflow-x overflow-y

【】浮动 float（none / left / right / inherit）， 清除浮动： clear（none / left / right / both / inherit）。完整的清除浮动： .clearfix::after {content: ‘’;clear:both; display:block}

【】块级元素的水平居中推荐margin:auto 文本居中推荐text-align:center

【】水平垂直居中对齐：（1）position + transform （2）flex布局（justify-content + align-items）

【】伪类名称对大小写不敏感。 :hover :first-child :focus :first-child :last-child :nth-child https://www.w3school.com.cn/css/css_pseudo_classes.asp

【】全部伪元素： ::first-line ::first-letter ::before ::after ::selection。 其中前两项必须和块级元素一起使用，中间两项需要和 content 属性配置使用，最后一个可以和 color background cursor outline 属性配合使用

【】Css下拉菜单，可以动手写一写：https://www.w3school.com.cn/css/css_dropdowns.asp

【】精灵图：background-image background-position 属性设置背景图像的起始位置

【】属性选择器：[attribute] [attribute=value] [attribute~=value] [attribute|=value] [attribute^=value] [attribute$=value] [attribute*=value]

【】Css计数器：counter-reset counter-increment content counter() 或 counters() 函数

【】CSS 边框图像 border-image

【】 线性渐变：background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 其中 direction 可以是（to right / to bottom right / deg)，颜色可以是 rgba 值。 重复线性渐变： background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

【】径向渐变：background-image: radial-gradient(shape size at position, start-color, ..., last-color);

【】css阴影效果 text-shadow / box-shadow： 水平 垂直 模糊效果 颜色。 使用逗号可以加多个阴影

【】CSS text-overflow 属性规定应如何向用户呈现未显示的溢出内容，取值 clip / ellipsis

【】css引入外部字体规则 @font-face {font-family: ‘’; src:url();}

【第三天】

【】css 2D转换：translate() translateX() translateY() rotate() scale() scaleX() scaleY() skew() skewX() skewY() matrix()。写在一起的语法是matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

【】css 3D转换也是使用 transform 属性，使用的方法和2D 很像

【】css过渡属性： transition(简写属性) Transition-timing-function. Transition-delay. Transition-duration. Transition-property。可以给一个dom元素设置多个过渡效果，使用逗号隔开

【】css动画属性：@keyframes animation animation-delay animation-duration animation-direction animation-timing-function animation-iteration-count animation-name animation-fill-mode animation-play-state

【】CSS object-fit 属性用于规定应如何调整 <img> 或 <video> 的大小来适应其容器。取值为 fill / contain / cover / none / scale-down

【】Css多列布局：column-count column-width column-fill column-rule column-rule-width column-rule-color column-rule-style column-gap column-span columns(简写)

【】resize 属性规定是否可由用户调整元素的尺寸。取值为 none|both|horizontal|vertical

【】Css变量：var()函数，语法为 var(name, value)，第二个参数可选是回退值。变量必须是双横线开头，分全局变量和局部变量，在选择器中定义，比如全局变量 :root {--blue: #1e90ff;}

【】Css变量和媒体查询一起使用可以实现全局样式跟随屏幕尺寸改变

【】Css flexbox布局中，关于父容器所使用的属性有：flex-direction（row / row-reverse / column / column-reverse），flex-wrap（nowrap / wrap / wrap-reverse）, flex-flow（前两者属性简写）， justify-content（flex-start / flex-end / center / space-around / space-between），align-items（stretch / center / flex-start / flex-end / baseline），align-content（stretch / space-between / space-around / center / flex-start / flex-end）

【】Css flexbox布局中，flex容器的直接子元素会自动成为弹性元素，关于子元素所使用的属性有：order（值是数字，改变元素展示顺序），flex-grow（规定某个元素相对于其他元素增长多少，默认值 0），flex-shrink（规定某个元素相对于其他元素收缩多少，默认值 1），flex-basis（初始长度），flex（前三属性简写），align-self（规定弹性容器内所选项目的对齐方式）

【】媒体查询：@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {}

【】在 img 与 video 元素中，如果将 max-width 设置为 100%，则元素将按比例放大缩小，但绝对不会放大到大于其原始尺寸

【】css网格布局模块： display 元素设置为 grid 或 inline-grid。 设置行列间隙：grid-row-gap / grid-column-gap / grid-gap。 设置行列线起始：grid-row-start/end grid-column-start/end ， grid-template-columns 属性定义网格布局中的列数，并可定义每列的宽度 ， grid-template-rows 属性定义每列的高度， justify-content 属性用于在容器内对齐整个网格 ， align-content 属性用于垂直对齐容器内的整个网格 grid-column 属性是 grid-column-start 和 grid-column-end 属性的简写属性( grid-column: 2 / span 3; ) grid-area 属性可以用作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性( grid-area: 2 / 1 / span 2 / span 3 )