许笋的blog

小平房

0%

web前端学习记录（css基础）

Posted on Edited on Disqus:

断断续续接触到前端，从初步基本的css和js调试，接触的时间多了，不免要解开那些曾经规避的问题，开始吧。
tailwindcss

2020-12-16
刚好有一个机会可以边干活边学，那真是学习的最佳途径之一了，找了视频看看记录下。

  1. css样式基础
    1. css引入方式、优先级
    2. css选择器
    3. 伪类
    4. css继承、层叠
    5. css权值、优先级
    6. 文本属性
    7. 盒子模型
    8. css背景、列表
      1. 背景
      2. 列表
    9. css浮动
    10. css-position
    11. 盒子定位和positon的区别
  2. css进阶
    1. 选择器
      1. 基本选择器
      2. css3结构类
      3. 伪元素
    2. 圆角理论
    3. 背景图片
    4. css渐变
      1. 线性渐变
      2. 径向渐变
    5. 文本相关
    6. transform
    7. 矩阵matrix
    8. tansition 过渡
    9. css动画

css样式基础

css所有的属性每条后面都可以加分号，包括最后一条也可以加，建议都加。

css引入方式、优先级

行内，内部，外部，外部引入
优先级，行内 》内部样式 》外部样式

css选择器

  • 标签选择器。html标签
  • 类选择器。class属性，.class
  • ID选择器。id属性，#id
  • 全局选择器*{}
  • 群组选择器
  • 后代选择器。用空格隔开

伪类

链接伪类，html各组件都可以使用这几个伪类p:visited等

  • :link
  • :visited
  • :hover
  • :active

这组伪类顺序必须遵守，不然没有效果

css继承、层叠

父元素设置样式，子元素可以继承部分属性

css权值、优先级

标签选择器权值1；类和伪类10；id100；通配符0；行内样式1000
!important 最高的优先级

优先级
id 》class 》标签选择器
同一个元素，多个类样式多次引用的话，样式表中后定义的优先级高

文本属性

  • 块级标签(块级元素)。div，p，h1-h6，ul，ol，dl
  • 行内标签(行内元素)。span，a，b，i，u，em
  • 块级标签，居中对齐
  • 行内标签，居中对齐
  • word-spacing
  • letter-spacing
  • text-decoration
  • text-transfrom

块级元素

  1. 独占一行
  2. 可以设置宽高。如果不设置宽高，那么默认容器的100%。

行内元素

  1. 与其他元素同行显示
  2. 不可以设置宽高
  3. 宽高就是文字或者图片的宽高

盒子模型

  • 内边距padding
  • 外边距margin
  • 宽度属性，width，max-width，min-width
  • 高度属性，同宽度，长度、百分比、auto
  • 那些元素可以设置宽高属性？
    • 块级元素
    • 替换元素，input，img，textarea
  • 边框属性（border），size，color，type
  • 内边距属性（padding），数值不可为负数。top，right，bottom，left，顺时针顺序
  • 外边距属性（margin），数值可为负数。垂直方向上，两个相邻元素都设置外边距，外边距会发生合并，等于最大值。
  • display属性，

css背景、列表

  • backgroud简写。不分先后顺序，之间用空格。
    backgroud-color，backgroud-image，backgroud-position，backgroud-attachment，backgroud-repeat。
  • list-style简写。不分先后顺序，之间用空格。
    list-style-type,list-style-image,list-style-position。

背景

  • 背景颜色。backgroud-color: 颜色 | transparent
  • 背景图片。backgroud-image:URL | none。有图片覆盖在颜色上面。
  • backgroud-repeat:repeat | no-repeat | repeat-x | repeat-y
  • backgroud-attachment:scroll | fixed
  • backgroud-position: 百分比 | 值 | top | right | bottom | left | center,只写一个值，另一个值居中

列表

  • list-style-type
    • ul的 list-style-type: none| disc| circle| square，无，实心圆点，空心圆点，实心方块
    • ol的 list-style-type: none| decimal| lower-roman| upper-roman| lower-alpha| upper-alpha，无，数字整数，小罗马数字，大罗马数字，小英文字母，大英文字母
  • list-style-image: URL| none
  • lsit-style-position: inside| outside，是否环绕

css浮动

css定位机制
普通流、浮动、绝对定位

浮动 float:left| right| none

  • 让元素向左或者向右移动，只能左右不能上下
  • 浮动元素碰到包含框或者另一个浮动框，浮动停止
  • 浮动元素之后的元素将围绕它，之前的不受影响
  • 浮动元素会脱离标准流

浮动高度塌陷。浮动之后父级元素高度丢失为0的现象，需要清楚浮动解决。
清除浮动 clear: none| left| right| both。

清除浮动的常用方法

  1. 浮动元素后使用一个空元素
  2. 浮动元素的容器添加 overflow: hidden
  3. 使用 css3 的 :after 伪元素
.clearfix:after{
  content:".";
  display:block;
  height:0;
  visibility:hidden;
  clear:both;
}

css-position

css定位模型
position包含两个内容

  1. positioned layout module。提供与元素定位和层叠相关的功能。
  2. position 属性。

document tree，html元素的树形结构。
normal-flow，标准流。
containing-block，左右偏移的参考点，就是容器。

定位模型分类

  1. static。自然，静态定位。作用，使元素定位于 常规/自然流 中
    1. 特点。忽略掉 top，bottom，left，right或者z-index声明
    2. 两个相邻的元素的外边距采用最大的那个外边距
    3. 块元素，如果把左右外边距设置成 auto，则左右边距充满，形成居中效果
  2. relative。相对定位。作用，使元素成为 containing-block，也就是成为可定位的祖先元素也就是参照物
    1. 可以使用top，bottom，left，right或者z-index进行相对定位。相对于谁？相对于元素在常规流中的位置
    2. 相对定位的元素不会离开常规流
    3. 任何元素都可以设置relative，它的绝对定位的后代都可以相对它进行绝对定位-超好用
    4. 可以使浮动元素发生偏移，并控制它们的堆叠顺序
  3. absolute。绝对。作用，使元素脱离常规流。
    1. 脱离常规流
    2. 设置尺寸的百分比。百分比比的是谁？最近定位祖先元素
    3. lrtb(left,right,top,bottom)如果设置为0，它将对齐到最近定位祖先的各边，这里衍生出居中
    4. lrtd如果設置成 auto，元素打回原形
    5. 如果没有最近定位祖先元素，会认<body>做父元素
    6. 可以控制堆叠顺序，使用z-index
  4. fixed。固定。作用，类似绝对定位
    1. 跟 absolute 有啥区别？相对于谁做绝对定位，这里是相对于视口（视觉能看到的区域）来说的
    2. 固定定位元素不会随着视口的滚动而滚动
    3. 其他跟绝对定位一样
  5. sticky。磁贴，粘性定位。作用，relative和fixed的完美结合，制造出吸附效果
    1. 如果产生偏移，原位置还是会在常规流中
    2. 如果它的最近祖先元素滚动，那么它的偏移标尺就是最近祖先元素
    3. 如果最近祖先元素没有滚动，那么它的偏移标尺就是视口
    4. 上下左右偏移规则

盒子定位和positon的区别

盒子依靠padding和margin来移动
定位靠元素的位置来移动

css进阶

2020-12-23
进阶的内容，css3的新内容么

选择器

基本选择器

name format
子元素选择器 父元素 > 子元素
相邻兄弟选择器 元素 + 相邻兄弟元素，某元素后面的相邻的那一个
通用兄弟选择器 元素 ~ 相邻兄弟元素 ，某元素后面的所有的兄弟元素
群组选择器 用，分隔

属性选择器
动态伪类选择器

  • 锚点伪类，:link :visited
  • 用户行为伪类，:hover :active :focus

UI元素状态伪类，:enabled :disabled :checked
否定选择器 :not

css3结构类

first-child
last-child
nth-child, nth-child(n)，nth-child(2n)，nth-child(2n+1)
nth-last-child
nth-of-type
only-child，only-of-type
:empty

伪元素

形如 :: 找不到的元素，但是能起作用，伪类是实实在在能找到的元素。

Element::first-line，用于块级元素，第一行
Element::first-letter，首字母，用于块级元素
Element::before，新元素前面插入新内容

  1. 第一个子元素
  2. 行内元素
  3. 内容通过content写入

Element::after，新元素后面插入新内容
Element::selection，选中文本后的背景色和前景色

圆角理论

圆角，border-radius

border-radius: 50%;
-webkit-border-radius: 50%; 
   -moz-border-radius: 50%; 
    -ms-border-radius: 50%; 
     -o-border-radius: 50%;

盒阴影，box-shadow
边界图片

背景图片

背景图片区域，backgroud-clip
背景图片定位，backgroud-origin
背景图片大小，backgroud-size
多重背景图片，backgroud-image:url(image1.png), url(2.png);

css渐变

兼容性
chrome -webkit-
safari -webkit-
firefox -moz-
opera -o-

线性渐变

backgroud: liner-gradient(direction, color1, color2,…)

backgroud: -webkit-linear-gradient(red, blue);
backgroud:    -moz-linear-gradient(red, blue);
backgroud:      -o-linear-gradient(red, blue);
backgroud:         linear-gradient(red, blue);

默认是从上到下
从左到右，to right，兼容性的话还有 right

backgroud: -webkit-linear-gradient(left, red, blue);      /* begin-direction */
backgroud:    -moz-linear-gradient(right, blue);          /* end-direction */
backgroud:      -o-linear-gradient(right, blue);          /* end-direction */
backgroud:         linear-gradient(to right, red, blue);  /* end-direction */

对角线

backgroud: -webkit-linear-gradient(left top, red, blue);      /* begin-level begin-vertical */
backgroud:    -moz-linear-gradient(right bottom, blue);          /* end-level end-vertical */
backgroud:      -o-linear-gradient(right bottom, blue);          /* end-level end-vertical */
backgroud:         linear-gradient(to right bottom, red, blue);  /* end-level end-vertical */

使用角度
标准情况是这样，0deg是向上的，90是向左，180向下，-90向右；但是webkit刚好相反，所以注意兼容
添加多颜色，控制每种颜色的占百分比 red 25%

backgroud: -webkit-linear-gradient(45deg, red, blue);
backgroud:    -moz-linear-gradient(45deg, red, blue);
backgroud:      -o-linear-gradient(45deg, red, blue);
backgroud:         linear-gradient(45deg, red, blue);

重复渐变
repeating-linear-gradient

径向渐变

radial-gradient
重复径向渐变加上 repeating-radial-gradient

文本相关

text-shadow，不常用
word-break，兼容性好。normal，break-all，keep-all。

  • 英文。normal和keep-all类似，break-all就是直接断行
  • 中文。normal和break-all类似，keep-all就是以标点符号来断行。

word-wrap，兼容性好。normal，break-word

text-align-last，兼容性差
text-overflow，文本溢出，兼容性好

字体
@font-face，兼容性好
字体格式，ttf、otf差不多，后者就是不支持ie；woff，最佳格式，压缩版本，但是不支持iOS，那不是也是废的么？
fontsquirrel，可以上传生成特殊字体

@font-face {
   font-family: 'font name';
   src: url('font.ttf') format('truetype'),/*safari,android,ios*/
   url('font.woff'), format('woff'), /*modern browsers*/;
}

transform

2D转换

transform:rotate(deg)
transform:translateX(200px)，translateY，translate
transform:scaleX()，scaleY，scale
transform:skew

3D

transform-origin，设置坐标点

矩阵matrix

transform-style:flat|preserve-3d 套起来的3d效果
perspective-origin，透视效果
backface-visibility，背面元素可见

tansition 过渡

transition-property
transition-duration
transition-timing-function，ease，ease-in
transition-delay

css动画

animation
animation-name:keyframename | none
animation-duration
animation-iteration-count
animation-duration
animation-direaction
animation-fill-mode
animation-play-state

keyframes
@keyframes name{
keyframes-selector {
css-styles;
}
}

动画流畅优化

优化的方法
position-fixed替代 backgroud-attachment
带图片的元素放在伪元素中
用will-change

目前的css动画、变形、渐变都不会触发GPU加速，而是用浏览器的渲染，应当卸载进程到GPU以加速
只有3d变形会有自己的layer，2d不会

will-change

？动画的一个小案例