前端学习day10：行内盒模型

行内盒模型：行内盒模型(inline-box) 是规定浏览器如何渲染排版文字的一套规则

特性一：行内元素不支持宽度和高度的设置，字体大小就决定了行内盒模型的内容区域所占大小

特性二：支持border但是上下的border不会影响盒子的大小

特性三：支持padding 但是上下的padding不会影响盒子的大小，背景颜色是会蔓延到padding区域下方的

特性四：上下的margin也不会生效, 左右的margin 能生效，margin:auto; 不会生效

 

span标签:是一个行内标签, 没有任何语义

 

文字对齐方式:text-align: justify;

默认是从左到右,left为默认值,right为右对齐,center为居中对齐,justify为文字两端对齐

 

字体倾斜:font-style: italic;

 

字体加粗:font-weight:bold;

bold 加粗,lighter 细体,normal 默认值  其值还可以设置为一个整百数字:100~900

 

设置文本缩进:text-indent: 2em;

 

字体间距:letter-spacing: 20px;

 

词间距:word-spacing: 1em;

 

长单词换行:word-break:keep-all;

normal 默认值,break-all 允许在单词内换行,keep-all 只能在半角空格或者连字符(-)的地方换行

 

字体大小:font-size: 25px;

 

字体颜色:color: blue;

 

使用自己的字体:font-family: "小王字体" , sans-serif;(如果"小王字体"不可用,则默认选择sans-serif字体)
sans-serif  无衬线,serif  有衬线

引入字体:@font-face{
            font-family: "小王字体";
            src: url("./font/云梦深深深几许（非商用）.ttf");(url里的是你下载好的字体的文件名)
        }
注意:一定要先引入字体才可以使用