HTML+CSS-Day09

三、尺寸和单位

- 定义宽度`width`和高度`height`可以使用长度单位：px，pt，rem，em，%等等

- 一般 pc 端网页使用 px 像素(屏幕小点)(配合%)          (笔记本;台式机)

- 移动端使用rem，vw，vh 等响应式单位                  (手机;pad;)

- 最大宽度最小宽度，最大高度和最大宽度（在响应式部分进行讲解）

  - `max-width`最大宽度，`max-height`最大高度

  - `min-width`最小宽度，`min-height`最小高度

  - 不允许出现负值，最小不满足时出现横向或竖向拖动条

四、颜色

1.英文颜色

- 常用 red,green,blue,yellow,orange,pink,purple,gold

- transparent 透明色

2.十六进制颜色

- `#rrggbb`#必须写     #ffffff;    #fff;

  - 1、2 位代表红色范围

  - 3、4 位代表绿色范围

  - 5、6 位代表蓝色范围

- 十六进制颜色范围是 0-9，a-f

- 如果三组都是相同的值，可以简写

- 企业标注图一般都使用十六进制颜色（需要大家认识标注图）

3.rgb 颜色

- `rgb()`函数，三个参数，用逗号分隔

- r 代表红色色值，g 代表绿色色值，b 代表蓝色色值

- 取值范围 0~255 之间的 256 个数

- `rgba()`a 代表透明度，取值 0~1 之间的数字，0 代表完全透明

【练习】

> 使用三种颜色赋值方式分别给元素赋值

> 给 p 标签加一个半透明背景颜色

div { width: 200px; height: 200px; /* 英文颜色 */ background-color: red; /* 透明色 */ background-color: transparent; /* 十六进制颜色 */ background-color: #f00d19; /* rgb颜色 0~255*/ background-color: rgb(10, 210, 30); /* rgba 最后一个a是透明度 */ /* background-color: rgba(0,0,0,0.5); */ } p { width: 100px; height: 100px; /* 最后一个值0-1之间 */ background-color: rgba(21, 95, 83, 0.39); }

五、边框

1.边框的属性

- `border-width`边框宽(线厚)度

- `border-style`边框样式，solid 实线，dashed 虚线，dotted 点点

- `border-color`边框颜色

2.边框的位置

- `border-bottom`下边框

- `border-top`上边框

- `border-left`左边框

- `border-right`右边框

3.边框都简写方式

`border:30px solid green;` 三个位置分别可以写边框宽度、边框样式边框颜色，没有严格要求书值都写顺序。

p { font-size: 100px; /* 简写方式  四个位置(上下左右)*/ border: 30px solid green; /* 单向边框简写 */ border-bottom: 30px solid red; }

4.三角形     

.sjx { /* 宽度必须要写0 */ width: 0; height: 0; /* 以下书写顺序不能改变 */ border: 100px solid transparent; border-bottom-color: black; }

六、元素的分类

1.元素的显示属性

`display`元素以什么方式显示(以下为常用显示方式)!!!!

- `display: block;`以块级元素方式显示

- `display: inline;`以内联(行内级)元素方式显示

- `display: inline-block;`属于行内元素，但以块级显示，俗称行内块

- `display: none;`不显示

- `display: table;`以 table 方式显示（不是重点）

2.内联元素

- 内联元素也可以叫行内元素

- 设置宽度、高度无效（行内块级显示元素除外）

- 和其他内联元素横向从左向右排列

- 设置上下内、外边距无效

- 常见的行内元素`span a`等

3.inline-block

- 它是行内元素的一种

- 不自占一行横向从左向右排列

- 可以设置宽度、高度以及内外边距

- 常见的行内块级显示元素`img button input`

- 会出现幽灵空白节点

  - 把 img 标签变成块级元素 `display: block;`

  - 父级元素`font-size: 0;`去掉空白节点

div { width: 300px; background-color: red; /* 去掉幽灵 */ font-size: 0; } img { /* 就是和父元素一样宽 */ width: 100%; display: block; }

4.块级元素

- 每个元素都自占一行，后面的元素也只能另起一行

- 元素的宽度、高度以及内外边距都可以设定

- 块级元素宽度不设定，为父级元素宽度

- 高度不设定为内容高度，如果没有内容，高度为 0

- 常见的块级元素`div,p,h1,ul,li,table`

【练习】   

> 将块级元素变成内联元素

> 将内联元素变成块级元素

> 让元素消失

> 将 a 标签变为行内块级显示

div { width: 100px; height: 100px; background-color: gold; /* 内联元素显示 */ display: inline; } span { width: 100px; height: 100px; /* 块级元素显示 */ display: block; background-color: yellowgreen; } p { width: 100px; height: 100px; background-color: blue; /* 不显示 */ display: none; } a { width: 50px; height: 50px; padding: 30px; background-color: orange; /* 行内块级显示 */ display: inline-block; }

七、显示和隐藏属性

1. display:none

- `display：none;`使元素消失，脱离文档流的消失

- `display：block;`使元素出现，元素显示为块级元素

2. visibility: hidden

- `visibility: visible;`元素显示

- `visibility: hidden；`元素隐藏，占据自身位置

3. opacity: 0;

- opacity 属性代表元素的透明度，取值范围是 0-1 之间的数字,0 代表完全透明,1 代表不透明

- 缺点是，元素内的一切都会随着透明度改变

八、文本格式化

1. 字体属性

（1）字体大小

字体大小可以使用不同的单位，如 px、pt、em、rem、vw 等等，不允许负值像素，尽量不出现小数。pt 是 ui 经常会用的单位，dpi： 直接来说就是一英寸多少个像素点，可以理解为像素密度，pt = px \* dpi / 72 ，遇到 pt 的设计图怎么处理，pc 端页面使用 px，移动端可以使用 em，rem 以及 vw

- `font-size: 30px;`字体号属性

- 取值，如 px、pt、em、rem、vw 等等，不允许负值像素，尽量不出现小数。

  - px 像素

  - pt 磅

  - em 父级元素的倍数

  - rem 根标签的倍数

  - vw 视窗尺寸

用户的浏览器默认渲染的文字大小是“16px”（大多数浏览器）“em”是一个相对的大小，相对的是"父级元素"的字体大小，我们可以这样来设置 1em，0.5em，1.5em。

（2）字体系列

在选择字体之前，一定要按照产品要求赋值，要确定用户有该字体，或者可能有该字体。字体不要只写中文，最好英文中文一起加入，并把该字体的英文描述写在前面。

- `font-family`属性设置所需要的字体

- 一个单词的可以之际使用，多个单词组成词组的用引号括起来，中文尽量用引号括起来

- 多个字体列表按照顺序从前往后查找执行

需要字体库的支持，用户字库中含有的字体。在 word 中查看当前电脑的字体库。一般情况下直接放在 html 标签下应用因为字体是继承的。

很多字体商用是收费的，因此在使用字体之前，需要参照公司，或者产品提供的字库列表，如果没有特别说明需要自己提问，这样显得更加专业。企业会指定字库，要考虑版权，商用和非商用的字体方案。

推荐字体序列

移动端项目：

font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;

pc端(含Mac)项目：

font-family:Tahoma,Arial,"Helvetica Neue","Hiragino Sans GB",Simsun,sans-self;

移动和pc端项目：

font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;

（3）字体字重

字体字重就是字体粗细，但根据浏览器的不同可能展现的粗细表现也不同，因此有些值的差别看不出来，尤其是移动端，要提醒 ui 不要太细，不要太粗，显得更专业

- `font-weight`字体的字重，字的粗细

- 于 1 和 1000 之间的数字类型值，必须要是 100 的倍数。

- 常用关键词：normal（400 默认）、bold（700）、lighter（300）

- 浏览器不同展现效果不同，需要注意

（4）字体样式

在一般情况下，因为部分标签带有自己的样式，所以一些公司在 css 样式重置的时候会先把所有的字体样式搞成统一的，比如具有斜体的`<i>`标签,会先把它变成默认样式再进行操作。

【注意】加粗的标签也会变成默认粗细。不建议使用标签做斜体

- `font-style`字体样式属性

- `font-style: normal;` 默认正常

- `font-style: italic;` 斜体

（6）字体的简写方式

- `font:italic 400 40px chiller;`

- 顺序：字体样式 字重 字号 字体系列，不可改变顺序

- 最简方式 `font：40px chiller; `字号和字体系列，不能再减少

2. 文本属性

（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

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

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

- 常用场景

- 行元素在块元素里上下左右居中（行高等于父级元素高度）

- 增加元素的文字行间距（在父元素设置，子元素也会生效）

 (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)文本的换行

- 文本换行的原因

  - 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的`white-space:normal`,当定义的宽度之后自动换行。

  - 对于连续的英文字符和阿拉伯数字不能换行,这是因为 div 中，英文字母之间没有空格的话，它会默认认为这是一个英文单词，所以单词就一次输出不换行

- 换行属性

  - `white-space: nowrap;`不换行

  - `word-wrap:break-word;`强制换行

（7）文本溢出

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

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

（8）文字阴影

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

- `text-shadow`为文字添加阴影。

- 可以添加多个阴影，阴影值之间用逗号隔开。

- 参数：

  - 第一个值和第二个值代表： x 轴上的偏移量 和 y 轴上的偏移量,长度单位，可以为负值。

  - 第三个值代表：模糊半径的大小（羽化）。【可选】

  - 第四个值代表：颜色值。【可选】

/* x轴偏移 | y轴偏移 | 模糊半径 | 颜色 */ text-shadow: 1px 1px 2px black;

九、垂直对齐方式

1.vertical-align 属性

- `vertical-align`是用来设置内联元素对齐方式的，针对的并不是自身的文字

- 常用关键字值：

  - `vertical-align: middle;`

  - `vertical-align: top;`

  - `vertical-align: bottom;`

  - `vertical-align: baseline;`img 的默认对齐值为基线对齐

input { height: 100px; vertical-align: top; /* 在前后加入内联元素或文字【改bottom、middle】 */ } <span>前一段文字</span> <input type="text"> <a href="#">后一段文字</a>

2. 文本元素基线

- 针对img元素vertical-align: baseline; /*不写就是默认值*/

- 文字的基线不同的文字会有不同的展现

【练习】

> 要求布局只有一个图片和一个名字标签

> 完成图示效果

<style> img { vertical-align: middle; } </style> <div> <img src="./img/垂直对齐头像.jpeg" alt="" /> <span>幔帐中的林黛玉</span> </div>

day09重点

1.前端使用的单位

（1）长度单位

px（绝对单位）、pt（磅）、%（针对父元素的）

（2）移动端em、rem、vw、vh

（3）s、ms、deg

2.长度值中的最大和最小

3.颜色

十六进制#rrggbb 0-9 a-f

rgb(x,x,x)范围0-255之间

rgba()a代表透明度0-1 之间1完全不透明

4.元素特性

（1）元素只要有文字就会有高度，高度是文字的高度

（2）元素的宽度，块级元素默认宽度是父元素宽度的100%

（3）内联元素没有文字的支撑不会呈现宽度和高度，有文字支撑的时候宽高是文字的宽度高度（特殊内联除外如img、input、button）

（4）块级元素不管设置的宽度是多少，默认自占一行，在父级空间。高度设置，设置了多高就是多高

（5）普通的内联元素只依靠文字内容撑开，宽度高度的设置均无效（特殊内联除外如img、input、button）

（6）块级元素的默认排列方式（文档流）从上往下顺序排列

（7）内联元素的默认排列方式（文档流）从左向右排列，如宽度不够时，换行继续从左向右排列

（8）inline-block 行内块，他是内联的一种特性为可以设置宽度高度等，但仍然从左向右排列。（不推荐座布局，因为幽灵空白节点）

5.幽灵空白节点

存在于行内块中，因此需要去掉时可使用以下方法

(1)把行内块变成，块级元素

(2)父级中去掉所有节点的像素值font-size:0(只针对于img使用)

6.元素消失与显示(区别一定要知道)

（1）display: none;彻底消失不占据页面中的任何位置，元素因none而消失的情况需要同样的属性display: block;来让元素重新显示

（2）visibility: hidden;隐藏属性，可以让元素不显示，但仍然占据原位置，isibility: visible;属性可以恢复之前的显示状态

（3） opacity: 0;代表元素透明，opacity: 1;代表元素完全不透明

7.rem和em

(1)em参照的是父级字号的比例，1em代表父级字号*1,2em代表父级字号*2

(2)rem参照html跟标签的指定字体大小的倍数

8.text-align属性

（1）文本在元素中（块级元素和某些特殊内联）水平对齐（左，右，中）

（2）当文本被内联元素包裹时，视为该内联元素与文字一体，都作为文本，因此该水平对齐方式给其内联元素的父级块元素

9.行高，行间距

（1）如果父级没有高度，文字给了行高，那么父级的高会被行高+文字一起撑高（注意是单行文字）

（2）单行文字在父元素（有高的）垂直居中，行高为父元素的高度即可

10.标题省略

div {

  /* 限制宽度 */

  width: 200px;

  /* 强制不换行 */

  white-space: nowrap;

  /* 多余部分不显示 溢出部分隐藏*/

  overflow: hidden;

  /* 文本溢出显示 (兼容不是很好)*/

  text-overflow: ellipsis;

}

作业：

1.写tmooc作业

2.复习（尤其是元素特性）

3.预习5-6