CSS盒子模型

一、CSS盒子模型

  盒子的构成为:

    1.盒子的内容区:content.

    2.盒子的边框:border(border-top、border-right、border-bottom、border-left).

    3.盒子的边框与内容之间的距离:padding(padding-top、padding-right、padding-bottom、padding-left).

    4.盒子与盒子之间的距离:margin(margin-top、margin-right、margin-bottom、margin-left).

二、盒子的相关属性:

[1]:内容属性:宽,高;

  [2]内填充属性padding(在定义盒子的宽度时。要考虑到内填充、外填充、边框、边界的存在)

  (在使用外边距时一定要注意浏览器的兼容性,不兼容的情况下,可以使用给外面的盒子加边框的方法来解决此问题;除了值为零的情况下,所有的非零的值后面都要加单位)

  [3]外填充属性margin(内外填充属性都可以使用关键字-方向的方法来进行css操作,但一般还是使用直接用关键字的方法来控制,如:margin-top、margin-right、margin-bottom、margin-left在控制时,按照上右下左顺时针方向进行操作,规则为不足时到对边去找,如padding:20px 30px 50px 表示上边距为20,下边距为50,左右边距均为30)

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • java中带继承类的加载顺序详解及实战

      在面试中,在java基础方面,类的加载顺序经常被问及,很多时候我们是搞不清楚到底类的加载顺序是怎么样的,那么今天我们就来看看带有继承的类的加载顺序到底是怎么...

    阿豪聊干货
  • CSS语法小记

        1.选择符(Selector):指明这组样式所要针对的对象。可以是一个XHTML标签,例如h1,img;也可以是定义了特定的id或者class的标签,如...

    阿豪聊干货
  • windows系统查看80端口被占用的程序并结束该程序运行

      最近系统更新以后,我在Idea中适用80端口启动项目的时候发现80端口被占用了,就查了资料看怎么找到占用80端口的程序并结束其运行,下面把解决方式共享给大家...

    阿豪聊干货
  • BUF大事件丨实锤!涉美CIA攻击组织对我国发起网络攻击;Gitee遭受DDoS攻击

    本周BUF大事件还是为大家带来了新鲜有趣的安全新闻,全球首家实锤,涉美CIA攻击组织对我国发起网络攻击;《网络信息内容生态治理规定》3月1日施行,禁止网络暴力、...

    FB客服
  • 【Python3】基本数据类型-整型(

    py3study
  • 用Python探索红楼梦里的关系

    “ 拜读过徐麟兄(公众号“数据森麟”)发布的《“水泊梁山“互联网有限公司一百单八将内部社交网络》,真的是引人深思,辗转反侧啊(我已经不知道用什么词来形容了

    周萝卜
  • 自动驾驶的模型预测控制

    我们实施了一个模型预测控制来驱动赛道上的赛车。但是这一次我们没有交叉错误,我们必须自己计算。另外,在连接延迟之上的执行命令之间有100毫秒的延迟。 这篇文章从非...

    刘盼
  • VB 中chr(10)、chr(13)和vblf、vbcr、vbcrlf的分别

       cr是回车,只有回车,是到本行的最头上;lf是换行,到下一行;crlf是到下一行的最头上

    令仔很忙
  • 看故事,学排序

    在面试的过程中,有的面试官也会问到这个排序。今天我们看一个故事来感受一下冒泡排序的过程。

    用户1260737
  • python拉取股票数据存入mysql

    用python拉取 https://tushare.pro/register?reg=129295 中的股票数据并存入mysql.

    xiny120

扫码关注云+社区

领取腾讯云代金券