CSS3 核心知识面试题

本文深入探讨CSS中的实用技巧,包括清除浮动、盒模型解析、优先级算法、纯CSS三角形创建、浮动元素显示属性变化及响应式设计的高度计算。同时,文章提供了关于字体大小选择的建议,帮助设计师在web布局中做出更优决策。
摘要由CSDN通过智能技术生成

 

一种常见利用伪类清除浮动的代码
.clearfix:after {
content:"."; //这里利用到了content属性
display:block;
height:0;
visibility:hidden;
clear:both; 
}
.clearfix {
*zoom:1;
}

 

box-sizing属性?

用来控制元素的盒子模型的解析模式,默认为content-box

context-box:W3C的标准盒子模型,设置元素的 height/width 属性指的是content部分的高/宽

border-box:IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

 

CSS优先级算法如何计算?

元素选择符: 1
class选择符: 10
id选择符:100
元素标签:1000
!important声明的样式优先级最高

 

用纯CSS创建一个三角形的原理是什么?

首先,需要把元素的宽度、高度设为0。然后设置边框样式。
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
borer-bottom: 40px solid #ff0000;

 

设置元素浮动后,该元素的display值是多少?

自动变成display:block

 

解释该div高度的意思:height: calc(50vh - 100px)
less预编译写法:height: calc(~‘50vh - 100px’) 或 height: ~‘calc(50vh - 100px)’

 

在网页中的应该使用奇数还是偶数的字体?为什么呢?

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体(中易宋体)从 Vista 开始只提供 12、14、16 px 这三个大小的点阵,而 13、15、17 px时用的是小一号的点。(即每个字占的空间大了 1 px,但点阵没变),于是略显稀疏。

 

转载于:https://www.cnblogs.com/ziChin/p/10469376.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值