CSS中的盒子模型

一、CSS中常用的长度单位

        px（像素）

        em (相对于当前元素或者父级元素的font-size的倍数)

        rem (相对于根元素即html元素的font-size的倍数)

        %

二、元素的显示模式

        块元素block

                在页面中独占一行，

                默认宽度，撑满父元素，

                默认高度，由内容撑开，

                可以通过css设置宽高。

        行内元素inline

                不独占一行，一行容纳不下，会自动换行

                宽度，由内容撑开

                高度，由内容撑开

                不能通过css设置宽高

        行内块元素inline-block

                不独占一行，一行容纳不下，会自动换行

                宽度，由内容撑开

                高度，由内容撑开

                可以通过css设置宽高

        修改元素显示模式：display:   可取值为none   block  inline-block  inline

三、盒子模型

        css会把所有的html元素看成一个盒子

        margin

                塌陷问题：第一个元素的上外边距和最后一个元素的下外边距会做用到父元素上

                        解决方法：给父元素加上样式overflow:hidden

                合并问题：上边元素的下外边距和下边元素的上外边距会合并，取其中大的一个

        border

        padding

                复合属性写法

                1个值   上下左右相等

                2个值   第一个值代表上下，第二个值代表左右

                3个值   第一个值代表上，最后一个代表下，中间代表左右

                4个值   上  右  下  左    即为顺时针

                注意：行内元素的上下边距设置了之后可能不占位置

        content

                内容区设置宽度/最大最小宽度  高度/最大最小高度

                width min-width max-width    height min-height max-height

        外边距不影响盒子的大小，但会影响盒子的位置

四、处理元素溢出

        overflow:

                hidden  scroll  auto  visible

五、隐藏元素的两种方式

        方式一：visibility:hidden   show    虽然隐藏了但还占据原来位置

        方式二：display:none  不占据原来位置