JS面试指南代码测试记录 --- CSS篇

• 主要参考文章：http://interview.poetries.top/docs/base.html

li与li之间有看不见的空白间隔如何消除

• 原因：
  浏览器的默认行为是把inline元素间的空白字符（空格、换行、tab）渲染成一个空格，也就是我们上面的代码
• 换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。
• 解决方式
  1. 所有
  2. 写在同一行
  3. 设置
     的字符尺寸为0，.wrap ul{font-size:0px;}，
     然后再设置
     • 的字串尺寸为相应大小，.wrap li{font-size:0px;}。
       局限：在Safari浏览器依然出现间隔空白
     • 消除间隔.wrap ul{letter-spacing: -5px;}
       还要注意将
     • 内部的间隔恢复 .wrap ul li{letter-spacing: normal;}
• 参考博客连接：https://blog.csdn.net/sjinsa/article/details/70919546.

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

• 相邻的inline-block元素之间有换行或空格分隔的情况下会产生间距
• 非inline-block水平元素设置为inline-block也会有水平间距
• 可以借助 vertical-align:top;消除垂直间隙
• 可以在父级加 font-size：0;在子元素里设置需要的字体大小，消除垂直间隙
• 把li标签写到同一行可以消除垂直间隙，但代码可读性差

css初始化的原因

	不同浏览器对某些标签的默认值不一样，就有可能导致页面显示差异

隐藏页面元素的几种方法

1. visibility：hidden，隐藏了元素，但是占用的空间仍然存在。
2. position：absolute;设置一个很大的left负值，将元素定位再可视区域之外。
3. display:none;元素不可见，也不占用空间
4. transform:scale(0) ;通过将元素无限缩小而不可见，占用空间仍然存在。
6. height：0;高度为0，消除了边框
7. opacity: 0;CSS3属性，设置0可以使一个元素完全透明
8. filter:blur(0);CSS3属性，将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中

css 属性 content 的作用

专门应用在 before/after伪元素上，用于插入额外内容或样式
:after和:before的作用是在被选择元素的前面或者后面插入内容。

• 详细介绍的博客连接：https://www.jianshu.com/p/302851f85c87.

伪类选择器集合

• Pseudo-Classes Selectors(伪类选择器)

E:not(s)　　E:root　　E:target

E:first-child　　E:last-child　　E:only-child　　E:nth-child(n)　　E:nth-last-child(n)

这上面一行的选择器，都会考虑其他元素的的影响。

E:first-of-type　　E:last-of-type　　E:only-of-type　　E:nth-of-type(n)　　E:nth-of-last-type(n)

这上面的选择器，不会考虑其他元素的的影响。

E:empty　　E:checked　　E:enabled　　E:disabled

E:read-only　　E:read-write
　　博客连接：https://www.cnblogs.com/yanggeng/p/11188285.html.

实现等高布局的几种方法

• 方法一： 父级容器使用弹性盒子，并设置align-items: stretch;

display:flex;
align-items: stretch;

• 方法二： 使用table布局

/*父级容器*/
.content{
			float: left;
			display: table;
		}
		
/*子级容器*/
.div1 {
			width: 200px;
			background-color: pink;
			display: table-cell;
		}
.div2 {
			width: 200px;
			background-color: yellow;
			display: table-cell;
		} 
.div3 {
			width: 200px;
			background-color: blue;
			display: table-cell;
		}

• 方法三： 弹性盒子中，父级使用flex-wrap: wrap;,子元素使用flex-direction: column

.content{
			float: left;
			display: flex;
			flex-wrap: wrap;
		}
.div1 {
			width: 200px;
			background-color: pink;
			display: flex;
			flex-direction: column;
		}
.div2 {
			width: 200px;
			background-color: yellow;
			display: flex;
			flex-direction: column;
		} 
.div3 {
			width: 200px;
			background-color: blue;
			display: flex;
			flex-direction: column;
		}

参考连接：https://blog.csdn.net/weixin_43392489/article/details/115214568

浮动元素引起的问题及解决方法

• 问题：

1. 父级元素高度无法被撑开，可能会影响布局
2. 浮动元素之后的非浮动元素也会跟着一起浮动

• 解决方法

1. 最后一个浮动元素的下一个元素添加属性clear:both;

.next{
    clear: both;
}

2. 父元素添加:after伪元素，并带有clear:both属性

.parent:after{
    content: '';
    display: block;
    clear: both;
}

浏览器会【从右到左】解析CSS选择器

• 原因：【从右到左】匹配比【从左到右】性能更好，因为在第一步就筛选了大量不符合的最右节点，【从左到右】的匹配方式的性能都浪费在了失败的查找上。
• 参考连接：https://www.cnblogs.com/wangxi01/p/11590077.html

抽离样式模型

• 定义：抽离样式模块，是指把一些公用的东西使用公用类名或者元素标签进行一次统一的样式处理。项目的各个模块皆可使用。
• 基本思路：CSS可以拆分成2部分：公共CSS 和 业务CSS：
  • 网站的配色，字体，交互提取出为公共CSS。这部分CSS命名不应涉及具体的业务
  • 对于业务CSS，需要有统一的命名，使用公用的前缀。可以参考面向对象的CSS

元素竖向的百分比设定是相对于容器的宽度，而不是高度

响应式设计

• 网站能够兼容多个终端，而不是为每个终端做一个特定的版本
• 版本的IE，可采用JS获取屏幕宽度，然后通过resize方法来实现兼容

//采用JS获取屏幕宽度
function screenRespond(){
var screenWidth = $(window).width();
if(screenWidth <= 1800){
  $("body").attr("class", "w1800");
}
if(screenWidth <= 1400){
  $("body").attr("class", "w1400");
}
if(screenWidth > 1800){
  $("body").attr("class", "");
}
}
//通过resize方法来实现兼容
$(window).resize(function () {
  screenRespond();
});

视差滚动

• 定义：视差滚动是指多层背景以不同的速度移动，形成立体的运动效果，具有非常出色的视觉体验
• 不是很理解
• 简单的css实现:同构background-attachment: fixed;设置背景图像是否固定（fixed）或者随着页面的其余部分滚动（scroll）或者继承父级（inherit）。

a标签四个伪类的执行顺序

link > visited > hover > active

• 原理解释：

• 首先注意关键的两点：

  • 1.这4个伪类特指度相同。
  • 2.一个链接可能同时处于多种状态，即同时属于多个伪类。
  • 3.link和visited是常态效果，hover和active是瞬时效果。

• 未点击链接前，link伪类长期处于激活状态，鼠标悬停（或点击）时，链接同时处于link和hover(或active)状态，由于它们特指度相同，在同时激活的情况下，后出现的伪类样式会覆盖前面的伪类样式，故link状态必须写在hover(或active)之前。

• 再讨论hover和active的顺序，若把hover放在active后面，当点击链接一瞬，实际你在激活active状态的同时触发了hover伪类,hover在后面覆盖了active的颜色，所以无法看到active的颜色。故hover在active之前

• 其次，若把visited放在hover后面，那已访问过的链接一直触发着visited伪类，会覆盖hover样式。

• 最后，其实link、visited两个伪类之间顺序无所谓。（因为它俩不可能同时触发，即又未访问同时又已访问。）

• 原文链接：https://blog.csdn.net/u013778905/article/details/52939579

伪元素和伪类的区别和作用

• 伪元素 ： 在内容元素的前后插入额外的元素或样式，它们只在外部显示可见，但不会在文档的源代码中找到它们。

p::before {content:"第一章：";}

• 伪类： 将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。

a:hover {color: #FF00FF}

::before是 CSS3 中写伪元素的新语法； :after是 CSS1 中存在的、兼容IE的老语法

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

• 产生原因：由于Chrome默认会给自动填充的input表单加上 input:-webkit-autofill私有属性造成的
• 解决方案1：在form标签上直接关闭了表单的自动填充：autocomplete="off"
• 解决方案2：input:-webkit-autofill { background-color: transparent; }

input [type=search] 搜索框右侧小图标如何美化？

line-height

• 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离
• 容器或者标签没有设置高度时，撑开的高度不是文字内容的高度，而是line-height
• line-height 和 height 设置一样的高度的时候可以实现单行文字的垂直居中

line-height的三个赋值方式（带单位，纯数字，百分比）

1.父元素和子元素不同时都有line-height和font-size

• 继承方式
  1. 如果 子元素 的 line-height以px为单位时，则该值直接覆盖父元素的值
  2. 如果 子元素 的 line-height是其他单位或者没有设置时，
     则子元素的line-height= (父)line-height* （子）font-size
     或者line-height= (子)line-height* （父）font-size
• 参考文章：https://www.jianshu.com/p/06b507eaa124

2.父元素和子元素同时都有line-height和font-size

• 继承方式

  1. 父div 设置line-height：1.5em时，父div 的font-size=14px，此时经过计算 父div 的line-height=14px*1.5=21px，然后 由于继承，子div 的line-height=21px，而 子div 的font-size=26px，自然会超出自己的行高范围 。

  2. 父div 设置line-height：1.5时，子div 会直接继承line-height：1.5，然后计算line-height=26px*1.5=39px，不会超出自己的行高范围。

  3. 百分号 和 em 相同，都是先计算然后把 固定的行高 继承给子元素

• 参考链接：https://www.jianshu.com/p/76071076a8f6

元素浮动后的display值为block

font-style 属性:italic和 oblique的区别

• italic和 oblique都是向右倾斜的文字, 但区别在于italic是指斜体字，而 oblique是倾斜的文字，对于没有斜体的字体应该使用 oblique属性值来实现倾斜的文字效果。

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

• 方案1：

.sub { height: calc(100%-100px); }

• 方案2：

.container { position:relative; }
.sub { position: absolute; top: 100px; bottom: 0; }

• 方案3：

.container { display:flex; flex-direction:column; }
.sub { flex:1; }