css冲刺
CSS知识点及面试题
1、一般与文本相关的属性都可以继承
text-/font-/line-
2、background属性
1)background-repeat:repeat/repeat-x/repeat-y/no-repeat
2)background-position:默认0 0 只指定一个值,其他为center
3)background-image:url() 图片地址
4)background-attachment
scroll:默认值,背景图相对于元素固定,背景随页面滚动而移动,即背景和内容绑定。
fixed:背景图相对于视口固定,所以随页面滚动背景不动,相当于背景被设置在了body上。
local:背景图相对于元素内容固定,
对于可以滚动的元素(设置为overflow:scroll的元素)。当background-attachment设置为scroll时,背景图不会随元素内容的滚动而滚动
3、盒模型
1)盒子的大小由padding、content、border组成
区分ie盒模型和W3C标准盒模型
W3C标准盒模型的width仅指内容部分的宽度,而ie盒模型的width包括了content、border、margin
2)padding会撑大盒子,记得修改content大小
3)块级元素水平居中:margin:0 auto
仅在设置了元素宽度,且必须是块级元素才生效
文字水平居中:text-align:center
盒子水平居中:margin:0 auto
加了定位的盒子margin:0 auto 将失效
改用以下方式:
position:absolute;
left:50%;
margin-left:-(盒子宽度的一半)px;‘
position:absolute;
top:50%;
margin-top:-(盒子高度的一半)px;
水平垂直居中
.out{
display:table-cell;
vertical-align:middle;
text-align:center;
}
.in{
display:inline-block;
}
4)未设置宽高时,如何水平垂直居中?
为父元素设置:display: flex; justify-content: center;align-items: center;
5)
4、外边距合并
1)相邻元素:
存在margin-top和另一个存在margin-bottom的元素的相接部分按较大者合并,而不直接展示和
2)父子元素
父元素没有内边距及边框,合并后的边距同样是较大的那一个
可以为父元素设置overflow:hidden 或给父元素加一个边框 来避免
3)不设置盒子宽度(比如说子盒子),对其设置padding将不会撑开盒子。子盒子块不设置宽,将默认与父盒子块同宽
5、box-shadow(css3)
见手册
6、浮动left/right/none
1)默认隐式转换为行内块,为了能让元素在一排上显示
2)脱标,找最近的父元素对齐,不会超出padding的范围
3)一个父盒子内若要所有子盒子都一行对齐显示,必须都设置float属性
4)清除浮动
为父元素设置:
.clearfix {
overflow: auto;
zoom: 1; //zoom: 1; 处理兼容性问题
}
或添加一个冗余元素
.clear{clear:both; height: 0; line-height: 0; font-size: 0}
</style>
<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="clear"></div>
</div>
或使用伪元素:.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
不用添加冗余元素
常见伪类——:hover,:link,:active,:visted,:not(),:focus。
常见伪元素——::first-letter,::first-line,::before,::after,::selection。
附:隐藏元素的区别:
我们知道display:none/opacity:0/visbility:hidden 都能使元素隐藏,它们的区别是
1)display:none 会从文档标准流中移除该元素,而后两者不会
2)visibility:hidden 不会影响子元素,子元素若显式设置visiable可以正常显示
3)visibility 和 display 属性是不会影响其他元素触发事件的,而 opacity 属性
如果遮挡住其他元素,其他的元素就不会触发事件了
7、定位
1)top/bottom/left/right都是相对于父元素来说的
2)position:static/relative/absolute/fixed
依次:static 自动定位
relative 根据原来元素在标准流中应该在的位置定位,以左上角为坐标远点,仍然在原位置保留文档流,行内块元素
absolute 相对于是一个已经定位的最近的父或祖先元素定位,脱离文档流,若父元素都没有定位,则按照当前document进行定位,行内块元素
fixed 相对于浏览器窗口固定定位,完全脱标,不随滚动条滚动
多个元素设置定位时,页面可能会发生重叠,此时要设置z-index
8、隐藏
1)display:none 不再保留原有位置
2)visibility:hidden 仍保留原有位置
9、overflow
1)hidden:超出盒模型之外的内容均被隐藏
2)scroll:超出盒模型时出现滚动条
3)auto:清除浮动
10、vertical-align
不影响块级元素的对齐,只针对行内元素或行内块元素。通常用来控制图片/表单与文字对齐
11、white-space
noraml:默认处理方式
nowrap:强制全部一行显示
12、text-overflow
clip/elipsis
默认/显示省略号
必须结合以下内容使用:
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
css冲刺的更多相关文章
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 【Alpha版本】冲刺阶段——Day 1
我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...
- 【Alpha版本】冲刺阶段——Day 2
我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...
- 【Alpha版本】冲刺阶段——Day 3
我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...
- 【Alpha版本】冲刺阶段——Day 4
我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...
- 【Alpha版本】冲刺阶段——Day 5
我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...
- 【Alpha版本】冲刺阶段——Day 6
我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...
- 【Alpha版本】冲刺阶段——Day 8
我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...
- Beta版本——第二次冲刺博客
我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...
随机推荐
- redis centos 6.5 redis版本3.2.8安装过程
redis作为非关系数据库的典型应用,在庞大的数据通信处理有着自己强大的优势,今天也自己来开始学些redis. 以下每一个语句都是我执行的命令. 按照所查资料分析,需要tcl测试工具,这个在cento ...
- IOS内存约定-【ios】
IOS中内存采用引用计数的方式,在释放内存编程时采用约定的方式,在这里不长篇大论具体内存的原理,只从实用角度出发记录下如何根据这些约定来释放内存. 具体约定为: 当你使用new.alloc.copy ...
- MySQL InnoDB中的事务隔离级别和锁的关系
前言: 我们都知道事务的几种性质,数据库为了维护这些性质,尤其是一致性和隔离性,一般使用加锁这种方式.同时数据库又是个高并发的应用,同一时间会有大量的并发访问,如果加锁过度,会极大的降低并发处理能力. ...
- Python_tuple部分功能介绍
x.count():元素在元组内的个数 x.index():元素在元组内的位置
- sparkSQL将谓词推入kudu引擎
kudu之所以执行非常快速,可以用来替代HDFS和Hbase等,一个主要原因是,我们可以将普通SQL中的谓词推入kudu引擎,这样kudu查询数据会变的非常快: 将谓词评估推入Kudu引擎可以提高性能 ...
- net core体系-web应用程序-4asp.net core2.0 项目实战(1)-1目录
Asp.Net Core 2.0 项目实战(1) NCMVC开源下载了 Asp.Net Core 2.0 项目实战(2)NCMVC一个基于Net Core2.0搭建的角色权限管理开发框架 Asp.Ne ...
- AtCoder Regular Contest 101 (ARC101) D - Median of Medians 二分答案 树状数组
原文链接https://www.cnblogs.com/zhouzhendong/p/ARC101D.html 题目传送门 - ARC101D 题意 给定一个序列 A . 定义一个序列 A 的中位数为 ...
- 做生活的有心人——xxx系统第一阶段总结
2017秋,桃子已经步入大学三年级了,觉得格外幸运 因为现在,有了学习的动力. 如果你和我一样也是在大学中后部分才意识到,自己是个大人了,思维模式开始转变开始融入一些前所未有的认知,觉得自己渺小得如沧 ...
- Kafka概述及安装部署
一.Kafka概述 1.Kafka是一个分布式流媒体平台,它有三个关键功能: (1)发布和订阅记录流,类似于消息队列或企业消息传递系统: (2)以容错的持久方式存储记录流: (3)记录发送时处理流. ...
- 【python】廖雪峰python教程学习--基础
No1: 目前,Python有两个版本,一个是2.x版,一个是3.x版,这两个版本是不兼容的 No2: 用r''表示''内部的字符串默认不转义 No3: 以'''开头,敲回车可以换行 No4: 布尔 ...