zoukankan      html  css  js  c++  java
  • css中的盒模型

    1、作用:控制元素和元素之间,或者元素和内容之间的位置关系;

    2、概念:盒模型是CSS布局的基石,它规定了网页元素如何显示以及元素之间的相互关系,CSS定义所有的元素都可以有像盒子一样的外形和平面空间。即都包含内容区、补白(填充)、边框、边界(外边距)

    3、盒模型的组成:content(内容区)+padding(填充区)+border(边框区)+margin(外边界区)

    • content:元素的宽和高

    • border:盒子的边缘

    • padding 填充区域

      • 作用1:用来控制父元素和子元素之间的位置关系

      • 作用2:用来控制元素和内容之间的位置关系

      • 特点:添加了padding值之后,padding值会把元素原有的大小撑大;如果想让元素原本大小不变,需要在元素的宽高上减掉所加的padding值

      • 使用方法:

        • padding-top: 30px; 上填充

        • padding-right: 30px; 右填充

        • padding-bottom: 30px;下填充

        • padding-left: 30px; 左填充

        • padding:1 2 3 4; 复合式写法上右下左

        • padding: 1 2 3;1上 2左和右 3下

      • padding不会对背景图的位置造成影响

      • 背景色会延展到padding区域

    • margin:外边距

      • 作用:控制同辈元素之间的位置关系。

      • 特点:margin是显示在元素边框以外的空白区。

      • 使用方法:

        • margin-top: 30px; 上边距

        • margin-right: 30px; 右边距

        • margin-bottom: 30px;下边距

        • margin-left: 30px; 左边距

        • margin:1 2 3 4;复合式写法参考padding

      • 实现水平居中的方法:

        • margin:0 auto

        • margin-left:auto;margin-right:auto

      • margin是可以写负值的,padding不可以

      • margin不会影响元素的实际大小,但是也会增加他的所占区域

      • margin的bug:

        • 上下的两个元素的margin值会重叠显示谁的值大,就以谁的margin值显示(BFC解决)

        • 当父元素里的第一个子元素,添加margin-top的时候,会错误的把margin-top值添加给父元素。建立在当前的元素们没有添加边框和浮动的前提下。

          解决方法:BFC 1)给父元素添加overflow:hidden;推荐使用

          2)给父元素和子元素添加浮动属性

          3)可以给父元素添加边框

          4)把margin改成padding

    • 标准盒模型所占位置的组成:宽高(content)+padding+border+margin

      • 元素宽度占用的位置大小:宽+左右的padding+左右border+左右margin

      • 元素高度占用的位置大小:高+上下的padding+上下的border+上下的margin

    • 怪异盒模型:比如提交按钮

      • 元素的宽度:width(content+border+padding)+margin

      • 属性:box-sizing:border-box(怪异盒模型)/ content-box(标准盒模型)

      tips:li是块状元素,当不给他设置width属性的时候,他默认的宽度是100%,也就是跟父元素等宽,当你给他添加padding左右值的时候,li会重新进行宽度的计算,也就是加上padding值之后依然等于父元素的宽度。

  • 相关阅读:
    [异常处理]class kafka.common.UnknownTopicOrPartitionException (kafka.server.ReplicaFetcherThread)
    ceph安装问题
    “云赞奖”投票结果出炉!快来看看你和你的心中所属是否获奖了!
    Azure 5 月新公布(二)
    云计算安全合规认证哪家强?
    少侠,找个千手观音来帮你营销可好?
    云应用也可以像搭积木一样搭出来你造吗?
    Azure 5 月新公布
    Azure本月最新活动,速度Mark!!
    Azure 进阶攻略 | 上云后的系统,「门禁」制度又该如何实现?
  • 原文地址:https://www.cnblogs.com/shewill/p/13051381.html
Copyright © 2011-2022 走看看