20200107pm

 20200107

 html

 html中有哪些块级元素？有哪些行内元素？

\- 行内元素

  

一个行内元素只占据它对应标签的边框所包含的空间

一般情况下，行内元素只能包含数据和其他行内元素

  

b, big, i, small, tt

abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var

a, bdo, br, img, map, object, q, script, span, sub, sup

button, input, label, select, textarea

  

\- 块级元素

  

占据一整行，高度、行高、内边距和外边距都可以改变，可以容纳块级标签和其他行内标签

  

header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer

 img标签中alt是做什么用的？

\- img的alt属性

如果无法显示图像，浏览器将显示alt指定的内容

  

\- 元素title属性

在鼠标移到元素上时显示title的内容

 src和href的区别是什么？

\- href

href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系

若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。

  

\- src

src表示引用资源，替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。

当浏览器解析到src ，会暂停其他资源的下载和处理（图片不会暂停其他资源下载），直到将该资源加载、编译、执行完毕，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

 css

 如何兼容css？

https://www.jianshu.com/p/a6f...

1、CSS Hack

  

我们为了让页面形成统一的效果，要针对不同的浏览器/版本而写css的过程就叫做CSS hack

(1)IE条件注释法

  

即在正常代码之外添加判别IE浏览器或对应版本的条件注释，符合条件的浏览器或者版本号才会执行里面的代码。

  





  



  



  







  

1.png

  
  

2.png

(2)CSS属性前缀法

  

即给css的属性添加前缀，比如\*可以被IE6/IE7识别，但\_只能被IE6识别，IE6-IE10都可以识别"\\9"，IE6不能识别！important ，Firefox不能识别 \* \_ \\9

  

说明：

  

在标准模式中

  

"-" 减号是IE6专有的hack

  

"\\9" IE6-IE10 都生效

  

"\\0" IE8-IE10 都生效，是IE8-IE10的hack

  

"\\9\\0" 只对IE9-IE10 生效

  



        

  

3.png

  
  

4.png

  
  

5.png

  
  

6.png

  

IEtester：http://www.ietester.cn/ 测试兼容的

(3)选择器前缀法

  

IE6 可识别 \*div{color:red}

  

IE7 可识别 \*+{color:red}

  

@media screen \\9{...} 只对IE6/IE7生效

  

@media \\0screen {body {background:blue}} 只对IE6/7/8有效

  

。。。。。

  



        

2、浏览器私有属性

  

\-moz 代表Firefox浏览器私有属性

\-ms 代表IE浏览器私有属性

\-webkit 代表chrome、Safari私有属性

\-o 代表Opera私有属性

注意：对于私有属性，要把标准写法放到最后，兼容性写法放到前面

  

我们经常会在某个CSS的属性前添加一些前缀，比如：-webkit-，-moz-，-ms-，这些就是浏览器的私有属性。

  

为什么会出现私有属性呢？这是因为制定HTML和CSS标准的组织w3c动作是很慢的。

  

通常，有W3C组织成员提出一个新属性，比如说圆角border-radius，大家都觉得很好，但w3c制定标准，要走很复杂的程序、审查等，而浏览器市场推广时间紧，如果一个属性已经够成熟了，就会在浏览器中加入支持。

但是为避免日后w3c公布标准时有所变更，会加入一个私有前缀，比如 -webkit- border-radius，通过这种方式来提前支持新属性，等到日后w3c公布了标准，border-radius的标准写法确立之后，再让新版的浏览器支持border-radius这种写法。



.box{

                width: 300px;

                height: 300px;

                -webkit-border-radius: 150px;

                -moz-border-radius: 150px;

                -ms-border-radius:150px;

                -o-border-radius: 150px;

                border-radius: 150px;

                background-color: royalblue;

            }

3、浏览器CSS样式初始化

  

针对不同浏览器渲染效果的不同，可以进行浏览器css样式初始化，也就是加一个reset.css文件

  

/\*淘宝的reset.css\*/

blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul {margin:0;padding:0}

body,button,input,select,textarea { font:12px/1.5 tahoma,arial,'Hiragino Sans GB',\\5b8b\\4f53,sans-serif}

h1,h2,h3,h4,h5,h6 {font-size:100%}

address,cite,dfn,em,var {font-style:normal}

code,kbd,pre,samp {font-family:courier new,courier,monospace}

small {font-size:12px}

ol,ul {list-style:none}

a {text-decoration:none}

a:hover {text-decoration:underline}

sup {vertical-align:text-top}

sub {vertical-align:text-bottom}

legend {color:#000}

fieldset,img {border:0}

button,input,select,textarea {font-size:100%}

table {border-collapse:collapse;border-spacing:0}

 css中选择器有哪几种？选择器的优先级是什么？(出题:div>span和#s1谁的优先级高？div>span和.s1谁的优先级高？)

\- 选择器类型：

    - ID　　#id

    - class　　.class

    - 标签　　p

    - 通用　　\*

    - 属性　　\[type="text"\]

    - 伪类　　：hover

    - 伪元素　　::first-line

    - 子选择器、相邻选择器

  

\- 权重计算规则：

    - 第一等：代表内联样式，如: style=””，权值为1000。

    - 第二等：代表ID选择器，如：#content，权值为0100。

    - 第三等：代表类，伪类和属性选择器，如.content，权值为0010。

    - 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。

    - 通配符、子选择器、相邻选择器等的。如\*、>、+,权值为0000。

    - 继承的样式没有权值。

选择器权值的计算，不会超过自己的最大数量级

100个元素(1)元素选择器相加，也不会大于10

    #s1高

    .s1高

 css3有哪些新特性？

https://segmentfault.com/a/11...

2.过渡

  

过渡，是我在项目里面用得最多的一个特性了！也相信是很多人用得最多的一个例子！我平常使用就是想让一些交互效果（主要是hover动画），变得生动一些，不会显得那么生硬！好了，下面进入正文！

  

引用菜鸟教程的说法：CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：指定要添加效果的CSS属性指定效果的持续时间。

  

2-1语法

  

transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)

栗子1

  

/\*宽度从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒，0.2秒后执行过渡\*/

transition：width,.5s,ease,.2s

栗子2

  

/\*所有属性从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒\*/

transition：all,.5s

上面栗子是简写模式，也可以分开写各个属性（这个在下面就不再重复了）

  

transition-property: width;

transition-duration: 1s;

transition-timing-function: linear;

transition-delay: 2s;

2-2实例-hover效果

  

clipboard.png

  

上面两个按钮，第一个使用了过渡，第二个没有使用过渡，大家可以看到当中的区别，用了过渡之后是不是没有那么生硬，有一个变化的过程，显得比较生动。

当然这只是一个最简单的过渡栗子，两个按钮的样式代码，唯一的区别就是，第一个按钮加了过渡代码transition: all .5s;

  

2-3实例-下拉菜单

  

clipboard.png

  

上面两个菜单，第一个没有使用过渡，第二个使用过渡，大家明显看到区别，使用了过渡看起来也是比较舒服！代码区别就是有过渡的ul的上级元素(祖先元素)有一个类名（ul-transition）。利用这个类名，设置ul的过渡.ul-transition ul{transform-origin: 0 0;transition: all .5s;}

  

可能大家不知道我在说什么！我贴下代码吧

  

html

  



    

        


            html

            


                
div

                
h1

            

        

        


            js

            


                
string

                
array

                
object

                
number

            

        

        


            css3

            


                
transition

                
animation

            

        

        


            框架

            


                
vue

                
react

            

        

    

    

             

            html             

                
• div
                
• h1
            

        

        

            js             

                
• string
                
• array
                
• object
                
• number
            

        

        

            css3             

                
• transition
                
• animation
            

        

        

            框架             

                
• vue
                
• react