前端学习入门笔记（CSS-2）

盒模型：

盒模型，盒子模型，框模型（box model）

　　CSS将页面中的所有元素都涉及成了一个矩形盒子

　　将元素涉及成矩形之后，对页面的布局就变成了将不容的盒子摆放到不同的位置

　　每一盒子都由以下部分组成：

　　内容区（content）：元素中所有的子元素和文本内容都在内容区中国排列，内容区的大小由width 和 height 两个属性来设置  width 设置内容区的宽度  height设置内容区的高度

　　　边框（border）：边框属于盒子边缘，边框里边属于盒子内部。出了边框都是盒子外部。边框的大小会影响到真个盒子的大小  要设置边框，至少需要设置三个样式：

　　边框的宽度：border-width：边框用来设置盒子的边缘 必写的三个要素border-color border-style border-width（该选项有3px）可以用来指定四个方向的边框的宽度  其中border-width 写的四个值可以表示（上右下左）四个方向的边框宽度  少些一值则以先写的为对应。

　　　　其他选项：border-xxx-width（xxx可以top.bottom.right.left）表示上下左右四个方向的border的宽度

　　　　border-color同样可以指定四个边框的颜色，且指定方向和border-width的方式一样（如果border-color省略则自动使用color值为黑色）

　　　　border-style 指定边框的样式：默认值为none  即没有

　　　　solid实线  dotted 点状线 dashed虚线 double双线

　　　　boeder的简写属性(border-xxx 和border的语法一样)

　　　　示例 border solid 10px orange

　　边框的颜色:border-color

　　边框的样式:border-style(solid实线)

　　内边距（padding）：

　　padding-（top，right，xxx）

　　内边距的设置会影响盒子的大小

　　背景颜色默认情况下会延申到内部边距

　　外边距（margin）：外边距是看不见的

 

        默认情况下设置的左上边距则元素会移动自己

        右下则是移动其他元素

         margin也可以设置负值，往相反的方向移动

　　  margin不会影响可见框的大小，但margin会影响实际框的大小

 

 

 

　　水平布局：

            水平方向的布局：

                元素在其服元素中水平方向的位置有以下几个属性构成

                    Margin-left 

                    border-left

                    padding-left

                    width

                    padding-right

                    border-right

                    margin-right

                    一个元素在其父元素中，水平布局必须满足以下的等式

                    即上诉元素的各种值之和必须等于父类中内容取的宽度

                 

                  如果七个值没有被auto的情况，则会自动调节margin-right

                 七个值有三个可以设置为auto。如果某个值为auto  则自动调整auto的值使得满足

                 margin-left  margin-right

                 如果将宽度和外边距调整至auto，则宽度会设置到最大，但外边距会调整至零

                 如果将两个外边距调整至auto  则两个外边距会自动平分

垂直布局：

　　　　默认条件下父类元素是被子类元素撑开的

               默认情况下，父元素的高度被内容撑开

               子元素在父元素的内容区中排列的

                如果子元素的大小超过了父元素，则子元素会从父元素中溢出，可以通过overflow属性来设置父元素如何处理溢出的子元素

　　可选值 visible  默认值 子元素会从父元素中溢出，在父元素的外部显示

　　　　　　hidden 溢出内容将会被裁减

　　　　　　hideen 包括overflow auto;   overflow hidden