css的学习笔记

CSS3有哪些新特性？

1. CSS3实现圆角（border-radius），阴影（box-shadow），

2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜

4. 增加了更多的CSS选择器： 多背景 rgba

5. 在CSS3中唯一引入的伪元素是 ::selection.

6. 媒体查询，多栏布局

7. border-image

2.什么是响应式设计？

它是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式设计是让所有的人能在这些设备上让网站运行正常

3.你能描述一下渐进增强和优雅降级之间的不同吗?

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

　　区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。　

　　“优雅降级”观点

　　“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

　　在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

　　“渐进增强”观点

　　“渐进增强”观点则认为应关注于内容本身。

内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

4.知道css有个content属性吗？有什么作用？有什么应用？

知道。css的content属性专门应用在 before/after 伪元素上，用来插入生成内容。最常见的应用是利用伪类清除浮动。

//一种常见利用伪类清除浮动的代码

.clearfix:after {

content:"."; //这里利用到了content属性

display:block;

height:0;

visibility:hidden;

clear:both; }

.clearfix {

*zoom:1;

}

after伪元素通过 content 在元素的后面生成了内容为一个点的块级素，再利用clear:both清除浮动。

5.知道css计数器（序列数字字符自动递增）吗？如何通过css content属性实现css计数器？

css计数器是通过设置counter-reset 、counter-increment 两个属性、及 counter()/counters()一个方法配合after / before 伪类实现。

HTML5 引入什么新的表单属性？

选项列表:Datalist 提供验证用户的的可靠方法：keygen 用于不同类型输出：output

获取当前日期和时间:datetime 获取本地时间:datetime-local 默认修改原样式:date 月份：month 时间：time

选择周:week 数字范围 :number range 邮箱:Email 地址:url

7.CSS3新增伪类有那些？

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

:enabled、:disabled 控制表单控件的禁用状态。

:checked，单选框或复选框被选中。

8.在解决高度塌陷时有一种方法是给父元素添加overflow:hidden;声明，说明其为什么？并写出其他两种清除浮动的方法？

添加overflow就开启了BFC模式。

清除高度塌陷的方法：

1：给父元素添加overflow:hidden

2.添加空白div 设置属性：height:value；clear:both;overflow:hidden或者font-size:0;

3.万能清除法：.clearfix:after[content:".";display:block;visiblity:hidden;clear:both;]

9.Css选择符有哪些？哪些属性可以继承？

1. 类型选择符（body,div,p...）、群组选择符（h1，h2，h3，span）、包含选择符（h2 span）、ID选择符（#id）、Class选择符（.content） 通配选择符 (*) 属性选择符 子对象选择符 伪类选择器（a:link;a:visited;a:hover;a:active;)

2. CLASS属性，伪类A标签，列表ul、li、dl、dd、dt可以继承

10.在HTML中定位分为哪几种定位，并说明其区别？

absolute绝对定位：
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed绝对定位：
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative相对定位：
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static无定位：
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
inherit继承：
规定应该从父元素继承 position 属性的值。

区别：绝对定位于相对定位的区别

参照物不同，绝对定位的参照物是包含块（父级），相对定位是元素本身的位置。
绝对定位将文档从文档流中脱离出来，因此不占据空间，相对定位不破坏正常的文档流位置，不论是否移动，都不会占据原来的空间。

固定定位含义：脱离文档流，并且相对于浏览器进行定位，因此不会随着浏览器的滚动而移动。元素定位后生成一个块级框，不论它原来是行内元素还是块级元素。与绝对定位的区别仅仅是包含块不同。

11.在网页排版过程中，我们经常使用一种叫做“精灵图”的技术，说一下精灵图的应用？图片整合的规则？以及使用精灵图有什么优点？

一般应用于导航栏的hover点击事件。等

规则:

1）边切图边整合。

2）定位时避免使用bottom,right等，用具体的数值，为了避免当你的宽度或高度上扩展sprites图时出现位置的错误。

3）将小图标预留足够的空间，因为使用这些图标元素通常会有大量的内容而且可能需要扩展的间距，以至于其它的图片可能会意外出现在本区域内。一般的情况下，会将这些小图标整合到文件的最右侧。

4）单张整合好的sprite图片在100KB以内。

5）按分类整合图片。

6）为了方便计算尺寸，一般情况会将sprites图的坐标计算成整数倍。

优点

1）通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度。

2）通过整合图片来减小图片的体积。

12.什么是css层叠？发生层叠时浏览器是怎么样去解析层叠样式的？

层叠就是浏览器对多个样式来源进行叠加，最终确定结果的过程.
css之所以有“层叠”的概念，是因为有多个样式来源。
其中css样式来源有5个，分别是内联样式（<a style="">）,内部样式(<style></style>),
外部样式（写在css文件中的样式），浏览器用户自定义样式，浏览器默认样式；
按照其来源优先级为内联样式>内部样式>外部样式>浏览器用户自定义样式>浏览器默认样式
按照选择器优先级为id >class>元素选择器
如果有important,important优先级最高。

13.<img>标签上title与alt属性的区别是什么？

alt属性和title属性的区别是前者是在图片无法加载的时候才会显示的其值，而title是在图片正常加载鼠标划上去显示的值，虽然alt也有后者的功能，但是只是在低版本的ie浏览器才支持，高版本及标准浏览器不支持这个功能了。

IE6下为什么无法定义1px左右的高度的容器？如果想定义1px高度其解决办法是什么？

是因为浏览器默认的行高

解决的方法---添加属性 line-height:1px overflow:hidden;

15.五大浏览器内核

1、Trident内核：代表作品是IE，因IE捆绑在Windows中，所以占有极高的份额，又称为IE内核或MSHTML，此内核只能用于Windows平台，且不是开源的。

代表作品还有腾讯、Maxthon（遨游）、360浏览器等。但由于市场份额比较大，曾经出现脱离了W3C标准的时候，同时IE版本比较多，

存在很多的兼容性问题。

2、Gecko内核：代表作品是Firefox，即火狐浏览器。因火狐是最多的用户，故常被称为firefox内核它是开源的，最大优势是跨平台，在Microsoft Windows、Linux、MacOs X等主要操作系统中使用。

Mozilla是网景公司在第一次浏览器大战败给微软之后创建的。有兴趣的同学可以了解一下浏览器大战

3、Webkit内核：代表作品是Safari、曾经的Chrome，是开源的项目。

4、Presto内核：代表作品是Opera，Presto是由Opera Software开发的浏览器排版引擎，它是世界公认最快的渲染速度的引擎。在13年之后，Opera宣布加入谷歌阵营，弃用了 Presto

5、Blink内核：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。现在Chrome内核是Blink。谷歌还开发了自己的JS引擎，V8，使JS运行速度极大地提高了

讲解比较粗糙，有兴趣的同学可以google搜索下，我就算是抛砖引玉了。

16.input元素种类：

　　search：与text文本框类似，用于搜索；

　　tel：与text文本框类似，用于电话；

url：与text文本框类似，用于url格式的地址；

email：与text文本框类似，用于email格式的地址；

number：与text文本框类似，用于数值；

range：只允许输入一段范围内的数值，通过min和max属性来设置范围；

color：颜色文本框，“#000000”格式的文字；

file：文件选择文本框，HTML5中通过multiple属性可以多选；

datetime、date、month、week、time、datetime-local 各种日期与时间输入的文本框；

output： 定义不同类型的输出；

Datalist:输入框列表显示

Placeholder:用来定义输入框默认显示的字体

Autofocus:用来定义打开页面光标默认显示在输入框内，一个页面只能有一个。

Multiple:可以输入一个或多个值，每个值之间用逗号分开

Required:可以应用在大多数输入元素上（除了隐藏元素和图片），在提交时如果元素内容为空白，则不允许提交，同时显示提示文字。

17关于IE6双倍边距bug解决

（1）触发的条件：父元素中的子元素设置了float属性同时，在某个方向上的浮动又添加了相应的margin值

（2）代码所得到的结果：

则在IE6浏览器中显示的是不是实际设置的margin值，而是设置的属性值的两倍

（3）修复使用的方法：在子元素中添加display:inline属性

18.实现溢出内容省略效果

1.给容器添加宽度 width:value;

2.强制文本在一行显示 white-space:nowrap;

3:溢出内容进行裁剪 overflow:hiddle

4.添加省略号效果：text-overflow:ellipsis;

19:透明度设置方法

IE浏览器写法：filter:alpha(opacity=value);取值范围 1-100

兼容其他浏览器写法：opacity: .value/0.2(value的取值范围0-1,0.1,0.2,0.3-----0.9)

例如：opacity: .8 ; filter:alpha(opacity=80);

CSS中几种@开头的方法属性

媒体查询:@media screen and (min-width: px) and (max-width: px) {}

创造Aanimation动画 @keyframes name{

from{}

to{} }

添加字体:@font-face {

font-family:;

src: url();

}

css外部调用的两种方法

<link rel=”stylesheet” type=”text/css” href=”” />

@import url();

Box-sizing的应用场景

box-sizing : content-box|border-box|inherit;

Box-sizing:content-box:默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。

Box-sizing:border-box:设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容

Box-sizing:inherit:规定应从父元素继承 box-sizing 属性的值

关于border-box的使用：

1 一个box宽度为100%，又想要两边有内间距，这时候用就比较好
2 全局设置 border-box 很好，首先它符合直觉，其次它可以省去一次又一次的加加减减，它还有一个关键作用——让有边框的盒子正常使用百分比宽度。

对弹性布局flex的了解

1.定义弹性布局定义在父元素上display:flex;/inline-flex：将对象作为内联块级弹性伸缩盒显示。

2.设置了弹性布局之后，子元素的css中的float, clear, vertical-align 这些属性将失效。

3.可以将flex弹性布局看成一个大盒子，也就是一个大容器，只要将它定义为display:flex; 即它里面所有的子元素均自动成为容器的成员，专业术语称之为项目

4.定义项目排序方式

（1）Flex-direction:row 默认位置，在主轴方向，起点在左侧，向右排列。

Flex-direction:rowreverse 主轴横向反转，起点在右侧，终点在左侧。

column：主轴纵向，起点在上方，终点在下方。

column-reverse：主轴纵向反转，起点在下方，终点在上方。

（2）justify-content (适用于父类容器上)设置或检索弹性盒子元素在主轴方向上的对齐方式。

Flex-start 弹性盒子元素将向行起始位置对齐。

Flex-end 弹性盒子元素将向行结束位置对齐。

center：弹性盒子元素将向行中间位置对齐。

space-between：弹性盒子元素会平均地分布在行里。

space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。

(3) align-items (适用于父类容器上) 设置或检索弹性盒子元素在侧轴方向上的对齐方式。

flex-start：弹性盒子元素的侧轴起始位置的边界紧靠住该行的侧轴起始边界。

flex-end：弹性盒子元素的侧轴起始位置的边界紧靠住该行的侧轴结束边界。

center：弹性盒子元素在该行的侧轴上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

baseline：将文字对齐；

stretch：如果未设置宽高，那么将元素默认拉伸为父元素高度。

(4) flex-wrap (适用于父类容器)设置或检索伸缩盒对象的子元素超出父容器时是否换行。

nowrap：当子元素溢出父容器时不换行。

- wrap：当子元素溢出父容器时自动换行。

- wrap-reverse：反转 wrap 排列。

(5) align-content (适用于父类容器上)lign-content 属性用于修改 flex-wrap 属性的行为。一般作用在有两行以上的元素

flex-start：各行向弹性盒容器的起始位置堆叠。

flex-end：各行向弹性盒容器的结束位置堆叠。

center：各行向弹性盒容器的中间位置堆叠。

space-between：各行在弹性盒容器中平均分布。

space-around：各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

stretch：各行将会伸展以占用剩余的空间。

（6）flex (适用于弹性盒模型子元素)复合属性。设置或检索伸缩盒对象的子元素如何分配空间。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

flex用于合并指定flex-grow和flex-shrink和flex-basis属性，默认值为0 1 auto。如果缩写flex:1, 则其计算值为：1 1 0，auto等价于1 1 auto，none等价于0 0 auto。

- [ flex-grow ]：定义弹性盒子元素的扩展比率。

- [ flex-shrink ]：定义弹性盒子元素的收缩比率。

- [ flex-basis ]：定义弹性盒子元素的默认基准值。

（7）order (适用于弹性盒模型容器子元素)设置或检索弹性盒模型对象的子元素出现的顺序。

（8） align-self (适用于弹性盒模型容器子元素)align-self 属性用于设置弹性元素自身在侧轴方向上的对齐方式。

auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

24.css命名

1、页面结构

wrap：外套、包裹，用于最外层。

wrapper：外套，用于页面外围控制整体布局宽度。

box：盒子，容器。

header：头部，用于页头部分。

nav：导航，主导航。

main：主要区域，内容主体。

content/container：内容，内容容器。

sidebar：侧边栏。

footer：底部，用于页脚部分。

2、功能区块

　　left center right：左中右。

　　main-left：左侧主要布局。

　　main-right：右侧主要布局。

　　logo：网站 LOGO 标志。

　　search：搜索输入框。

　　loginbar：登录条。

　　regsiter：注册模块。

　　banner：广告，用于横幅广告条。

　　menu：菜单。

　　submenu：子菜单，二级菜单。

　　top：顶部。

　　topnav：顶导航。

　　mainnav：主导航。

　　subnav：子导航，二级导航。

　　leftsideBar：左导航。

　　rightsideBar：右导航。

　　topbar：顶部工具/菜单。

　　bottom：底部。

　　bottombar：底部工具栏。

　　tool：工具条。

　　shop：功能区，如购物车、收银台。

3、其他常用命名

　　title：栏目标题。

　　summary：摘要。

　　hot：热门热点信息，推荐。

　　msg：提示信息。

　　news：新闻。

　　list：列表，文章列表。

　　piclist：图片列表。

　　newslist：新闻列表。

　　search-output：搜索输出。

　　search-results：搜索结果。

　　drop/dropdown：下拉。

　　dropmenu/dorpdown-content：下拉菜单。

　　scroll：滚动。

　　homepage：首页。

　　subpage：子页面，二级页面。

　　tag：标签。

　　tab：标签页。

　　tips：小技巧。

　　ranking：排行。

　　vote：投票。

　　bth：按钮。

　　icon：图标。

　　arr/arrow：箭头。

　　status：状态。

　　note：注释。

　　skin：皮肤。

　　current：当前的。

　　active：活跃的，有效的。

　　download：下载。

　　friendLink：友情链接。

　　copyright：版权信息。

　　partner：合作伙伴。

　　joinus：加入我们。

　　sitemap：网站地图。

　　siteinfo：网站信息。

　　siteinfoLegar：法律声明。

　　announcement：公告。

　　guild：指南。

　　service：服务。

　　promotion：推广。

　　blog：博客。

　　forum：论坛。

一个未知宽高元素怎么在水平竖直方向垂直居中
1. 利用绝对定位和tansform属性

Position:absolute;

Left:50%;

Top:50%;

Right:50%;

Bottom:50%;

Transform:translateX（-50%）translateY(50%）

利用弹性盒子属性

Body{display:flex;justify-content:center;align-atems:center;}

利用display属性对元素进行渲染

Display:table-cell;

Text-align:center;vertical:middle;

margin的坑点:

1.相邻兄弟元素在垂直方向上的margin值会出现融合的情况.融合后会取两个元素里较大的值作为融合后的值.
如何解决该问题:display:inline-block;

2.当父级子级元素都设置了margin时，子级的margin值会传递到父级.
margin传递解决办法:
1.给父级加一个边框
2.给父级使用overflow:hidden属性(推荐使用)
3.给父级或子级或两者都加display:inline-block解决;

27.用css画三角形

Width:0px; height:0px; border:200px transparent solid; border-top:200px red solid;

Width:0px; height:0px; border-top:200px red solid; border-left:200px blue solid; 这种方法至少写两个三角形才能出现效果。