css基本知识与盒子模型的应用

1.css基本样式：

font-size: 设置元素字体大小

            text-align:设置文本在元素内水平方向的位置。

            值：

                center:水平居中

                left：水平居左

                right;水平居右

                start:开始

                end：结束

      font-weight:设置字体加粗。

                值：

                  normal;默认值，定义标准字体。

                  bold：定义粗体文本。

                  bolder:特粗体，相当于strong与b的作用

                  lighter：定义细体文字。

                  1000-900：定义字符的粗细，400等于默认值normal，

                   700等于同于粗体文本。

         

         text-decoration:文本装饰。

            值：

               none :去除文本装饰，比如a标签的下划线。

                line-throngh:添加删除线。

                underline:添加下划线

                overline:添加顶部线

            text-indent:设置段落首行缩进的距离。

                单位：

                     em：相当于当前元素的字体大小

            font-family:设置字体类型；字体家族

            font-family: "宋体"

               font-style:设置字体风格。

               值：

               normal：默认值，标准字体

               italic:定义斜体文本

        设置某段话的格式

            width:宽度；

              单位：

                  px,像素。

                  百分比：%，占父元素宽度的百分之多少。

                  注意：当元素没有设置宽度时，块元素宽度时父元素的100%，行元素宽度靠文本的内                               容撑出。          

             height:高度；

               单位：

                    px,像素。

                  百分比：%，占父元素宽度的百分之多少.(要在父元素有固定高度的情况下使用)

                             注意：

                      单位没有设置高度时，靠内容撑出高度，内容是浮动元素/绝对元素/固定定位除外。

             background-color:设置背景颜色。

              line-height:设置行高，行间距：

                 作用：

                     让文本在行间距内垂直居中，不允许使用负值。

                     值：

                     normal：合理设置间距。

                     number:设置数字，此数字会与字体大小相乘来设置行间距。

                     百分比：相当于当前文字大小的百分比进行行间距。

         letter-spacing:设置字间距，

           text-transform: 文本转换。

           值： uppercase：大写英文。

                lowercase：小写英文。

                capitalize:单词首字母大写，

2.margin的合并：

 margin的合并：

                块级元素的上外边距和下外边距有时候会进行合并。

                margin的合并只发生在块级元素之间(浮动元素/绝对定位/固定定位除外)。

            margin合并的几种情况：

                1.相邻兄弟之间margin的合并；

                2.父级元素中的第一个子元素和最后一个子元素外边距会穿透父元素，表现为父元素的外边距，称为父盒子塌陷(子元素设置margin-top父元素跟着一起移动)。

                    解决方法：

                        1.给父元素添加边框；

                        2.给父元素设置padding(值不能小于等于0)；

                        3.给父元素添加overflow: hidden;。溢出元素部分的内容隐藏。

                3.空div的合并。

            margin合并的计算规则：正正取最大，负负最小值，正负值相加。

 margin-top合并的解决方法：

        1.父元素设置为块状格式化上下文；

        2.父元素设置border-top；

        3.父元素设置padding-top；

        4.父元素和第一个子元素之间添加内联元素进行分割。

    margin-bottom合并解决方法：

        1.父元素设置为块状格式化上下文；

        2.父元素设置border-bottom；

        3.父元素设置padding-bottom；

        4.父元素和最后一个子元素之间添加内联元素进行分割。

        5.父元素设置height。

    不让空div合并的方法：

        1.设置垂直方向的border；

        2.设置垂直方向的padding；

        3.在元素内部添加内联元素；

        4.设置height。

    块状格式化上下文：BFC

        如果一个元素符合BFC的条件，该元素会成为独立的容器，元素内部的元素会垂直的沿着父元素的边框排列，和外部的元素互不干扰。

        触发BFC的条件：

            1.浮动元素，float除none以外的值；

            2.绝对定位为固定定位，position: absolute/fixed;

            3.display为以下任何一个值inline-block等，除块元素之外；

            4.overflow除visible以外的值(hidden,auto,scroll)。

3.盒子模型：

1.什么是盒子模型？

     盒子模型就是（box model)就是把html元素本身看作是一个矩形的盒子，每个矩形都是由内容（conter),内边距（padding），边框（border）外边距（margin）组成，每个盒子除了有自己的大小之外，还会影响其他盒子的位置。

     ##2.盒子模型特性：

          每个盒子都有内容（conter),内边距（padding），边框（border）外边距（margin）组成.什么是盒子模型

          每个属性都包括4部分：上，下，左，右。

### 3.标准盒子与怪异盒子模型的表现效果的区别：

    1）标准盒子中的width指的是内容区域（content）的宽度，高指的是内容区域的高度

    标准盒子的大小 =content + padding + border + margin

    2)怪异盒子模型中width指的是内容content+内边距padding+边框border

    怪异盒子的的大小=width（content + padding + border ）+margin

 

3.外间距与内边距

 padding：内边距

            作用：

                能撑大盒子，调整元素内容的位置。

            距离：

                从元素的边框(border)开始到内部的内容(content)之间的距离。

            语法结构：

                一、属性为padding，通过值控制不同边的内边距。

                    1.一个值：同时设置四个边的内边距；

                    2.两个值：分别表示上下、左右内边距；

                    3.三个值：分别表示上，左右，下内边距；

                    4.四个值：分别表示上右下左内边距。

                二、通过属性 padding-方向 控制四个边的内边距，设置单方向内边距。

                    padding-top: 50px;

                    padding-right: 50px;

                    padding-bottom: 50px;

                    padding-left: 50px;

  

        margin：外边距

            作用：

                元素添加外边距后会移动元素的位置，调整元素与元素之间的距离。

            距离：

                从自身的边框开始，到另一个元素边框之间的距离。

            语法结构：

            一、属性为margin，通过值控制不同边的外边距。

                1.一个值：同时设置四个边的外边距；

                2.两个值：分别表示上下、左右外边距；

                3.三个值：分别表示上，左右，下外边距；

                4.四个值：分别表示上右下左外边距。

            二、通过属性 margin-方向 控制四个边的外边距，设置单方向外边距。

                margin-top: 50px;

                margin-right: 50px;

                margin-bottom: 50px;

                margin-left: 50px;

    margin-top 合并的解决方法：

        1.父元素设置为块元素格式化上下文；

        2.父元素设置boder-top;

        3.父元素设置padding-top；

        4.父元素和第一个子元素之间

        块状格式化上下文：BFC

        如果一个父元素符合BFC的条件，该元素会成为独立的容器，元素内部与的元素会垂直的沿着父元素的边框排列，对外部元素无不干扰。

        触发BFC的条件：

            1.浮动元素，float除none以外的值;

            2.绝对定位为固体定位，position：absolute/fixed;

            3.display为一下

4.颜色的取值

1.使用颜色名。

               不建议大规模的使用，避免有些颜色不被浏览器解析，不同浏览器对颜色的解析有差异。

 2.使用百分比：

            reb :3种颜色。

            三个值都为最大值显示白色：

            三个值都为最小值显示黑色：

            三个值都相等显示灰色：

 3.使用数值：

       取值范围：0-255

 4.十六进制最常用的方法

 5.rgba:最后一个值控制颜色的透明度。

         a的取值范围：

             0-1,0为完全透视，1为完全不透视。

 5.元素转换

 1.display: 改变元素的布局方式。

                    值：

                        block：将元素转换为块元素。

                        inline：将元素转换为行元素。

                        inline-block：将元素转换为行内块元素。

                        none：隐藏一个元素，隐藏后不会显示。

2.html标签按照布局方式可分为：

            块元素，行元素，行内块元素。

        块元素特点：

            1.独占一行；

            2.可以设置宽高，

                如果不设置宽高，则显示默认宽高，如果也没有默认宽高，这显示为内容的宽高。

        布局方式默认为块元素：

            p，h1-h6等。

        行元素特点：

            1.不独占一行；

            2.不能设置宽高；宽高取决于自身的内容；

                多个行元素之间会左右排列；

                一行到最后显示不下时会自动换行。

          布局方式默认为行元素：

            b，a等。

        行内块元素特点：

            1.不独占一行；

            2.可以设置宽高；

            多个行内块元素之间会左右排列；

            一行到最后显示不下时会自动换行。

        布局方式默认为行内块：

            img，input等。