css第四天盒子模型

1.盒子模型的组成

1. content内容区 元素中的文本和后代元素都是它的内容
2. padding内边距 紧贴内容的补白区域
3. border边框 盒子的边框
4. margin外边距 盒子和外界的距离

所以 一个盒子的大小=content + 左右padding + 左右border,并且margin不会影响盒子的大小,但是会影响盒子的位置

2.细谈padding 

可以分别单独写4个方向	padding-left right top bottom
可以复合属性	写1个	四个方向
	写2个	上下 左右
	写3个	上 左右 下
	写4个	上 右 下 左

总结: 1.第一个肯定有上,然后就是顺时针方向

2.特殊点 行内元素左右边距没问题,但是上下边距不能完美设置(站不住位,会给别人挤),块和行内块四个方向都正常

原因:行内元素不独占一行,设置了会被其他覆盖

3.细谈border

css属性名		属性值
border-style	边框风格	none 默认 solid实线 dashed虚线 dotted点线 double双实线
border-width	边框宽度	默认为3px
border-color	边框颜色
border	复合属性	没有要求
上面能组合成各种	例如 border-left         border-left-style         border-left-width         一共4X4+4=20种         border-left-color

4细谈margin

4.1margin的复合属性

和padding一样的复合属性写法
可以分别单独写4个方向	margin-left right top bottom
可以复合属性	写1个	四个方向
	写2个	上下 左右
	写3个	上 左右 下
	写4个	上 右 下 左

4.2margin注意事项

        1.子元素在父元素的content里

        2.上margin,左margin影响自身的位置(自己动),下margin,右margin会影响兄弟元素的位置(兄弟动)

        3.对于行内元素来说，左右的margin是可以完美设置的，上下的margin设置后是无效的。

结合之前的 对于行内元素 上下的margin和padding的设置是无效或者有问题的,左右的margin和padding是完美的

        4.auto是自动的意思,margin-left:auto 距离左边能多远就多远,所以 块元素水平居中 margin: 0 auto,距离左右能多远就多远就在父元素中 水平居中了

        5.margin的值可以是负值,(后面的块可以顶住前面的块)

4.3margin塌陷问题

       什么是margin塌陷? 第一个子元素的上 margin 会作用在父元素上，最后一个子元素的作用在父元素上

解决方案 1. 给父元素设置不为0的 padding

                2.给父元素设置宽度不为0的 border 

                3.给父元素设置 css 样式 overflow:hidden(最推荐,因为给父元素多加一共padding或者border会改变盒子的大小)

4.4margin合并问题

        什么是 margin 合井?上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。

解决方案:无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。

如上下要相距100,不能分别在2个写上 margin-bottom:50,margin-top:50,只在一个那里写个margin-top/bottom:100就好

5.默认宽度

        当一个盒子 没有设置宽度时,margin会影响盒子的 宽度

                           有设置宽度时,margin不会影响盒子的 宽度

因为 margin是外边距,是盒子到墙的距离,设置了一个magin,没有宽度时,就会去减小 盒子的宽度

                                                                                             有宽度时,只会改变他们的距离,不会改变盒子的宽度 

6.处理内容的溢出

         overflow:hidden隐藏  visible 显示(默认值)

7.隐藏元素的2种方式

        

2种方式	特点
display:none	不占位
visibility:hidden	占位,默认值为show

8.样式的传承

能继承的样式	字体属性  文本属性(除了vertical-align) 文字颜色等
不能继承的样式	边框 内边距 外边距 宽 高 溢出方式 背景等
规律:能继承的都是不影响布局的,简单说,和都是和盒子模型没有关系的

9.元素的默认样式 

                body有默认样式 4个方向有8px的外边距 

                元素的默认样式>继承的样式

10.布局技巧

        1.行内,行内块元素,可以被父元素当成文本去处理

                例如 text-align line-height text-indent等都可以去使用

        2.如何让子元素,在父亲中 水平居中

                若子元素为块元素,给子元素加上 margin:0 auto

                若子元素为行内,行内块元素,给父元素加上 text-align:center

        3.如何让子元素,在父亲中 垂直居中

                若子元素为块元素,在子元素中加上 margin-top:xx  xx的值为 (父元素高度-子元素高度)/2

                若子元素为行内,行内块元素,给父元素加上 height=line-height ,每个子元素加上 vertical-align:middle

        若想绝对垂直居中,父元素 font-size设置为0

11.元素间的空白问题

        产生的原因:行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符

        解决方法:

                1.:去掉换行和空格 (不推荐)。
                 2. 给父元素设置 font-size:0,再给需要显示文字的元素,再单独设置字体大小(推荐)。

12.行内块的幽灵空白问题

        产生原因:行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。

        解决方法:

                1. 给行内块设置vertical-align ，值不为 baseline 即可，设置为 middel、 bottom、top 均可

                2.若父元素中只有一张图片，设置图片为 display :block。

                3.给父元素设置 font-size: 0,如果该行内块内部还有文本，则需单独设置 font-size。