4.前端基础 - css

一、Css基础语法

(一) 背景样式

• background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
  

[1]. 背景图平铺方式：background-repeat

• repeat-x x轴平铺
• repeat-y y轴平铺
• repeat x,y轴都平铺
• no-repeat 都不平铺

[2]. 背景图位置：background-position

• x,y:像素数值，百分比
• x:left、center、right
• y:top、center、bottom

[3]. 背景图随滚动条移动：bg-attachment

• scroll:背景图随页面的滚动而滚动，默认
• fixed：背景图片不会随页面的滚动而滚动
• local：背景图片随元素内容的滚动而滚动
• initial
• inherit

[4]. 多背景图：background:url , url2

• 先写谁，谁就在上边

[5]. 背景图扩展 css3

• background-size:背景图的尺寸大小
  • 取值：长+宽、cover(覆盖)、contain(包含)
• background-origin:背景图的填充位置
  取值：padding-box（默认）、border-box、content-box

[6]. background-clip:背景图的裁切方式

• 取值：padding-box、border-box(默认)、content-box
• 复合样式background:url() border-box border-box;
• 第一个是填充的位置，第二个是裁切

(二) CSS边框样式

• border:border-width border-style border-color
  • 边框颜色：border-color 如果设置为transparent 即为透明色

(三) CSS文本样式

[1].文字类型 (font-family)

• 字体是要客户端浏览器支持的。

• 字体名称中间出现空格的时候，需要加引号，否则就不需要，如 Times New Roman字体就需要加引号

  font-family:font-name
  

• 英文字体：只支持英文

• 中文字体：既支持中文也支持中文
  

[2].字体大小 (font-size)

• 默认是 16px
• 字体大小一般为偶数。方便文字的对齐。

[3].文字粗细 (font-weight)

• 单词(normal、bold) | number(00-300字体变细，400-500正常的，600-900加粗的)

[4].文字风格 (font-style)

• 斜体：italic
• 倾斜：oblique

[5].文本修饰 (text-decoration)

• 下划线：underline
• 删除线：line-through
• 上划线：overline
• 不添加任何装饰：none
• 添加多个效果将值用空格隔开

[6].文本大小写 (text-transform)

• 全部小写：lowercase
• 全部大写：uppercase
• 首字母大写：capitalize

[7].文本缩进 (text-index)

• 首行缩进：2em
• em单位：相对单位，1em永远都是跟元素的字体大小相同
• 当段落中有英文的时候，因为英文和中文的占位不一样，所以不能对齐

[8].文本对齐方式：text-align

• 两端对齐justify

[6].行高 (line-height)

• 默认值：normal，描述是设置合理的行间距，在不同的浏览器下效果是不一样的，大概在1~1.2之间
• 当设置为1的时候，就说明是字体大小* 1的高度
• 取值：1.number(px ) | scale(比例值，跟文字大小成正比例)

[9].文本间距

• 字间距：letter-spacing
• 词间距：word-spacing

[10].英文(数字)折行

• word-break:break-all; (非常强烈的折行)
• word-wrap:break-word; (不是那么强烈的折行，会产生一些空白)

(四) CSS选择器

多个样式的时候，样式的优先级根据CSS的先后顺序决定的，而不是class属性中的顺序

[1]. 标签+类的写法

• p.show1，表示带有show1类的p标签

[2]. 层次选择器

• 后代：M N （M选择器下的所有N选择器）
• 父子：M > N
• 兄弟：M ~ N (M选择器后面(下面)的所有兄弟N选择器)
• 相邻：M + N (M选择器后面(下面)相邻的N选择器)

[3]. 属性选择器 M[attr]{}

带有class的属性选择器 ，这里的class可以是其他属性

• div[class]，带有class的div选择器
• div[class=box]，class中包含box的div选择器
• div[class*=box]，匹配class中带有box(例如：box，box-list)的div选择器
• div[class^=box]，匹配class中带有box开头(例如：box，box-list)的div选择器
• div[class$=box]，匹配class中带有box结束(例如：box，list-box)的div选择器
• div[class=box][id]，匹配class中带有box并且带有id的div选择器

[4]. 伪类选择器 M:伪类{}

• :link ，访问前的样式 （只能添加给a标签）
• :visited，访问后的样式 （只能添加给a标签）
• :hover，鼠标移入时的样式 （可以添加给所有标签）
• :active，鼠标按下时的样式 （可以添加给所有标签）
• 这四个伪类要想全部生效必须按照 L V H A的顺序
• 一般的网站都只设置 a{} 和a:hover{}

[5]. :after，:before

• content：通过伪类的方式给元素添加一段内容
• 可以对这两个伪类进行样式设置

[6]. :checked，:disabled，:foucus

• 都是针对表单中的元素的
• :checked对表单中选中的元素进行样式设置，也可以直接对<input type=”checkbox” checked>起作用
• :disabled对表单禁用元素进行样式设置
• :foucus对表单获取焦点元素进行样式设置

[7]. 结构性伪类选择器

• :nth-of-type(n)，:nth-child(n)

• :first-of-type，:first-child

• :last-of-type，:last-child

• :only-of-type，:only-child

• type和child的区别：type指的是相同类型元素，child是子元素
  

  

[8]. CSS继承

• 文字相关的样式可以被继承
• 布局相关的样式不能被继承（默认不能继承，但是可以在想要继承的元素加上，样式：inherit; 就可以继承父元素）
• <p>继承<div>的border样式：
  

[9]. CSS优先级

• 相同样式优先级
  当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。
• 内部样式与外部样式
  内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。
• 单一样式优先级
  style行间 > id > class > tag > * > 继承
  注释：style行间权重为1000，id权重为100，class权重为10，tag权重为1
• !important
  提升样式优先级，非规范方式，不建议使用(不能针对继承的属性进行优先级的提升)
• 标签+类与单类
  标签+类 > 单类的优先级 即 div.box >.box
• 群组和单一选择器的优先级
  群组选择器(div,p{})和单一选择器的优先级相同，靠后写的优先级高：div = div,p
  

[10]. 层次优先级

• 1.权重比较
  ul li .box p input{} 权重：1+1+10+1+1
  .hello span #elem{} 权重：10+1+100
• 2.约分比较(相同选择器进行互相去除)
  ul li .box input{} 去除后： li p input{}
  .hello span #elem{} 去除后：#elem{}

(五) CSS盒子模型

[1]. 组成：

• 盒子模型组成：content -> padding -> border -> margin
• 类比成快递 物品 填充物 包装盒 快递之间的间距
• 注释：背景颜色会填充到margin（不包括）以内的区域

[2]. 改变盒子模型box-sizing css3

• box-sizing:content-box，默认值，这时width、height由盒子模型中的content部分获取
• box-sizing:border-box,width、height由content、padding、border相加得到
• 使用场景：
  1.可以不用计算一些值，当使盒子为200*200，这时如果有边框，则省去减去边框的宽度
  2.当元素设置width:100%时，如果pdding和border不为0，就会增加元素的长度整体长度，使页面有滚动条

[3]. margin叠加问题

• 当给两个盒子同时增加上下边距的时候，就会出现叠加的问题。叠加问题，只有在上下有，左右是没有这个叠加问题的。比如：两个上下排列的<div>，第一个<div>给一个margin-bottom:30px,第二个<div>给一个margin-top:30px,这两个<div>的上下实际距离为30px而不是60px，这是因为上下两个<div>的margin值进行了叠加，叠加是按照谁的值大，用谁的。
• 解决方案：
  1.BFC规范
  2.想办法只给一个元素增加间距。

[4].margin传递

• margin传递问题，只出现在嵌套模型中的margin-top属性，当内嵌元素设置margin-top:30px，外部盒子模型也会跟着向下移动30px。
• 解决方案：
  1.BFC规范
  2.给父容器加边框
  3.将子元素的margin换成父元素的padding

[5].display显示框类型

• display:none和visibility:hidden的区别，前者不占用空间，后者占用空间

(六) CSS样式

[1].溢出隐藏overflow

• 隐藏：heidden
• 加滚动条（无论内容是否溢出）：scroll、scroll-x、scroll-y
• 自动（内容溢出加滚动条，不溢出不加）：auto

[2].透明度opacity

• opacity:0 ~ 1
• opcity:0;的时候也是占空间，所有的子内容也会透明
• 不想让子内容透明，可以对父元素使用rgba()

[3].手势cursor

• 可以用图片来实现自定义手势：cursor:url() ,auto; url是一个图片路径。

[4].标签自带的样式

• body的margin自带8px

[5].css重置样式

• 网页默认字体大小为16px
• *{margin:0;padding:0}
  优点：不用考虑哪些标签有默认的margin和padding
  缺点：稍微影响性能
  body,p,h1,ul{margin:0;padding:0}
• ul{list-style:none}
• a{text-decoration:none;color:#999;}
• img{display:block} 或者 img{vertical-align:bottom;}(推荐)
  问题的现象，图片和父容器底部有一些空隙，
  原因，img内联元素的对齐方式按照文字基线对齐的，而不是文字的底线对齐的。
  vertical-align:baseline;基线对齐方式，默认值。bottom，底线对齐
• reset.css初始化设置：https://blog.csdn.net/brain_bo/article/details/81560444

[6].float样式

• 清除浮动：
  1.元素上下排列：使用clear属性，表示清除浮动，取值left、right、both
  2.子元素浮动，不影响父元素：
  1). 使用overflow:hidden(BFC规范),如果子元素想溢出，那么会受到影响
  2). 使用父容器的after伪类：父容器的:after伪类，添加使用

  content:"";	                   
  display:block;                    
  clear:both;                      
  

[7].position定位

• relative相对定位
  • 如果没有定位偏移量，对元素本身没有任何影响
  • 不使元素脱离文档流（偏移走了，原来占据的位置也会保留）
  • 不影响其他元素布局
  • left、top、right、bottom是相对于当前元素自身进行偏移的
• absolute绝对定位
  • 使元素完全脱离文档流
  • 使内联元素支持宽高（让内联元素具备块特性）
  • 使块元素默认宽根据内容决定（让块具备内联的特性）
  • 嵌套元素，如果有（相对、绝对、固定）定位祖先元素相对于（相对、绝对、固定）定位祖先元素发生偏移，没有（相对、绝对、固定）定位祖先元素相对于整个文档发生偏移
• fixed固定定位
  • 使元素完全脱离文档流
  • 使内联元素支持宽高（让内联元素具备块特性）
  • 使块元素默认宽根据内容决定（让块具备内联的特性）
  • 相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
• sticky粘性定位
  • 在指定位置，进行粘性操作
  • 粘性顶部导航：position:sticky;top:0;当元素相对浏览器窗口为0时粘住浏览器顶部
• z-index定位层级
  • 当使用定位时，可以使用z-index进行层级设置
  • 嵌套时，父容器设置了定位层级，父容器的邻居容器先比较父容器，如果父容器没有层级就比较子容器

[8].css单行添加省略号

• width:必须有一个固定的宽
• white-space:nowrap 让内容不折行
• overflow：hidden 溢出隐藏
• text-overflow:ellipsis 添加省略号

[9].border-radius圆角 91

• border-radius:是一个复合样式
• 椭圆，border-radius: 数值 / 数值
• 半圆，border-radius:数值 数值 0 0 ，减小高度

(七) CSS3

[1].CSS3的前缀

针对旧浏览器做兼容，新浏览器基本不需要添加前缀。

[2].过渡transition

• transition-property /ˈprɑːpərti/:规定设置过渡效果的css属性的名称。
• transition-duration /duˈreɪʃn/:规定完成过渡效果需要多少秒或毫秒
• transition-delay /dɪˈleɪ/ :定义过渡效果何时开始（既可以提前也可以延迟）
• transition-timing-function:规定速度效果的速度曲线
  https://cubic-bezier.com/#.17,.67,.83,.67
  

[3].变形transform

1). translate位移

• translate(x,y,z)
• translateX
• translateY
• translateZ (3D)

2). scale:

scale:缩放（值是一个比例值，正常大小就是1）,会以中心点进行缩放

• scale(x,y)
• scale(number)，表示宽高都是number

3). rotate:旋转 (旋转的值，单位是角度deg)

• rotateX (3D)
• rotateY (3D)
• rotateZ (和fotate是等价关系，正值按顺时针旋转)

4). skew：斜切 (单位是角度deg)

• skew(x,y)
• skewX
• skewY
• transform-origin: x-axis y-axis z-axis;

5). transform-origin:位移的基点位置

• x y z(3D)
• left right center

6). 注意事项：

• 变形效果不会影响其他元素
• 变形操作只能添加给块元素，不能添加给内联元素
• 复合写法，可以添加多个变形操作，执行是先执行后面的操作，再执行前面的操作。
• translate会受到 rotate、scale、skew的影响

[4].动画animation

• animation-name:设置动画的名字(自定义)

• animation-duration:动画的持续时间

• animation-delay:动画的延迟时间

• animation-iteration-count:动画的重复次数，默认值是1，infinite无限次数

• animation-timing-function:动画的运动形式

• animation-fill-mode:对顶动画播放之前或之后，其动画效果是否可见。

  • none(默认值):在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效。
  • backwords:在延迟的情况下，让0%在延迟前生效
  • forwards:在运动结束之后，停到结束位置
  • both:backwards和forwards同时生效

• animation-direction:属性定义是否应该轮流反向播放动画

  • alternate:从正向到反向(0%_{100%),然后从反向到正向(100%}0%)
  • reverse：永远都是反向，从100%~0%
  • mormal(默认值)：永远都是正向，从0%~100%

• 注意事项

  • 运动结束后，默认情况下会停留在起始位置
  • from = 0%，to = 100%
  • animate.css动画库

[5].transform（3D）

• rotateX():正值向上翻转
• rotateY():正值向右翻转
• translateZ():正值向前，负值向后
• scaleZ():立体元素的厚度
• perspective:离屏幕多远的距离去观察元素，值越大幅度越小
• perspective-origin:景深-基点位置，观察元素的角度。
• transform-origin:x y z
• transform-style:3D空间
  • flat(默认值2D)、preserve-3D(3D,产生一个三维空间)
• backface-visibility:背面隐藏
• hidden、visible(默认值)
• transfotm-style:preserve-3d，该属性设置在父级元素中，它的子级元素具有3d效果
• scale3d(x,y,z)
• translate3d(x,y,z)
• rotate3d():四个值0|1（x轴是否添加旋转角度），0|1（y轴是否添加旋转角度），0|1（z轴是否添加旋转角度）,旋转角度deg

[6].渐变

• 线性渐变：linear-gradient
  • 需要添加到background-image属性上
  • 取值：point(目标点) || angle(角度) color percentage
  • 从红色渐变到蓝色：lineat-gradient(red,blue)，颜色可以设置多个
  • lineat-gradient(to 方向,red,blue)，方向可以取值为left、right、top、bottom，也可以 top left、right bottom 等
  • lineat-gradient(角度,red,blue) ，
  • lineat-gradient(red 25%,blue 75%)，从0%_{25%为纯红，从25%}75%红色过渡到蓝色，75%~100%纯蓝色
  • 注：渐变的0度是在页面的下边，正值会按照顺时针旋转，负值按照逆时针旋转
• 径向渐变：redial-greadient

[7].文字阴影text-shadow

• text-shadow: x偏移 y偏移 模糊值 颜色
• 通过多阴影，通过调节不同值，可以实现火焰字
• 注：
  1.阴影的默认颜色和文字的颜色是一样的
  2.属性值可以通过逗号的方式进行分割，可以设置多阴影

[8].盒子阴影box-shadow

• box-shadow: x偏移 y偏移 模糊值 阴影范围(可选) 颜色 内/外阴影(可选)
• 也可以实现多阴影
• 注：
  1.盒子阴影的默认颜色是黑色
  2.默认就是外阴影(outset)，如果给box-shadow设置outset属性，会使box-shadow整体不起作用

[9].遮罩mask

• mask: url() x y / width height
• 注：
  1.mask目前还没有标准化，所以需要添加浏览器前缀
  2.默认x y 方向都平铺
  3.也可以使用多遮罩

[10].倒影box-reflect

• box-reflect: above(上面) | below(下面) | left | right 距离 遮罩(url地址) | 渐变(liner-tradient)
• 注：
  1.目前还没有标准化，所以需要添加浏览器前缀
  2.使用渐变时，渐变只支持透明度的渐变，linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1))或者
  linear-gradient(rgba(255,255,255,0) 50%, rgba(255,255,255,1))
  3.transform:csaleX(-1)：也可以实现图片倒置

[11].模糊blur

• filter:blur(模糊值)

[12].四则计算cal

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

[13].分栏布局

• column-count:分栏的个数
• column-width:分栏的宽度
• column-gap:分栏的间距
• column-rule:分栏的边线
• column-span:合并分栏
• 注意：
  1.分栏的宽度和分栏的总数不要一起设置

[14].伪类与伪元素

• CSS3中规定伪类由一个冒号开始，然后为伪类的名称；伪元素由两个冒号开始，然后为伪元素的名称。
• 伪类本质上是为了弥补常规CSS选择器的不足，一边获取到更多信息。如：:hover、:focus、:empty …
• 伪元素本质上是创建了一个有内容的虚拟容器。开发者可以为伪元素定制样式。
  如::selection、::fitst-line / first-letter、::before / after ……

[15].Hack概念

• CSS Hack用来解决浏览器的兼容性问题，为不同版本的浏览器定制编写不同的CSS效果，使用每个浏览器单独识别的样式代码，控制浏览器的显示样式。
• Hack分类
• 1.CSS属性前缀法
  • 属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展示效果
    
  • 属性
    IE6: bckground-color:red;
    IE11: bckground-color:red\0;
• 2.选择器前缀法
  • 选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack
    
  • 属性
    IE6: *html .box{ width:300px}
    IE9: :root .box{widnth:300px}
• 3.IE条件注释法

  • 这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式。
    

  • 只有在IE浏览器下<div>元素才显示

    <!—[if IE]>                          
    <div class=”box”>     </div>          
    <![endif]->       
    

  • IE10以上已经不支持注释法

• 使用IETester工具来实现模拟各个版本IE
• 需要使用服务器环境来运行相应的html

[16].渐进增强和优雅降级

• 渐进增强：这怎对低版本浏览器进行构建页面，保证最基本的功能，然后再对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
• 优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

二、CSS架构与文件组成

在一个大型项目中，由于页面过多，导致CSS代码难以维护和开发。所以CSS架构可以帮助我们解决文件管理与文件划分等问题。
首先要对CSS进行模块化处理，一个模块负责一类操作行为。可以利用sass或less来实现。