CSS查漏补缺

CSS

background

背景属性：
background-attachment
作用：
背景图像是否固定或者随着页面的其余部分滚动。

background简写属性顺序：

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

css文本格式

对齐方式：text-align: justify
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）

// 转换字母大小写
p.uppercase {text-transform:uppercase;}  // 大写
p.lowercase {text-transform:lowercase;}  // 小写
p.capitalize {text-transform:capitalize;}  // 首字母大写

text-indent: 50px; // 文本缩进

// 设置文字方向：右到左
div{
    direction:rtl;
    unicode-bidi: bidi-override; //unicode-bidi 属性与 direction 属性一起使用，来设置或返回文本是否被重写，以便在同一文档中支持多种语言。
}

// 设置字母与字母之间的间距，汉字的间距
letter-spacing:2px
// 设置英文单词之间的间距
word-spacing:30px;

// 设置元素的垂直对齐方式
 vertical-align:text-top;

css 链接（link）

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

列表样式 ul ol

ul
{
    list-style: square url("sqpurple.gif");
}

// list-style简写属性 顺序
// list-style-type
// list-style-position (有关说明，请参见下面的CSS属性表)
// list-style-image

表格 Table

// 折叠边框
table
{
    border-collapse:collapse;
}

轮廓 outline属性

outline是不占空间的，既不会增加额外的width或者height（这样不会导致浏览器渲染时出现reflow或是repaint）

Position 定位

position: sticky;定位：基于用户的滚动位置来定位
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}

clip属性

// 裁减一张图片
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}

css对齐

• 垂直居中还可以设置容器上下padding相同来实现，但容器的height会随着文本行数的增加而增大
• 多行文本可使用 vertical-align: middle;来实现元素的垂直居中，但是如果子元素的内容体积大于父元素的内容体积时，仍然会溢出，后面需要使用文字溢出处理来解决。

css计数器

• CSS 计数器根据规则来递增变量。
• CSS 计数器使用到以下几个属性：
  • counter-reset - 创建或者重置计数器
  • counter-increment - 递增变量
  • content - 插入生成的内容
  • counter() 或 counters() 函数 - 将计数器的值添加到元素

要使用 CSS 计数器，得先用 counter-reset 创建：

body {
  counter-reset: section;
}
 
h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

ol {
  counter-reset: section;
  list-style-type: none;
}
 
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

CSS3部分

边框：

border-image属性，指定边框的图像

背景：

background-clip属性，规定背景的绘制区域
background-origin属性，规定背景图片的定位区域

渐变：

线性渐变
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
重复的线性渐变

#grad {
  /* 标准的语法 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

径向渐变
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
重复的径向渐变

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

2D转换：

skew()
transform:skew( [,]);
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

matrix()
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能

3D转换：

过渡属性transition:
简写顺序：

transition-property  // 指定css属性name
transition-duration  // 指定过渡时间
transition-timing-function  // 指定过渡效果的转速曲线
transition-delay     // 指定效果开始的等待时间

css3动画

css3多列

多列属性：

column-count  // 指定需要分割的列数
column-gap    // 指定列与列间的间隙
column-rule-style // 指定列与列间的边框样式
column-rule-width // 指定两列的边框厚度
column-rule-color // 指定两列的边框颜色
column-rule  // column-rule-*的简写属性
column-span  // 指定元素跨越多少列
column-width // 指定列的宽度
columns      // column-width 和 column-count 的简写
column-fill  // 指定如何填充列

css3用户界面：

css3调整尺寸resize: resize属性指定一个元素是否应该由用户去调整大小

div
{
    resize:both;
    overflow:auto;
}

设置后，右下角会出现一个符号，可以鼠标点击拉伸调整大小

外形修饰outline-offset:
outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓

弹性盒子

属性	描述
display	指定 HTML 元素盒子类型。
flex-direction	指定了弹性容器中子元素的排列方式
justify-content	设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行。
align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow	flex-direction 和 flex-wrap 的简写
order	设置弹性盒子的子元素排列顺序。
align-self	在弹性子元素上使用。覆盖容器的 align-items 属性。
flex	设置弹性盒子的子元素如何分配空间。
flex-grow	设置或检索弹性盒的扩展比率。
flex-shrink	设置或检索弹性盒的收缩比率。
flex-basis	设置或检索弹性盒伸缩基准值。

CSS3多媒体查询

CSS响应式设计

viewport 是用户网页的可视区域。
viewport 翻译为中文可以叫做"视区"

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML5<picture>元素:
HTML5 的 <picture> 元素可以设置多张图片

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

css网格布局grid