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冲刺的更多相关文章

  1. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. 【Alpha版本】冲刺阶段——Day 1

    我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...

  3. 【Alpha版本】冲刺阶段——Day 2

    我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...

  4. 【Alpha版本】冲刺阶段——Day 3

    我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...

  5. 【Alpha版本】冲刺阶段——Day 4

    我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...

  6. 【Alpha版本】冲刺阶段——Day 5

    我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...

  7. 【Alpha版本】冲刺阶段——Day 6

    我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...

  8. 【Alpha版本】冲刺阶段——Day 8

    我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...

  9. Beta版本——第二次冲刺博客

    我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...

随机推荐

  1. redis centos 6.5 redis版本3.2.8安装过程

    redis作为非关系数据库的典型应用,在庞大的数据通信处理有着自己强大的优势,今天也自己来开始学些redis. 以下每一个语句都是我执行的命令. 按照所查资料分析,需要tcl测试工具,这个在cento ...

  2. IOS内存约定-【ios】

    IOS中内存采用引用计数的方式,在释放内存编程时采用约定的方式,在这里不长篇大论具体内存的原理,只从实用角度出发记录下如何根据这些约定来释放内存. 具体约定为: 当你使用new.alloc.copy  ...

  3. MySQL InnoDB中的事务隔离级别和锁的关系

    前言: 我们都知道事务的几种性质,数据库为了维护这些性质,尤其是一致性和隔离性,一般使用加锁这种方式.同时数据库又是个高并发的应用,同一时间会有大量的并发访问,如果加锁过度,会极大的降低并发处理能力. ...

  4. Python_tuple部分功能介绍

    x.count():元素在元组内的个数 x.index():元素在元组内的位置

  5. sparkSQL将谓词推入kudu引擎

    kudu之所以执行非常快速,可以用来替代HDFS和Hbase等,一个主要原因是,我们可以将普通SQL中的谓词推入kudu引擎,这样kudu查询数据会变的非常快: 将谓词评估推入Kudu引擎可以提高性能 ...

  6. 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 ...

  7. AtCoder Regular Contest 101 (ARC101) D - Median of Medians 二分答案 树状数组

    原文链接https://www.cnblogs.com/zhouzhendong/p/ARC101D.html 题目传送门 - ARC101D 题意 给定一个序列 A . 定义一个序列 A 的中位数为 ...

  8. 做生活的有心人——xxx系统第一阶段总结

    2017秋,桃子已经步入大学三年级了,觉得格外幸运 因为现在,有了学习的动力. 如果你和我一样也是在大学中后部分才意识到,自己是个大人了,思维模式开始转变开始融入一些前所未有的认知,觉得自己渺小得如沧 ...

  9. Kafka概述及安装部署

    一.Kafka概述 1.Kafka是一个分布式流媒体平台,它有三个关键功能: (1)发布和订阅记录流,类似于消息队列或企业消息传递系统: (2)以容错的持久方式存储记录流: (3)记录发送时处理流. ...

  10. 【python】廖雪峰python教程学习--基础

     No1: 目前,Python有两个版本,一个是2.x版,一个是3.x版,这两个版本是不兼容的 No2: 用r''表示''内部的字符串默认不转义 No3: 以'''开头,敲回车可以换行 No4: 布尔 ...