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.合并问题(取大)


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

相关推荐
恋猫de小郭5 分钟前
Flutter 官方 LLM 动态 UI 库 flutter_genui 发布,让 App UI 自己生成 UI
android·前端·flutter
kymjs张涛28 分钟前
零一开源|前沿技术周刊 #15
前端·javascript·面试
reacx29 分钟前
# 第三章:状态管理架构设计 - 从 Zustand 到 React Query 的完整实践
前端
古夕31 分钟前
Vue3 + vue-query 的重复请求问题解决记录
前端·javascript·vue.js
不知名程序员第二部31 分钟前
前端-业务-架构
前端·javascript·代码规范
Bug生产工厂31 分钟前
React支付组件设计与封装:从基础组件到企业级解决方案
前端·react.js·typescript
小喷友31 分钟前
阶段三:进阶(Rust 高级特性)
前端·rust
华仔啊32 分钟前
面试官:请解释一下 JS 的 this 指向。别慌,看完这篇让你对答如流!
前端·javascript
Strayer32 分钟前
Tauri2.0打包构建报错
前端
小高00733 分钟前
💥💥💥前端“隐藏神技”:15 个高效却鲜为人知的 Web API 大起底
前端·javascript