CSS 架构

 

1、 介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?

标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin

低版本IE盒子模型:宽度=内容宽度(content+border+padding)+ margin

2、CSS选择器有哪些?哪些属性可以继承?

CSS选择符:id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器(ul > li)、后代选择器(li a)、通配符选择器(*)、属性选择器(a[rel=”external”])、伪类选择器(a:hover, li:nth-child)

可继承的属性:font-size, font-family, color

不可继承的样式:border, padding, margin, width, height

3、CSS3新增伪类有那些?

p:first-of-type 选择属于其父元素的首个元素

p:last-of-type 选择属于其父元素的最后元素

p:only-of-type 选择属于其父元素唯一的元素

p:only-child 选择属于其父元素的唯一子元素

p:nth-child(2) 选择属于其父元素的第二个子元素

:enabled :disabled 表单控件的禁用状态。

:checked 单选框或复选框被选中。

4、position的值?

static(默认):按照正常文档流进行排列;

relative(相对定位):不脱离文档流,参考自身静态位置通过 top, bottom, left, right 定位;

absolute(绝对定位):参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位;

fixed(固定定位):所固定的参照对像是可视窗口。

5、CSS3有哪些新特性?

RGBA和透明度

background-image background-origin(content-box/padding-box/border-box) background-size background-repeat

word-wrap(对长的不可分割单词换行)word-wrap:break-word

文字阴影:text-shadow: 5px 5px 5px #FF0000;(水平阴影,垂直阴影,模糊距离,阴影颜色)

font-face属性:定义自己的字体

圆角(边框半径):border-radius 属性用于创建圆角

边框图片:border-image: url(border.png) 30 30 round

盒阴影:box-shadow: 10px 10px 5px #888888

媒体查询:定义两套css,当浏览器的尺寸变化时会采用不同的属性

6、移动端的布局用过媒体查询吗?

通过媒体查询可以为不同大小和尺寸的媒体定义不同的css,适应相应的设备的显示。

<head>里边<link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:480px)”>

CSS : @media only screen and (max-device-width:480px) {/css样式/}

7、less 函数

.Less 的变量声明和使用

8、sass函数

Sass 的变量必须是$开头,后面紧跟变量名,而变量值和变量名之间就需要使用冒号(:)分隔开(就像CSS属性设置一样),如果值后面加上!default则表示默认值。

 

默认变量:Sass 的默认变量仅需要在值后面加上!default 即可。 

9、混合(Mixins):class 中的 class

混合(Mixins)就是将一组属性的规则集混入到另一组规则集中, 用于定义可重复使用的样式,例如 flex 布局,日常开发也是高频使用。

Less 中的混合使用

 Sass 中的混合使用

多值变量:多值变量分为 list 类型和 map 类型,简单来说 list 类型有点像 js 中的数组,而 map 类型有点像 js 中的对象。

list

list 数据可通过空格,逗号或小括号分隔多个值,可用 nth(var,var,index)取值。

list 数据操作还有很多其他函数如:length($list), join(list1,list1,list2,[$separator]), append(list,list,value,[$separator]), 更多请参考Sass Functions

 

 全局变量:在变量值后面加上!global即为全局变量。

@ 规则(例如 @media 或 @supports)可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面,同一规则集中的其它元素的相对顺序保持不变。即冒泡(bubbling)。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值