回顾比较重要的知识点（CSS文本，盒子模型）

文本属性

（1）字体颜色

  • 注意：不同终端展示颜色可能不同，尽量使用web安全色，或者沟通颜色的要求
  • color：颜色的色值
  • 取值:英文，⼗六进制， rgba()，其他

（2）文本的水平对齐方式

  • text-align 针对块级元素中的内联元素，它需要写在父级（块级元素）中，不能写在子元素中（文字本身和内联元素）
  • 取值

left 默认,左对齐
center 居中对齐
right 右对齐

  • 关于两端对齐属性（不常用）针对标签中的文本，两端对齐,针对英文的多行文本，单行和强制换行的情况不进行渲染,

  • 中文的两端对齐不管用。

  • 内联元素（单个）与文字（单行）在父级水平居中的方式：是对块级元素中的文字，或对块级元素的内联元素水平居中，这个元素需要给父级（块元素），块级元素的⽔水平居中不能使用该属性。

      div {
  width: 500px;
  height: 200px;
  text-align: center;
  /* 适用于div内部的文字和内联元素 */
  }

(3) 文本的行高

  • line-height 属性可以设置文本的行间距,可使用长度单位 px，或使用无单位的倍数如 1， 1.5， 2

  • 文本的行高包括文字上下间距+文本高度，文本居中上下行间距相等

  • 使行间距等于元素高度，则“单行文本”垂直显示在元素中

      div {
  width: 100px;
  height: 50px;
  /* 行高等于父级元素高度 */
  line-height: 50px;
  /* 水平居中 */
  text-align: center;
  }

多行文本垂直居中

	div {
	height: 200px;
	line-height: 20px;
	/* （高度-行⾼*行数） /2 */
	padding-top: 70px; /*(200-20*3)/2*/
	box-sizing: border-box; /*注意border*/
	}

(4) 文本的线条修饰

在使用 a 标签的时候有一个默认下划线,有时不需要,在 css reset 中将 a 标签的默认下划线去掉

  • text-decoration: none; 无线条
  • text-decoration: underline; 下划线
  • text-decoration: overline; 上划线
  • text-decoration: line-through; 删除线

（5）首行缩进

  • text-indent 指定块容器中第一⾏文本的缩进
  • text-indent: 2em 两倍的字体⼤小,相当于空两格

(6)文本的换行

image

文本换行的原因
正常文字的换行(亚⽂文字和非亚洲文字)元素拥有默认的 white-space:normal ,当定义的宽度之后自动换行。
对于连续的英文字符和阿拉伯数字不能换行,这是因为 div 中，英文字母之间没有空格的话，它会默认为这是一个英文单词，所以单词就一次输出不换行

换⾏行行属性
white-space: nowrap; 不换行
word-wrap:break-word; 强制换行

（7）文本溢出

各浏览器对 text-overflow:ellipsis 支持都不统一，特别是表现形式上，因此它的兼容性并不好。

image

/* 出现省略标记 */
.d1 {
background-color: turquoise;
width: 150px;
/* 超出部分隐藏（后面会学） */
overflow: hidden;
/* 当对象内文本溢出时显示省略标记（...） */
text-overflow: ellipsis;
/* 强制不换行 */
white-space: nowrap;
}

/* 多行省略，兼容性不佳慎⽤ */
.d2 {
background-color: pink;
overflow: hidden;
text-overflow: ellipsis;
/* 兼容性 */
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}

8）文字阴影

文字阴影和盒子阴影类似,都需要具有关键的内容,但没有内阴影

  • text-shadow 为文字添加阴影。
  • 可以添加多个阴影，阴影值之间⽤逗号隔开。
  • 参数：
  1. 第一个值和第二个值代表： x 轴上的偏移量 和 y 轴上的偏移量,长度单位，可以为负值。
  2. 第三个值代表：模糊半径的⼤小（羽化）。【可选】
  3. 第四个值代表：颜色值。【可选】
    /* x轴偏移 | y轴偏移 | 模糊半径 | 颜色 */
    text-shadow: 1px 1px 2px black;

image

.d1 {
text-shadow: 2px 3px 10px green;
}
.d2 {
text-shadow: 4px 5px 2px red, -4px -5px 2px blue;
}
.d3 {
color: transparent;
text-shadow: 0 0 40px #000;
}

盒子模型

盒尺寸四大家族

每个元素的盒模型都包括四个部分。包含了了元素内容（content）、内边距（padding）、边框（border）、外边距
（margin）。

image

一个元素实际占地宽度： 左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距
一个元素实际占地高度： 上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距

image

2，元素内容

元素的内容可以是元素内的文字，也可以是元素的宽度和高度，大部分内联元素设置宽高无效，只能依靠内容撑开，因此内容就是内联元素中的文字。

3. 内边距

(1) 内边距的属性

padding 指盒子的“内补间”，宽高之外到边框以内的距离。
可以设置长度，如 px、 em、 rem 等,且不支持负值
padding 有四个方向分别是上、右、下、左

  • padding-top 上内边距
  • padding-right 右内边距
  • padding-bottom 下内边距
  • padding-left 左内边距

image

(2) 内边距的值

padding:长度值;
1个值，将用于全部的四边。
2个值，第一个⽤用于上、下，第二个用于左、右。
3个值，第一个⽤用于上，第二个用于左、右，第三个用于下。（⚡）
4个值，将按上、右、下、左的顺序作用于四边。（顺时针）

4.外边距

外边距的使用场合：元素的位置微调，元素之间的距离调整

(2) 外边距的属性

  • margin 指盒子的外边距，外边距是当前元素和其他元素之间的距离。
  • 可以设置长度，如 px、 em、 rem， %等,%取值都是父元素宽度的百分比取值。
  • 正值时是增大该方向外边距，负值时是缩小该方向外边距。
  • margin 有四个方向分别是上、右、下、左
  1. margin-top 上外边距
  2. margin-right 右外边距
  3. margin-bottom 下外边距
  4. margin-left 左外边距

(3) 外边距的值

和内边距⼀一样，外边距可以简写 1 ～ 4 个值，下和右不会产生效果的原因，是因为外边距其实是当前元素与同级元素之间的距离。
1个值，将用于全部的四边。
2个值，第一个⽤用于上、下，第二个⽤用于左、右。
3个值，第一个⽤用于上，第二个⽤用于左、右，第三个⽤用于下。（⚡）
4个值，将按上、右、下、左的顺序作用于四边。（顺时针）

(4) margin 的无效情形

外边距可以让元素发生位移效果，但只有左和上外边距会移动当前元素。下和右外边距，只能让当前元素和周围的元素保持距离。当旁边没有其他元素时，它只是看上去无效。因为， margin 是设置同级元素间的间隔，并不是设置它在父元素中的位置。如果右侧和下面并没有元素，就不会出现效果。

(5) margin 的 auto 取值

margin 有一个特殊的取值是 auto， auto 对上下外边距无效，左右取相同的值，使当前元素在父元素内左右居中

  • 块级元素在父元素中水平居中 margin:上下距离 auto;
  • 上下距离在没有的时候可以写 0
  • 内联素使用 margin： auto，不能完成居中效果

(5).1 自带外边距的元素

因不同浏览器对元素的默认渲染样式不同，所以默认的内外边距也可能不同。因此要在编写样式之前使⽤用
css reset 进⾏行行样式统一 * {margin： 0； padding： 0;}
body : 四个方向各 8px
ul ： 上下 16px 外边距， “左内边距”40px

(6) 外边距合并现象

  • 兄弟元素之外边距合并
  • 两个在文档流中（垂直相邻）兄弟之间外边距，同时存在的时候，取最大的值。

(7) 外边距溢出

  • 外边距溢出是父元素中在文档流⾥里的第一个和最后一个子元素会和父元素的上下边界产生合并现象。
  • 原因是外边距其实设置的是元素与同级兄弟元素之间的距离。因此第一个和最后一个⼦子元素的外边距会被浏览器会认为你定义的是其父级元素的边。
  • 解决⽅方案

  1. 父元素增加 padding-top 缺点：增加了父元素实际高度

  2. 增加父元素的边框，缺点：增加了父元素实际高度

  3. 父元素增加 overflow: hidden/auto; ，缺点，父元素就不能溢出显示内容了

  4. 使⽤用空表

    放在第一个子元素前和最后一个子元素后，作用是分隔与父级的粘连

  5. 使用 CSS3 伪元素 ::before 给父元素添加内容,源于增加空 

     .box::before {
 content: "";
 display: table;
 }

5. 不同元素的盒子模型（重点）

(1) 内联元素盒模型

内联元素的宽高是 auto，宽度高度只会一直随内容的宽度高度在同步变化。设置上下内边距和外边距无效。

  • 宽度高度是 auto，靠内容撑开
  • 设置宽度高度无效
  • 设置上下内外边距无效
  • 排列列方式，从左至右

(2) 内联元素盒模型块级元素盒模型

  • 块级元素就可以设置宽度和高度，
  • 只有文字内容不设置宽度高度，宽度为父元素的一行，高度为内容撑开的高度。
  • 宽度高度可以设置
  • 内外边距设置均有效果
  • 排列方式，从上至下
  1. 盒子模型的计算方式

image

怪异模式，边框（含）开始算起内部内容的面积（个人理解是从边框（含）往内的内卷模式）
宽度=边框+内边距+设置的宽度
高度=边框+内边距+设置的高度

box-sizing: content-box; 标准盒⼦子模型

  • 元素所占宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距
  • 元素所占高度=上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距

box-sizing:border-box 改变盒子模型计算方式

  • 设置的宽度 width = 左右 border + 左右 padding + 内容的宽度
  • 设置的高度 height = 上下 border + 上下 padding + 内容的高度
  • 注意：可能会导致内容溢出，需要时再使用
posted @ 2021-07-25 22:54  cansliang  阅读(171)  评论(0)    收藏  举报