CSS3
- 隐藏网页中的元素有几种方式?这些方法有什么区别?
答:有三种方法- display:none; 脱离文档流,不占页面空间,会改变页面布局。
- visivility:hidden ;不会脱离文档流,不会改变页面布局,仍占页面空间
- opacity:0,该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定一些事件,如click事件,那么点击该区域,也能触发点击事件
- 如何解决子元素的上外边距溢出?
答:在父元素的第一个子元素位置处添加一个空的table标记. - 常用来设置透明度的方式有几种?他们之间有何区别?
答:opacity或rgba
opacity能设置与元素相关各种颜色的透明度
rgba()只能设置当前某一种颜色的透明度 - 浮动会对父元素的高度带来什么影响?如何解决这个问题?
答:子元素一旦浮动,父元素的高度为0,在父元素最后一个子元素位置处添加一个空的块级元素,
并设置其clear属性值为both.
clear:after{
display:block;
content:””;
clear:both;
}
-
哪些元素默认有外边距?
答:body,p,h1-h6,ul,ol,dl,pre -
网页中如何定义锚点?如何连接到锚点位置?
答:a标记用name定义锚点,其他标记用id属性定义锚点,连接到锚点的位置:href=“#锚点名称” -
框模型默认的计算方式是什么?要改变默认的计算方式用哪个属性及值?
答:实际占地宽度=左右外边距+左右边框+左右内边距+width
实际占地高度=上下外边距+上下边框+上下内边距+height
改变计算方式 box-sizing:border-box -
实现时针转动效果需要用到CSS中哪些关键技术?
答:旋转,动画,绝对定位 -
设置行内元素居中对齐用什么属性?
答:text-align:center -
如果要将表单中控件的值提交给服务器必须为控件设置什么属性?
答:name和value属性 -
transition和animation的区别?
答:Animation和transition大部分属性是相同的,他们都是随时间改变元素的属性值,他们的主要区别是transition需要触发一个事件才能改变属性,
而animation不需要触发任何事件的情况下也会随时间改变属性值,并且transition为2帧,从from … to,而animation可以一帧一帧的,也可以理解为一个animation是由多个transition组成。 -
如何实现水平垂直居中?
答:(1)定位+外边距 盒子宽高已知,
position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;
(2)定位+transform 盒子高宽已知,
#container{ position:relative; border:1px solid red; width:800px; height:600px; }
#center{ width:100px; height:100px; background:blue; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); }
(3)flex 布局
父级:
display: flex;
align-items: center;
justify-content: center; -
盒子模型你是怎么理解的?
答案:元素框处理元素内容,内边距外边距以及边框的计算方式。盒子模型有两种,W3C和IE盒子模型
(1)w3c的盒模型width=content,不包括margin,padding,border
(2)IE盒模型width=content+padding+border
(3)box-sizng border-box在已设定的宽度和高度之内去设定padding和border
content-box在已设定的高度和宽度之外设置padding和border -
src和href的区别?
答:(1)href:
href是Hypertext Reference的缩写,表示超文本引用。用来建立当前元素和文档之间的链接。
并行下载该文档,不会停止对当前文档的处理
(2)src:
src是source的缩写,src指向的内容会嵌入到文档当前标签所在位置
如img、script、iframe当浏览器解析到该元素时,会暂停浏览器的渲染,直到该资源加载完毕。 -
说出link和import的区别?
答:(1)使用方法不同:
link一般在html头部定义,作为html标签,链接资源,主要用于链接外部的样式表
import一般定义在css内部,并且一定要在其他所有规则之前,也就是一般写在文件头部,并且专门拿来链css的。
(2)加载顺序差别
import比link延迟一些,它会等到页面下载完后才加载,因而可能会产生闪烁 -
改变页面元素位置的定位方式及他们的区别?
答:relative 相对定位 相对于自身原来位置进行偏移,仍处于标准文档流中;
absolute 绝对定位 相对于最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以body元素为偏移参照, 完全脱离文档流;
fixed 固定定位的元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在固定的位置。固定定位也会脱离文档流。 -
display有哪些值,说明他们的作用?
答:display的取值可以是none/inline/block/inline-block/table
none:元素隐藏不可见,并且元素也不占页面空间。
Inline:元素将呈现行内元素的特点,多个元素在一行中显示,不允许修改尺寸,也不能设置垂直外边距。
block:元素将呈现块级元素的特点,每个元素独占一行,允许修改尺寸。
inline-block:元素将呈现行内块元素的特点,多个元素在一行中显示,但是可以修改尺寸。
table:元素将呈现表格的特点,由内容决定表格的显示方式。元素独占一行,允许修改尺寸。 -
有两个div,外框和内框高度宽度都不定,内框垂直水平居中,利用css如何实现?
.center{
display:flex;
justify-content:center;
align-items:center;
}
- 说说em和rem的区别?
答:rem是基于html元素的字体大小来决定,而em则根据使用它的元素的字体大小决定(很多人错误以为是根据父类元素,实际上是元素继承了父类的属性才会产生的错觉) - 浏览器的内核分别是什么?
答:IE 浏览器的内核 Trident、Mozilla 的 Gecko、Chrome 的 Blink(WebKit 的分支)、 Opera 内核原为 Presto,现为 Blink; - 为什么要初始化 CSS 样式?
答:因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。当然,初始化样式会对 SEO 有一定的影响,但力求影响最小的情况下初始化。最简单的初始化方法就是: * {padding: 0; margin: 0;} (不建议)淘宝的样式初始化: body, h1, h2, h3, h4, h5, h6, hr, p, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, /5b8b/4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
ul, ol{ list-style:none;}
a{text-decoration:none; }
a:hover {text-decoration:underline; }
img{ border:0;}
button,input, select,textarea{ font-size:100%; }
table { border-collapse:collapse; border-spacing:0; } - CSS哪些属性可以继承?
答:可继承的样式: font-size ,font-family ,color, background等;
不可继承的样式:border, padding ,margin ,width ,height ; - 优先级算法如何计算?
答:优先级就近原则,同权重情况下以最近者为准;
优先级为: !important > id > class > tag
important 比 内联优先级高 - CSS3 新增伪类有那些?
答::first-child 选择属于其父元素的首个元素。
:last-child 选择属于其父元素的最后一个元素。
:only-child 选择属于其父元素唯一的元素。
:nth-child(n) 选择属于其父元素的任意一个子元素。
:empty 选择没有子元素的元素。
:not(selector) 将满足指定选择器的元素给排除在外。 - 描述 css reset 的作用?
答:reset 重置浏览器为元素设置的默认样式,浏览器的种类不同,样式可能不同,重置是为了让他们统一样式。 - 清除浮动带来影响的几种方式,各自的优缺点?
答:1、直接设置父元素高度,但不是每次都知道父元素的高度。
2、设置父元素也浮动,但不是任何时候父元素都需要浮动,而且浮动会影响后续元素。
3、为父元素设置 overflow属性,但如果有内容需要溢出显示的话,也会一同被隐藏。
4、在父元素中,追加空子元素,并设置其clear:both,但页面中会多出一个空元素。
5、用内容生成的方式:after{content:””;display:block;clear:both;} - px 和 em 的区别?
答:px 和 em 都是长度单位,区别是,px 的值是固定的,指定是多少就是多少,计算比较容易。
em 的值不是固定的,并且 em 会继承父级元素的字体大小。
浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px。那么 12px=0.75em, 10px=0.625em