前端CSS知识点
2017-05-22 11:21:04 0 举报
AI智能生成
登录查看完整内容
前端CSS知识点
作者其他创作
大纲/内容
拓展知识
命名规则
基于功能
它是用来干什么的
.button/.form/.list/.tab-list/.nav
优先使用
样式与内容无关
基于内容
元素里面放的是什么
.news/.user-info/.help/.contact-me
中小型网站可以给予内容去命名
基于视觉
看起来是什么样?
.round-image/.nowrap
大型网站可以基于视觉去命名
不要使用太具体的样式
现在比流行的命名方式
BEM
块Block
.block
元素Element
.block__element
修饰符Modifier
.block__element--modifer
eg. tab__item--active
文件结构
basic
css reset
设置HTML标签的默认样式
使其在各个浏览器表现基本一致
让默认样式归零
normalize.css
保留标签的默认样式
moudles
可复用的css代码段
与模块在HTML中的位置无关
(一般)与使用的HTML标签无关
抽取css模块原则
面向对象
结构和皮肤分离
.btn .btn--primary .btn--info .btn--danger
容器和内容分离
/* 不推荐这样写 */.header .btn { \u00A0background: #f66; \u00A0color: #fff;}
这样就没有遵循与位置无关原则
单一职责
尽可能细的拆分成可独立复用的组件
通过组合方式使用多个组件
比如将布局和其它样式拆分
开闭原则
对扩展开放
对修改关闭
DRY
pages
CSS预处理
Less
Sass
PostCSS
stylus
响应式
媒体查询
CSS知识点
基础知识
速查词典
CSS语法
引用
方法
行内式
语法:<h1 style=\"font-size:18px;\">xxxx</h1>
俗称行内样式,在style属性中设置CSS样式
标记本身定义的style优先于其他所有的样式定义
嵌入式
<style type=\"text/css\"> h1{font-size:18px;}</style>
导入式
<style type=\"text/css\"> @import\"style.css\";</style>
先加载页面,后加载样式
链接式
<link href=\"style.css\" rel=\"stylesheet\" type=\"text/css\" />
先加载样式,后加载页面
外部样式表优先级低于内部样式表
CSS中 link 和@import 的区别是
(1) link属于HTML标签,而@import是CSS提供的;\u00A0
(2) 页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
(3) import只在IE5以上才能识别,而link是HTML标签,无兼容问题;\u00A0
(4) link方式的样式的权重 高于@import的权重.
CSS选择器
分类
元素选择器
通配选择器* { }
id选择器(#id)
类选择器(.class)
关系选择器
后代选择器(E F)
子选择器(E>F)
相邻选择器(E+F)
兄弟选择器(E~F)
选择E元素后面的所有兄弟元素F。
属性选择器
E[att]
选择具有att属性的E元素。
E[att=\"val\"]
选择具有att属性且属性值等于val的E元素。
E[att~=\"val\"]
选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素。
E[att^=\"val\"]
选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$=\"val\"]
选择具有att属性且属性值为以val结尾的字符串的E元素。
E[att*=\"val\"]
选择具有att属性且属性值为包含val的字符串的E元素。
E[att|=\"val\"]
选择具有att属性且属性值为以val开头并用连接符\"-\"分隔的字符串的E元素。
伪类选择器
E:link,E:visited,E:hover,E:active
E:focus
设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式。
E:not()
匹配不含有s选择符的元素E。
E:first-child
匹配父元素的第一个子元素E
E:last-child
匹配父元素的最后一个子元素E
E:only-child
匹配父元素仅有的一个子元素E
E:nth-child(n)
匹配父元素的第n个子元素E
E:nth-last-child(n)
匹配父元素的倒数第n个子元素E
E:first-of-type
匹配同类型中的第一个同级兄弟元素E
E:last-of-type
匹配同类型中的最后一个同级兄弟元素E
E:only-of-type
匹配同类型中的唯一的一个同级兄弟元素E
E:nth-of-type(n)
匹配同类型中的第n个同级兄弟元素E
E:nth-last-of-type(n)
匹配同类型中的倒数第n个同级兄弟元素E
E:empty
匹配没有任何子元素(包括text节点)的元素E
E:checked
匹配用户界面上处于选中状态的元素E
E:enabled
匹配用户界面上处于可用状态的元素E
E:disabled
匹配用户界面上处于禁用状态的元素E
E:target
匹配相关URL指向的E元素
伪元素选择器
E:first-letter/E::first-letter
设置对象内的第一个字符的样式。
E:first-line/E::first-line
设置对象内的第一行的样式。
E:before/E::before
设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用
E:after/E::after
设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用
E::selection
设置对象被选择时的颜色
优先级
1.优先级就近原则,同权重情况下样式定义最近者为准;
2.载入样式以最后载入的定位为准;
3.!important \u00A0id class tag \u00A0
4.important 比 内联优先级高,但内联比 id 要高
5.行内样式 > 内嵌样式 > 外部样式
6.ID选择器 类选择器 标签选择器
属性
盒子模型
1)盒模型: 内容(content)、填充(padding)、 边框(border)、外边距(margin)
2)有两种, IE 盒子模型、标准 W3C 盒子模型;IE的content部分包含了 border 和 padding;
display
inline 强制显示行内级别元素
行内元素会在一条直线上排列,都是同一行,不会换行
block 强制块级元素显示
块级元素各占据一行,垂直方向排序,块级元素可以包含行内元素和块级元素,行内元素不能包含块级元素属性不同,主要在盒模型上 行内 width、height无效,margin上下无效、padding上下无效
inline-block 行内块级元素
行内块级元素:span style=\
none
隐藏对应的元素,在文档布局中不在给他分配空间,它各边的元素会合拢,当不存在
visibility:hidden 隐藏对应的元素,但是在文档布局中仍保留原来的空间
postion
table class=\"dataintable\" style=\
absolute和fixed的区别
div style=\
float
浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留1、使用空标签清除浮动。在所有浮动标签后面添加一个空标签,定义css clear:both 弊端就是添加了无意义的标签span style=\
浮动元素引起的问题和解决办法
父元素的高度无法被撑开,影响与父元素同级的元素与浮动元素同级的非浮动元素会跟随其后若非第一个元素浮动,该元素之前的元素也需要浮动,否则会影响页面显示的结构
解决办法:使用css中的clear:both;属性来清除元素的浮动,可以解决2、3问题对于问题1:code class=\"css plain\" style=\
使用after伪元素1、使用额外标签法,<div style=\"clear:both;\"></div>2、使用after伪元素span style=\
布局
flexbox
变形与动画
transition(过渡)
transform(变换)
2D
translate()
rotate()
scale()
skew()
matrix()
3D
animation(动画)
继承
可继承的样式:
1.font-size
2.font-family
3.color
4.text-indent
不可继承的样式:
1.border
2.padding
3.margin
4.width
5.height
媒体查询 media query
排版
居中浮动元素
设置宽度,margin:0 auto
position:relative;width,height,top,right,margin-left,margin-top
\u00A0超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序: \u00A0 \u00A0L-V-H-A : \u00A0a:link {} a:visited {} a:hover {} a:active {}
CSS sprites
将网页中的一些背景图片整合到一张图片文件中利用css:background-image,background-repeat,background-position组合进行背景定位
这样可以减少很多图片请求的开销,因为请求耗时比较长请求虽然可以并发,但是有限制
CSS hack
CSS 条件 Hack
<!--[if <keywords>? IE <version>?]>HTML代码块<![endif]-->
CSS 属性 HACK
\t\t语法:\t\t\t\t\tselector{<hack>?property:value<hack>?;}\t\t\t
大部分特殊字符IE浏览器支持,其他主流浏览器firefox,chrome,opera,safari不支持 (opera可识别除外)。\\9 :IE6+都支持_和- :仅IE6支持* :IE6、E7支持\\0 :IE8、IE9支持,opera部分支持\\9\\0 :IE8部分支持、IE9支持\\0\\9 :IE8、IE9支持
例如.test{\t color:#090\\9; /* For IE8+ */\t *color:#f00; /* For IE7 and earlier */\t _color:#ff0; /* For IE6 and earlier */}
CSS 选择符 HACK
参考资料
CSS hack大全&详解
CSS HACKs 大全
BFC块级格式化上下文
原理
应用
与haslayout的区别
Gpu加速
0 条评论
回复 删除
下一页