面试题准备--CSS
1、css盒模型
基本概念:
- 标准模型:box-sizing:content-box;
- IE模型:box-sizing:boder-box;
区别:盒子的宽是否包含padding和border,IE包含,标准不包含
2、BFC见博客http://www.cnblogs.com/Mrcatyang/p/8321977.html
3、浮动的方法:
- 为父元素添加overflow:hidden;
定义公共类,添加伪元素,浮动元素加上clearfloat就可以了,.clearfloat:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
4、垂直居中的方法
- parentElement{ position:relative; } ;childElement{ position: absolute; top: 50%; transform: translateY(-50%); }
- flex
parentElement{display:flex;/*Flex布局*/display: -webkit-flex; /* Safari */align-items:center;/*指定垂直居中*/ }
- 父元素高度确定的单行文本
设置 height = line-height
父元素高度确定的多行文本
a:插入 table (插入方法和水平居中一样),然后设置 vertical-align:middle
b:先设置 display:table-cell 再设置 vertical-align:middle
5、CSS3新特性
选择器 E:last-child 匹配父元素的最后一个子元素E。 2)E:nth-child(n)匹配父元素的第n个子元素E。 3)E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。
- Font-face 可以用来加载字体样式,而且它还能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。
3.圆角border-radius: 15px;阴影效果(shadow)渐变效果
4.网格布局,兼容性不好,还不够成熟。还不能用在实际项目中。
5.弹性布局flex
6.CSS3制作特效translate(水平移动)、rotate(旋转)、scale(伸缩)、skew(倾斜)、动画
6、常见布局方法
- float
- position
- flex
- table
- 网格
- 双飞燕
- 圣杯
转载于:https://www.cnblogs.com/Mrcatyang/p/8395462.html
面试题准备--CSS相关推荐
- html及js试题,HTML+css+js试题..docx
HTMLcssjs试题. HTML+CSS+JS面试题一.单项选择(165题)1.HTML是什么意思?A)高级文本语言B)超文本标记语言C)扩展标记语言D)图形化标记语言2.浏览器针对于HTML文档起 ...
- 前端基础面试题(HTML + CSS)
前端基础面试题(HTML + CSS) 1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度.行高及外边距和内边距都不可改变,文字图片的宽度不可改变 ...
- 前端面试题之CSS篇
前端面试题之CSS篇 一.CSS基础 1. CSS选择器及其优先级 2. CSS中可继承与不可继承属性有哪些 3. display的属性值及其作用 4. display的block.inline和in ...
- css 动态rem_【面试题】CSS知识点整理(附答案)
目录 伪类和伪元素 实现固定宽高比(width: height = 4: 3)的div,怎么设置 CSS选择器 CSS解析规则 flex: 1 完整写法 display: none和 visibili ...
- 与歌谣通关前端面试题【CSS篇汇总目录】
我是歌谣 放弃很容易 但坚持一定很酷 欢迎 关注公众号小歌谣一起讨论前后端知识 CSS汇总 [CSS] [css] 圣杯布局和双飞翼布局的理解和区别,并用代码实现 [css] CSS3有哪些新增的特性 ...
- 前端开发实习面试题(CSS篇)
目录 1.CSS3有哪些新特性? 2.介绍一下盒子模型(由什么组成)? 3.定位有哪些值,分别是相对谁定位? 4.如果我想给table表格的第一列内容添加样式,如何做? 5.浮动的作用,如何清除浮动? ...
- 史上最全面试题(CSS)
1.CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些? 选择器:1.id选择器( # myid) 2.类选择器(.myclassname) 3.标签选择器(div, ...
- 前端面试题----html css
一阶段面试题集锦 1. rem em vw vw 百分比区别 相同点: rem,em,vw,vh,vw属于前端开发除了px单位之外的另外几种单位取值:但是具体含义存 在区别 不同点: px:是像素单位 ...
- 经典面试题:CSS定位知识及小盒子套大盒子的方法
一.页面布局 1.1页面布局分类 css网页布局的本质:就是在网页中排列盒子(标签) css网页布局分为3种机制:普通流.浮动.定位 普通流:就是从上到下,从左到右的排布 浮动:本质是让块元素横向排列 ...
- 前端面试题汇总CSS篇
转载自:https://www.cnblogs.com/zhangshuda/p/8465043.html 前端面试题 ----css篇 1.css盒模型有哪些及区别content-box borde ...
最新文章
- NSPredicate的使用
- 如何在SQL中使用JOIN执行UPDATE语句?
- 均值滤波java_均值滤波,中值滤波,最大最小值滤波
- html教程是语音版,【HTML教程】HTML 语言简介
- c++ socket线程池_从连接器组件看Tomcat的线程模型——NIO模式
- hibernate4 could not initialize proxy - no Session
- (day 32 - 位运算 )剑指 Offer 56 - I. 数组中数字出现的次数
- 游戏程序员的2013年终总结
- PHP+python+nodejs+ springboot+vue 社区互助平台
- 《他是谁》爆火,优酷的成功并非偶然
- 知云文献翻译打不开_英文PDF文献翻译神器-知云文献翻译
- 天正坐标标注显示不全_CAD命令栏坐标显示不全
- 4. DBSCAN方法及其应用
- 解决Mysql 主从或主主报1062错误
- 【阿里面试】链表排序总结
- Android判断网络速度
- 眉骨高者为大贵之相_眉骨高者为大贵之相 能成大器
- 在HashSet集合中添加三个Person对象,把姓名相同的人当作同一个人,禁止重复添加。 提示:Person类中定义name和age属性,重写hashCode()方法和equals()方法,针对Pe
- HTML5 Canvas圆盘抽奖应用DEMO演示
- VCS User Guide学习笔记【使用精简版】
热门文章
- eclipse+tomcat 启动已有工程时卡在starting状态
- Unity Shader——Writing Surface Shaders(2)——Custom Lighting models in Surface Shaders
- VS2005+WINDDK+Driver Studio 3.2编译出第一个测试驱动程序
- B-Trees Concepts B-树介绍(都快忘了:))
- 漫谈WinCE输入法的编写(四)
- 重写equals所要遵守的约定
- 朱晔的互联网架构实践心得S1E3:相辅相成的存储五件套
- IE11 统治浏览器市场 Chrome 终超 Firefox
- 这里先发布一个,自己写得unityUI的适配的方案(插播)
- 1、Android测试入门