前端小知识

1.css画三角形

使用元素border属性实现

/*<!-- transparent 隐藏属性-->*/
css
#triangle{
    /*css画三角*/
    width: 0;
    height: 0;
    border-top: 10px solid red;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
}
html

<div id="triangle">
</div>

2.css居中元素
法1：magic
css

#maxBox{
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid brown;
}

#centerBox{
    width: 200px;
    height: 200px;
    border:1px solid red;
    margin: auto;
    /*1种方法 magic*/
    position: absolute;
    top:0;
    bottom:0;
    left: 0;
    right: 0;
    /* magic below
}
法2：translate

#centerBox{
    /*2种方法 translate*/

    /*right: 50%;*/
    /*bottom: 50%;*/
    /*transform: translate(50%, 50%);*/
    /*上面 transform: translate(50%, 50%) 这条实际上就是以前的 margin 负数的简化不需要计算元素高度、宽度版。 *!/*/
}

html

<div id="maxBox">
    <div id="centerBox" onclick="alert('ooooo')">
        是事实上事实上事实上事实上事实上事实上事实上
    </div>
</div>

3.css 不执行任何事件属性

pointer-events: none;

/*设置 pointer-events: none 之后，
可以让该元素不响应鼠标的任何事件，
*/
4.浏览器编辑css样式
html

<style style="display:block" contentEditable>
    body { color: blue }
</style>

<!--通过设置style标签的display:block样式可以让页面的style标签显示出来，
并且加上contentEditable属性后可以让样式成为可编辑状态，
更改后的样式效果也是实时更新呈现的。
此技巧在IE下无效，好玩--> 
5.单页面自适应屏幕高度
需设置

html,body{height:100%;overflow:hidden;
实列代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*单页面自适应屏幕高度*/
        html,body{height:100%;overflow:hidden;}
        #triangle{
            height:100%;
            width: 100%;
            border:1px solid red;
        }
        #topTitle{
            height: 60px;
            background-color: aquamarine;
        }
        #leftMune{
            float: left;
            width: 60px;
            background-color: brown;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="topTitle"></div>
<div id="triangle">
    <div id="leftMune"></div>
</div>
</body>
</html>
6.input与文字对齐
浏览器下可能存在 input无法与文字对齐情况
设置css属性

input{vertical-align:middle; margin-bottom:2px; *margin-bottom:2px;}
7.a便签 download属性可修改下载后的文件名 但是文件必须是同域名

<a href="xxx.jpg" download="改名后的文件,jpg" />
8.

/*table若设置固定宽度 可强制换行*/
tbody{word-break:break-all}

posted @ 2016-12-13 11:46 小贱贱！阅读(154) 评论(0) 收藏举报

刷新页面返回顶部

前端小知识

公告