Display样式 overflow样式

1. 内连盒子模型

内连盒子模型 不能设置 内容大小

width

height

两个属性

可以设置border,垂直不影响排版,水平影响排版

可以设置 padding 内边距。水平影响排版,垂直不影响

可以设置margin  外边距  只能设置水平,影响排版

水平外边距不会重叠。

2.Display样式用于修改元素的类型

        可选值 block 改为块元素

                    inline 改为内连元素

                    inline-block 块内元素

                        将元素转换为块内元素。既有块元素的特征,又有内连元素的特征

                        既可以设置宽高,又不独占一行。

 display 的none可以隐藏元素。不会占页面的位置

visibility样式也可以设置元素隐藏

    可选值hidden 隐藏元素,但是任然占页面的位置

    visible 默认值。不隐藏

3.overflow

     按理来说子元素的大小最大应该是等于父元素的大小

    但是html里面可以设置的子元素比父元素还大。然后就会溢出到父元素外面去显示

 overflow样式就是用来处理这种情况的

        可选值  hidden 将溢出的内容剪切不显示

                    scroll 添加滚动条。大小跟父元素一样大。但是可以通过滚动看到溢出的内容 无论溢出不溢出都会有滚动条

                    auto 自动。 如果溢出就通过滚动条查看溢出的元素,否则没有滚动条,比较智能。这个

                    visible 不做任何处理。默认的样式

 

猜你喜欢

转载自blog.csdn.net/lw277232240/article/details/80637498