寒假集训
三十一、盒子模型-外边距特性
(1)兄弟关系,两个盒子垂直外边距与水平外边距问题
解决方法:
- 垂直方向,外边距取最大值
- 水平方向,外边距会进行合并处理
(2)父子关系,给子加外边距,但作用于父身上
解决方法:
- 子margin-top===>父的padding-top,注意高度计算。
- 给父盒子设置边框
- 加浮动
- overflow:hidden. BFC
三十二、PS基本操作
ps====图片处理软件(美工来做图,前端来测量吸取颜色切图)
拿到设计稿之后:使用ps打开
- 图片上面右键-=====打开方式ps
- ps里文件=>打开
图片放大和缩小
ctrl++
ctrl±
alt+滚动
图片的移动
按住空格,鼠标变为小手,拖动图片
如何调整出来标尺
ctrl+r
作用:拖动参考线方便测量
视图里面找到标尺,把对勾勾选上
测量图片大小
使用矩形选框工具(左侧竖着第二个)
如何查看数据大小(窗口-----信息面板====wh)
如何修改测量单位:
在标尺上面右键取修改单位====像素
ctrl+d===取消选区
选完后,想调整大小,可以右键->变换选区
吸取颜色
使用吸管工具I
吸取颜色完成后,点击左下角的背景色,会右弹窗,在弹窗里面右#十六进制的颜色值可以让你复制
截图
- 使用快捷键截图===每次只能截取一个
使用选框工具框选你要截取的区域
ctrl+c=ctrl+n=回车=ctrl+v=ctrl+s
回车=回车 - 切片工具(裁剪工具进行切换)
使用切片工具框选你要留住的区域,点击文件,存储为web所用格式,
弹窗里面点击存储,
弹窗=====格式:仅限图像,切片:所有用户切片
三十三、溢出属性
1、溢出属性(容器的)
说明:
overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;
visible:默认值,溢出内容会显示在元素之外;
hidden:溢出内容隐藏;
scroll:滚动,溢出内容以滚动方式显示;
auto:如果有溢出会添加滚动条,没有溢出正常显示;
inherit:规定应该遵从父元素继承overflow属性的值。
overflow-x:X轴溢出;
overflow-y:Y轴溢出
2、空余空间
说明:
white-space: normal/nowrap/pre/pre-wrap/pre-line/inherit 该属性用来设置如何处理元素内的空白;
normal:默认值,空白会被浏览器忽略,
nowrap:文本不会换行,文本会在同一行上继续,直到遇到
标签为止;
pre:显示空格,回车,不换行
pre-wrap:显示空格,回车,换行
pre-line:显示回车,不显示空格,换行
3、省略号显示
说明:
text- overflow:clip/ellipsis;
clip:默认值,不显示省略号(…);
ellipsis:显示省略标记;
当单行文本溢出显示省略号需要同时设置以下声明:
- 容器宽度: width: 200px;
- 强制文本在一行内显示:white- space: nowrap;
- 溢出内容为隐藏: overflow: hidden;
- 溢出文本显示省略号: text-overflow: ellipsis;
三十四、元素显示类型
元素类型的分类,依据CSS的显示
1、块元素(block element)
A)块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域
B)默认情况下,块状元素都会占据一行;默认情况下,块状元素会按顺序自上而下排列
C)块状元素都可以定义自己的宽度和高度
D)块状元素一般都作为其他元素的容器,它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子
例如:div p ul li ol li dl dt dd h1-h6等
display:block;
display:list-item;
p标签放文本可以,不能放块级元素
2、行内(内联) 元素
A)内联元素的表现形式是始终以行内逐个进行显示;横着排
B)内联元素没有自己的形状,不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定,它的最小内容单元也会呈现矩形形状;
C)内联元素也会遵循盒模型基本规则,但是对于margin和padding个别属性值不生效
例如:a b em i span strong等
display:inline;
span行内元素 只能设置边距的左右边距,不能设置上下边距
3、行内块元素
内联块状元素(inline-block) 就是同时具备内联元素、块状元素的特点
例如:img input等
display:inline-block;
三十五、定位 position
1.定位的属性与属性值
书写语法 | 说明 | 文档流 | 偏移位置(top left right bottom) 时候的参照物 |
---|---|---|---|
position: static; | 默认值 | 默认 | 默认 |
position: absolute; | 绝对定位 | 脱离 | A)当没有父元素或者父元素没有定位,参照物是浏览器窗口的第一屏 B)有父元素且父元素有定位,父元素 |
position: relative; | 相对定位 | 不脱离 | 自己的初始位置 |
position: fixed; | 固定定位 | 脱离 | 浏览器的当前窗口 |
position: sticky; | 粘性定位 | 可以做吸顶效果,粘性定位是css3.0新增加的,兼容不好 |
层叠顺序(z- index)
z-index属性是不带单位的,并且可以给负值,没有设置z-index时,最后写的对象优先显示在上层,设置后,数值越大,层越靠上;
2.定位与浮动的区别
float:半脱离,文字环绕
absolute:全脱离,不会出现文字环绕效果
三十六、锚点
锚点作用:页面不同区域的跳转,使用a链接。
三十七、精灵图
1.CSS Sprites的原理(图片整合技术) (CSS精灵)/雪碧图
将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-position"来实现背景图片的定位技术。
2.图片整合的优势:
1)通过图片整合来减少对服务器的请求次数,从而提高页面的加载速度。
2)通过整合图片来减小图片的体积。
三十八、伪元素
- :afterl(与content属性一起使用,定义在对象后的内容。)
如: div:after{(content:url(logo.jpg);}
div:after{content:“文本内容”;} - :before:与content属性一起使用, 定义在对象前的内容。
如: div:before{content: 在其前放内容";} - :first-letter定义对象内第一个字符的样式。
- :frst-line:定义对象内第一行文本的样式
三十九、宽高自适应
1.自适应
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应
2.宽度自适应高度自适应
(1)宽度自适应
元素宽度的默认值为auto
(2)高度自适应
元素高度的默认值{height:auto;}
(3)浮动元素的高度自适应
父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷
方法1:给父元素添加声明overflow:hidden;(缺点:会隐藏溢出的元素)
方法2:在浮动元素下方添加空块元素,并给该元素添加声明: clear:both;height:0;oveflow:hidden;
(缺点:在结构里增加了空的标签,不利于代码可读性,且降低了浏览器的性能)
方法3:万能清除浮动法
选择符:after(content:" ";clear:both;display.block;height:0:visibility:hidden/oveflow.hidden;}
(4)窗口自适应
盒子根据窗口的大小进行改变
设置方法:html,body{height:100%;}
四十、两栏布局
calc()函数的使用
calc()函数:用于动态计算长度值。
需要注意的是,运算符前后都需要保留一个空格,例如:width:calc(100% - 10px);
任何长度值都可以使用calc()函数进行计算;
calc()函数支持"+“,”-“,”*“,”/"运算;
calc()函数使用标准的数学运算优先级规则;
四十一、表单进阶-下拉菜单
select 支持的属性
- size,显示几个
- multiple,选多个,ctrl
option 支持的属性
- value,提供给后端需要的value值
- selected,默认选中
四十二、H5基础与语法
1.HTML5发展史
HTML5草案的前身名为Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的HTML工作团队。
HTML5的第一份正式草案已于2008年1月22日公布。HTML5仍处于完善之中。然而,大部分现代浏览器已经具备了某些HTML5支持。
2012年12月17日,万维网联盟(W3C)正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称:“HTML5是开放的Web网络平台的奠基石。”
2013年5月6日,HTML 5.1正式草案公布。该规范定义了第五次重大版本,第一次要修订万维网的核心语言:超文本标记语言(HTML)。在这个版本中,新功能不断推出,以帮助Web应用程序的作者,努力提高新元素互操作性。
本次草案的发布,从2012年12月27日至今,进行了多达近百项的修改,包括HTML和XHTML的标签,相关的API、Canvas等,同时HTML5的图像img标签及svg也进行了改进,性能得到进一步提升。
2.HTML5的浏览器兼容
支持Html5的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器), Safari,Opera等;国内的遨游浏览器(Maxthon),以及基于IE或Chromium(Chrome的工程版或称实验版)所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。
常用的五大浏览器有:lE,chrome,firefox,safari,opera
3.HTML5语法
内容类型(ContentType)
HTML5的文件扩展符与内容类型保持不变,仍然为" .html"或" .htm"。
DOCTYPE声明
不区分大小写
指定字符集编码
meta charset= “UTF-8”
可省略标记的元素
不允许写结束标记的元素:br、col、embed、hr、img、input、link、meta
可以省略结束标记的元素:li、dt、dd、p、option、colgroup、 thead、tbody、tfoot、tr、td、th
可以省略全部标记的元素: html、head、body、colgroup、tbody
省略引号
属性值可以使用双引号,也可以使用单引号。
4.HTML5新增语义化标签
section元素
表示页面中的一个内容区块
article元素
表示一块与上下文无关的独立的内容
aside元素
在article之外的,与article内容相关的辅助信息
header元素
表示页面中一个内容区块或整个页面的标题
footer元素
表示页面中一个内容区块或整个页面的脚注
nav元素
表示页面中导航链接部分
figure元素
表示一段独立的流内容, 使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)
main元素
表示页面中的主要的内容(ie不兼容)
5.Video和audio的应用
video元素
定义视频
<video src="movie.ogg" controls="controls" >Video元素</video>
audio元素
定义音频
<audio src="someaduio.wav">Audio元素</audio>
controls属性:如果出现该属性,则向用户显示控件,比如播放按钮。
autoplay属性:如果出现该属性,则视频在就绪后马上播放。
loop属性:重复播放属性。
muted属性:静音属性。
poster属性:规定视频正在下载时显示的图像,直到用户点击播放按钮。
6.增强表单-input
Type= “color” 生成一个颜色选择的表单
Type= “tel” 唤起拨号盘表单
Type= "search” 产生一个搜索意义的表单
Type= “range” 产生一个滑动条表单
Type= “number” 产生一个数值表单
Type= “email” 限制用户必须输入email类型
Type=“url” 限制用户必须输入url类型
Type= “date” 限制用户必须输入日期
Type= “month” 限制用户必须输入月类型
Type= “week” 限制用户必须输入周类型
Type= "time” 限制用户必须输入时间类型
Type= "datetime local"选取本地时间
7.增强表单-数据列表
Datalist:选项列表
例:
<input type="url" list="url_ list" name="link" />
<datalist id="url_list" >
<option label="W3School" value= "http://www.W3School.com.cn" />
<option label= "Google" value= "http://www.google.com" />
<option label= "Microsoft" value= "http://www.microsoft.com" />
</datalist>
提示:option 元素永远都要设置value属性。
8.增强表单-属性
autofocus属性:
给文本框、选择框、或者按钮控件加上该属性,当打开页面时,该控件自动获得国标焦点,一个页面只能有一个。
required属性
验证输入不能为空
Multiple:
可以输入一个或多个值,每个值之间用逗号分开
例:<input type= "email" multiple/>
还可以应用于file
pattern
将属性值设为某个格式的正则表达式,在提交时会检查其内容是否符合给定格式。
例: <input pattern= "[0-9][A-Z]{3}” title="输入内容: 一个数与三个大写字母" placeholder= '输入内容: 一个数与三个大写字母’>
四十三、CSS3基础
1.CSS3的概念和优势
CSS3是css技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括:盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。
css3的优点:CSS3将完全向后兼容,所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。对我们来说,CSS3主要的影响是将可以使用新的可用的选择器和属性,这些会允许实现新的设计效果(譬如动态和渐变) ,而且可以很简单的设计出现在的设计效果(比如说使用分栏)
2.渐进增强和和优雅降级
渐进增强progressive enhancement:
针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级graceful degradation:
一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
区别:
优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断打充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。
四十四、层次选择器
>子代选择器
+当前元素的后面第一个兄弟
~当前元素的后面所有的亲兄弟
四十五、属性选择器
1、E[attr]: 只使用属性名,但没有确定任何属性值;
2、Elattr=“value”]: 指定属性名,并指定了该属性的属性值;
3、E[attr~=“value”]: 指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的"~”不能不写
扩展知识
4、E[attr^= “value”]:指定了属性名,并且有属性值,属性值是以value开头的;
5、E[attr$=“value”]: 指定了属性名,并且有属性值,而且属性值是以value结束的
6、E[attr*=“value”]: 指定了属性名,并且有属性值,而且属值中包含了value;
四十六、伪类选择器
(1)结构伪类选择器
X:first-child 匹配子集的第一个元素。 IE7就可以支持
X:last-child 匹配父元素中最后一个X元素
X:nth-child(n) 用于匹配索引值为n的子元素。索引值从1开始,偶数2n(even),奇数2n+1、2n-1(odd)
X:only-child 这个伪类一般用的比较少, 比如上述代码匹配的是div下的有且仅有一个的p,也就是说,如果div内有多个p,将不匹配。
X:root 匹配文档的根元素。在HTML (标准通用标记语言下的一个应用)中,根元素永远是HTML
X:empty 匹配没有任何子元素(包括包含文本)的元素X
(2)目标伪类选择器
E:target 选择匹配E的所有元素,且匹配元素被相关URL指向
(3)UI状态伪类选择器
E:enabled 匹配所有用户界面(form表单)中处于可用状态的E元素
E:disabled 匹配所有用户界面(form表单) 中处于不可用状态的E元素
E:focus 焦点 会匹配此选择器
E:checked 匹配所有用户界面(form表单)中处于选中状态的元素E
E:selection 匹配E元素中被用户选中或处于高亮状态的部分
(4)否定伪类选择器
E:not(s) (IE6- 8浏览器不支持:not()(选择器。)
匹配所有不匹配简单选择符s的元素E
(5)动态伪类选择器
E:link
链接伪类选择器
选择匹配的E元素,而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E:visited
链接伪类选择器
选择匹配的E元素,而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E:active
用户行为选择器
选择匹配的E元素,且匹配元素被激活。常用于链接描点和按钮上
E:hover
用户行为选择器
选择匹配的E元素,且用户鼠标停留在元素E上。IE6及以 下浏览器仅支持a:hover
四十七、文本阴影
text-shadow: 水平方向位移 垂直方向的位移 模糊程度 阴影颜色, …;
四十八、盒子阴影
box- shadow盒子阴影
属性值:
h-shadow | 必需的。水平阴影的位置。允许负值 |
v-shadow | 必需的。垂直阴影的位置。允许负值 |
blur | 可选。模糊距离 |
spread | 可选。阴影的大小 |
color | 可选。阴影的颜色。 |
inset | 可选。从外层的阴影(开始时)改变阴影内侧阴影 |
Eg:box-shadow: 10px 10px 5px #888888
四十九、圆角边框
border-radius
px或者百分比
v1 四个角一样
v1,v2 左上右下,左下右上 一致
v1,v2,v3 左上,左下右上,右下
v1,v2,v3,v4 顺时针
水平/垂直 支持border-radius
五十、字体引入
字体模块: @font-face
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体(@font-face这个功能早在IE4就支持)
@font-face的语法规则
@font-face{
font-family:<YourWebFontName>
;
src:<source>[<format>][,<source>[<format>]]*
;
[font-weight:<weight>
];
[font-style:<style>
];
}
@font-face语法说明:
1、YourWebFontName:此值指的就是你自定义的字体名称,最好是使用你下载的默认字体,他将被引用到你的Web元素中的font-family。如“font-family:“YourWebFontName”;”
2、source:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝对路径;
五十一、怪异盒模型
含义:更改原有布局盒子模型的计算方式通过box-sizing属性的取值进行更改
属性: box-sizing
box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。
标准盒子模型
属性值: content-box
这是由CSS2.1规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
怪异盒模型(IE盒模型)
属性值: border-box
为元素设定的宽度和高度决定了元素的边框盒。
就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。