移动端知识点

2021-12-29 22:30:00 阅读：114 来源： 互联网

标签：box 知识点 webkit div 移动 border 去掉属性

<!DOCTYPE html>
<html lang="en">
<!--还有添加的知识点 本来我们的分辨率是可以对上物理像素的1:1 因为**屏幕技术的出现啊(忘记了)它让像素点在屏幕上压缩使得原本的区域像素点得到了翻倍
n*n 各个手机不一样造成了我们的n倍显示1px我们现在是如比我们的开发像素使365px 手机上要显示的是365*2(宽高都是) 我们设置1px在开发环境上 到了苹果手机上他是要2px显示
如果是图形就会失真可以用100px的图片先把他用backgroung-size:先设置成50px 他会在手机上自动扩大显示100px图片就正常了-->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0 ,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <!-- viewport视口 有布局视口:就是你网页的布局整体大小 可视窗口你手机浏览器可以让你看到的部分
         理想视口 你的布局视口与可视视口同大小不用缩放-->
    <!--width=device-width宽度是你设备的宽度,initial-scale=1.0初始化缩放是正常1.0 
    maximum-scale=1.0,minimum-scale=1.0,user-scalable=no 最大缩放,最小缩放,允许用户缩放=no
    -->
    <title>移动端基础知识</title>
    <!--今天就这么多,主要有点慌其实全栈困在前端总想速速跳过shit,无法平静越学越是这样看了鱼皮的java全栈果然还是不能急
    主要是以后不想困在前端确实有点慌,这个还是慢慢搞
    -->
    <style>
        div[class^=c] {
            /*属性选择器的坑(shit写了这么久才发现) div后不能加空格再写类属性不然是选择子代 原本div不会有变化*/
            width: 300px;
            height: 300px;
            background: aquamarine;
            display: inline-block;
            padding: 10px;
            border: 10px solid black;
        }

        .c2 {
            box-sizing: border-box;
        }

        .ac {
            -webkit-tap-highlight-color: transparent;
            /*背景高光透明*/
            -webkit-touch-callout: none;
            /*控制弹窗不弹出*/

        }

        .bc {
            -webkit-appearance: none;
        }
    </style>
</head>

<body>
    <p>css以前盒子的整体大小会因为加padding border改变 margin不算,你加多少不会印象内容但会使你盒子变大多少</p>
    <p>css3中有了新的属性box-sizing:border-box他使我们的盒子大小不会改变只会研所内容的区域</p>
    <div class="c1">

    </div>
    <div class="c2">

    </div>
    <p>以下是移动属性必须用移动布局查看(打开google的f12用手机模式)</p>
    <p>我们的手机浏览器大多是基于webkit内核开发所以有些属性要加上-webkit-</p>
    <p>transparent是透明是用在死背景上的 opacity也是透明用在动态变透明上</p>
    <a href="#">a链接在移动端上点击会有高光背景需要去掉,并且长按会弹出选择框也需要去掉</a>-------------------<a class="ac" href="#">去掉后</a>
    <p><button>原样按钮或输入框</button>-------------------------<button class="bc">去掉样式</button>
    <p>
</body>

</html>

标签：box,知识点,webkit,div,移动,border,去掉,属性
来源： https://blog.csdn.net/weixin_46564011/article/details/122226132

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

移动端知识点