css的基础知识sharing

时间 2019-12-05

标签 css 基础知识 sharing 栏目 CSS 繁體版

原文原文链接

Html标签分类（补充）

块级元素：元素本身独占一行 ,能够设置宽度和高度若是两个块级元素嵌套，子元素若没有设置宽度，那么元素的宽度与父元素同样（p div h ul li）
行内元素: 全部元素都在一行显示，行内元素的宽度就是其内容的宽度（因此没办法设置居中）不能直接设置宽和高(span a strong)
行内块元素：全部元素在一行显示，能够设置宽和高(img input) 模式的转换: display: block; [以块级元素显示] display: inline-block; [以行内块显示方式显示] dispaly: inline; [以行内部元素的方式显示]

CSS中的定位简介

定位经常使用的有四种，包括静态定位、绝对定位、相对定位、固定定位。css

静态定位（position: static）：若设置静态定位，则显示方式为标准流的显示方式。前端
绝对定位(position: absolute)： ①若是一个单独的元素，设置绝对定位，那么元素，以浏览器左上角为基准设置定位。 ②若是一个元素的父元素，没有设置定位，则该元素以浏览器左上角为准设置定位。 ③若是一个元素的父元素，设置定位（除了静态定位之外）那么子元素，会以父元素左上角为准设置定位。绝对定位的特色：①设置绝对定位的盒子会脱离标准流。 ②绝对定位能够实现模式转换。 ③绝对定位的元素不占位置。用完定位的元素，仍然可使用盒模型。css3
相对定位(position: relative)：若是一个元素设置了相对定位，那么该元素只会参照本身的位置设置定位（与父元素是否认位无关）相对定位的特色：①元素设置了相对定位，该元素没有脱标，仍占原来的位置。 ②不能实现模式转换c++
固定定位(position: fixed)：若是设置固定定位的元素，只会看浏览器的左上角但是区域进行定位。固定定位的特色：①设置固定定位的元素会脱标（不占位置） ②能够实现模式转换web

层级（z-index）

定位，不得不说层级关系。 z-index的值越大，层级就越高。浏览器

使用层级的必要条件：①只有定位的元素才有，层级关系，她的值只能是整数
层级的特色：①定位的盒子的层级会高于标准的盒子 ②若是两个定位的盒子在一块儿显示，那么后面的定位的盒子会压着前面定位的盒子，后来者居上 ③若是两个子元素的父元素都设置了定位，那么首先要看两个父元素的值。

居中的方式：app

对于脱标的盒子 ① 首先子元素走父盒子宽度的一半 ② 再往回走子元素本身宽度的通常

例如： position:  absolute;
      left:  50%;
      margin-left:  -150px;(假设子盒子的宽度是300)
复制代码

CSS3 2D转换（简介transition和animation）

2D平面上的移动、旋转、缩放、斜切框架

移动： transform: translate(x轴, y轴) 分开来写： transform: translatex(); transform: translateY() 参数：能够是px 也能够是百分比目的：(实现居中) 咱们能够经过盒子的绝对定位配合transform：translate（-50%，-50%）实现一个没有宽度高度的盒子水平垂直居中 ,若是没有宽度的话，盒子最大的宽只能达到父盒子的一半

/*内容垂直水平居中*/
.content-center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
/*内容垂直居中*/
.content-vertical-center{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
/*内容水平居中*/
.content-horizontal-center{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
复制代码

旋转： transform: rotate(xxdeg) 方向：正值是顺时针，负值是逆时针中心点：能够控制 transform-origin:left center/ 100px 100px/ 50% 70%ide
缩放：transform: scale(); 分开来写：transform: scaleX(); transform: scaleY(); 参数：能够接受小数，能够是具体的倍数中心点：能够控制布局
斜切： transform: skew() 中心点：能够控制做用：(好比将长方形变成四边形）

这些效果能够并存的例： transform: rotate(360deg) scale(2)
过渡（transition) 它不是动画，只是CSS由一种状态到另一种状态的变换过程用的地方：那个元素须要变化，就能够给那个元素加上使用：transition: all 1s [简写的一种方式，涉及到的全部的属性都会在h1s完成]
动画（animation）性能特别好，特别是对移动端，由于它底层是c++,而其余的定时器，因此但凡不是功能性的动画就用css3 animation的参数：{ ①：自定义动画名 ②：运行的时间 ③：运动的曲线 ④：延时执行的时间 ⑤：循环的次数 ⑥：是否逆序播放（默认是normal）[逆序 alternal] ⑦：播放的状态（默认是running）[暂停是 paused] ⑧：动画最后中止的位置 [forwards 让动画中止在最后一帧] }

@前缀keyframes 自定义的动画名{
0%{
 //css语句
 }
...
100%{
//css语句
}
}

例如：
.flyIn-flyOut {
  animation: flyIn 0.3s linear forwards, flyOut 0.3s linear 3s forwards;
  -webkit-animation: flyIn 0.3s linear forwards, flyOut 0.3s linear 3s forwards;
}

@keyframes flyIn {
  0% {
    top: 2rem;
    right: 75rem;
  }
  100%{
    top: 2rem;
    right: 1rem;
  }
}

复制代码

css的盒子阴影

box-shadow: 水平上的偏移 垂直上的偏移  羽化的大小（模糊） 阴影的尺寸  阴影的颜色  内阴影或者外阴影
box-shadow:  20px  50px  30px  red  inset
(阴影能够简写可是有些值须要补0)
复制代码

CSS3私有前缀

做用：兼容低版本的一些高级浏览器，或者一些特定的css3属性须要添加私有前缀才起做用 每一条css3属性合理来讲都须要添加对应浏览器的前缀，以保证其兼容性
谷歌 苹果：-webkit- 火狐：-moz- IE：-ms- o：-o- 小细节：在手机端，通常来讲只须要写一个-webkit-（针对国内的绝大部分手机端）
添加的位置：大部分都是直接添加到最前面，css2没有的属性都是添加在最前面的，有一些是css2就有的属性是添加在后面的（background：-webkit-linear-gradient（））
复制代码

css 伪元素（::before ::after）

做用：渲染一个虚拟的标签插入到当前元素内部的前边或者后边，它并无真实的存放在DOM里，默认是行内元素。例：.className::before{ content: '' ======>这个属性不能够省略，还能够添加别的样式 } 经常使用的案例：能够代替某些标签来完成一些ICON.好处是：不开销DOM，可是伪元素是不存在的，JS获取不到它，可是咱们仍然可使用利用window.getComputedStyle方法选择到伪元素，而后利用getPropertyValue方法获取对应的属性的值。

CSS的常见规范以及CSS命名规范 [cascading style sheets]

CSS的特性

①层叠性：发生层叠的前提是标签的权重同样时，其样式发生冲突时，最后定义的样式会将前边定义的样式覆盖掉，与样式中类的调用的顺序无关。

②继承性：子元素的样式会使用父元素的样式，可是只有发生嵌套关系的时候，才会发生继承，与文字相关的属性都会被继承

③优先级： !important > 行内样式 > id选择器 > 类选择器 > 标签选择器
```
1.继承的权重为0
  2.权重会叠加（举个小栗子： 类名+id名 > id名）
复制代码
```
CSS的书写方式

①外联式写法 link  rel="stylesheet"  type="text/css"  href=“xxxx.css”> 
      影响的范围较广，整个网站站点，实现告终构和样式的彻底分离，代码维护性高
  ②内嵌式写法 <style  type="text/css">css代码</style>
       影响的范围只有当前页面，没有实现结构与css的彻底分离（当通常页面中的样式代码会不多的时候使用）
  ③行内式写法 <p  style="color:  red"></p>  【不推荐】
       只会影响当前的标签样式，彻底没有实现结构和样式的分离
复制代码

命名的要求（前提）

W3C CSS2.1的 4.1.3 节中提到：标识符（包括选择器中的元素名，类和ID）只能包含字符[a- zA-Z0-9]和ISO 10646字符编码U+00A1及以上，再加连字号（-）和下划线（_）；它们不能以数字，或一个连字号后跟数字为开头。它们还能够包含转义字符加任何ISO 10646字符做为一个数字编码。

类名可使用汉字可是不推荐，不能使用纯数字或者数字开头，不能使用特殊符号开头，"_"这个除外【个人简短总结】。
区分id和class

class: 一个标签能够同时调用多个类名，多个标签能够同时调用一个类样式

id: 一个标签只能调用一个id样式，页面中的每个标签的id名称必须惟一
CSS文件中class或id起名规则：

① 用class_name方式写类名

② 样式通常都用class而不用id，由于id不能够重复，可是class却能够被重复使用。id的优先级比class的要高，如果写了一个#link{color: red}，若是须要修改里边的样式，都必须加上#link才能越过这个优先级。

③ id选择器通常是配合JS使用，这样才符合表现与行为分离的原则。因此id能够选择驼峰式命名法。
margin和padding的缩写形式代码的量的减小也能够有利于页面的优化，对于margin，padding的使用也是大有文章。之内边距padding为例：

padding:  10px  (表示上下左右都是10px)
  padding： 10px  20px  (表示上下是10px,左右是20px)
  padding:  10px  20px  30px (表示上是10px,左右20px,下是30px)
  padding:  10px  20px  30px  40px  (表示上是10px  右是20px  下是30px  左是40px)
复制代码

语义化标签

语义化标签是个很大的话题，简单点说，语义化标签就是让css选择器的命名可以反映页面结构的功能区块，如内容区域的class类名定义为content，页脚区域的class类名定义为footer。语义化标签的一个好处是让网页结构一目了然，另一个好处是提升网页对一些特殊浏览设备的友好性。语义化标签的一个误区是按CSS样式表现的结果命名。从深层层次分析，CSS的出现是让HTML只专一于结构，实现网页结构和样式的分离，这也是CSS可以代替表格布局而风靡的重要缘由。按CSS样式表现结果命名，其实是让HTML结构和CSS产生强耦合，是违背结构和样式分离的。所以咱们命名的时候尽可能要以不是常常变化的事物进行命名，好比HTML的某块区域的功能以及在页面中显示的位置。

没有最好的规范，只有最适合团队的规范

通用的css类的命名【借鉴】

页头部分 header

页面主体main

页脚部分 footer

盒子第一层容器 container

盒子第二层内容content

盒子第三层布局： box

导航：nav

侧栏：sidebar

栏目：column

页面外围控制总体布局宽度：wrapper

左右中：left right center

登陆条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav能够500%提升开发效率的前端UI框架！

菜单：menu

子菜单：submenu

搜索：search

友情连接：friendlink

页脚：footer

版权：copyright

滚动：scroll

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guild

服务：service

状态：status

投票：vote

合做伙伴：partner