css 面试题
时间:2020-03-26
本文章向大家介绍css 面试题,主要包括css 面试题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1、标准的css 盒子模型 与低版本IE的盒子模型有什么不同?
标准盒子模型: 宽度 = 内容的宽度(content) + border + padding +margin ;
低版本 IE 盒子模型: 宽度 = 内容宽度 (content + border + padding) + margin ;
2、box-sizing 属性有哪些?
用来控制元素的盒子模型的解析模式,默认为content-box。
context-box : w3c 的标准盒子模型,设置元素的height/width 属性指的是content部分的高/宽.
border-box : IE 传统盒子模型。设置元素的 height/width 属性指的是border + padding +content 部分的宽/高.
3、css 选择器有哪些,哪些属性可以继承?
css 选择器: id选择器(#id),类选择器(.classname),标签选择器(div,h1,p),相邻选择器(h1+p),子选择器(h1>p),后代选择器(h1 p),通配符选择器(*),属性选择器(a[rel="external"]),伪类选择器(a:hover,li:nth-child)
可继承属性: font-size,font-family,color
不可继承的样式:border , padding ,margin ,width ,height
优先级(就近原则): !import > [id>class>tag]
!import 比内联优先级高
4、css 优先级算法如何计算?
元素选择符:1
class 选择符:10
id选择符:100
元素标签:1000
注意: !import 声明的样式优先级最高,如果冲突再进行计算。
如果优先级相同,则选择最后出现的样式。
继承得到的样式的优先级最低。
5、css3 新增伪类有哪些?
p:first-of-type 选择属于父元素的第一个元素
p:last-of-type 选择父元素的最后一个元素
p:only-of-type 选择父元素的唯一的元素
p:only-clild 选择父元素的唯一子元素
p:nth-child(3) 选择父元素的第三个子元素
:enabled ,:disabled 表单控件的禁用状态
:checked 单选框或复选框被选中
6、如何居中一个浮动元素,如何让绝对定位的div居中?
居中div:
{
margin:0 auto;
height:100px;
width:100px;
border:1px solid red; //加个颜色方便看
}
浮动元素的上下左右居中:
{
float:left;
width:100px;
height:100px;
position:absolute;
left:50%;
top:50%;
margin:-50px 0 0 -50px;
border:1px solid red;
}
绝对定位的左右居中:
{
width:100px;
height:100px;
margin:0 auto;
position:absolute;
left:0;
right:0;
border:1px solid red;
}
flex 居中:
<div class="box">
<div class="box-child"></div>
</div>
.box{
display:flex;
justify-content:center;//水平居中
align-items:center;//垂直居中
width:100px;
height:100px;
border:1px solid red;
}
7、display 有哪些值?
inline(defalut)---内联
none ---隐藏
block ---块级显示
table ---表格显示
list-item ---项目列表
inline-block ---行内块级元素
8、position 的值?
static (default): 按照正常文档流进行排列
relative (相对定位):不脱离文档流,参考自身静态位置通过 top,left,right,bottom 定位。
absolute (绝对定位):参考距离最近的一个父级元素通过 top,left,right,bottom定位。
fixed (固定定位): 所固定的参照对象是可视窗口。
9、css3 新特性?
颜色值:rgba 和 透明度 opacity
背景图片:background-image,background-origin(content-box/padding-box/border-box),background-size,background-repeat
word-wrap(对长的不可分割单词换行):break-word
文字阴影:text-shadow:1px 1px 1px #000(水平阴影,垂直阴影,模糊距离,阴影颜色)
定义自己的字体:font-face
圆角: border-radius:边框半径
边框图片: border-image:url('图片路径') 10 10 round;
盒阴影: box-shadow:1px 1px 1px #000;
媒体查询:定义两套css,根据浏览器的尺寸变化采用不同的属性 @media only screen and (max-device-width:480px){//css样式}
线性渐变: linear-gradients(下,上,左,右,对角方向)
2D转换: transform:scale(0.5,0.9) | translate(0px,30px) | skew(-9deg,0deg) | rotate()
3D转换: perspective();
过渡: transition
动画
10、css3 弹性盒布局模型
布局模型的目的是:提供一种更加高效的方式来对容器中国的条目进行布局,对齐和分配空间。在传统的布局方式中,block布局是把块垂直方向从上到下依次排列。
而inline布局则是在水平方向来排列。而弹性盒布局并没有这样内在的方向限制。
11、css创建一个三角形原理
//首先,需要把元素的宽度,高度设为0.然后设置边框样式。
{
width:0;
height:0;
border-top:40px solid transparent;
border-left:40px solid transparent;
border-right:40px solid transparent;
border-bottom:40px solid #ff0000;
}
12、清除浮动
//浮动带来的问题
父元素的高度无法被撑开,影响与父元素同级的元素。
与浮动元素同级的非浮动元素会跟随其后。
若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构。
//清除浮动的方式:
父级 div 定义 height。
最后一个浮动元素后加空div标签,并添加样式clear:both。
包含浮动元素的父标签添加样式 overflow 为 hidden 或 auto 。
父级 div 定义 zoom 。
.clearfix:after{ //注意哦,clearfix 是父容器的名称
content:"\00020"; //这个是在父容器的结尾处放一个空白字符
display:block;
height:0; //让这个空白字符不显示出来
clear:both;
}
.clearfix{
zoom:1;
}
13、png,jpg,gif 图片格式?
png 是便携式网络图片(portable network graphics) 是一种无损数据压缩位图文件格式优点是: 压缩比高,色彩好。
jpg 是一种针对相片使用的一种失真压缩方法,是一种破坏性的压缩,在色调及颜色平滑变化做的不错。在www上,被用来存储和传输照片的格式。
gif 是一种位图文件格式,以8位色重现真色彩的图像。可以实现动画效果。
webp 格式是谷歌推出的图片格式,压缩率只有 jpg 的2/3; 大小比 png 小了45%。缺点是压缩的时间更久了,兼容性不好。
14、flex 用法
任何一个容器都可以指定为flex布局。
行内元素也可以使用flex布局
.box {
display:inline-flex;
}
注意,设为 flex布局后,子元素的float,clear 和vertical 属性将失效。
这6个属性设置在容器上:
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction 属性: 决定主轴的方向(项目的排列方向),有4个值。
row(默认值): 主轴水平方向,起点在左端。
row-reverse : 主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
flex-wrap 属性:默认情况下,项目都排在一条线上,换行否。
nowrap(默认值):不换行。
wrap: 换行,第一行在上方。
wrap-reverse:换行,第一行在下方。
flex-flow 属性:是flex-direction 和flex-wrap 的简写形式,默认值 row nowrap 。
justify-content 属性:定义了项目在主轴上的对齐方式。
flex-start(默认值): 左对齐。
flex-end:右对齐。
center:居中。
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。
align-items 属性:定义项目在交叉轴上如何对齐。
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline:项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将沾满整个容器的高度。
align-content 属性:定义了多跟轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
15、怎么让Chrome支持小于12px的文字?
p{
font-size:10px;
-webkit-transform:scale(0.8);//0.8是缩放比例
}
16、css伪类和伪元素的区别?
伪类: :focus,:hover,:active
伪元素: :before,:after
伪类本质上是为了弥补常规css选择器的不足,以便获取到更多的信息;
伪元素本质上是创建了一个有内容的虚拟容器;
17、强制换行的css是什么?
word-break:break-all;
18、解决img图片自带边距的问题
//某些时候,图片底部的空隙可能是2px或更多。
解决办法:
定义为 vertical-align:top/bottom;
1、转化成行级块元素
display:block;
2、浮动,浮动后的元素默认可以转化为块元素
float:left;
3、给img定义 vertical-align(消除底部边距)
img{
border:0;
vertical-align:bottom;
}
4、将其父容器的font-size:0;
5、给父标签设置与图片相同的高度;
参考网址:
https://www.itcodemonkey.com/article/2853.html
https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
原文地址:https://www.cnblogs.com/sunnyeve/p/12575219.html
- 【Go 语言社区】在 Go 语言中,如何正确的使用并发
- Data Guard高级玩法:通过闪回恢复failover备库 (r10笔记第7天)
- ajax跨域问题-web开发必会
- 在线重定义的补充测试(r10笔记第26天)
- 聊聊Data Guard中的DG Broker(r10笔记第24天)
- stuts2返回json数据简单实现
- Linux命令ssh-copy-id (r10笔记第21天)
- 【Go 语言社区】HTML5 canvas验证码识别
- 迁移式升级的测试(二)(r10笔记第35天)
- Golang实现图片缩放服务器
- mongodb数据结构与基本操作增删改查整理(二)
- 使用在线重定义重构亿级分区表(r10笔记第34天)
- 【Go 语言社区】一个WebSocket的简单Echo例子
- Java基础-day10-代码题-继承&抽象类
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 小白入门WEB前端编程,必看知识点!核心干货
- 新网站 Robots 和 SiteMap 优化
- Java代理IP池 ( Proxy Pool ) - 改进版
- Lvs+Keepalived 保障HA高可用
- 基于前端JS导出Excel文件(减轻服务端压力)
- 本机IDEA远程调试远端服务器代码
- 开源 - Java接口API授权认证与规范
- 亿及流量多级缓存 - 客户端缓存
- 亿及流量多级缓存 - 一致性哈希负载均衡与模板渲染
- 关于友情链接或者其他外部链接的建议
- 总结Js方法工具类库,总有你需要的方法
- [docker]安装Mysql
- [Centos7]linux运行django项目报错no module named _ssl
- [Centos7]在非标准端口上运行SSH
- [Centos7]安装及配置bind(DNS服务)