CSS3.docx
《CSS3.docx》由会员分享，可在线阅读，更多相关《CSS3.docx（28页珍藏版）》请在冰豆网上搜索。
CSS3
CSS3学习笔记
1.文字与字体相关样式
〔1〕文字阴影〔text-shadow〕
语法：
text-shadow:
lengthlengthlengthcolor
前边三个length分别指阴影离开文字横方向距离，阴影离开文字的纵方向的距离以及阴影的模糊半径，color指阴影颜色。
其中前两个属性为必写属性，后两个为可选`
也可以指定多个阴影，多个阴影之间使用逗号〔，〕隔开。
〔2〕文本自动换行〔word-break〕
默认浏览器会在半角空格或者连字符的地方进行自动换行，不会再单词当中突然换行，对于中文来说，再任何一个汉字后边都可以换行。
而且，浏览器总是不可能让标点符号位于一行的首个字符。
通常会将标点符号以及他前边的一个文字作为一个整体统一换行。
使用word-break属性可以指定自己的换行方式。
实现在任意地方换行。
该属性有一下的值：
normal默认
break-all允许在单词内换行
keep-all只能在连字符或者半角空格处换行
〔3〕长单词与url地址自动换行〔word-wrap〕
url地址中没有半角空格，所以当url地址没有连接符的时候，浏览器将其视为一个较长的字符进行显示。
word-wrap实现长单词与url地址的自动换行。
该属性有连个值：
normal默认值
break-word在任何地方换行
2.盒子相关样式
（1）盒子的根本类型
inline〔行内元素〕,block〔块元素〕,inline-block（行内块元素）,inline-table（行内表格元素），list-item〔列表元素〕，none〔不显示〕。
（2）行内表格元素
table标签是block元素，独占一行，要是将table的display属性设置为inline-table，表格就可以和元素在同一行显示。
〔不同浏览器的对其方式也不同〕。
（3）列表元素
将多个元素作为列表来显示。
display:
list-item.使用list-style-type定义列表前边的表现样式。
（4）表格table
table代表整个表格
caption表格的标题
thead表头
tbody表格所有行
tr表格中的一行〔table-rows〕
td单元格
col某一列
colgroup所有列
tfoot脚注
cellspacing表格中单元格的间距
padding单元格内边距
**蓝色标记为表格的常用属性。
使用方法：
表格的标题
1st
2nd
3rd
（5）超出盒子内容的显示
<1>overflow属性定义了内容超出盒子的处理方法。
该属性有三个值：
hidden超出局部隐藏
score如果超出就显示个滚动条
auto如果超出显示滚动条，如果没有，就没有出现滚动条
visible超出就原样显示即可
<2>overflow-x指定了水平方向超出的处理方法〔显示水平方向的滚动条〕
<3>overflow-y指定了垂直方向超出的处理方法〔显示垂直方向的滚动条〕
<4>text-overflow属性只在当盒子中的内容在水平方向上超出盒的范围时有效。
该属性有两个值：
clip多余的文字会被切掉
ellipsis用省略号表示超出的局部
string使用给定的字符串表示超出局部的字符串。
*该属性要定义盒子的宽度。
*如果不定义overflow：
hidden,那么会横向超出盒子
*如果少了white-space：
nowarp，文字会把容器的高度往下撑，即使你定义了高度，省略号也不会出现，多余的文字会被剪贴掉
*如果少了text-overflow:
ellipsis;多余的文字会被裁切掉，就相当于你这样定义text-overflow:
clip.
*如果容器是table，当文字内容过多时，不换行，而是出现...，最后要给表格设置table-layout：
fixed；
〔6〕盒子阴影〔box-shadow〕
让盒子产生阴影。
box-shadow:
lengthlengthlengthcolor（和text-shadow一样）
盒内阴影：
[inset]XY[模糊半径][阴影颜色]
展开半径:
当展开半径=width/2时，就会覆盖整个正方形区域。
〔7〕box-sizing属性
指定元素的宽度和高度是否包含元素的内部补白区域与边框的的高度与宽度。
属性值：
content-box不包括〔默认值〕
border-box包括
padding-box（firefox专属）添加padding属性不改变盒子大小
inherit继承父标签的属性
这两个盒子的初始大小都是200*70.
context-box：
盒子大小会随着border或者padding的大小而改变。
box-sizing:
context-box
border-box:
总共就是盒子的大小，但是添加border或者padding会影响内容的大小。
border-box
padding-box：
添加padding属性不会影响盒子的大小，只会改变内容的大小。
但是添加border会影响盒子的大小。
〔我没看出来〕，如果出效果的话，应该是240？
box-sizing：
padding-box
3背景与边框相关样式
在firefox中，除了background-size，其他的属性要加上-moz-，但是在使用background-break时，要写成-moz-background-inline-policy。
在chrome中，除了background-size，其他的新特性需要添加-webkit-文字。
但是现在好似已经全部支持了。
（1）背景连写
设置背景图片或者背景颜色，是否重复，位置。
background：
url|colorrepeate〔默认值〕|no-repeat|repeat-x|repeat-y方位名词|坐标
解释：
url为背景图片的地址或者是color背景颜色。
是否重复，或者x重复，或者y重复。
方位名词：
left|right|top|center|bottom（如果值设置第一个，没设置
第二个方位名词，那么第二个默认居中）。
坐标：
〔x,y〕横坐标，纵坐标〔默认值左上角〔0,0〕〕
可以写多个，后写的会被覆盖
background-size:
设置背景图片的尺寸。
background-attachment:
score（随页面滚动）|fixed〔不滚动〕设置背景图片固定。
（2）指定背景图像的范围〔background-clip〕
border-box：
包括边框
不包括border
content-box:
不包括边框和padding区域
（3）指定背景图像的绘制起点〔background-origin〕
border:
边框左上角开始
padding:
补白区域的左上角〔padding区域左上角开始〕
content:
文本区域的左上角开始
（4）指定背景的大小〔background-size〕
格式：
widthheight
写一个值，那么设置的是宽度，高度为auto。
属性值也可以是contain,〔按照原始的的宽高比进行缩放，保证图片能完整显示〕，这有可能让元素内部有剩余区域。
属性值也可以是cover,按照宽高比例的前提下，填满元素内部，不能保证图片能完整显示。
也可以设置百分比：
相对于盒子的百分比
（5）平铺（重复）的新选项（background-repeat）
repeat可能出现一半的图片
no-repeat。
。
repeat-x。
repeat-y。
以上几种都会裁剪超出的背景图，下边的两个不会
space超出，会调整背景之间图片的间距
round超出会调整背景图片的大小
（6）圆角边框（border-radius）
取消表单控件中的默认边框：
0none;（不会显示边框）
取消表单控件中的轮廓线：
outline-style：
none;
1个值四个角全部都是该数值表示的半径
2个值第一个值左上和右下，第二个值右上和左下
3个值第一个左上，第二个右上和左下，第三个值右下
4个值左上右上右下左下〔逆时针〕
（7）图像边框（border-image）
ØBorder-image-source:
图片路径none
ØBorder-image-slice:
边框图片的切片〔水平，垂直〔没单位〕〕100%
ØBorder-image-width：
边框图片的宽度1
ØBorder-image-repeat：
平铺方式stretch
repeat普通的平铺，可能会出现一半的情况
round自适应平铺，不会出现一半的平铺
stretch将中间的图片拉伸
（连写形式）最少五个参数：
border-img：
urlslice/widthrepeat
urlABCD[/EFGHIJ]〔逆时针，从上开始，没有px单位〕
url：
路径
A：
上边距
B：
右边距
C：
下边距
D：
左边距
E,F,G,H:
可选参数，定义border的宽度（逆时针）
I,J：
定义平铺样式
4.渐变
定义：
从一种颜色逐渐变为另一种颜色。
有分为线性渐变和径向渐变。
要素：
方向，起始色，终止色，距离。
〔1〕线性渐变
linear-gradient（方向,起始颜色,终止颜色）还有渐变距离
方向：
tobottom从上到下
tobottomright从左上到右下
toright从左到右
toupright从左下到右上
toupleft从右下到左上
toleft从右到左
tobottomleft从右上到左下
还可以指定角度，用于指定渐变线的旋转角度。
如果渐变角度为
0deg从下到上
90deg,从左到右
180deg从上到下
270deg从右到左
background:
linear-gradient（tobottom,green25%,red50%）;
25%表示到div的25%，绿色才开始渐变，50%表示到div的50%已
经变为红色，也就是停止渐变。
也可以添加多个渐变点：
Eg：
linear-gradient（tobottom,orange0%,red25%,yellow
50%,green75%,black100%）;
〔2〕径向渐变
也就是放射式的，类似于太阳光，从一个点散发。
radial-gradient：
〔起始色，终止色〕
radial-gradient:
〔样式，其实色，终止色〕〔样式：
circle圆形|ellipse椭圆形〕
〔样式at方向，起始色，终止色〕
从什么地方开始
centercenter〔默认值〕
lefttop
centertop
righttop
rightcenter
rightbottom
centerbottom
leftbottom
方向的值也可以定义起始的坐标
可以定义到离起点最近的角和最远的角，最近的边和最远的边。
closest-side,farthest-side,closest-corner,farthest-conner
eg：
radial-gradient（ellipseclosest-sideat130px
150px,orange,black）
也可以设置径变距离：
radial-gradient（circle100pxat130px150px,orange,black）
如果是椭圆的话，就设置横向半径和纵向半径。
radial-gradient（ellipse100px80pxat130px
100px,black,orange）
也可以通过百分比设置多个径变点：
radial-gradient（circle150pxat150px150px,orange0%,pink25%,green50%,red75%,white）;
5.CSS3中的2D变形处理〔transform〕
transform:
scale（0.5）
〔1〕缩放（scale）
scale（val[，y]）
val>1放大
val<1缩小
如果是两个值，那就分水平和垂直了。
〔2〕平移（translate）
translate（xpx,ypx）
x:
右正左负〔水平〕
y：
下正上负〔垂直〕
如果只有一个参数，那么只在水平方向上移动。
〔3〕倾斜（skew）〔变形了，怎么倾斜〕
skew（xdeg，ydeg）
X：
水平方向（上下依然水平）
Y：
垂直方向〔左右依然垂直〕
如果只有一个参数，那么只在水平方向上倾斜。
以中心为原点，想象成2d坐标轴即可。
〔4〕旋转〔rotate〕
rotate（xdeg）
以中心为圆心，顺时针旋转x个角度。
旋转后，坐标轴也会给这变化。
所以要将旋转放到最后。
（5）指定变形的基准点〔transform-origin〕
水平方向：
left，right，center
垂直方向：
top，center，bottom
或者是数值。
中的3D变形处理
也同样有旋转〔rotate〕，缩放〔scale〕,平移（translate），倾斜〔skew〕。
以前的2D转换时基于平面的转换，3D不过是参加了Z轴的转换。
（1）旋转〔rotate〕
rotateX〔xdeg〕；
rotateY〔ydeg〕；
rotateZ〔zdeg〕；
分别指绕x轴，y轴，z轴顺时针旋转一定的角度。
（2）缩放〔scale〕
scaleX（x）
scaleY（y）
scaleZ（z）
分别指在x轴，y轴，z轴缩放相应的倍数。
（3）平移〔translate〕
translateX（xpx）;
translateY（y）;
translateZ（z）;
分别指在x轴，y轴，z轴移动相应的距离。
（4）倾斜〔skew〕
skewX（xdeg）
skewY（ydeg）
只有x轴倾斜和y轴倾斜。
中的动画功能
分为Transitions和Animations。
（1）Transitions（过渡）
从某个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能。
transition:
propertyduration[timing-functiondelay]
property：
要往那种属性进行过渡。
duration:
完成平滑过渡的时间〔默认为0〕
timing-function：
通过什么方式进行过渡。
（可选属性）
delay：
延时多长时间执行过渡〔可选属性〕
要进行多个过渡的话，在一个transitions中，就用逗号分开。
timing-function的属性值：
linear匀速
ease缓动〔慢-快-慢〕（默认值）
至少要有前两个属性，后两个可有可无。
如果有两个时间，那么第一个指duration，第二个指延迟时间。
（2）Animations〔动画〕
改变属性值实现动画效果。
但是Animations通过定义多个关键帧中元素的属性值来实现更复杂的过程。
〔起始也就是分阶段进行〕
步骤:
1.创立关键帧集合〔开始帧为0%，结束帧为100%〕
@keyframes集合名称{创立关键帧的代码}
2.在元素的样式中
div:
hover{
animation-name:
关键帧集合的名称；
animation-duration：
多长时间完成该动画
animation-timing-function：
完成动画的方式〔ease，linear〕
animation-delay:
延时时间
animation-iteration-count：
动画执行次数〔infinte无限次〕
animation-direction：
用于指定动画的执行方向。
〔属性值有：
normal初始值〔动画执行完成返回初始状态〕
alternate交替更改动画的执行方向
reverse反向执行
alternate-reverse：
从反向开始交替更改动画的执行方向
〕
}
连写：
animation：
namedurationdelay。
除了名字，动画完成时间和延时时间有严格的顺序，其他随意。
----?
书上说的
animiation：
namedurationtiming-functiondelayiteratrion-countdirection
8.布局相关样式
以前使用的position和float如果高度不一致，那么底部很难对齐。
（1）多栏布局（column）
将一个元素的中的内容分为两栏或多栏显示，并确保各栏中的内容底部对齐。
而且各栏的宽度一致。
主要属性有：
column-count:
分为多少栏
column-width:
设置每一栏的宽度〔不是元素的宽度〕
column-gap:
每栏之间的间距
column-rule:
两栏之间添加竖直的分割线。
〔使用方法类似于border〕
主要适用于显示文章内容。
（2）盒布局（display：
box）
使用float或position时左右两栏或多栏中底部不能对齐的问题。
给父元素添加属性：
box;（ie写法）
-webkit-box;（chrome写法）
-moz-box;（firefox写法）
这也就将父元素变为行内元素。
给子元素添加属性：
border;〔添加padding和border不影响盒子大小〕
（2）弹性盒布局（flex）
让三个div的总width为浏览器的总宽度，且能够随着浏览器窗口的改变而改变。
1.给父标签设置属性：
flex;
2.给没有固定宽度的元素设置属性：
flex:
1;
如果给子元素都没有设置宽度值，那么先用父元素的宽度减去子元素内容所占用的宽〔或高〕，然后按照flex属性的值将父元素所剩的宽〔或高〕度分为总的flex份，然后按照比例设置,内容宽度+ave。
如果有的子元素设置宽度值，那么让父元素的宽度减去已设置元素宽度值，然后再分为flex份，然后按照比例设置。
（3）改变元素的显示顺序（order）
在每一个子元素中添加order属性，定义的数字越小，先显示，从1开始。
（4）改变排列方向（flex-direction）
给父容器使用该属性可以改变排列方向。
该属性的属性值：
row：
横向排列〔默认〕
row-reverse：
横向反向排列
column:
纵向排列
column-reverse:
纵向反向排列
（5）元素高度自适应
使用盒布局的时候，元素的宽度和高度具有自适应性。
如果只对父容器进行了height和width的设置。
当盒子横向排列时，元素的宽度变为元素中内容的宽度，高度为父元素的高度。
当盒子纵向排列时，宽度分别为父元素的宽度，高度为元素中内容的。
（6）消除弹性盒布局的空白
给子元素添加一个flex属性即可。
（7）指定元素的宽和高（flex-grow）
通过flex-grow指定宽和高。
元素的宽〔or高〕的计算方法：
子元素sum=1.width+2.width+…..+;
Ave=（父元素width〔orheight〕-grow+…..+-grow）
子元素宽〔or高〕=子元素.width+ave*flex-grow；
（8）几个子元素的和大于父元素width（flex-shrink）
横向排列，如果几个元素的width和大于父元素width，那么必须用flex-shrink来调整子元素的width。
纵向排列，如果几个元素的height和大于父元素height，那么必须用flex-shrink来调整子元素的height。
就拿flex-direction：
rows来说：
子元素宽度和sum=1.width+2.width+。
+;
Avg=（sum-父元素.width）/（1.flex-shrink+…..+-shrink）;
子元素实际宽度=1.width-avg*flex-shrink；
（9）flex属性连写
flex-growflex-shrinkflex-basis
都为可选属性，默认值为110px
flex-basis与width样式属性的作用完全相同。
Eg:
13250px;
（10）控制换行方式（flex-warp）
通过在父元素添加flex-warp属性进行布局的换行操作，占满了换行。
nowarp不换行（默认值）
warp换行
warp-reverse与warp的方向相反〔row，上下，column，左右〕
可以将flew-direction和flew-warp合并卸载flew-flow中。
flex-flow：
rowwarp;
（11）弹性布局的专用术语
main-asix：
布局基准轴。
横向布局为水平轴，纵向布局为垂直轴
main-start/main-end:
布局基准轴的开始和结束。
〔横，左右，纵，上下〕
cross-asix：
与main-asix垂直的轴。
cross-start/cross-end:
cross-asix的起点和终点。
〔横，上下，纵，左右。
flex-warp属性从cross-start到cross-end。
（12）justify-content属性
用于指定如何布局容器中除了子元素之外的main-asix轴方向上的空白局部。
当flex-grow的属性值不为0时，该属性值无效。
该属性有一下的属性值：
flex-start从main-start开始布局所有子元素〔默认值〕
fl
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1
升级会员 