CSS属性-内外边距、文本属性

盒模型

作用   规定元素相互之间的位置关系（调间距调位置）
组成部分   content（内容区域    元素自身的大小）、padding（内边距）、border（边框）、margin（外边距）
标准盒模型的组成部分: content、padding、border、margin
        - 盒子自身的大小 content + padding + border
        - 盒子真实的大小 content + padding + border + margin

CSS属性

1. 浮动属性
作用：改变元素的位置
属性：float
属性值：left、right、none

说明：
浮动只能在水平方向移动
会让元素脱离文档流 
浮动元素碰到包含框（父级元素的边框）就会停止浮动
浮动元素碰到前面含有浮动属性的元素也会停止浮动
当最后一个子元素的宽度大于父级元素宽度的时候，会往下进行移动直至找到足够的空间停止浮动

2.内边距（padding）属性
作用：填充补白、内边距  一般用来调整父级与子级元素之间的位置关系
添加位置： 
        添加到父级元素上：会撑大当前容器的大小 不影响页面布局 需要减去相应的padding值
        添加到子级元素上：会撑到当前容器的大小
属性：padding
属性值：数值+单位（像素px）
padding的方向：padding-top / right / bottom / left
属性值设置：
        一个属性值：上下左右
        两个属性值：上下 左右
        三个属性值：上  左右  下
        四个属性值：上右下左
padding不能设置负值

3.外边距（margin）属性
作用：用来设置同级元素之间的位置关系
属性：margin
属性值：数值+单位（像素px）
margin的方向: 前端的方向都是顺时针的 margin-top / right / bottom / left
属性值设置:
        一个属性值：上下左右
        两个属性值：上下  左右
        三个属性值：上 左右 下
        四个属性值：上右下左 
margin是可以为负值
设置margin的时候必须要有包含框的接触

总结: 关于内外边距的一些固定用法
        设置浏览器的默认样式 *{margin:0;padding:0}
        设置版心居中 版心选择器{margin:0 auto}

   margin常见的bug
        1. 有两个元素(父子级关系) 给子级元素设置margin-top的时候 会错误的解析到父级元素
            - 把margin改成padding
            - 给父级添加边框属性
            - 前端解决布局用的最多的方法: 文本溢出属性 overflow:hidden
        2. 同级元素上下排列 margin-bottom/top 错误解析 解析之间的最大值
            - 只给一个方向添加即可

4.边框（border）属性
作用：给元素添加边框
属性：
          - border-width 边框的宽度(大小)
          - border-style 边框的样式
          - border-color 边框的颜色
属性值
          - 设置边框宽度 数值+单位
          - solid(实线) dashed(虚线) dotted(点线) double(双实线)
          - 颜色       
简写:
          属性: border
          属性值: border-width border-style border-color

改变某一个方向上的属性
          border-top-width/style/color
改变某一个方向上的所有
          border-方向:border-width border-style border-color

清除某一个方向上的边框/清除边框
          清除边框: border:0/none
          清除某一个方向上的边框 border-方向值:0/none

5.文本字体属性
5.1 文本大小
属性: font-size
属性值: 数值+单位（像素px）
          法定属性值和常规属性值
          常规属性值设置的时候都会添加单位(web中常用的单位是像素px)
          浏览器中默认的字体大小是16px
          由于浏览器存在差异 规定12px是浏览器中显示的最小字体
          建议设置字体的大小为偶数
          如果属性值为0 不需要添加单位
      
5.2  文本字体类型
属性：font-family
属性值：
          有中文英文，中文添加引号，英文一个单词不用加，2个以上要加        
          在浏览器中默认的字体类型是微软雅黑

5.3  文本加粗
属性：font-weight
属性值：
          100-500正常字体  600-900加粗字体
          bold加粗  bolder更粗
          normal 用来清除加粗标签默认样式

5.4 文本倾斜
属性：font-style
属性值：
          italic 倾斜的
          oblique 更倾斜的
          normal  正常字体

5.5 单行文本行高
属性：line-height  属性值：数值+单位（像素px）
          文本在垂直方向居中 行高 = 高度
          行高 > 高度 文字往下移动
          行高 < 高度 文字往上移动

注意:
        line-height多用于单行文本
        从第一行文本顶部量取到第二行文本的顶部即可

文本水平对齐方式: text-align
        left、right、center  justify 两端对齐

文本属性的简写
属性：font
属性值：font-weight font-style font-size/line-height font-family
         font-weight和font-style可以不写 或者 是互换位置
         font-size/line-height 固定写法 不能改不能换位置
         font-family 可以默认 但是不能不写

5.6 文本颜色
属性:color
属性值：
        常见的英文单词 green、yellow、red、pink
        十六进制: 0-9/a-fA-F(大小写不区分) #任意组成的六位字符
            - 常见的十六进制 #ffffff #000000 #cccccc 
            - 六位字符一样的时候可以省略为三位 #0 0 0
        其他:
            - rgb(red,green,blue)  0-255
            - rgba(r,g,b,alpha) 透明度 0-1

透明度的表示方式
            rgba()
            opacity:0-1

5.7 文本修饰
属性:text-decoration
属性值：
            underline 下划线
            overline 上横线
            line-through 删除线   <del>
            none 清除下划线

首行缩进(只针对第一行)
        属性:text-indent
        属性值: 数值+单位  也可以接负值

字间距: letter-spacing
词间距: word-spacing

6. 列表属性
有序列表、无序列表、自定义列表
有序还是无序列表前面的默认符号样式都是有兼容问题的

1.定义列表的符号样式
        属性:list-style-type
        属性值:disc(实心圆) circle(空心圆) square(实心方块) none(清除列表的默认样式)

 2.使用图片作为列表符号
        属性:list-style-image
        属性值:url()

3.定义列表符号位置
        属性:list-style-position
        属性值:inside\outside

4.重要的属性 清除列表样式
        属性:list-style
        属性值:none

7. 背景属性
1.背景颜色属性
        属性:background-color 可以简写成background
        属性值:
            - 英文单词
            - 十六进制
            - rgb/rgba
 2.背景图片
        属性:background-image
        属性值:url()
            - 当容器大于背景图片的时候 图片会进行平铺 !
            - 当容器小于背景图片的时候 图片只显示一部分
            - 当容器等于背景图片的时候 图片完整显示
        关于图片的使用
            - background-image: 是css属性 需要容器大小去支持
            - img 是html结构 
3. 背景平铺属性
        属性:background-repeat
        属性值:
            - no-repeat 不平铺 只显示一张背景图
            - repeat 平铺 默认值
            - repeat-x
            - repeat-y
4.背景图片定位
        属性: background-position
        属性值: 两个属性值
            - x轴的方向 left right center
            - y轴的方向 top bottom center
5.背景图的固定
        属性:background-attachment
        属性值
            - scroll 滚动 默认值
            - fixed 固定
6.简写方式
        属性: background
        属性值: 颜色 图片 平铺 定位 固定

8. 文本溢出属性
 8.1文本溢出属性
        属性:overflow
        属性值:
            visible 默认值 正常显示
            hidden  隐藏
            scroll   滚动
            auto    自动
        scroll和auto之间的区别
            - scroll 样式一直存在 当内容溢出的时候才会有滚动的效果
            - auto 当内容溢出的时候有滚动条 无溢出就不显示滚动条

 显示省略号的条件: 必须是单行文本
        - 容器要有固定的宽高大小
        - 让元素固定在一行内显示
        - 让超出去的文本隐藏起来
        - 隐藏的文本变成省略号

8.2 显示省略号

        属性: text-overflow

        值: clip  (不显示省略号)  / elipsis（显示省略号）

8.3 对浏览器中空白空间的处理
属性：white-space
white-space 和 br : br强制性换行

属性值
        - nowrap 不换行 常用并且重要
        - pre  保留了空白
        - pre-line 删除空格 保留换行
        - pre-wrap  保留了换行和空格

<pre></pre> 在pre标签里填写内容，代码是什么样，页面就渲染什么样子