html+css - 前端小常识

前端小常识

sublime中//注释符会使得下面代码失效

居中问题

position

若想把一个定位属性为absolute 的元素定位于其父级元素内，只有满足两个条件，

• [ ] 第一：父级设定Position 属性
• [ ] 第二：设定TRBL (top\right\bottom\left)

z-index 使用的前提是该元素必须定位position

垂直&水平居中

子元素和父元素都需要指定宽高：其中父元素的高必须是固定值

• 无需知宽度

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;

水平居中方式：

• [ ] 有宽度时

  width:100px;
  margin:0 auto;

position:absolute;
left:50%;
margon-left: (- 半个宽);

• [ ] 无宽度时

position: absolute;
left: 0;
right: 0;
margin: 0 auto;

设置所有子元素居中

parent{
    text-align: center;
}
child{
    display: inline-block;
/*vertical-align: top;解决移动端不同屏幕有的li子元素不在ul一行*/
}

margin:0 auto 无法居中

• [ ] 没设宽度
• [ ] 没声明DOCTYPE!

让body填充整个页面

如果用margin:20px auto;实现div居中的话，body所占就只是div所在行，要想body填充整个页面，则需要下面代码

html,body{
    	width:100%;
    	height:100%;
        /*margin如果是0px的话就不需要此句*/
    	border-top: 1px solid transparent;
    }
.box{
    	margin:20px auto;
    }

canvas扭曲问题

• [ ] 以下写法会出现扭曲

  <canvas style="width:200px ;height:200px" id="clock"></canvas>

• [ ] 改为

  <canvas width=200 height=200 id="clock"></canvas>

• 标签只有两个属性—— width和height未设宽高时，canvas会初始化宽300px和高150px。

• 该元素可用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。

背景问题

设置背景透明,内容不透明

• [ ] background: #000; opacity:0.2; 子元素也继承了子元素继承透明
• [ ] background: rgba(0, 0, 0, 0.1); 只背景透明：但是css3不兼容
• [x] z-index 多设置个背景层，背景层在下

  <header class="header">
      <div class="con">
          <h1 class="logo">
          <a href="#"><img src="img/logo.png"/></a>
          内容
      </h1>
      </div>
  </header>
  <div class="headerBg">背景层</div>

//背景层和内容布局一直
    .header,.headerBg{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;//脱离文档流必须写宽度
    height: 89px;
    overflow: hidden;
}
//设置背景
.headerBg {
    z-index: 9;
    opacity: 0.1;
    filter: alpha(opacity=10);
    background: #000;
}

背景图片

• [ ] 元素中有内容则不需要设置宽高
• [ ] 元素中无内容则需要设置宽高

  background: url("@{url}/logo.png") no-repeat .2rem;

图片等比缩放

• [ ] 不兼容IE6

  max-width:300px//max-height:100px
  overflow:hidden

• [ ] 兼容

  width:expression(this.width > 300 ? "300px" : this.width);
  height:e­xpression(this.height>500?"500px":this.height);

动画问题

transition动画中的all

• [x] 属性为all时，padding和height都会有个动画

  height:0; /* 2.22rem*/
  padding:0;/* .1rem 0*/
  .transition(@pro:all,@dur:.5s);//less

• [ ] 改为只有height动画的话，需要考虑收起时padding会立马为0，然后height再动画（出现抖一下）

  • 解决方法:给padding设置一个定时器，等height动画结束再设置为0；

从中间开始展现动画

• [x] left: 50% ; width: 0 ; margin-left: 0 ; --过渡到-->
  width: 100% ; margin-left: -50% ;
• [ ]

  <!--布局----i标签放动画背景层-->
  <li class="bg"><a href="#">首页<i></i></a></li>

li a i {
    position: absolute;
    height: 89px;
    
    left: 50%;  /*动画起点从中间开始*/
    width: 0;
    margin-left: 0;
    
    z-index: -1;
    background: #000;
    opacity: 0.1;
    filter: alpha(opacity=10);   
}

li a:hover i {
     /*-IE下不管，优雅降级-
     过渡动画:PC端使用写五套 移动端使用只留第一个和最后一个,而且顺序不能变---*/
    -webkit-transition: all .2s linear 0s;
    -moz-transition: all .2s linear 0s;
    -ms-transition: all .2s linear 0s;
    -o-transition: all .2s linear 0s;
    transition: all .2s linear 0s; /*永远在后*/
    
    margin-left: -50%; 
    width: 100%;
}

• [x]

• [ ]

• [x]

• [ ]

• [x]

• [ ]