前端知识点
2016-11-07 18:47:13 0 举报AI智能生成
CSS（层叠样式表）是一种用于描述网页外观和格式的标记语言。它通过选择器和属性来定义网页元素的样式，如颜色、字体、大小、布局等。CSS可以将样式与内容分离，使网页更易于维护和更新。通过使用CSS，可以实现网页的动态效果，如动画、过渡等。CSS还支持响应式设计，使网页能够适应不同设备和屏幕尺寸。总之，CSS是构建现代网页的重要工具，它提供了丰富的功能和灵活性，使设计师能够创造出吸引人的视觉效果。
作者其他创作
大纲/内容
css规范
visual formatting model
视觉格式化模型：用户代理user agent如何在视觉媒体visual Media 下处理文档树Document tree
在文档树种每一个元素根据盒模型box model 产生零个或多个盒
内容控制方法
盒的尺寸和类型
定位体系positioning scheme，常规流、浮动和绝对定位
文档树种元素之间的关系
外部信息（如视口大小、图片的固定尺寸）
CSS
引用
方法
直接标记的style属性
标记本身定义的style优先于其他所有的样式定义
放在style的任何其他样式规则前面
定义内部样式表
嵌入外部样式表
style @import
链接外部样式表
link
外部样式表优先级低于内部样式表
CSS中 link 和@import 的区别是
(1) link属于HTML标签，而@import是CSS提供的;
(2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
(4) link方式的样式的权重 高于@import的权重.
| <style type="text/css">@import url("style.css");</style> | |
初始化样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异
初始化样式会对seo有一定的影响，力求影响最小的情况下初始化
属性
盒子模型
1）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)
2）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 padding;
display
inline
行内元素会在一条直线上排列，都是同一行，不会换行
block
块级元素各占据一行，垂直方向排序，块级元素可以包含行内元素和块级元素，行内元素不能包含块级元素
属性不同，主要在盒模型上 行内 width、height无效，margin上下无效、padding上下无效
属性不同，主要在盒模型上 行内 width、height无效，margin上下无效、padding上下无效
inline-block
display：block转化块级
flex
none
隐藏对应的元素，在文档布局中不在给他分配空间，它各边的元素会合拢，当不存在
visibility：hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间
postion
| 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 属性的值。 |
absolute：只要父级元素设了position并且不是static（默认既是static），那么设定了absolute的子元素即以此为包含块（最近的）
absolute和fixed的区别
A：共同点：
1.改变行内元素的呈现方式，display被置为block；
2.让元素脱离普通流，不占据空间；
3.默认会覆盖到非定位元素上
B不同点：
absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。
当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。
CSS sprites
将网页中的一些背景图片整合到一张图片文件中
利用css：background-image，background-repeat，background-position组合进行背景定位
利用css：background-image，background-repeat，background-position组合进行背景定位
这样可以减少很多图片请求的开销，因为请求耗时比较长
请求虽然可以并发，但是有限制
请求虽然可以并发，但是有限制
float
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留
1、使用空标签清除浮动。在所有浮动标签后面添加一个空标签，定义css clear:both 弊端就是添加了无意义的标签
所以我们在使用浮动进行布局的时候会需要一个块级元素（行内元素无效）来设置 clear 属性，如果浮动元素下方本来就有元素，那我们可以直接对该元素设置 clear:both ，若没有其他元素需要展示，我们往往会写一个空白标签来清除浮动
<div stylr="clear:both"></div>
2、使用overflow。给包含浮动元素的父标签添加css属性，overflow:auto;zoom:1
3、使用after伪对象清除浮动。适合非IE
所以考虑使用伪元素 :after 来代替这个空白标签，因为清除浮动需要在浮动元素后面，所以不可以使用 :before ，对 :after 设置 content:"" ，并使其 display:block 成为块级元素后 clear:both 来清除浮动：
<div><div></div>::after</div>
1、使用空标签清除浮动。在所有浮动标签后面添加一个空标签，定义css clear:both 弊端就是添加了无意义的标签
所以我们在使用浮动进行布局的时候会需要一个块级元素（行内元素无效）来设置 clear 属性，如果浮动元素下方本来就有元素，那我们可以直接对该元素设置 clear:both ，若没有其他元素需要展示，我们往往会写一个空白标签来清除浮动
<div stylr="clear:both"></div>
2、使用overflow。给包含浮动元素的父标签添加css属性，overflow:auto;zoom:1
3、使用after伪对象清除浮动。适合非IE
所以考虑使用伪元素 :after 来代替这个空白标签，因为清除浮动需要在浮动元素后面，所以不可以使用 :before ，对 :after 设置 content:"" ，并使其 display:block 成为块级元素后 clear:both 来清除浮动：
<div><div></div>::after</div>
#content:after{content:"";display:block;clear:both;}
浮动元素引起的问题和解决办法
父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素会跟随其后
若非第一个元素浮动，该元素之前的元素也需要浮动，否则会影响页面显示的结构
与浮动元素同级的非浮动元素会跟随其后
若非第一个元素浮动，该元素之前的元素也需要浮动，否则会影响页面显示的结构
解决办法：
使用css中的clear：both；属性来清除元素的浮动，可以解决2、3问题
对于问题1：
使用css中的clear：both；属性来清除元素的浮动，可以解决2、3问题
对于问题1：
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;} .clearfix{display: inline-block;} 使用after伪元素
1、使用额外标签法，<div style="clear:both;"></div>
2、使用after伪元素
#parent:after{3、浮动外部 元素
4、设置overflow为hidden或者auto
1、使用额外标签法，<div style="clear:both;"></div>
2、使用after伪元素
#parent:after{
content:"."; height:0; visibility:hidden; display:block; clear:both;}4、设置overflow为hidden或者auto
子主题
绘制
动画
css选择器
分类
1.id选择器(# myid)
2.类选择器(.myclassname)
3.标签选择器(div, h1, p)
4.相邻选择器(h1 + p)
5.子选择器(ul > li)
6.后代选择器(li a)
7.通配符选择器( * )
8.属性选择器(a[rel = "external"])
9.伪类选择器(a: hover, li:nth-child)
新增的伪类
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 单选框或复选框被选中。
优先级
1.优先级就近原则，同权重情况下样式定义最近者为准;
2.载入样式以最后载入的定位为准;
3.!important > id > class > tag
4.important 比 内联优先级高，但内联比 id 要高
继承
可继承的样式：
1.font-size
2.font-family
3.color
4.text-indent
不可继承的样式：
1.border
2.padding
3.margin
4.width
5.height
排版
居中浮动元素
设置宽度，margin：0 auto
position：relative；width，height，top，right，margin-lift，margin-top
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
0 条评论
下一页
