css基础知识整理篇

QiShare 发布于2019-08-29 11:24 / 3369人阅读

摘要：折叠后的计算参与折叠的都是正值在都是正数的情况下，取其中较大的值为最终值。参与折叠的中有正值，有负值有正有负，先取出负中绝对值中最大的，然后，和正值中最大的相加。单冒号用于伪类，双冒号用于伪元素。

转自某个大神整理的面试题

盒子模型 标准盒子模型

内容（content）+ 填充（padding）+ 边界（margin）+ 边框（border）;

低版本IE盒子模型

content部分把border和padding算进去了

CSS选择符

1、id选择器  #myid
2、类选择器  .myClassName
3、标签选择器  div,h1,p
4、相邻选择器  h1+p
5、子选择器  ul>li
6、后代选择器  li a
7、通配符选择器  *
8、属性选择器  a[rel = "external"]
9、伪类选择器  a:hover,li:nth-child

可继承的样式：font-size  font-family  color  ul  li  dl  dd  dt;
不可继承的样式：border  padding  margin  wdith  height

CSS3新增伪类

p:first-of-type  选择属于父元素的首个P元素的每个p元素
p:last-of-type  选择属于父元素的最后一个p元素的每个p元素
p:only-of-type  选择属于父元素的唯一的p元素的每个p元素
p:only-cild  选择属于父元素的唯一子元素的每个p元素
p:nth-child(2)  选择属于其父元素的第二个子元素的每个p元素
:after  在元素之后添加内容
:before  在元素之前添加内容
:enabled  控制表单控件的禁用状态
:disabled  同上
:checked  单选框或复选框被选中

垂直居中

https://segmentfault.com/a/11...

display有哪些值

block  像块类型元素一样显示
inline  像行内元素一样显示
inline-block  像行内元素一样显示，但其内容像块类型元素一样显示
list-item  像块类型元素一样显示，并添加样式列表标记
table  次元素会作为块级表格来显示
inherit  规定应该从父元素继承

position:relative/absolute

absolute:生成绝对定位的元素，相对于值不为static的第一个父元素进行定位
fixed:生成绝对定位的元素，相对于浏览器窗口进行定位
relative:生成相对定位的元素，相对于其正常位置进行定位
static:默认值，没有定位，元素出现在正常的流中，忽略top,bottom,left,right,z-index声明 
inherit:规定从父元素继承

CSS3有哪些新特性

https://segmentfault.com/a/11...

用纯CSS创建一个三角形

#demo {
    width:0;
    height:0;
    border-width:20px;
    border-style:solid;
    border-color:transparent transparent red transparent;
}

满屏品字布局

html:



css:
#div {
    width:100%;
    height:50%;
}
#div2,#div3{
    width:50%;
    height:50%;
}
#div2{
    float:left;
}

li与li之间的空白间隔

行框的排列会受到中间空白（回车、空格）等影响，因为空格也属于字符，这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了

初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异

visibility:collapse;

CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。
但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，
它的表现却跟display: none一样，也就是说，它们占用的空间也会释放。   
在谷歌浏览器里，使用collapse值和使用hidden值没有什么区别;
在火狐浏览器、Opera和IE11里，使用collapse值的效果就相当于display:none;

position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？ position跟display和float相互叠加的结果：

若display:none,则position和float都不起作用；

display不是none,当position:absolute或fixed的时候，float的计算值都为none,且display的计算方法为
inline-table ——> table
inline,run-in,table-row-group,table-column,table-column-group,table-eader-group,table-footer-group,table-row,table-cell,table-caption,inline-block ——> block
其他 ——> 同设定值

display不是none,position不是absolute或fixed,
当float不是none，即有设定值，则display按照上述计算方法计算；

当float是none，即没有设定值：
若元素时根元素，display按照上述计算方法计算，
如果不是，则应用设定值

margin collapse

1.两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠。

折叠后 margin 的计算:
1). 参与折叠的 margin 都是正值:
在 margin 都是正数的情况下，取其中 margin 较大的值为最终 margin 值。   
2). 参与折叠的 margin 都是负值:
当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移。
3). 参与折叠的 margin 中有正值，有负值
有正有负，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
4). 相邻的 margin 要一起参与计算，不得分步计算

2. 浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠

3.创建了块级格式化上下文的元素，不和它的子元素发生 margin 折叠 

4.元素自身的 margin-bottom 和 margin-top 相邻时也会折叠

BFC

形成BFC的条件：
1、浮动元素，float 除 none 以外的值； 
2、绝对定位元素，position（absolute，fixed）； 
3、display 为以下其中之一的值 inline-block，table-cell，table-captions； 
4、overflow 除了 visible 以外的值（hidden，auto，scroll）

CSS优化、提高性能的方法有哪些？

1、避免使用多类选择符
2、移除空的css规则
3、正确使用display属性
4、不滥用浮动
5、不滥用web字体
6、不声明过多的font-size
7、不在选择符中使用id标示符
8、不重复定义h1~h6元素
9、值为0的时候不需要任何单位
10、标准化各种浏览器前缀
11、使用CSS渐变等高级特性，需要指定多有浏览器前缀
12、遵守盒模型规则

浏览器是怎样解析CSS选择器的？从右向左 在网页中的应该使用奇数还是偶数的字体？为什么呢？

偶数用得比较多，可能是因为便于计算吧

margin和padding分别适合什么场景使用？

何时当用margin:
需要再border外侧添加空白时；
空白处不需要背景时；
上下相连的两个盒子之间的空白，需要相互抵消时。

何时当用padding:
需要在border内侧添加空白时；
空白处需要背景时；
上下相连的两个盒子之间的空白，希望能与 两者之和时

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

云服务器 GPU云服务器基础篇之基础篇 java语言程序设计基础篇 css基础

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111631.html

Web前端基础知识整理-CSS篇

摘要：标签标签自定义盒模型一基本概念盒模型由里向外是由构成的。生成相对定位的元素，相对于其正常位置进行定位。相对与支付的高度，通常为字体高度的一半。视口被平均分为单位的相对于视口的高度。 CSS手册：http://t.mb5u.com/css3/选择器一、元素选择符通配选择符(*):选择所有元素类型选择符(E)：以文档对象类型作为选择符 id选择符(E#id):以唯一标识符id属性等于...

邱勇 2019-08-29 15:21 评论0 收藏0
【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0
css常用技巧整理-布局综述篇

摘要：效果图为了让效果更明显，特意设置了两边字体大小不同关键代码父容器子容器这里要提一下的是，只对于内联元素或者内联内容有效，比如说为块级元素标签设置行高，实际上是为标签中的内联文字设置了行高。允许指定负长度值和百分比值。前言先扯一段废话来引入好了。又很久没有写文章了（间接性踌躇满志，持续性混吃等死），几个月了登上来看到有人收藏和点赞，感到很惭愧，最近主要精力花费在react和redux...

endiat 2019-08-29 13:10 评论0 收藏0
实习笔记整理 js 篇

摘要：总结主要是前端的基础不准吐槽我把总结写在前面特别感谢超级好用的编辑器碰到的所有坑都放在前面。总结: 主要是前端 JS 的基础 (╯‵□′)╯︵┻━┻不准吐槽我把总结写在前面特别感谢超级好用的MarkDown编辑器(づ￣ 3￣)づStackEdit 1. 碰到的所有坑都放在前面 (。・・)ノ JS的函数定义时有3个参数, 使用时传入5个实参, 则前3个实参由定义的3个参数获得...

陈伟 2019-08-21 10:38 评论0 收藏0