专栏首页一番码客前端基础-CSS基础(七)

前端基础-CSS基础(七)

本文目录

盒子模型

参考

盒子模型

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div1{
                width: 100px;
                height: 200px;
                border: 5px solid red;
                padding: 10px 20px 30px 40px;
                margin: 0 auto;
                box-sizing: border-box; /*不更改盒子的大小*/
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
    </body>
</html>
  • 外边距不会改变盒子的大小,盒子大小:
    • 宽 = width + border左右的宽度 + padding左右的宽度。
    • 高 = height + border上下的宽度 + padding上下的宽度。
  • padding
    • padding:10px;上下左右都是10px。
    • padding:10px 20px;上下10px,左右20px。
    • padding:10px 20px 30px;上10px,左右20px,下30px。
    • padding:10px 20px 30px 40px;上右下左顺时针指定值。
  • margin0 auto;设置水平居中。
  • 可定义宽高的元素:
    • 块级元素(独占一行):pdivh1-h6ullioldldtdd
    • 替换元素:imginputtextarea
  • marging可以指定负值。
  • 默认情况下,块级元素时有margin的,因此可以自己声明样式覆盖默认样式。
  • margin设置为auto时,元素会有水平居中。
  • 外边距合并:垂直方向的外边距相遇时会合并成一个外边距,这个外边距的高度等于较大的那个外边距。

参考

  • 黑马程序员 120天全栈区块链开发 开源教程 https://github.com/itheima1/BlockChain

本文分享自微信公众号 - 一番码客(efonfighting),作者:Efonfighting

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端基础-CSS基础(八)

    efonfighting
  • 【JavaScript小项目】任务清单

    efonfighting
  • JavaScript DOM之元素查找与CSS样式设置

    efonfighting
  • css单边投影与双侧投影

    早晨在前端交流群里,有个朋友问css实现单侧投影的办法,因为这个朋友前几天刚发过照片,晒他买的csssecrets,我问他你书买来还没看吗? 他说来不及翻书了...

    练小习
  • JQuery生成图片列表

    彼岸舞
  • 带新手玩转MVC——不讲道理就是干(上)

    前言:这几天更新了几篇博客,都是关于Servlet、JSP的理解,后来又写了两种Web开发模式,发现阅读量还可以,说明JSP还是受关注的,之前有朋友评论说JSP...

    泰斗贤若如
  • 个人信息页面网页

    王凡汎
  • 【开源游戏/跑酷】我就是我

    我就是我是一款非常有趣另类的敏捷类跑酷HTML5游戏,在游戏中吃到桃心可以加快奔跑的速度,另外掉坑里,你要快速的点击屏幕,可以飞起来,只要你够牛X,你可以永远不...

    用户5997198
  • 纯 CSS 实现漂亮的大标题效果

    夏时
  • Css代码

    用户1127987

扫码关注云+社区

领取腾讯云代金券