CSS类的题目
11、介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?
CSS盒子模型: 外边距(margin) 内边距(padding) 边框(border) 内容区(content)
CSS盒子模型与低版本IE的盒子模型的区别主要在于:宽和高不一样
标准的CSS的盒子模型的宽高 = 内容区的宽高 (W3c盒子模型)
低版本IE的盒子模型的宽高 = 内容区+内边距+边框
最新的盒子模型:box-sizing: border-box;
12、CSS选择符有哪些?哪些属性可以继承?
id选择器( # myid);
类class选择器(.myclassname);
标签选择器(div, h1, p);
相邻选择器(h1 + p);
子选择器(ul > li);
后代选择器(li a);
通配符选择器( * );
属性选择器(a[rel = "external"]);
伪类选择器(a:hover, li:nth-child);
可继承的样式: font-size font-family color, ul li dl dd dt;
不可继承的样式:border padding margin width height 。
13、CSS优先级算法如何计算?
优先级就近原则,同权重情况下样式定义最近者为准;
载入样式以最后载入的定位为准;
优先级为:
同权重: 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。
!important > id > class > tag
important 比 内联优先级高
14、CSS3新增伪类有那些?
css3新增了许多伪类,但是IE8以及更低版本的IE浏览器不支持css3伪类,所以在使用时要是涉及到布局等意象全局的样式,应该多考虑一下。
elem:nth-child(n) 这个伪类选中父元素下的第n个子元素,并且这个子元素的标签名为elem,n可以接受具体的数值,也可以接受函数(如4n-1)。需要注意的是,n是从1开始计算,而不是0。
elem:nth-last-child 和nth-child伪类一样的思路,只是技术方式改为倒数计算,所以,我们可以选择后n个元素
:last-child 不言而喻,选中最后一个子元素。
elem:only-child 要是elem是父元素下唯一的子元素,则选中之。
elem:nth-of-type(n) 选择父元素下第n个elem元素,n接受的格式和nth-child一样。甚至在绝大多数情况下,nth-of-type的效果甚至和nth-child没有区别,那这两个伪类到底是什么区别呢。
注意: elem:nth-of-type(n)是“选择父元素下第n个elem元素”。
而elem:nth-child(n)是“这个伪类选中父元素下的第n个子元素,并且这个子元素的标签名为elem”。
elem:first-of-type和elem:last-of-type 不言而喻,选中父元素下第1个/最后一个elem元素。
elem:only-of-type 如果父元素下的子元素只有一个elem元素,选中该元素。elem:only-of-type和elem:only-child不同的是,后者父元素下只能有一个子元素;而前者这不一定,只要父元素下只有一个elem标签就行。
elem:empty 选中不包含子元素和内容的elem标签。
:after 在元素之前添加内容,也可以用来做清除浮动。
:before 在元素之后添加内容。
:enabled 选择可用的表单元素。
:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
15、如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?
(一)元素水平居中的方式
1)行级元素水平居中对齐(父元素设置 text-align:center)
2) 块级元素水平居中对齐(margin: 0 auto)
3)浮动元素水平居中
- 宽度不固定的浮动元素
- 宽度固定的浮动元素
4)让绝对定位的元素水平居中对齐
(二)元素垂直居中对齐
1)对行级元素垂直居中(heiht与line-height的值一样)
2)对块级元素垂直居中对齐
- 父元素高度固定的情况
- 父元素高度不固定的情况
总结:
(1)、非浮动元素居中:可以设置 margin:0 auto 令其居中, 定位 ,父级元素text-align:center等等
(2)、浮动元素居中:
方法一:设置当前div的宽度,然后设置margin-left:50%; position:relative; left:-250px;其中的left是宽度的一半。
方法二:父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对左移动-50%。
方法三:position定位等等。
16、display有哪些值?说明他们的作用。
block:转换成块状元素
inline:装换成行内元素
none:设置元素不可见
inline-block:像行内元素那样显示,但是其内容像块类型元素一样显示
list-item:像块类型元素一样显示,并添加样式列表标记
table:此元素会作为块级表格来显示
inherit:规定应该从父元素继承display属性的值
17、position的值relative和absolute定位原点是?
absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位,若父元素都没有定位则相对于html的根元素 (浏览器窗口)定位。
fixed(老IE不支持)生成绝对定位的元素,相对于浏览器窗口进行定位。
relative 生成相对定位的元素,相对于其原来所在的文档流中的位置进行定位。
static 默认值。没有定位,元 素出现在正常的流中 (忽略 top, bottom, left, right z-index 声明)
18、CSS3有哪些新特性?
1.CSS3的选择器
1)E:last-child 匹配父元素的最后一个子元素E。
2)E:nth-child(n)匹配父元素的第n个子元素E。
3)E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。2. @Font-face 特性
Font-face 可以用来加载字体样式,而且它还能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。
3. 圆角
border-radius: 15px;
4. 多列布局 (multi-column layout)
5.阴影(Shadow)
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5)
6.CSS3 的渐变效果
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E))
7.css弹性盒子模型
8. CSS3制作特效
1) Transition 对象变换时的过渡效果
- transition-property 对象参与过渡的属性
- transition-duration 过渡的持续时间
- transition-timing-function 过渡的类型
- transition-delay 延迟过渡的时间
缩写方式:
transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;
19、请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景?
1. 什么是flex
flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。块级元素只需要display属性为flex即可。行内元素也可以使用 Flex 布局。.box{ display: inline-flex; }。Webkit 内核的浏览器,必须加上-webkit前缀。
2.基本概念
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称”容器”。 它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称”项目”。容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。 项目默认沿主轴排列。
3.容器属性
flex-direction属性决定主轴的方向(即项目的排列方向)。
flex-wrap属性定义,如果一条轴线排不下,如何换行。默认情况下,项目都排在一条线(又称”轴线”)上。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
4.项目属性
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
20、用纯CSS创建一个三角形的原理是什么?
采用的是均分原理,把矩形分为4等份,这4等份其实都是边框
实现方式,
核心就是给块级元素设置宽高为0,设置边框的宽度,不需要显示的边框使用透明色;
- 使用场景
使用场景一般都是做一些小图标,比如之前做的京东二维码
上面这种做法就是用两个大小一样的三角形重叠在一起,下面的三角形背景色为绿色,
上面的三角形为白色,用z-index改变层级;