标签:用于网页布局,把HTML文档分成独立不同的部分。
36.CSS3设置背景样式:
(1)background-color:背景色不能继承,其默认值是透明transparent
(2)background-image:url(图片路径)、none(不显示背景图像)
(3)background-repeat:背景图像重复平铺
repeat(沿水平和垂直方向)、no-repeat(不平铺,只显示一次)、
repeat-x(只沿水平方向)、repeat-y(只沿垂直方向)、
(4)background-position:背景图的位置(X水平Y垂直方向的偏移量,如果只有一个方向关键字,则默认另一个关键字为center)
1.Xpos Ypos:如 0px 0px:默认无偏移,从左上角出现
30px 40px:正向偏移,图像向右和向下出现
-50px -60px:反向偏移,图像向左和向上出现
2.X% Y%:如30% 50%(水平方向偏移30%,垂直方向居中)
3.X水平关键词(left,center,right)、Y垂直关键词(top,center,bottom)
(5)background:一次设置背景的所有属性
(6)background-size背景图片尺寸:
auto(保持图片原尺寸,不易失真)、cover(放大填满容器标签)、
百分比percentage、contain(按照图片本身的宽高比例适应定义背景的区域)
37.gradient线性渐变:颜色沿着一条直线方向过渡
(1)常规语法:" linear-gradient(position, color1, color2,...)"
(2)浏览器兼容语法:" -兼容前缀-linear-gradient(position,color1,color2,...)"
(3)渐变的直线方向:
to left 从右向左、to top left 向左上方、to bottom left 向左下方、
to right 从左向右、to top right向右上方、to bottomo right向右下方、
to bottom从上向下、to top 从下向上、
38.CSS3径向渐变radial-gradient:圆形渐变,颜色从一个起点朝所有方向混合,语法和线性渐变相似。
———6 盒子模型———
39.盒子模型的组成:
content网页内容、border边框、padding内边距、margin外边距
(1)边框border:
border-color 边框颜色:如border-color:#369 #000 #111 #F00;按“上右下左顺时针”设置
border-width 边框粗细:如细thin、中等medium、粗的thick
border-style 边框样式:常用none无边框、dotted点线边框、dashed虚线边框、solid实线边框
border 简写:如下边框border-bottom:9px red dashed;四条边框border:9px blue solid;
(2)margin外边距:盒子边框以外和其他盒子间的距离
margin-top:上外边距、margin-bottom:下外边距
margin-left:左外边距、margin-right:右外边距
margin:简写"上右下左"
auto:设置盒子在它的父容器里居中显示。如margin:0px auto;让整个盒子居中。
如果将元素的 margin设为负值,则元素会变大。
(块元素可以把左右页边距设置为"自动"中心对齐。margin:auto;但前提宽度不能是100%)
注意:很多标签都有自身默认的外边距,所以一般用并集选择器统一设置这些标签的外边距为0px,这样不会产生不必要的空隙。
如清除body和h2自带的外边距 body,h2{margin:0px;}
(3)padding内边距:
padding-left、padding-right、padding-top、padding-bottom、
padding"上右下左"
40.盒子模型的尺寸:
增加边框、内边距、外边距后不会影响内容区域的尺寸,但会增加盒子模型的总尺寸。
(1)内盒总尺寸 = border(上下/左右)+padding(上下/左右)+内容宽/高度
(2)整个盒子的宽度 = 内容宽度+左右padding+左右边框border+左右margin
41.box-sizing拯救布局
(语法)box-sizing:content-box、border-box、inherit
(1)content-box:盒子的宽度或高度=border+padding+(margin)+width/height
(2)border-box:盒子的宽或高度等于元素内容的宽或高度
(即 该内容宽/高度=盒子宽/高度-border-padding )
(3)inherit:使元素继承父元素的盒子模型模式。
42.border-radius圆角边框:语法和边框相似,只是四个边框带圆角
(语法)border-radius:length{1~4个数字};
(1)用border-radius制作特殊图形
圆形:元素的宽度和高度必须相同。圆角半径为元素宽度的一半,或直接设圆角半径为50%
半圆形:元素的高度是宽度的2倍,且圆角半径为元素的宽度值。
扇形:即制作四分之一圆形。"三同"元素宽度、高度、圆角半径 "一不同"
43.盒子阴影:和文本阴影相似
(语法)box-shadow:inset x-offset y-offset blur-radius color;
inset:内部阴影,可选。
x-offset:X轴水平位移,正值在右,负值在左。
y-offset:Y轴垂直位移,正值在下,负值在上。
blur-radius:模糊半径可选,只能>=0 值越大阴影向外面积越大,边缘越模糊。
——7 浮动——
44.标准文档流:元素根据块元素或行内元素的特性从上到下,从左到右的方式自然排列。
45.display属性:用于指定标签的显示方式
block:块元素的默认值,该元素前后自带换行符
inline:行内元素的默认值,元素会显示为行内元素
inline-block:行内块元素,兼具行内元素和块元素的特性
none:元素不会显示
46.Float:指定网页元素向哪个方向浮动
left左、right右、none默认无(元素不浮动 显示在其文本出现的位置)
元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果是右浮动,后面的文本流将环绕在它左边:
47.clear清除浮动:当子元素全部浮动了,父级将包不住子元素会造成边框塌陷,所以要清除浮动元素对其他元素的影响。
48.clear属性:规定元素的哪一侧不允许其他浮动元素。
left(左侧不允许浮动元素)、right(右侧不允许)、
both(左右都不允许,常用于文本在图片下方显示)、
none(允许浮动元素出现在两侧)
49.解决父级边框塌陷
(1)浮动元素后加空的div,该div样式要设置clear:both;margin:0px;padding:0px;
(2)设置父元素固定高度把边框撑开。
(3)父级添加overflow属性:设置外层盒子的overflow:hidden。但此方法不能用于有下拉列表框的场景。
(4)父级添加伪类after,推荐。
50.Overflow属性:溢出处理,也可用于扩展盒子高度。
1) visible 默认溢出内容可见,显示在盒子外面
2) hidden 多出来的内容被隐藏且没有滚动条
3) scroll 有垂直水平2条滚动条,可查看多余内容
4) auto 如果内容溢出,自动显示滚动条(只有垂直条)查看
5) inherit 继承父特性
————8 定位网页元素————
51.Position属性:指定盒子的位置,相对它父级的位置或它自身应该在的位置。
(1)static 默认无定位,元素按照标准文档布局。
(2)relative相对定位
a.特性:
1.以标准文档流排版为基础,相当于它在原来位置偏移指定的距离。
2.元素位置偏移后,仍会保留原位置。
3.层级提高,可以遮盖标准文档流元素和浮动元素。
b.使用场景:
相对定位可以不设偏移量,让后面的绝对定位以它为祖先元素作基准定位。
c.语法 position:relative,指定偏移量时:水平left(正值向右移)、right(正值向左),垂直top(正值向下)、bottom(正值向上)。如
div{
position: relative;
top:-20px;
left:20px;
}
(3)absolute绝对定位
a.特性:
1.以已定位的祖先元素作基准定位,如果没有定位的祖先元素,则以浏览器窗口为基准定位。
2.元素位置偏移后,不保留原位置(其他元素可以用它原来的空位)
3.层级提高,可以遮盖标准文档流元素和浮动元素。
4.设置绝对定位的元素脱离文档流,对其他盒子的定位无影响
b.使用场景:下拉菜单、焦点图轮播、弹出数字气泡、特别花边等。
(4)fixed固定定位
a.特性:直接以浏览器窗口为基准定位,偏移位置不受窗口滚动条滚动的影响。
b.使用场景:窗口边缘的固定广告、返回顶部图标、边缘固定导航栏等。
52.z-index属性:设置定位元素的堆叠顺序。默认值0,值大的层位于值小层的上方。
(1)网页中的元素都含有两个堆叠层级,一个是未设置绝对定位时所处的环境,此时z-index是0;另一个是设置绝对定位时所处的堆叠环境,此时层的位置由z-index的值确定。
53.设置元素透明度的方法(通常两种方法搜设置以适应所有浏览器兼容)
(1)opacity:x x值为0~1,值越小越透明
(2)filter:alpha(opacity=x) x值为0~100,值越小越透明
——9 CSS3做网页动画——
54.transform变形:
指效果的集合,如平移、旋转、缩放、倾斜效果。
语法 transform:[transform-function]*;
其中transform-function是变形函数,如要设置多个,则中间以空格分开。在用2D变形时要加浏览器兼容性前缀。
常用2D变形函数如下:
(1)translate(tx,ty):
平移函数,将元素从原位置(基于X,Y坐标)移动到指定位置上。
tx表示X轴(横坐标)上移动的向量长度,正值向右,负值向左。
ty表示Y轴(纵坐标)上移动的向量长度,正值向下,负值向上。
(2)scale(sx,sy):
缩放函数,定义宽高度(元素尺寸)的缩放比例,默认值1。0~0.99缩小,大于1放大。
sx表示宽度即横坐标方向的缩放量。
sy表示高度即纵坐标方向的缩放量。
(3)rotate(a);
旋转函数,只取一个值为度数值,单位deg表示角度°
正值顺时针转,负值逆时针转。
rotate函数只旋转,不改变元素形状。
(4)skew(ax,ay):
倾斜函数,取值为度数值,单位deg
ax表示水平方向即X轴的倾斜角度。
ay表示垂直方向即Y轴的倾斜角度。
55.3D变形函数:translate3d()平移函数、scale3d()缩放函数、rotate3d()旋转函数
56.transition过渡:
指动画转换的过程,如渐现、渐弱、动画快慢等。
通过指定属性的初始状态、结束状态,在两个状态间通过平滑过渡的方式实现动画。
语法:[transition-property transition-duration
transition-timing-function transition-delay]*
(速记法)transition: 过渡属性 过渡用时 过渡的动画函数 过渡的延迟时间
主要包括四个属性值:
(1)transition-property:
过渡属性,设置过渡或动态模拟的CSS属性
(2)transition-duration:
过渡用时,从旧属性到新属性的用时,单位为s
(3)transition-timing-function:
指定过渡函数、过渡速度,有以下方式:
ease 速度由快到慢,逐渐变慢(默认)
liner 匀速
ease-in 越来越快(渐显)
ease-out 越来越慢(渐隐)
ease-in-out 先加速再减速(渐显渐隐)
(4)transition-delay:设置过渡是否延迟时间执行。
注意:transition-duration指完成过渡需要的时间;transition-delay指过渡在什么时间之后触发。
57.总结如何用transition实现过渡动画:
(1)在默认样式中声明元素的初始状态。
(2)声明过渡元素之中状态样式,如悬浮状态
(3)在默认样式中通过添加过渡函数,添加不同的样式。
58.过渡的触发机制:
(1)伪类触发: :hover、 :active、 :focus、 :checked等
(2)媒体查询:通过@media属性判断设备的尺寸、方向等。
(3)JavaScript触发:用JavaScript脚本触发。
59.animation动画
animation制作动画的步骤:
(1)通过类似Flash动画的关键帧(@keyframes)声明一个动画;
其中@keyframes称为关键帧,可以设置多段属性。语法
@keyframes 动画名称{
from{ //css样式代码 }
百分比1{ //css样式 }
百分比2{ //css样式 }
100%{ //css样式 }
}
(2)找到要设置动画的元素,调用关键帧已声明的动画。
如 animation: spread(动画名) 2s linear(匀速);
60.animation动画的语法和属性:
" animation: 动画名称 播放时间 播放方式 开始播放的时间 播放次数 播放方向 播放状态 动画时间之外的状态 "
其中属性分别为:
animation-name 动画名称、
animation-duration 播放时间、
animation-timing-function 播放方式、
animation-delay 开始播放的时间、
animation-iteration-count 播放次数(无限次用infinite)、
animation-diriection 播放方向、
animation-play-state 播放状态、
animation-fill-mode 动画时间之外的状态、
——HTML部分——
utf-8 和 utf8的使用
只有MySQL可以用"utf8",但其他地方一律使用大写"UTF-8"。
网页推荐使用长后缀名.html
有的浏览器中直接输出中文会出现中文乱码,可加声明
  //空格
> //大于号
< //小于号
" //双引号
© //版本符号
斜体
页面间链接
锚链接
功能性链接
————
创建表格:
1、
:整个表格以标记结束,table在没有添加css样式之前,在浏览器中显示是没有表格线的。
2、:如果不加 , table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示,不用等整个表格加载完后显示。)
3、:表格的一行,所以有几对tr 表格就有几行。
4、:表格的头部的一个单元格,表格表头,文本默认粗体且居中显示。
5、 | :表格的一个单元格,一行中包含几对 | 这行中就有几个单元格。
6、表格中列的个数,取决于一行中数据单元格的个数。
7.设置样式border-collapse:collapse;可以把双线边框线合并为一条线边框。
————
表格可以添加标题和摘要标签进行优化。
(1)摘要:
摘要的内容不会在浏览器中显示。作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法:
(2)标题:
描述表格内容,标题的显示位置:表格上方。
语法:
————
|