CSS3盒子模型及移动端特殊样式

WangZhang_521

已于 2022-01-21 21:43:04 修改

阅读量121

点赞数

分类专栏：移动Web开发文章标签： css3 css html

于 2022-01-14 17:58:34 首次发布

本文链接：https://blog.csdn.net/WangZhang_521/article/details/122499565

版权

移动Web开发专栏收录该内容

13 篇文章 0 订阅

订阅专栏

CSS3盒子模型

<!DOCTYPE html>
<html lang="en">

<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">
    <title>CSS3盒子模型</title>
    <style>
        div:nth-child(1) {
            /* 传统盒子模型=width+border+padding */
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 1px solid red;
            /* box-sizing: content-box;默认 */
        }
        
        div:nth-child(2) {
            /* 有了这句话就让盒子变CSS３盒子模型 */
            /* padding和border不会再撑大盒子 */
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-color: purple;
            padding: 10px;
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>

效果展示

在这里插入图片描述

移动端特殊样式

<!DOCTYPE html>
<html lang="en">

<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">
    <title>移动端特殊样式</title>
    <style>
        a {
            /* 给移动端清楚高亮 */
            -webkit-tap-highlight-color: transparent;
        }
        
        input {
            /* 在苹果系统ios上给按钮和输入框默认的样式去掉.然后自己可以设置想要的样式 */
            -webkit-appearance: none;
        }
        /* img,
        a {
             /* 禁止长按弹出菜单 */
        /* -webkit-touch-callout: none;
    } */
    </style>
</head>

<body>
    <a href="#">黑马</a>
    <input type="button" value="按钮">
</body>

</html>

WangZhang_521

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS3盒子模型及移动端特殊样式

CSS3盒子模型<!DOCTYPE html><html lang="en"><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"> <ti
复制链接

扫一扫

专栏目录