父级的宽度不够,导致元素无法并排显示;
谷歌中这样是解释的:
图片底部的空隙实际上涉及行内元素的布局模型,图片默认的垂直对齐方式是基线,而基线的位置是与字体相关的。所以在某些时候,图片底部的空隙可能是 2px,而有时可能是 4px 或更多。不同的 font-size 应该也会影响到这个空隙的大小。
解决办法:
最优的解决办是定义vertical-align,注:定义vertical-align为middle时在IE6中大概还有一像素的顶边距,最好为top或bottom。当然还有种极端解决办法大家可以试试就是将 父容器的字体大小为零,font-size:0
(1)转化成(行级)块元素
display : block
(2)浮动,浮动后的元素默认可以转化为块元素(可以随意设置宽高属性)
float : left;
(3)给 img 定义 vertical-align(消除底部边距)
img{
border: 0;
vertical-align: bottom;
}
(4)将其父容器的font-size 设为 0;
(5)给父标签设置与图片相同的高度
行内元素:
(1)行内元素不换行
(2)行内元素不可以设置大小
(3)行内元素大小由内容决定
块元素:
(1)块元素独立成行
(2)块元素可以设置大小
(3)块元素如果不设置宽度,宽度会自适应其父级的宽度
行元素:
span、img、a、lable、input、abbr(缩写)、em(强调)、big、cite(引用)、i(斜体)、q(短引用)、textarea、select(下拉列表)、small、sub、sup,strong、u(下划线)、button(默认display:inline-block)
从浏览器的显示结果可以看出,相邻的行内元素不换行,宽度即为内容的宽度、padding的4个方向都有效(从span标签可以看出,对于行内非替换元素,不会影响其行高,不会撑开父元素;而对于替换元素,则会撑开父元素)、margin只有水平方向有效(其中垂直方向的margin对行内替换元素(比如img元素)有效,对行内非替换元素无效)、不可以设置width和height属性。行内块元素表现其实和行内元素一样,只是其可以设置width和height属性。
块元素:
div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre,HTML5新增的header、section、aside、footer等
从浏览器的显示结果可以看出,块级元素新开启一行(即使是设置了width属性也是独占一行)、尽可能撑满父级元素的宽度,可以设置width和height属性;table元素浏览器默认的display属性为table。
继承:在一个属性应用于一个特定标签之后,该标签的子标签也应该应用该属性。这一行为称为继承。但并不是所有的属性都会被继承。如文字样式一般都继承,盒图的宽高一般不 继承,总之该继承的都会继承,不该继承的都不继承。
重用:一个样式文件,可以多个页面使用,这对于一些公共样式的重构是很有用的。
Trident内核:IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等。
Presto内核:Opera7及以上。[Opera内核原为:Presto,现为:Blink;]
Webkit内核:Safari,Chrome等。[ Chrome的:Blink(WebKit的分支)]
EdgeHTML内核:Microsoft Edge。[此内核其实是从MSHTML fork而来,删掉了几乎所有的IE私有特性]
主要分成两部分:渲染引擎(layout engineer或Rendering Engine)和 JS 引擎。
(1)渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户以及其他它所需要编辑、显示网络的应用程序都需要内核。
(2)JS引擎则:解析和执行JavaScript 来实现网页的动态效果;
最开始渲染引擎和 JS 并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只渲染引擎。
答:内联,内嵌,外链,导入
(1)link 属于 XHTML 标签,除了加载 CSS 外,还能用于定义RSS,定义 rel 连接属性等作用,无兼容性,支持使用javascript改变样式;而@import是CSS提供的,只能用于加载CSS,不支持使用 javascript 改变样式;
(2)页面被加载的时,link 会被同时加载,而@import 引用的CSS会等到页面加载完再加载;
(3)import是CSS2.1 提出的,CSS2.1以下浏览器不支持,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题
CSS3实现圆角(border-radius),阴影(box-shadow),
对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
增加了更多的CSS选择器 多背景 rgba
在CSS3中唯一引入的伪元素是 ::selection.
媒体查询,多栏布局
rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素,以及元素内的所有内容的透明度,
而rgba()只作用于元素的颜色或其背景色。(设置rgba透明的元素的子元素不会继承透明效果!)
CSS Sprites小图片背景共享技术。它把一堆小的图片整合到一张大的图片上。然后利用CSS的 background-image,background- repeat,background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能;CSS Sprites能减少图片的字节。
优势:
1.很好的减少网页的请求,大大提高页面的性能;
2.减少图片的字节;
3.解决了网页设计师在图片命名上的困扰;
4.更换风格方便,维护方便。
劣势:
1.图片合并时需预留好足够空间,宽屏、高分辨率的屏幕下易出现背景断裂;
2.开发较麻烦,测量繁琐;(可使用样式生成器)
3.维护麻烦,背景少许改动有可能影响整张图片,使得字节增加还要改动css。
第一种回答:
伪类: :focus、:hover、:active
伪元素::before、:after
伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息;
伪元素本质上是创建了一个有内容的虚拟容器;
CSS3中伪类和伪元素的语法不同;
可以同时使用多个伪类,而只能同时使用一个伪元素;
第二种回答:
伪类:伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。
:first-child :visitive :hover :active :focus :lang
伪元素:与伪类针对特殊状态的元素不同的是,伪元素是对元素中的特定内容进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多。实际上,设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。