css div里引用em字体会变斜体_前端css基础篇（二）css样式与盒模型

一、css 字体样式属性

①font-size:字号大小

font-size属性属于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位，其中相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少，

②font-family:字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用

p{font-family:"微软雅黑"；}

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直接找到合适的字体（IE6等老式浏览器支持奇数会有bug）

③font-weight:

参数normal:正常的字体。相当于number为400bold：粗体。相当于number为700。也相当于b对象的作用bolder：IE5 +特粗体lighter:IE5+细体number：IE+100|200|300|400|500|600|700|800|900

说明：设置文本字体的粗细。

④font-style:字体风格

字体倾斜除了用i和em标签之外，可以使用css来实现参数font-style属性用于定义字体风格，如斜体、倾斜或正常字体normal:默认值，浏览器会显示标准字体italic：斜体oblique：浏览器会显示倾斜的字体样式

⑤font:综合设置字体样式（重点）

font属性用于对字体样式进行字体综合设置，其基本语法格式如下

选择器｛font：font-style  font-weight font-size/line-height  font-family;｝

使用font属性时，必须按上面的语法格式顺序写，不能更换顺序，各个属性以空格隔开。注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

二、css外观属性

①color:文本颜色

color属性用于定义文本的颜色，取值方式有三种

1. 预定义颜色值，如red，green,blue等
2. 十六进制，如#FF0000
3. RGB代码，如红色可以表示rgb（255.0,0）或rgb（100%,%0,%0）。
4. 需要注意如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写0%。

②line-height：行间距

line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的时像素px

③text-align：水平对齐的方式

text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性如下：left：左对齐（默认值）right：右对齐center：居中对齐
是让盒子里面内容水平居中，而不是让盒子居中对齐

④text-indent:首行 缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同的单位数值，em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值，建议使用em作为设置单位。
1em就是一个字的宽度，如果是汉字的段落，1em就是一个汉字的宽度

⑤text-decoration 文本的装饰

text-decoration 通常我们用于给链接修改装饰效果

三、标签显示模式（display）

（1）块级元素（block）

每个块级元素通常都会独自占据一整行或者多行，可以设置宽度，高度，对齐等属性，常用于网页布局和网页结构的搭建。
常见块级元素有h、p、div、ul、ol、li等块级元素的特点：
① 总是从新行开始
② 高度、行高、外边距以及内边距都可以控制
③ 宽度默认是容器的100%；
④ 可以容纳内联元素和其他块元素

（2）行内元素（inline）

行内元素（内联元素）不占独立区域，仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽、高对齐等属性，常用于控制页面中文本的样式
常见的行内元素有a、strong、b、em、i、del、s、ins、u、span等，其中span标签是最典型的行内元素行内元素特点
①和相邻行内元素在一行上。
②高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效
③行内元素只能容纳文本或其他行内元素（a特殊）注意
1.只有文字才能组成段落，因此p里面不能放块级元素，同理还有h、dt，它们都是文字类的块级标签，里面不能放其他块级元素
2.链接里面不能再放链接。

（3）行内块元素（inline-block）

在行内元素中有几个特殊的标签-、、,可以对它们设置宽高和对齐属性，有些资料可能会称为它们为行内元素。

行内块元素的特点：
① 和相邻行内元素（行内块）在一行上从左往右显示，但是之间会有空白缝隙
② 默认宽度是它本身内容的宽度。
③ 高度，行高、外边距以及内边距都可以控制

display：none；隐藏、消失

如果设置了display：none；这个css属性，会将这个元素在页面中完全消失。如果想再让这个消失的元素显示出来，给这个元素设置display：block；

四、css盒子模型

在html页面中，html相当于一个仓库，有很多盒子（货物）：盒子和盒子之间的距离（margin外边距），盒子里面的内容（width/height），盒子的边框（border）,盒子内容与边框的距离（padding内边距）

• width 宽
• height 高
• padding 内边距
  同margin外边距，四个方向内边距
• margin:外边距
  margin：1px 2px 3px 4px;上 右 下 左
  margin：1px 2px 3px 上 左右 下
  margin：1px 2px 上下 左右
  margin：1px；设置了四个方向的值
• border：1px solid red；边框 solid实线

盒子计算公式

• 元素实际宽度=宽度width+padding-left/padding-right+border-left/border-right
• 元素实际高度=高度height+padding-top/padding-bottom+border-top/border-bottom
• 元素的实际大小只会受到padding和border影响，跟margin没有关系

标准盒模型

标准模型中，内容（content）的宽高只是内容（content）的宽高

IE盒模型

IE模型中内容（content）的宽高是内容（content）+填充（padding)+边框（border）的总宽高。

css两种盒模型设置

box-sizing默认的是content-box（标准盒模型）

/* 标准模型 */
box-sizing：content-box；
/* IE模型 */
``box-sizing：border-box；`

标准盒模型与IE盒模型区别

俩种盒模型盒子宽高的计算公式是一样的都是content宽高+padding+border；但是content内容的计算不一样
标准盒模型content(内容)宽高=width/height
IE盒模型content(内容)宽高宽高=width/height+padding+border

margin兼容问题

（一）相邻块元素垂直外边距的合并

一个元素设置margin-bottom，另一个元素设置margin-top，这俩个值不会相加，会取最大值（这个元素是平级、同级关系的时候）

解决方案：尽可能避免

(二)嵌套块元素垂直外边距合并

对于俩个嵌套关系的块元素，如果父元素没有上内边距padding-top及边距，则，父元素的上外边距margin-top会与子元素的上外边距发生合并，合并后的外边距为俩者的最大者，也是属于第三种margin-top的值传递问题

（三）margin-top的值传递问题

当父级 元素没有设置padding-top和border-top值时，给子元素设置了margin-top值时，这个值就会传递给父级元素解决方案：
① 给父级元素overflow：hidden；超出隐藏
②不要给子级元素设置margin-top,给我们的父级元素padding-top；（常用）

border边框

border：1px solid red;“常用”
border-width：1px；边框的宽度
border-style：solid；边框的样式
border-color:red;边框的颜色

border三角形

border-width是控制三角形的大小‘
给这个元素设置width：0；

<style>
.div1{
     width:0;
     border-width:20px;
     border-style:solid;
     border-color:red yellow blue  green;
}
</style>
<div class="div1"></div>

transparent透明度

<style>
.div1{
     width:0;
     border-width:20px;
     border-style:solid;
     border-color:red transparent transparent transparent;
}
</style>
<div class="div1"></div>

作者：志若鸿鹄，尺步寸微

链接：前端css基础篇（二）css样式与盒模型_志若鸿鹄，尺步寸微的博客-CSDN博客

来源：CSDN