Web前端——CSS复习(3.27-3.31)

1、渐变

（1）什么是渐变？

“渐变”指的是两种或多种颜色之间的平滑过渡。

aa——渐变可指定多个中间颜色值（色标）；

bb——渐变可以用在任何适用背景图片的地方：线性渐变、径向渐变、重复渐变。

（2）渐变语法

在CSS3中使用background-image属性进行设置

取值为：linear-gradient（线性渐变）、radial-gradient（径变渐变）

repeating-llinear-gradient（重复线性渐变）、repeating-radial-gradient（重复径向渐变）

注意：

   线性渐变第一个参数表示的是线性方向（to bottom/top/left/right）

   径向渐变第一个参数是圆点向四周发散，圆点的位置（size-如“100px at left bottom”）

2、设置文本

（1）文本样式

font-size/font-family/font-weight

（2）文本格式

line-height——设置行高（用法：在设置文本框居中时，height与line-height值相同）

text-decoration——下划线（值为underline/none）

text-align——文本排列（left/right/center）

text-indent——首行缩进（单位为em，一个em表示缩进的几个字）

text-shadow——文本阴影（h-shadow v-shadow blur color）

（3）文本溢出属性

  注意：仅在“overflow:hidden”的情况下，才会有文本溢出的发生。

white-space——空格（nowrap[文本不换行]、normal[正常]）

text-overflow——文本溢出（clip[裁剪]、ellipsis[在隐藏部分之前显示，值对横向的溢出有用]）

（4）长单词换行属性

word-wrap——单词换行（normal[正常，长单词不换行]、break-word[长单词会换行]）

word-break——控制长单词的换行方式（break-all[无视单词，随意换行]、normal、keep-all[长单词不换行]）

（5）文本间距

word-spacing——英文单词与单词之间的间距

letter-spacing——英文字母与字母的间距+中文汉字与汉字之间的间距

3、表格常用样式

（1）垂直方向对齐

vertical-align:top/middle/bottom

（2）合并边框

border-collapse:collapse;

    作用：让table的双线边框合并成单线。

（3）边框边距——border-spacing

作用：设置相邻单元格的边框间的距离。

注意：仅限于分隔单元格边框，即border-collapse属性为separate值的情况下，也称为边框分离模式

取值：若为一个值，水平、垂直方向值相同的间距；若为两个值，第一个水平，第二个垂直。

（3）表格标题位置——caption-side

（4）表格布局固定或不固定

table-layout（固定：fixed，较为高效；不固定：默认，较为灵活）

案例见github网址：

https://github.com/Itcast-ZhaoXiaoyan/Web-Case-Code/commit/b64e42b033c6f4448de405b12a48e7090a4b99eb

4、定位概述

    定位：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

（1）普通流定位（默认定位方式）

对于块级元素，会出现换行（例如：p、div）；

对于内联元素，将会在一行从左到右排列水平布置。

（2）浮动定位

定义：将元素排除在普通流之外，即元素脱离标准文档流

float:left/right

注意：其元素不会超过父元素的内边缘。

（3）相对定位

（4）绝对定位

5、显示方式

“一切皆为框”：页面上所有的元素艘可以显示为框。

（1）块级元素——<div>、<h1>、<p>等，一块内容，即“块框”

（2）内联元素/行内元素——<span>、<a>等，一行内容，即“行内框”

除了默认的显示效果之外，可以使用display属性来修改元素框的显示方式，即改变生成的类型。

第一种——display

    display作用：行内元素、块内元素相互转换

取值：

a、display:none——表示隐藏元素，元素框彻底消失

（让框及所有内容就不再显示，不占用文档中的空间）

b、display:inline-block——转换为行内块(例如针对a标签)

注意：在低版本IE下，只支持行内元素变成行内块后，在同一行显示；

如果是块元素变成的行内块在低版本IE下依然会换行。

c、display:block——让行内元素（比如<a>元素）表现得像块级元素一样

d、display:inline——让块级元素（比如<p>元素）表现得像内联元素一样

第二种——visibility

该属性规定元素是否可见

a、visibility:visible——默认值，元素可见

b、visibility:hidden——元素不可见，但是依然占据空间

c、visibility:collapse——用在元素表格时，可删除一行或一列，且不影响表格的布局

第三种——opacity

opacity:value

   value规定不透明度，从0.0（完全透明）到1.0（完全不透明）

第四种——vertical-align

设置单元格中的单元格内容的垂直对齐方式

（对于行内块级元素，如<img>，可设置垂直对齐方式）

注意：定义行内元素的基线相对于该元素所在行的基线的垂直对齐

a、vertical-align:baseline——默认，元素放置在父元素的基线上

b、vertical-align:top——把元素的顶端与行中最高元素的顶端对齐

c、vertical-align:bottom——把元素的顶端与最低元素的顶端对齐

d、vertical-align:middle——把次元素放置在父元素的中部

（注意：若行内元素定义了vertical-align，则可以定义margin-top，并不会影响其他元素）

6、光标

鼠标样式cursor:pointer/help/wait/n-resize

(nn上 ne右 ns下 nw左)

 

案例：https://github.com/Itcast-ZhaoXiaoyan/Web-Case-Code/tree/master/nav