Skip to main content

5 posts tagged with "html"

View All Tags

禁止html缓存

· One min read
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

移动端常用meta标签

· One min read
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0" />

微信h5安卓手机video实现不全屏播放

· 2 min read

需求场景​

最近在做移动端项目中，出现video作为背景的场景。然后就开始了踩坑之旅。首先移动端和桌面端都是禁止视频音频的自动播放的，浏览器都不希望骚扰用户。可是需求都是怎么骚扰用户怎么开心，只能通过hack的方式实现。ios在微信h5中可以通过jssdk实现video的自动播放，android就gg了，没法实现，有位老哥的实现思路比较清奇，通过用户业务上的点击动作模拟视频自动播放，参见
微信浏览器中，安卓手机上，video无法自动播放，是为什么呢？，既然android已经无法实现自动播放，只能退而求其次点击播放了。

解决方案​

点击播放android又有坑了，ios端只要添加playsinline webkit-playsinline属性即可不全屏播放，android依旧不行，后来还是参考老哥的代码才发现，在安卓微信h5环境中需要添加x5-video-player-type="h5-page"才能不全屏播放，好冷门的属性啊！！！

前端基础知识—block,inline,inline-block的区别

· 2 min read

前沿​

一个html页面，是由多种html标签如div,p,a,img,input等构成。每个标签都是一个元素。除了flex和table，block,inline,inline-block是最为常用的显示方式。

block块状元素​

块状元素最明显的特征就是会换行。多个块状元素会多行显示。块状元素可以设置宽高
(如div,header,article,section,footer,p）

inline内联元素​

和块状元素相对应不会换行。多个内联元素会显示在同一行。内联元素不能设置宽高
(如a,span,i,b,strong,em)

inline-block内联块元素​

是block和inline的折衷方案。其本质是inline，具有inline的不换行特点，但又具有block的可以设置宽高的特点。
(如img,input,textarea)

float和absolute,fixed​

除了display属性会更改元素的显示方式，float和position也会更改元素的显示方式，而且优先级更高。float和absolute，fixed都会导致元素脱离文档流，不占有具体空间，元素都会变成类似inline-block的展现形式。

前端css布局详解

· 4 min read

前言​

css布局实际上是前端的入门教程，所谓的前端切图仔主要工作也就是在写 html，css布局。虽然css布局是前端的入门教程，可实际工作中可以发现，并没有几个人掌握了css布局的基本技巧，往往都是margin，padding一把梭搞定，写得慢不说还给之后维护的人看的懵逼。

主旨​

本文旨在帮助前端基础不好的同学或一些需要写界面的后台朋友熟悉常规的css布局，能够又快又好的完成前端切图工作。另一方面，本文也可以作为css布局的速查笔记。

常规布局方式​

实际上常用的css布局总结来说可以分为3类。两端对齐，等分，居中。基本上一个页面都可以拆分成这3种布局的组合方式。

两端对齐​

  • 方式一：float（兼容性最好）
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
.fl{
float:left;
}
.fr{
float:right;
}
 <div class="clearfix">
        <div class="fl"></div>
        <div class="fr"></div>
 </div>
  • 方式二：flex（最简单）
.flex-justify {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
 <div class="flex-justify">
        <div class="l"></div>
        <div class="r"></div>
 </div>

等分布局(兼容最好，可以多行)​

  • 方式一：float
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
.list-wrapper {
  margin-left: -20px;(负的间距值)
}
.list-box{
  float: left;
  box-sizing:border-box;
  width: 33.3333%; (100% / 等分个数)
  margin-bottom: 20px;
  padding-left: 20px;(间距值)
}
  <div class="list-wrapper clearfix">
        <div class="list-box">
            <div class="list"></div>
        </div>
        <div class="list-box">
            <div class="list"></div>
        </div>
        <div class="list-box">
            <div class="list"></div>
        </div>
  </div>
  • 方式二：flex（最简单，仅单行）
.flex-justify {
  display: flex;
  align-items: center;
}
.list{
  width:33.3333%;(间距可以通过宽度控制)
}
<div class="flex-justify">
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
</div>

居中布局（涉及块状元素，内联元素，固定宽高，不定宽高）​

  • 水平居中

text-align(内联元素)

 .text-center{
        text-align: center;
 }
 .item{
        display: inline-block;
 }
  <div class="text-center">
        <div class="item"></div>
  </div>

margin(块状元素)

.item{
  width:200px;
  margin:0 auto;
}
<div class="item"></div>

position

.parent{
        position: relative;
}
.child{
        position: absolute;
        left: 50%;
        width: 200px; 
        margin-left: -100px; //(负宽度的一半)
}
 <div class="parent">
        <div class="child"></div>
 </div>

flex

.flex-h-center {
  display: flex;
  justify-content: center;
}
 <div class="flex-h-center">
        <div class="child"></div>
 </div>
  • 垂直居中
    1.vertical-align
 .parent{
      height:200px;
    background-color: green;
  }
 .parent:after{
      display:inline-block;
      width:0;
      height:100%;
      vertical-align:middle;
      content:'';
  }
  .parent .child{
      display:inline-block;
      width: 200px;
      vertical-align:middle;
    }
 <div class="parent">
        <div class="child"></div>
 </div>

2.transform

.parent{
   position: relative;
   height: 200px;
}
        
.parent .child {
   position: absolute;
   left: 50%;
   transform: translate(-50%, 0);
}
 <div class="parent">
        <div class="child"></div>
 </div>

3.position

.parent{
        position: relative;
}
.child{
        position: absolute;
        top: 50%;
        height: 200px;
        margin-top: -100px;
}
<div class="parent">
        <div class="child"></div>
</div>

4.flex

.flex-v-center {
  display: flex;
  align-items: center;
}
 <div class="flex-v-center">
        <div class="child"></div>
 </div>
  • 水平垂直居中
    1.position(固定宽高)
.parent{
  position:relative;
}
.child{
  position:absolute;
  left:50%;
  top:50%;
  width:200px;
  height:200px;
  margin-left:-100px;
  margin-top:-100px;
}
 <div class="parent">
        <div class="child"></div>
 </div>

2.flex(不定宽高)

.flex-center{
  display: flex;
  align-items: center;
}
<div class="flex-center">
        <div class="child"></div>
</div>

3.transform(不定宽高)

.parent{
   position:relative;
} 
.child{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}