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