css3盒子

盒子模型

一.看透网页布局本质

二.认识盒子

盒子的大小是指内容的大小,边框和内边距均会影响盒子实际大小

三.盒子的边框(border)

1.概念

style默认是none

一般有solder,dashed,dotted

2.简写及分开写法

3.合并问题(会相加)

解决措施:border-collapse

4.边框会影响盒子实际大小

四.盒子的内边距(padding)

1.概念

2.简写

3.内边距会影响盒子实际大小

4.特殊情况(内边距不影响盒子实际大小)

5.实际应用(导航栏)

html 复制代码
 <style>
        .nav {
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            height: 40px;
            background: #fcfcfc;
            line-height: 40px;
        }

        .nav a {
            display: inline-block;
            font-size: 12px;
            color: #4c4c4c;
            padding: 0 20px;
            text-decoration: none;
            height: 40px;

        }

        .nav a:hover {
            background-color: #eee;
            color: yellow;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
    </div>
</body>

五.盒子的外边距(margin)

1.概念

2.简写(和内边距一样)

3.典型应用(使块元素水平居中)

4.合并问题(取大)


六.清除内外边距(一般浏览器默认有内外边距)

相关推荐
嘗_5 分钟前
暑期前端训练day5
前端
uncleTom66612 分钟前
前端布局利器:rem 适配全面解析
前端
谦哥15 分钟前
Claude4免费Vibe Coding!目前比较好的Cursor替代方案
前端·javascript·claude
LEAFF25 分钟前
如何 测试Labview是否返回数据 ?
前端
Spider_Man27 分钟前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm
心在飞扬29 分钟前
理解JS事件环(Event Loop)
前端·javascript
盏茶作酒291 小时前
打造自己的组件库(一)宏函数解析
前端·vue.js
山有木兮木有枝_1 小时前
JavaScript 设计模式--单例模式
前端·javascript·代码规范
一大树1 小时前
Vue3 开发必备:20 个实用技巧
前端·vue.js
颜渊呐1 小时前
uniapp中APPwebview与网页的双向通信
前端·uni-app