CSS 基础知识点

作者: 时光慢慢些 | 来源:发表于2017-05-16 21:59 被阅读86次

介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

CSS盒子模型：由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height);

标准的CSS盒子模型和低端IE CSS盒子模型不同：宽高不一样

标准的css盒子模型宽高就是内容区宽高；

IE低于版本8的浏览器 css盒子模型宽高内边距﹢边界﹢内容区；

CSS选择符有哪些？哪些属性可以继承？

CSS 选择符：

```
 id选择器(# myid)
```
```
 类选择器(.myclassname)
```
```
 标签选择器(div, h1, p)
```
```
 相邻选择器(h1 + p)
```
```
 子选择器(ul > li)
```
```
 后代选择器(li a)
```
```
 通配符选择器( * )
```
```
 属性选择器(a[rel = "external"])
```

 伪类选择器(a: hover, li:nth-child)

可继承的样式：

```
 font-size
```
```
 font-family
```
```
 color
```
```
 text-indent
```

不可继承的样式：

```
 border
```
```
 padding
```
```
 margin
```
```
 width
```
```
 height
```

CSS优先级算法如何计算？

 优先级就近原则，同权重情况下样式定义最近者为准;

 载入样式以最后载入的定位为准;

```
 3.!important >  id > class > tag  
```

 important 比 内联优先级高，但内联比 id 要高

CSS3新增伪类有那些？

 p:first-of-type  选择属于其父元素的首个 p 元素的每个 p 元素。

 p:last-of-type   选择属于其父元素的最后p 元素的每个p 元素。

 p:only-of-type  选择属于其父元素唯一的p 元素的每个p 元素。

 p:only-child     选择属于其父元素的唯一子元素的每个 p元素。

 p:nth-child(2)  选择属于其父元素的第二个子元素的每个 p 元素。

 :enabled :disabled 控制表单控件的禁用状态。

 :checked         单选框或复选框被选中。

CSS3有哪些新特性？

CSS3实现圆角（border-radius）

阴影（box-shadow）

对文字加特效（text-shadow、Word-wrap & Text-overflow ），

线性渐变（gradient）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) > skew(-9deg,0deg);// 旋转,缩放,定位,倾斜

增加了更多的CSS选择器多背景 rgba

在CSS3中唯一引入的伪元素是 ::selection.

媒体查询 media，

多栏布局 -webkit-column-count: 3;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;

border-image

如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

1、块状元素水平居中：

margin-left=auto；margin-right=auto；

2、浮动块状元素水平居中：

外包装块“float：left；position：relative；left：50%”；

内部块“float：left；position：relative；right：50%”

3、内容居中：

内联元素：text-align:center；vertical-align:middle

块状元素：

display:table-cell;vertical-align:middle;

若是单行内容：line-height=height

4、绝对定位元素垂直水平居中：

方法1：

.element {

width: 600px; height: 400px;

position: absolute; left: 50%; top: 50%;

margin-top: -200px; /* 高度的一半 */

margin-left: -300px; /* 宽度的一半 */

}

但这种方法优点是兼容性较好，缺点是需要提前知道元素的尺寸，否则margin负值的调整无法精确。此时，往往要借助JS获得。

方法2：使用[CSS3]

CSS3的兴起，使得有了更好的解决方法，就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的，无需提前知道元素尺寸，其都是水平垂直居中显示的。但此方法兼容性不好。

.element {

width: 600px; height: 400px;

position: absolute; left: 50%; top: 50%;

transform: translate(-50%, -50%); /* 第一个50%为width的一半，第二个50%为height的一半 */

}

方法3：上下左右均0位置定位+“margin: auto”（推荐做法！）

.element {

width: 600px; height: 400px;

position: absolute; left: 0; top: 0; right: 0; bottom: 0;

margin: auto; /* 水平和垂直都居中 */

}

若只设置“margin-left:auto”+“margin-right:auto”,则仅水平居中；

若只设置“margin-top:auto”+“margin-bottom:auto”,则仅垂直居中；
display有哪些值？说明他们的作用。

position的值relative和absolute定位原点是？

1，relative（[相对定位]）的定位原点是以自己本省原来所在位置做为原点的。
2，absolute（[绝对定位]）的定位原点是离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点的，（当然，如果自己的所有父元素都没有设置position，那么就以body为定位原点)
3，static默认值。没有定位，元素出现在正常的流中
4，inherit 规定从父元素继承 position 属性的值。
5，fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。

请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

用纯CSS创建一个三角形的原理是什么？

使用border的均分原理

设置不显示的边为透明

根据需要进行旋转

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？

png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}

这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——display:inline;将其转化为行内属性。(这个符号只有ie6会识别)

渐进识别的方式，从总体中逐渐排除局部。

首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

css
.bb{
background-color:#f1ee18;/所有识别/
.background-color:#00deff\9; /IE6、7、8识别/
+background-color:#a200ff;/IE6、7识别/
_background-color:#1e0bd1;/IE6识别/
}

IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性。
解决方法:统一通过getAttribute()获取自定义属性。
IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。
解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
超链接访问过后hover样式就不出现了被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，
解决方案

把字符大小设为0，就没有空格了。

将结束尖括号和开个li的开始尖括号写一起 li><li

使用注释符来衔接

为什么要初始化CSS样式。

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

最简单的初始化方法： * {padding: 0; margin: 0;} （强烈不建议）

淘宝的样式初始化代码：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

absolute的containing block计算方式跟正常流有什么不同？

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

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

对BFC规范(块级格式化上下文：block formatting context)的理解？

CSS权重优先级是如何计算的？

请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式

移动端的布局用过媒体查询吗？

使用CSS预处理器吗？喜欢那个？

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

浏览器是怎样解析CSS选择器的？

在网页中的应该使用奇数还是偶数的字体？为什么呢？

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

◆何时应当使用margin

需要在border外侧添加空白时。

空白处不需要背景（色）时。

上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。

◆何时应当时用padding

需要在border内测添加空白时。

空白处需要背景（色）时。

上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。

元素竖向的百分比设定是相对于容器的高度吗？

可见对于height属性取值百分比，是现对于容器高度的

全屏滚动的原理是什么？用到了CSS的那些属性？

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）

利用background-attachment属性实现。
background-attachment: fixed || scroll || local
默认情况下，此属性取值scroll，页面滚动时，内容和背景一起运动，如果取值fixed，背景相对浏览器固定。
通过js控制
在页面滚动过程中，我们获取页面的scrollTop的值，根据不同参数值去设置各自scene的top值，这样滚动页面的时候，不同的速度就出来了

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

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
你的直觉是:before和:after伪元素可能是插入的内容会被注入到目标元素的前或后注入。但是，正如上面提到的，不是这样的。
<p class="box">Other content.</p>

p.box {
  width: 300px;
  border: solid 1px white;
  padding: 20px;
}
 
p.box:before {
  content: "#";
  border: solid 1px white;
  padding: 2px;
  margin: 0 10px 0 0;
}

n458945478927.jpg

外面的盒子是这个段落。围绕有散列符号的边框表示伪元素的边界。所以，不是插入“before”到段落，而是伪元素被置于到此段落的“Other content”的前面。

如何修改chrome记住密码后自动填充表单的黄色背景？

chrome表单自动填充后，input文本框的背景会变成偏黄色的，这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式：

input:-webkit-autofill {
background-color: #FAFFBD;
background-image: none;
color: #000;
}

但是私有属性已经无法重写

情景一：input文本框是纯色背景的  
input:-webkit-autofill {  
-webkit-box-shadow: 0 0 0px 1000px white inset;  
border: 1px solid #CCC!important;  
}  
思路二： 关闭浏览器自带填充表单功能  
设置表单属性 autocomplete="off/on" 关闭自动填充表单，自己实现记住密码  
  
<!-- 对整个表单设置 -->  
<form autocomplete="off" method=".." action="..">  
<!-- 或对单一元素设置 -->  
<input type="text" name="textboxname" autocomplete="off">

你对line-height是如何理解的？

基线位置是由字体确定的，css的line-height指的是一行字的高度，包含了字间距，实际上就是下一行的基线到上一行的基线距离。
单行文字的垂直居中对齐
网上都是这么说的，把line-height值设置为height一样大小的值可以实现单行文字的垂直居中。这句话确实是正确的，但其实也是有问题的。问题在于height，看我的表述：“把line-height设置为您需要的box的大小可以实现单行文字的垂直居中”，差别在于我把height去掉了，<b>这个height是多余的</b>

  <div class="" style="line-height: 150px;border: 1px dashed #0062CC;">
    单行文字居中
  </div>

多行文字居中

    <p style="line-height: 150px;border: 1px dashed #0062CC;">
      <span style="display: inline-block;font-size:12px;line-height: 1.4em;">
       这里是高度为150像素的标签内的多行文字，文字大小为12像素。
       <br>这里是第二行，用来测试多行的显示效果。
      </span>
    </p>

设置元素浮动后，该元素的display值是多少？

自动变成display:block

怎么让Chrome支持小于12px的文字？

chrome可以设置该私有属性，但是新版的chrome已经静止设置了
-webkit-text-size-adjust: none;
现在需要使用tramslate:scale(0.8);缩放的方式来缩小字体

 p span{
   font-size: 12px;
   display: block;
   transform: scale(0.8);
 }

让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing:antialiased;）

-webkit-font-smoothing
它有三个属性值：
none ------ 对低像素的文本比较好
subpixel-antialiased------默认值
antialiased ------抗锯齿很好

font-style属性可以让它赋值为“oblique” oblique是什么意思？

可以理解成Italic是使用文字的斜体，Oblique是让没有斜体属性的文字倾斜！

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

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

display:inline-block什么时候会显示间隙？

移除空格

标签衔接
2.借助html注释符
使用margin负值
让闭合标签吃胶囊
使用font-size:0

overflow:scroll时不能平滑滚动的问题怎么处理？

-webkit-overflow-scrolling : touch;

有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。

Flex方法

.box {width:200px;height:300px;background:red;display:flex;flex-direction:column;}
.el1 {height:100px;background:green;}
.el2 {background:blue;flex:1}

png、jpg、gif这些图片格式解释一下，分别什么时候用。有没有了解过webp？

|格式 |压缩模式 |交错支持 |透明支持 |动画支持|
| ------------- |:-------------:| -----:|
|JPG |有损压缩 |支持 |不支持 |不支持|
|PNG |无损压缩 | 支持 | 支持 | 不支持 |
JPG的特性

1、支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小。
2、有损压缩会使图像数据质量下降，并且在编辑和重新保存JPG格式图像时，这种下降损失会累积。
3、JPG不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。

PNG的特性

1、能在保证最不失真的情况下尽可能压缩图像文件的大小。
2、PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。
3、对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。

什么是 WebP？

WebP（发音 weppy，项目主页），
是一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式 VP8。根据 Google 的测试，无损压缩后的 WebP 比 PNG 文件少了
45％的文件大小，即使这些 PNG 文件经过其他压缩工具压缩之后，WebP 还是可以减少 28％的文件大小。

什么是Cookie隔离？（或者说：请求资源的时候不要让它带cookie怎么做）

style标签写在body后与body前有什么区别？

页面加载自上而下当然是先加载样式
写在head标签中利于浏览器逐步渲染（resources downloading->CSSOM+DOM->RenderTree(composite)->Layout->paint）。具体渲染过程请参考http://delai.me/code/js-and-performance/
写在body标签后由于浏览器以逐行方式对html文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待
加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

CSS 基础知识点

介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

position的值relative和absolute定位原点是？

请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？

为什么要初始化CSS样式。

absolute的containing block计算方式跟正常流有什么不同？

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

元素竖向的百分比设定是相对于容器的高度吗？

全屏滚动的原理是什么？用到了CSS的那些属性？

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）

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

如何修改chrome记住密码后自动填充表单的黄色背景？

你对line-height是如何理解的？

设置元素浮动后，该元素的display值是多少？

怎么让Chrome支持小于12px的文字？

让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing:antialiased;）

font-style属性可以让它赋值为“oblique” oblique是什么意思？

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

display:inline-block什么时候会显示间隙？

overflow:scroll时不能平滑滚动的问题怎么处理？

有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。

png、jpg、gif这些图片格式解释一下，分别什么时候用。有没有了解过webp？

什么是Cookie隔离？（或者说：请求资源的时候不要让它带cookie怎么做）

style标签写在body后与body前有什么区别？

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程

CSS 基础知识点

介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

position的值relative和absolute定位原点是？

请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？

为什么要初始化CSS样式。

absolute的containing block计算方式跟正常流有什么不同？

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

元素竖向的百分比设定是相对于容器的高度吗？

全屏滚动的原理是什么？用到了CSS的那些属性？

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）

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

如何修改chrome记住密码后自动填充表单的黄色背景 ？

你对line-height是如何理解的？

设置元素浮动后，该元素的display值是多少？

怎么让Chrome支持小于12px的文字？

让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing:antialiased;）

font-style属性可以让它赋值为“oblique” oblique是什么意思？

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

display:inline-block什么时候会显示间隙？

overflow:scroll时不能平滑滚动的问题怎么处理？

有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。

png、jpg、gif这些图片格式解释一下，分别什么时候用。有没有了解过webp？

什么是Cookie隔离？（或者说：请求资源的时候不要让它带cookie怎么做）

style标签写在body后与body前有什么区别？

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？

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

如何修改chrome记住密码后自动填充表单的黄色背景？