css 使用小技巧

 1css 图片与文字对齐方式

需要把样式设置给图片 同时适用于文本域

1  居中对齐   vertical-align: middle;

2  底线对齐     vertical-align: bottom;

3 顶部对齐  vertical-align: top;

2.行内块元素在同一行会有缝隙解决

只需要给当前行内块元素加一个一个浮动就能够解决这种问题 

3 怎么查看元素的hover active focus visited 等css样式

放到要查看的元素上面右键 force state 上面选择对应的选项 

4移动端浏览器的兼容只需要考虑webkit 的兼容性就好了

5. 移动的初始化 https://necolas.github.io/normalize.css/

6. 多个dom 同时渲染的时候为了提高效率

  解决思路 ： 1 首先要创建一个文档片段  把要渲染的标签加入到这个标签中，让后再把文档片段加入到这个body 中  

                2 文档片段  document.createDocumentFragment () 创建 

7  pre  这个html 元素就是你写什么浏览器就怎么展示不会进行空格折叠通常用于再网页中显示代码 

功能的本质就是一个默认的css 属性  wite-space： pre  来实现的还是那句话 html 元素都是有css 来实现样式 

8 怎么实现再图片上点击不同的位置跳转到不同的地方 就比如说地图的功能

这里面的具体使用可以参考mdn 

8 a链接为什么不会继承父元素里面的样式 怎么样才能动态的继承父元素里面的颜色属性

color:inherit   就会继承父元素的样式 （强制继承）   还有一个属性值  就是 background:initial  会继承父元素的默认值

9 所有文字的换行标准是有一个css的样式决定 word-brake

10 浏览器支持最小的字体是12px 怎么把字体变成一个10px 字体的文字呢

   <div class="boxText">你好呀</div>

.boxText {
  font-size: 20px;
  transform: scale(0.5, 0.5);
  transform-origin: top center;
}

11 写一个三角形css伪元素

    content: "";
    display: block;
    position: absolute;
    width: 31px;
    height: 23px;
    /* bottom: -28px; */
    /* right: 14px; */
    background-color: red;
    -webkit-clip-path: polygon(0 0,50% 100%,100% 0);
    clip-path: polygon(0 0,50% 100%,100% 0);

12  css 中 两个设置透明度的区别 

 opacity 一个能设置全部元素的透明度 

颜色的alpha通道  color: rgba(0, 0, 0, 0);   background-color: rgba(0, 0, 0, 0);   一个可以设置部分的透明度比如文字和背景

13 如何选中元素的兄弟元素

  <label>
      <input type="radio" name="sex" id="nan">
      <span>男</span> 
      <span>女</span>               
  </label>

label input~span { 
     color : red     // 男女都会变成红色
}
label input+span { 
     color : red     // 只有男会变成红色
}

14 盒子内容不超过盒子居中对齐超过盒子宽度就靠左对齐

  <div class="container">
    <div class="showBox">
      <span class="text">111111</span>
      <span class="text">--</span>
      <span class="text">--</span>
      <span class="text">--</span>
    </div>
  </div>
.container {
  text-align: center;

  .showBox {
    display: inline-block;
    text-align: left;
  }
}
// 这里面要注意的就是要把爷元素变成   text-align: center;   父元素变成 行内块元素 display: inline-block;
    text-align: left;