css基础盒模型

盒模型组成

内容、内边距（内填充）、边框、外边距

边框边

  border:1px  solid #000;
  border:粗细  样式   颜色;

设置单独的边框线

  border-top
    border-bottom
    border-left
    border-right

取消边框线

border:none/0;

边框粗细

border-width
border-top-width
border-bottom-width
border-left-width
border-right-width
            1个值：4条边框
            2个值： 上下    左右
            3个值： 上      左右     下
            4个值： 上  右   下  左   顺时针方向

边框样式

  border-style
    border-top-style
    border-bottom-style
    border-left-style
    border-right-style
                solid   实线
                dashed  虚线
                dotted  点线
                double  双线

边框颜色

   border-color
    border-left-color
    border-right-color
    border-top-color
    border-bottom-color
            red 
            16进制的颜色
            rgb和rgba（）
            透明度取值0-1,0是完全透明

内边距
padding

1：设置内容和盒子之间的位置关系
2：边框线内部都可以设置padding
3：padding会让盒子变形，如果设置padding后想让盒子大小不变，盒子的宽高就需要减去padding的大小
4：    
        单一方向的padding
        padding-left
        padding-right
        padding-top
        padding-bottom

    设置多个方向的padding
                1个值：4条边框
                2个值： 上下    左右
                3个值： 上      左右     下
                4个值： 上  右   下  左   顺时针方向
                5：内边距不可以设置负值

外边距
margin

1、设置盒子与盒子之间的位置关系
2、边框线的外部的距离都可以设置margin
3、
     单一方向的margin
        margin-left
        margin-right
        margin-top
        margin-bottom

    设置多个方向的margin
                1个值：4条边框
                2个值： 上下    左右
                3个值： 上      左右     下
                4个值： 上  右   下  左   顺时针方向


4、margin:0px  auto;
  可以让块元素水平居中
    margin可以设置负值
                    margin-left：负值  （左边移动）
                                 正值  （右边移动）
                    margin-top： 负值  （上边移动）
                                 正值  （下边移动）

5、外边距的常见bug
        1、margin的重叠问题
        上下两个盒子之间的margin会重叠，谁的值大设置谁，水平不会

        解决方法： 只设置一个margin就行

    2、margin-top的传递问题
    当第一个子元素设置margin-top的时候，margin-top会错误的传递给父元素

    解决方法：
            父元素
                    border
                    padding
                    overflow:hidden
                    float（不推荐用浮动专门解决，可以顺便解决）

            子元素
                    float

盒模型的计算
总宽度= width+左右的padding+左右的border

总高度=  height+上下的padding+上下的border

---

字体属性

字体大小
font-size
        浏览器默认的字体大小是16px
        px/pt/em
        em:是一个相对的单位，先看自己的font-size值，如果自己没有font-size值，参照父元素的font-size值 

        1em=16px


字体颜色
color


字体加粗
font-weight 
            bold  加粗
            bolder 更粗
            normal  取消加粗
            100-900
            500是常规粗细

字体倾斜
font-style
        italic   设置倾斜字
        oblique  字体
        normal   取消倾斜


字体样式           
font-family: 字体1,字体2;

中文字体和多个英文单词组成的字体需要加引号


font :加粗    倾斜      大小   字体;

文本属性

首行缩进
text-indent：2em
可以设置负值，可以设置影藏文本的效果

文本修饰（线条的修饰）
text-decoration：
                underline   下划线
                overline    上划线
                line-throuth 删除线
                none        取消修饰



字间距
letter-spacing

词间距（识别的是空格）
word-spacing


水平对齐
text-align
        left    左对齐
        right   右对齐
        center  水平居中
        justify 两端对齐



行高
line-height
        1：设置多行文本的行间距
        2：行高设置单行文本垂直居中
        3：清除自带的行间距