寒假集训——三-CSDN博客

本文链接：https://blog.csdn.net/ZiminLi/article/details/128515628

寒假集训

三十一、盒子模型-外边距特性
- （1）兄弟关系，两个盒子垂直外边距与水平外边距问题
- （2）父子关系，给子加外边距，但作用于父身上
三十二、PS基本操作
三十三、溢出属性
- 1、溢出属性(容器的)
- 2、空余空间
- 3、省略号显示
三十四、元素显示类型
- 1、块元素(block element)
- 2、行内(内联) 元素
- 3、行内块元素
三十五、定位 position
- 1.定位的属性与属性值
- 2.定位与浮动的区别
三十六、锚点
三十七、精灵图
- 1.CSS Sprites的原理(图片整合技术) (CSS精灵)/雪碧图
- 2.图片整合的优势：
三十八、伪元素
三十九、宽高自适应
- 1.自适应
- 2.宽度自适应高度自适应
四十、两栏布局
四十一、表单进阶-下拉菜单
四十二、H5基础与语法
- 1.HTML5发展史
- 2.HTML5的浏览器兼容
- 3.HTML5语法
- 4.HTML5新增语义化标签
- 5.Video和audio的应用
- 6.增强表单-input
- 7.增强表单-数据列表
- 8.增强表单-属性
四十三、CSS3基础
- 1.CSS3的概念和优势
- 2.渐进增强和和优雅降级
四十四、层次选择器
四十五、属性选择器
四十六、伪类选择器
- （1）结构伪类选择器
- （2）目标伪类选择器
- （3）UI状态伪类选择器
- （4）否定伪类选择器
- （5）动态伪类选择器
四十七、文本阴影
四十八、盒子阴影
四十九、圆角边框
五十、字体引入
五十一、怪异盒模型
- 标准盒子模型
- 怪异盒模型（IE盒模型）

三十一、盒子模型-外边距特性

（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:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝对路径；