前端第四课--行内盒模型

行内盒模型

**文本线:**共有四条线,作用于图片和文字的对齐,默认的对齐方式是基线。

vertical-align:baseline(基线),middle(中线),top(顶线),下线(bottom);

文本基线:文本基线的位置是每一种字体中英文字母x的底线决定的。

文本底线:文本底线的位置是文本框底部的位置。

文本顶线:文本框顶部(此时图片的顶部与文本顶线对齐,其余都是底部)。

文本中线:文本中间的位置。

**行内盒模型与块级盒模型的区别:**对于行内盒模型设置其外边距margin上下是没有效果的,只有左右。内边距padding上是没有效果的,但设置padding-bottom文字不会自动垂直居中。

字体:

自定义字体:@font-face{

​ font-family:“文件名称”;

​ src:url(文件名.ttf/字体连接);

}

设置字体font-family:Tahoma(大河马),Helvetica,Arial,Simun(宋体);

后面可加多个字体,用户使用时会在导入的字体文件中挨个寻找并使用改字体,或者在本地中寻找。

font-size:1em/1px;

em:是父级的字体大小,随父级变化而变化;px:是直接的改变字体大小;

字体样式:目前的字体设计领域,字体大致分为两大类

1:Serif(有衬线),多用于网页正文,内容等大量文字内容区域

2:Sans Serif(无衬线),多用于文章的标题,表格,宣传海报等一些要求文字醒目的领域在这里插入图片描述
文文本行高:(文字自动居中,行高的高度大于字体像素,line-height-font-size=行间距,两个文本的行间距叠加);

line-height:100px;

line-height:200%;(这里设置的行高是文字大小的百分比);

文字缩进:

text-indent:28px(若文字的大小事14px,实现缩进两个文字字符)

text-indent:2em(指的是缩进两个文字大小,更方便)

文本对齐格式:(未设置时是默认左对齐)

居中:text-align:center;

右对齐:text-align:rignt;

两端对齐:text-align:justify;(文字较多时才会拉扯开实现两端对齐)

文本装饰:

下划线:text-decoration:underline;

上划线:text-decoration:overline;

贯穿线:text-decoration:line-through;

清除a标签的下划线{text-decoration:none;};

字体放粗:font-weight:700;(还可以通过单词加粗bolder,bold);

设置文字的鼠标样式:cursor:pointer;/url(链接),default;(鼠标放置在文字上时的样式);

**去掉标签

  • 前面的小黑点:**list-style:none;
  • 盒子和文字的关系:

    当盒子未设置height时不会显示盒子,未设置width时默认为网页的宽度;

    盒子大小未设置时:里面的文字优先占满行(网页的width)盒子的高度是所有文字放进后确定的。

    若盒子的大小以设置:则文字会从左上角开始直到占满,多于文字会溢出。

    在块级标签里面的文字是在盒子的左上角位置,要想将文字居中,则可以设置文字的line-height等于盒子的height。(文字的上边框是紧挨盒子的)。

    出。

    在块级标签里面的文字是在盒子的左上角位置,要想将文字居中,则可以设置文字的line-height等于盒子的height。(文字的上边框是紧挨盒子的)。

    發表評論
    所有評論
    還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
    相關文章