《HTML5与CSS3权威指南下册》读书笔记（2）-CSDN博客

本文链接：https://blog.csdn.net/qq_25740691/article/details/105977767

《HTML5与CSS3权威指南下册》读书笔记（2）

第22章盒相关样式

盒的类型

display:block|inline|inline-block;

inline-block:默认垂直对齐方式是地步对其，可使用vertical-align设置对其方式。使用float使元素排列。
inline-table:将table元素的block类型改为inline-table类型，让表格与其他文字处于同一行中
list-item:将多个元素作为列表显示，同时在元素开头添加列表的标记。使用list-style-type设置标记形式。
none：不显示元素
run-in：该元素将包含在后面的block类型的元素内部。（Safari与Opera浏览器支持）
compact：该元素将被放置在block类型的元素左边。（Opera浏览器支持）

<style type="text/css">
    dl#runin dt{
        display:run-in;
        border:solid 2px red;
    }
    dl#compact dt{
        display:compact;
        border solid 2px green;
    }
    dd{
        margin-left:100px;
        background-color:yellow;
    }
</style>
<dl id="runin">
    <dt>123456</dt> 
    <dd>hello world</dd>
</dl>
<!--123456在dl内部左侧-->

<dl id="compact">
    <dt>123456</dt> 
    <dd>hello world</dd>
</dl>
<!--123456在dl外部左侧-->

表格相关类型

元素	所属类型	说明
table	table	整个表格
table	inline-table	整个表格，可被指定为table类型，也可指定为inline-table类型
tr	table-row	表格中的一行
td	table-cell	表格中的单元格
th	table-cell	表格中的列标题
tbody	table-row-group	表格中所有行
thead	table-header-group	表格中的表头部分
tfoot	table-footer-group	表格中的脚注部分
col	table-column	表格中的一列
colgroup	table-column-group	表格中的所有列
caption	table-caption	整个表格的标题

各浏览器对各种盒类型的支持情况

盒类型	Firefox	Safari	Opera	IE8	Chrome
inline	v	v	v	v	v
block	v	v	v	v	v
inine-block	v	v	v	v	v
list-item	v	v	v	v	v
run-in	x	v	v	x	v
compact	x	x	v	x	x
table	v	v	v	v	v
inline-table	v	v	v	v	v
table-row	v	v	v	v	v
table-cell	v	v	v	v	v
table-row-group	v	v	v	v	v
table-header-group	v	v	v	v	v
table-footer-group	v	v	v	v	v
table-column	v	v	x	v	x
table-column-group	v	v	x	v	x
table-caption	v	v	v	v	v
ruby	x	x	x	v	x
ruby-base	x	x	x	v	x
ruby-text	x	x	x	v	x
none	v	v	v	v	v

对于盒中容纳不下的内容的显示

overflow:hidden|scroll|auto|visible;

hidden超出部分隐藏，scroll显示滚动条，auto若超出时才显示滚动条，visible超出部分显示

overflow-x,overflow-y

text-overflow:hidden隐藏超出部分，ellipsis末尾显示为省略号，但只在盒中水平方向超出范围时有效。

//默认超出隐藏
div{
	overflow:hidden;
    white-space:nowrap;
   // text-overflow:hidden;
    width:300px;
}

//超出省略
div{
	overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    width:300px;
}

对盒使用阴影

box-shaow：length1 length2 length3 color;

length1,length2:阴影离开文字的横方向和总方向的距离，设置为0时，将在盒的周围绘制阴影，可为负值
length3：阴影模糊半径，设置为0时将回执不向外的模糊阴影
color：阴影颜色

创建盒内阴影

指定盒内的内部音乐的水平和垂直方向的便宜距离为0，模糊半径和展开半径均为5px

box-shadow:inset 0 0 5px 5px #888;

对第一个字或第一行使用阴影

div.sample1:first-letter{
box-shadow:5px 5px 5px gray;
}

对表格及单元格使用阴影

table{
    border-sapcing:10px;
    box-shadow:5px 5px 20px gray;
}
td{
    background-color:#ffaa00;
    box-shadow:5px 5px 5px gray;
    padding:10px;
}

指定针对元素的宽度与高度的计算方法

box-sizing:指定用width与height分别指定的宽度和高度值是否包含元素的内部补白区域与边框宽度与高度。

【可用属性值】

content-box：元素的宽度和高度不包括内部补白区域与边框宽度与高度；（默认）
border-box：元素的宽度和高度包括内部补白区域与边框宽度与高度；

【目的】

对元素的总宽度做一个控制，若不使用该属性，默认content-box，它值对内容宽度做一个指定，却没有对元素的总宽度进行指定，有些场合下利用border-box会使页面布局更加方便，比如二等分并排显示的两个div

第23章背景与边框相关样式

与背景相关的新增属性

属性	功能
background-clip	指定背景的显示范围
background-origin	指定绘制背景图片时的起点
background-size	指定背景中图像的尺寸
background-break	指定内联元素的背景图像进行平铺是的循环方式，-moz-background-inline-policy

指定背景的显示范围——background-clip

一个具体的背景元素通常由元素的内容content，内部补白padding，边框border，外部补白margin构成

div{
    padding:30px;
    border:dashed 10px green;
    background-color:yellow;
    height:100px;
    width:100px;
}
div.div1{
    -moz-background-clip:border;
    -webkit-background-clip:border;
}
div.div2{
    -moz-background-clip:padding;
    -webkit-background-clip:padding;
}

指定背景图像的绘制起点——background-origin

默认从内部补白padding区域的左上角开始绘制，但可以利用background-origin来指定绘制时从边框的左上角开始绘制或者内容的左上角开始绘制。（-moz-background-origin,-webkit-background-origin）

div{
    background-color:black;
    background-image:url("test.png");
    background-repeat:no-repeat;
    border:dashed 15px green;
    padding:30px;
    height:100px;
    width:100px;
}
div.div1{
    -moz-background-origin:border;
    -webkit-background-origin:border;
}
div.div2{
    -moz-background-origin:padding;
    -webkit-background-origin:padding;
}

指定背景图像的尺寸——background-size


background-size:40px 20px;

background-size:40px auto;

background-size:50% 50%;

background-size:contain;

background-size:cover;

【属性值】

contain ：原始图像在维持纵横比例的前提下自动缩放，以使原始图像的宽度或高度完全等于元素的宽度或高度（确保图像能被完整显示在元素中）
cover ：是元素图像在维持纵横比的前提下将背景图像自动缩放到填满内部，如果元素长宽比例与原始图像的长宽比例不一致，那么多余部分江北剪去。

新增的用于平铺背景图像的选项——space与round

background-repeat:no-repeat|repeat|repeat-x|repeat-y;//平铺背景后超出范围剪裁掉

【属性值】（IE9以上，Chrome，Opera）

space :在水平或垂直方向平铺图像是并不剪裁掉图像超出的背景部分，也不会调整背景图像尺寸，而是自定调整图像与图像之间的间距。
round :在水平或垂直方向平铺背景图像时同样不会剪裁掉图像超出的背景部分，而是自动调整背景图像的尺寸。

在一个元素中显示多个背景图像

div{
background-image:url("picture.png"),url("picture1.png"),url("picture2.png");
background-repeat:no-repeat,repeat-x,no-repeat;
background-position:3% 98%,85%,center center,top;
    height:300px;
    width:400px;
}

允许被多重指定并配合多个图像文件一起利用的属性：

background-image
background-repeat
background-position
background-clip
background-origin
background-size

使用渐变色背景

绘制线性渐变

background:linear-gradient(angle,color1,color2);

background:linear-gradient(to bottom,yellow,orange);

【angle属性值】

to bottom
to bottom right
to right
to up right
to up
to up left
to left
to bottom left
角度，如45deg

【color属性值】

起点色到终点色
可以在起点色或重点色后边指定离渐变色起点或渐变色终点的偏离位置
添加多个渐变的中间点

background:linear-gradient(to bottom,yellow 20%,orange 70%);

background:linear-gradient(to bottom,yellow 20%,orange 50%,red 70%,brown 100%);

绘制放射性渐变

background-image:radial-gradient(yellow,orange);
//等价于
background-image:radial-gradient(circle,yellow,orange);

background-image:radial-gradient(at left top,yellow,orange);

background-image:radial-gradient(circle at center top,yellow,orange);

background-image:radial-gradient(at 100px 50px,yellow,orange);

background-image:radial-gradient(ellipse farthest-side at 100px 50px,yellow,orange);

background-image:radial-gradient(circle 80px at 100px 50px,yellow,orange);

background-image:radial-gradient(ellipse 80px 120px at 100px 50px,yellow,orange);

background-image:radial-gradient(circle 130px at 130px 50px,yellow 0%,orange 50%,red 70%,brown 100%);

【放射扩散方式】

circle呈圆形扩散，可指定圆半径
ellipse呈椭圆形扩散，可指定椭圆的纵横半径

【扩散起点位置】

通过at关键词指定渐变起点位置
center center中心点扩散，默认值
left top
center top
right top
right center
right bottom
center bottom
left bottom
坐标值，从指定坐标处向外扩散，如(30,50)

【渐变尺寸】

closest-side ：可渐变到离渐变起点最近的一条边
farthest-side ：可渐变到离渐变起点最远的一条边
closest-cornor ：可渐变到离渐变起点最近的一个角
farthest-cornor ：可渐变到离渐变起点最远的一个角

圆角边框的绘制

border-radius

border-radius:5px;//四个圆角5px
border-radius:4px 10px;//4px圆角=>左上角，右下角  10px圆角=>右上角，左下角 

border-radius:0;//无圆角

border-radius:3px 6px 9px 12px;//左上，右上，右下，左下
//等价于
border-top-left-radius:3px;
border-top-right-radius:6px;
border-bottom-right-radius:9px;
border-bottom-left-radius:12px;

使用图像边框

border-image：可让元素的长度或宽度处于随时变换的状态的边框统一使用一个图像文件进行绘制，让浏览器在显示图像边框时，自动将所使用的图像分割成9部分进行处理。

border-image:url("borderImage.png") 20 20 20 20/20px;

border-image:url(图像文件路径) A B C D

ABCD参数表示当浏览器自动把边框所使用到的图像进行分割时的上边距，右边距，下边距，左边距。

被分割为9部分的图像名称

border-top-left-image	border-top-image	border-top-right-image
border-left-image		border-right-image
border-bottom-left-image	border-bottom	border-bottom-right-image

border-top-left-image,border-top-right-image,border-bottom-left-image,border-bottom-right-image这四个部分没有任何展示效果，不会平铺，不会重复，不会拉伸，类似视觉盲点。

border-top-image,border-right-image,border-bottom-image,border-left-image这四个部分浏览器分别作为上,右,下,左边框图像进行平铺或伸缩。

border-image指定边框宽度

border-image:url(图片路径) A B C D/border-width;

border-image:url(图片路径) A B C D/topWidth rightWidth bottomWidth leftWidth;
border-image:url("borderImage.png") 10/5px 10px 15px 20px;

指定4条边中的图像的显示方法

border-image:url(图片路径) A B C D/border-width topBottom leftRight;
border-image:url("borderImage.png") 10/5px repeat repeat;

【上下，左右边中图像的显示方法】

repeat:平铺
stretch:拉伸
round：横向平铺，纵向拉伸

第24章 CSS3中的变形处理

transform功能的基础知识

旋转

transform:rotate(45deg);

缩放

transform:scale(0.5);

transform:scale(0.5,2);//水平方向缩小一半，垂直方向放大一倍

倾斜

transform:skew(30deg);//水平方向上倾斜30度，垂直方向上不倾斜
transform:skew(30deg,30deg);//水平方向上倾30度，垂直方向上倾斜30度

移动

transform:translate(50px);//水平方向上移动50px，垂直方向上不移动
transform:translate(50px,50px);//水平方向上移动50px，垂直方向上移动50px

对一个元素使用多种变形

不同顺序的变形运行结果不一定相同

transform:translate(150px,200px) rotate(45deg) scale(1.5) ;

transform:rotate(45deg) scale(1.5) translate(150px,200px);

变形基准点transform-origin

水平方向值：left,center,right

垂直方向值：top,center,bottom

transform-origin:left bottom;
transform-origin:50px 70px;//原点

使用3D变形功能

旋转

transform:rotateX(45deg);
transform:rotateY(45deg);
transform:rotateZ(45deg);
transform:rotateX(45deg) rotateY(45deg) rotateZ(45deg);
transform:scale(0.5) rotateX(45deg) rotateY(45deg);

缩放

transform:scaleX(0.5);
transform:scaleY(1);
transform:scaleZ(2);

transform:scaleX(0.5) scaleZ(2);
transform:scaleX(0.5) rotateY(30deg);

倾斜

transform:skewX(45deg);
transform:skewY(45deg);
//没有skewZ,倾斜属于二维变形，不能在三维空间倾斜，元素可能会在X轴和Y轴倾斜，然后转化为三位，但它们不能Z轴上倾斜

移动

transform:translateX(50px);
transform:translateY(50px);
transform:translateZ(50px);

变形矩阵

transform-origin:调整坐标原点，默认原点为中点。

计算2D变形

a	c	e
b	d	f
0	0	1

将2D变形矩阵写成matrix(a,b,c,d,e,f)

当应用2D变形处理时，浏览器将二维变形矩阵与一个数组[x,y,1]相乘，其中，x，y分别是一个坐标点在坐标轴的位置

结果：[ax+cy+e,bx+dy+f,0+0+1]

平移变形矩阵：

1	0	tx
0	1	ty
0	0	1

transform:matrix(1,0,0,1,tx,ty);
transform:matrix(1,0,0,1,50,100);
transform:translate(tx,ty);
transform:translate(50px,100px);

计算3D变形

0	0	0
sy	0	0
0	sz	0
0	0	1

3D缩放变形矩阵，sx,sy,sz代表x,y,z轴上的缩放倍数

transform:matrix3d(sx,0,0,0,sy,0,0,0,sz,0,0,0,1);
transform:matrix3d(0.8,0,0,0,0.5,0,0,0,1.5,0,0,0,1);
transform:scale3d(sx,sy,sz);
transform:scale3d(0.8,0.5,1.5);

第25章 CSS3中的动画功能

Transition功能

通过将元素的某一个属性从一个属性值在一段时间内平滑过渡到另一个属性值的实现动画

transition:property duration timing-funciton

property：表示对哪个属性进行平滑过渡
duration：表示在多久时间内完成属性值的平滑过渡
timing-funciton：表示通过什么方法进行平滑过渡

div{
        background-color:#ffff00;
        transition:background-color 1s linear;
    }
    div:hover{
        background-color:#00ffff;
    }

transition-property:background-color;
transition-duration:1s;
transition-timing-function:linear;

transition-delay:2s;//变换动画特效延迟多久后开始执行

transition:background-color 1s linear 2s;

使用transitions功能同时平滑过渡多个属性

div{
        background-color:#ffff00;
    color:#000000;
    width:300px;
        transition:background-color 1s linear,color 1s linear,width 1s linear;
    }
    div:hover{
        background-color:#00ffff;
        color:#ffffff;
        width:400px;
    }

img{
    position:absolute;
    top:70px;
    left:0;
    transform:rotate(0deg);
    traisition:left 1s linear,transform 1s linear;
}
div:hover img{
    position:absolute;
    left:30px;
    transform:rotate(720deg);
}

Animations功能

Animations与transition异同

【相同】通过改变元素的属性值来实现动画效果

【不同点】

transition只能指定属性的开始值与终点值，然后在这两个属性值之间实现平滑过渡，不能实现更为复杂的动画效果。

Animation通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更复杂的动画效果。

div{
    background-color:red;
}
@keyframes mycolor{
    0% {
        background-color:red;
    }
    40%{
        background-color:darkblue;
    }
    70%{
        backround-color:yellow;
    }
    100%{
        background-color:red;
    }
}
div:hover{
    animation-name:mycolor;
    animation-duration:5s;
    animation-timing-function:linear;
}

animation-delay:延迟多少时间后开始执行动画

animation-delay:2s;
animation-delay:100ms;

animation-iteration-count:动画执行次数，可指定为infinite（无限次）

animation-iteration-count:1;

animaition-direction:动画的执行方向

normal:初始值（动画执行完毕后返回初始状态）
alternate:交替更改动画的执行方向
reverse:反方向执行动画
alternate-reverse:从反方向开始交替更改动画的执行方向

animation

animation:keyframe的名称 动画的执行时长 动画的实现方法 延迟多少秒后开始执行动画 动画执行的次数 动画的执行方向

实现多个属性值同时改变的动画

div{
    position:absolute;
    background-color:yellow;
    top:100px;
    width:500px;
}
@keyframes mycolor{
0% {
        background-color:red;
    transform:rotate(0deg);
    }
    40%{
        background-color:darkblue;
         transform:rotate(30deg);
    }
    70%{
        backround-color:yellow;
         transform:rotate(-30deg);
    }
    100%{
        background-color:red;
         transform:rotate(0deg);
    }
}
div:hover{
    animation-name:mycolor;
    animation-duration:5s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
}

animation-timing-funciton实现动画的方法

方法	属性值的变化速度
linear	在动画开始时与结束时以同样的速度进行变化
ease-in	动画开始时速度很慢，然后速度沿曲线值进行加快
ease-out	动画开始时速度很快，然后速度沿曲线值进行放慢
ease	动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢
ease-in-out	动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢

网页淡入效果

@keyframes fadein{
    0% {
        opacity:0;
        background-color:white;
    }
    100% {
        opacity:1;
        background-color:white;
    }
}