文本/font/overflow属性以与盒模型以及元素类与转化

文本属性

设置文本的水平对齐方式 text-align: left/right/center/justify(两端对齐)

line:height=npx(n为任意数)
设置文字垂直居中 行高越大文本向下移动 行高等于盒子的高度时实现文本垂直居中

图文对齐
         默认：浏览器在解析文字的时候是以基线对齐解析的
              而中文没有基线
              刚好，图片和文字也是基线对齐---》对不齐  

vertical-align:top(顶线)/bottom(底线)/middle(中线)/baseline(基线 默认对齐) 
              
文本修饰属性：文字加线
text-deraction:underline下划线/overline上划线/line-through中划线/

文本缩进属性
text-indent:32px/2em(2em为向右缩进两个字 -2em为向左缩进两个字)

首字母大小写
text-transform:capitalize(首字母大写)/lowercase(所有字母替换成小写)/uppercase(所有字母替换成大写)

文本是否换行属性，文本格式化属性
white-space:wrap(换行)/nowrap(不换行)/normal(默认)/pre(格式化输出)
字母加数字默认不换行！！！

字母间距
letter-spacing:npx

词间距 针对英文单词
word-spacing:npx

透明度
color:transparent/rgba(0,0,0,0)

font属性

是否斜体
font-style:normal(正常)/italic(斜体)

字体粗细
font-weight:100-900;与字体类型相关 400正常 >400粗 <400细

文字大小
font-size:12px/16px(正常大小)/npx(n为任意数); 不要写100%

行高
line-height:npx/1.5/150%(n为任意数);
1.5倍数 指的是字体大小的多少倍 更利于阅读
150%===1.5倍

字体类型
font-family:"字体1","字体2","字体3"
规则：1·不建议写中文（因为乱码）
2.中文字体可以切换成英文单词或者编码去表达
3.字体类型这里可以提供多个字体类型 每一个以,隔开
4.如果是英文单词去表达字体，那么一个英文单词不用加""，如果是两个就需要加""
font:12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif(阅读体),serif(印刷体)

盒模型

盒模型宽度=有效内容宽度width+左右两侧内边距padding+左右边框border+左右外边距margin
盒模型高度=有效内容高度height+上下两侧内边距padding+上下边框border+上下外边距margin
padding内边距

内边距作用：
       设置内容与盒子边界距离 默认值为0 不可设负值
       当你加了内边距就会加大盒模型----》加上去的剪掉
       写法：
       padding: 10px；
       padding-left
       padding-rigth
       padding-bottom
       padding-top
       padding:10px 20px 30px 40px 上 右 下 左
<!-- div元素来说 不设宽度时 默认属性auto 只不过auto取得就是父盒子所有有效宽度 -->
<div class="box">内容内容内容</div>

/* width:auto时候 如果盒子加了内边距 次数内边距会自动算进宽度里面 不会外扩出去---不会溢出 */
width: auto;
width:100%;/* width:100%时候 如果盒子加了内边距 没法计算会出现外扩现象 */

border边框

<!-- 
        边框作用：
        border 内外分隔很明确
        盒子内外的一个分割线！！！

        border：边宽 边型（必不可少） 边色
        border:边宽默认值1px solid（实线） 边色默认值是文本的颜色
        border:width(边宽): npx（上） npx（右） npx（下） npx（左）
        border:style(边型):solid（实线）/dashed（虚线）/dotted（圆点）/double（双实线）/none（无）
        border-color(边色):#000
-->

外边距margin

<!-- 外边距作用：
        1.设置盒子与盒子之间的距离
        2.移动盒子位置（利用左上边距 为+时向下和向右走 为—时向上和向左走）

        margin:npx(上)/npx(右)/npx(下)/npx(左)
-->
<!-- 
        使盒子水平居中前提： 
        此盒子必须要有明确的可以计算的宽度
        此盒子必须使块类型
        margin:0 auto 实现块类型盒子水平居中
-->

 /* 盒子向下移动100像素 */
        margin-top: 100px;
/* 盒子向左移动100px */
        margin-left: 100px;
 /* 盒子向上移动50像素 */
        margin-top: -50px;
 /* 盒子向右移动50px */
        margin-left: -50px;

外边距塌陷问题

/* 
        父子塌陷现象：
        1.当子元素设置上外边距时，会带着父盒子向向下移动，
        相当于设置到父盒子上侧，当盒子设置上外边距时，父盒子也刚好设置了自己的上外边距，
        这两个外边距会合并在一起取最大值。
        
        原因：父子公用一段外边距
        
        解决办法：让浏览器知道我们设置的上外边距属于父盒子之内的区域
                1.给父盒子设置上边框即可（区分内外侧）
                2.利用BFC规则 意在把盒子变成一个独立密闭的私有区域 内部不影响外部 外部不影响内部
                
                overflow:hidden/scroll/auto可以将块区域变成BFC区域
*/
/* 兄弟塌陷：
           现象：取较大值
           原因：兄弟共用了一段外边距
           解决办法：
                1.避免问题 设置到一个盒子身上即可
                2.可以选择其中一个盒子套一个div 这个div身上家overflow:hidden

*/

overflow属性

 /* box身上的内容溢出！！ 
        overflow:hidden（隐藏）/auto（如果溢出则显示滚动条，如果不溢出则不显示）/scroll（无论是否溢出都显示滚动条）
*/

元素的分类与转化

<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<!-- 
        块元素 display:block
        特性：1.默认宽度是取父盒子宽度的100%
              2.独立成行，一行一个
              3.设置宽高属性和盒模型属性起作用，设置行高可以撑开盒子
-->

<span>1</span>
<span>1</span>
<span>1</span>
<!-- 
        行元素 display:inline
        特性：1.所有行内类型是并排的
              2.宽高的大小取决于内容的大小
              3.设置宽高不起作用 设置上下外边距 边框 内边距 不起作用 设置左右外边距起作用（只是不分配空间）设置行高不撑开盒子

-->

<img src="" alt="">
<!-- 
        行内块元素 display:inline-block
        特性：1.并排中间有间距（解析后面的空格元素，其实行内块也具有文本特性）
               2.设置宽高属性起作用，设置盒属性起作用
               3，宽高取决于内容的大小
-->
display:inline/block/inline-block  可实现元素的转化