1、CSS的盒子模型?
(1)两种, IE 盒子模型、标准 W3C 盒子模型;IE 的content部分包含了 border 和 pading;
(2)盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border).
box-sizing:content-box(默认) | border-box(ie盒模型)
2、link 和@import 的区别是?
(1)、link属于XHTML标签,而@import是CSS提供的;
(2)、页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
(3)、import只在IE5以上才能识别,而link是XHTML标签,无兼容问题;
(4)、link方式的样式的权重 高于@import的权重;
3、display:(显示)
none:隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
inline:指定对象为内联元素。
block:指定对象为块元素。
list-item:指定对象为列表项目。
inline-block:指定对象为内联块元素。(CSS2)
table:指定对象作为块元素级的表格。类同于html标签
inline-table:指定对象作为内联元素级的表格。类同于html标签
table-caption:指定对象作为表格标题。类同于html标签
(CSS2)table-cell:指定对象作为表格单元格。类同于html标签
(CSS2)table-row:指定对象作为表格行。类同于html标签
(CSS2)table-row-group:指定对象作为表格行组。类同于html标签
(CSS2)table-column:指定对象作为表格列。类同于html标签
(CSS2)table-column-group:指定对象作为表格列组显示。类同于html标签
(CSS2)table-header-group:指定对象作为表格标题组。类同于html标签(CSS2)
table-footer-group:指定对象作为表格脚注组。类同于html标签
(CSS2)run-in:根据上下文决定对象是内联对象还是块级对象。(CSS3)
box:将对象作为弹性伸缩盒显示。(伸缩盒最老版本)(CSS3)
inline-box:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最老版本)(CSS3)
flexbox:将对象作为弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)
inline-flexbox:将对象作为内联块级弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)
flex:将对象作为弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
inline-flex:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
4、visibility:(为被隐藏的对象保留其物理空间)
visible:设置对象可视。
hidden:设置对象隐藏。
collapse:主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象,其作用等同于hidden。
5、overflow、overflow-x、overflow-flow:
visible:对溢出内容不做处理,内容可能会超出容器。
hidden:隐藏溢出容器的内容且不出现滚动条。
scroll:隐藏溢出容器的内容,溢出的内容将以卷动滚动条的方式呈现。
auto:当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条。此为body对象和textarea的默认值。
6、opacity:(不透明度)
使用浮点数指定对象的不透明度。值被约束在[0.0-1.0]范围内。
7、@charset "utf-8"; 在外部样式表文件内使用。指定该样式表使用的字符编码。
8、css选择符:
关系选择:E F { sRules } 包含选择符 会选中所有E 下的F 后代元素;
E>F { sRules }子选择符 选中E 的子元素 F;
E+F { sRules }相邻选择符,选中有相同父元素下的E的所有紧邻F兄弟元素;
E~F { sRules }兄弟选择符会命中所有符合条件的兄弟元素,而不强制是紧邻的元素。css3
属性选择符:
E[att] { sRules } 选择具有att属性的E元素。
E[att="val"] { sRules } 选择具有att属性且属性值等于val的E元素。
E[att^="val"] { sRules } 选择具有att属性且属性值为以val开头的字符串的E元素。css3
E[att$="val"] { sRules } 选择具有att属性且属性值为以val结尾的字符串的E元素。
E[att*="val"] { sRules } 选择具有att属性且属性值为包含val的字符串的E元素。
伪类选择符:(css3)
E:not(s) { sRules } 匹配不包含s选择符的元素E;
E:root { sRules } 匹配E元素在文档的根元素。在HTML中,根元素永远是HTML
E:last-child { sRules } 匹配父元素的最后一个子元素E;
E:only-child { sRules } 匹配父元素仅有的一个子元素E。
E:nth-child(n) { sRules } 匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效。
E:nth-last-child(n) { sRules } 匹配父元素的倒数第n个子元素E;
E:first-of-type {sRules } 匹配同类型中的第一个同级兄弟元素E。
E:last-of-type { sRules } 匹配同类型中的最后一个同级兄弟元素E。
E:only-of-type { sRules } 匹配同类型中的唯一的一个同级兄弟元素E。
E:nth-of-type(n) { sRules } 匹配同类型中的第n个同级兄弟元素E。
E:nth-last-of-type(n) { sRules } 匹配同类型中的倒数第n个同级兄弟元素E。
E:empty { sRules } 匹配没有任何子元素(包括text节点)的元素E。
9、BFC:( Box、Formatting Context)
定义:--“块级格式化上下文”。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干
BFC布局规则:
1、内部的Box会在垂直方向,一个接一个地放置。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3、每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
4、BFC的区域不会与float box重叠。
5、BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
6、计算BFC的高度时,浮动元素也参与计算
二、哪些元素会生成BFC?
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
小技巧
/*设置字体抗锯齿*/
-webkit-font-smoothing:antialiased;
/*清除浮动代码1*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
.floatfix{
*zoom:1;
}
.floatfix:after{content:"";display:table;clear:both;}
//css3部分
1、tansform(变换)
-webkit-perspective:800px;/*定义 3D 元素距视图的距离, perspective 属性时,其子元素会获得透视效果,而不是元素本身。*/
-webkit-transform-style:preserve-3d; /*子元素将保留其 3D 位置。*/
-webkit-backface-visibility:hidden; /*定义当元素不面向屏幕时不可见*/
none:无转换
matrix(,,,,,):以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate([, ]):指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
translateX():指定对象X轴(水平方向)的平移
translateY():指定对象Y轴(垂直方向)的平移
rotate():指定对象的2D rotation(2D旋转),需先有transform-origin属性的定义
scale([, ]):指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值
scaleX():指定对象X轴的(水平方向)缩放
scaleY():指定对象Y轴的(垂直方向)缩放
skew( [, ]):指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
skewX():指定对象X轴的(水平方向)扭曲
skewY():指定对象Y轴的(垂直方向)扭曲
2、transition:(过渡)
[ transition-property ]:检索或设置对象中的参与过渡的属性
[ transition-duration ]:检索或设置对象过渡的持续时间
[ transition-timing-function ]:检索或设置对象中过渡的动画类型
[ transition-delay ]:检索或设置对象延迟过渡的时间
缩写:transition:all .5s ease-in .1s;