大前端——知识点回顾（CSS）

作者: 林立镇 | 来源:发表于2018-06-21 16:08 被阅读187次

CSS

一、CSS3新特性锚伪类target

<li><a href="#bg5">我在为我的激光充能!</a></li>

<img src="bg5.jpg" alt="" class="bg rotate"         id="bg5" />

.rotate:target{
    z-index: 100;
    animation-name: rotate;
    animation-duration: 2s;
    animation-iteration-count: 1;     
    animation-fill-mode:forwards; 
}

在点击完链接a标签后，锚链接目标元素就多了个伪类 :target:，类似伪类 :hover

参考例子：
【纯CSS3-animation】实现背景动态切换

二、CSS实现隐藏页面的方式

Opacity:0;
display:none;
visibility:hidden;
position: absolute;
   top: -1000%;
   left: -1000%;

三、如何实现水平居中和垂直居中。

水平居中

1、margin和固定width实现水平居中

width:100px;
margin: 0 auto;

2、inline-block实现水平居中方法
仅inline-block属性是无法让元素水平居中，他的关键之处要在元素的父容器中设置text-align的属性为“center”

ul {
text-align:center;
}
ul > li {
display:inline-block;
}

3、浮动实现水平居中的方法

pagination {
  float: left;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.pagination ul {
  clear: left;
  float: left;
  position: relative;
  left: 50%;/*整个分页向右边移动宽度的50%*/
  text-align: center;
}**
.pagination li {
    line-height: 25px;
    margin: 0 5px;
    display: block;
    float: left;
    position: relative;
    right: 50%;/*将每个分页项向左边移动宽度的50%*/**
}

4、绝对定位和浮动实现水平居中

.pagination {
    position: relative;
}
.pagination ul {
    position: absolute;
    left: 50%;
}**
.pagination li {
      line-height: 25px;
      margin: 0 5px;
     float: left;
      position: relative;/*注意，这里不能是absolute，大家懂的*/
      right: 50%;**
}

5、绝对定位和transform实现水平居中

position: absolute;
left: 50%;
transform:translateX(-50%);

6、CSS3的flex实现水平居中方法

ul {
display:flex;
justify-content:center;
}

垂直居中

1、通过verticle-align:middle实现CSS垂直居中。
通过vertical-align:middle实现CSS垂直居中是最常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display：inline-block。

2、通过display:flex实现CSS垂直居中

3、通过伪元素:before实现CSS垂直居中。
具体方式是为父元素添加伪元素:before，使得子元素实现垂直居中

.parent:before {
    content:"";
    display:inline-block;
    vertical-align: middle;
    height: 100%;
}

4、通过display:table-cell实现CSS垂直居中。
给父元素display:table，子元素display：table-cell的方式实现CSS垂直居中。

5、通过隐藏节点实现CSS垂直居中。
创建一个隐藏节点#hide，使得隐藏节点的height值为剩余高度的一半即可。
这种方法也适用于CSS水平居中，原理一样。

6、绝对定位和transform实现垂直居中

四、请解释*{box-sizing:border-box;}的作用，并说明使用它的好处
将宽高也包括边框宽度，当需要按比例相应式布局时，也可以不用考虑边框的影响。

五、浮动元素引起的问题和解决办法？绝对定位和相对定位，元素浮动后的display值

浮动元素引起的问题
1.由于浮动元素已脱离文档流，所以父元素无法被撑开，影响与父级元素同级的元素。
2.与浮动元素同级的非浮动元素（内联元素）会跟随其后，也是由于浮动元素脱离文档流，不占据文档流中额位置。
3.如果该浮动元素不是同级第一个浮动的元素，则它之前的元素也应该浮动，否则容易影响页面的结构显示。

解决方法

.clearfix:after{
    content: ".";       
    display: block;  
    height: 0;  
    clear: both;  
    visibility: hidden;
}

六、link和@import引入css的区别

1、link
<link rel="stylesheet" type="text/css" href="sheet.css">
link的作用是将外部文件引入到当前文件中，可以引入除去css文件之外别的类型的文件。但是只能位于head中
rel = “stylesheet”表示的是当前文档与引用的文档之间的关系。
type=“text/css”表示引用的文档是文本类型的css文件。
href=“URL”指明引用文件的URL

2、@import

@import url(sheet.css);

@import是css的一个属性，代表着引入css文件到当下css文件中，且只能引入css文件。@import只能位于文件的顶部，这降低了灵活性

七、解释一下css3的flexbox，以及适用场景
Flex布局的完整基本语法

八、inline和inline-block的区别
1、display:block
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。

2、display:inline
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

3、display:inline-block
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性

九、哪些是块级元素那些是行级元素，各有什么特点
1、行级元素
a、em、span、br、i、input、label、img

十、grid布局

父容器(Grid Container)的属性

display

将元素定义为 grid contaienr，并为其内容建立新的网格格式化上下文(grid formatting context)。
值:

grid - 生成一个块级(block-level)网格
inline-grid - 生成一个行级(inline-level)网格
subgrid - 如果你的 grid container 本身就是一个 grid item（即,嵌套网格），你可以使用这个属性来表示你想从它的父节点获取它的行/列的大小，而不是指定它自己的大小。

grid-template-columns / grid-template-rows

使用以空格分隔的多个值来定义网格的列和行。这些值表示轨道大小(track size)，它们之间的空格代表表格线(grid line)。

.container {
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

例子:
(如果未显示的给网格线命名)，轨道值之间仅仅有空格时，网格线会被自动分配数字名称：

  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;

image.png

可以给网格线指定确切的命名。注意中括号里的网格线命名语法：

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

image.png

grid-template-areas

通过引用 grid-area属性指定的网格区域的名称来定义网格模板。重复网格区域的名称导致内容扩展到这些单元格。点号表示一个空单元格。语法本身提供了网格结构的可视化。

值：

<grid-area-name> - 使用 grid-area 属性设置的网格区域的名称
. - 点号代表一个空网格单元
none - 没有定义网格区域

举例：

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

这将创建一个四列宽三行高的网格。整个第一行将由 header 区域组成。中间一行将由两个 main 区域、一个空单元格和一个 sidebar 区域组成。最后一行是footer区域组成。

image.png

grid-template
在单个声明中定义 grid-template-rows、grid-template-columns、grid-template-areas 的简写。

值：

none - 将三个属性都设置为其初始值
subgrid - 把 grid-template-rows 和 grid-template-columns 设置为 subgrid, 并且 grid-template-areas 设置为初始值
grid-template-rows / <grid-template-columns - 把 grid-template-columns 和 grid-template-rows 设置为指定值, 与此同时, 设置 grid-template-areas 为 none
.container {
grid-template: none | subgrid | <grid-template-rows> / <grid-template-columns>;
}
它也可以使用一个更复杂但相当方便的语法来指定这三个值。一个例子：

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

以上等价于：

.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "header header header" 
    "footer footer footer";
}

由于 grid-template 不会重置隐式网格属性（grid-auto-columns，grid-auto-rows和grid-auto-flow），而这可能是大多数情况下你想要做的。因此建议使用grid属性来代替grid-template。

具体参考：
# CSS Grid 系列(上)-Grid布局完整指南

十一、table布局的作用
主要作用：

用于布局（过时）
用于显示批量的数据

缺点：

加载页面的时候，需要全部的数据都请求到，才显示页面，否则就是一片的空白

十二、实现两栏布局有哪些方法？

双inline-block方案
双float方案
使用absolute+margin-left方法
使用float+BFC方法

.wrapper-float-bfc {
    overflow: auto;
}

.wrapper-float-bfc .left {
    float: left;
    margin-right: 20px;
}

.wrapper-float-bfc .right {
    margin-left: 0;
    overflow: auto;
}

flex方案
grid方案

十三、BFC是什么？
1、块格式化上下文（BFC）有下面几个特点：

BFC是就像一道屏障，隔离出了BFC内部和外部，内部和外部区域的渲染相互之间不影响。BFC有自己的一套内部子元素渲染的规则，不影响外部渲染，也不受外部渲染影响。
BFC的区域不会和外部浮动盒子的外边距区域发生叠加。也就是说，外部任何浮动元素区域和BFC区域是泾渭分明的，不可能重叠。
BFC在计算高度的时候，内部浮动元素的高度也要计算在内。也就是说，即使BFC区域内只有一个浮动元素，BFC的高度也不会发生塌缩，高度是大于等于浮动元素的高度的。
HTML结构中，当构建BFC区域的元素紧接着一个浮动盒子时，即，是该浮动盒子的兄弟节点，BFC区域会首先尝试在浮动盒子的旁边渲染，但若宽度不够，就在浮动元素的下方渲染

2、如何创建BFC

float属性不为none
overflow不为visible(可以是hidden、scroll、auto)
position为absolute或fixed
display为inline-block、table-cell、table-caption

3、BFC的作用

3.1、清除内部浮动

我们在布局时经常会遇到这个问题：对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把把父元素变成一个BFC就行了。常用的办法是给父元素设置overflow:hidden。

3.2、垂直margin合并
在CSS当中，相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
折叠的结果：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
这个同样可以利用BFC解决

十四、css 和 dpi 的关系？

DPI就是DOT PER INCH
图像的输出分辨率
设备输出图像时每英寸可产生的点数dpi，以dpi为单位
普通屏幕通常包含96dpi
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

十五、你知道attribute和property的区别么
1、差异点是哪些

DOM有其默认的基本属性，而这些属性就是所谓的“property”，无论如何，它们都会在初始化的时候再DOM对象上创建。
如果在TAG对这些属性进行赋值，那么这些值就会作为初始值赋给DOM的同名property
attributes是属于property的一个子集
打印attribute属性不会直接得到对象的值，而是获取一个包含属性名和值的字符串
HTML标签中定义的属性和值会保存该DOM对象的attributes属性里面；
这些attribute属性的JavaScript中的类型是Attr，而不仅仅是保存属性名和值这么简单；

2、是否双向绑定

property能够从attribute中得到同步；
attribute不会同步property上的值；
attribute和property之间的数据绑定是单向的，attribute->property；
更改property和attribute上的任意值，都会将更新反映到HTML页面中；

十六、流式布局如何实现，响应式布局如何实现
1、流式布局的特点以及应用场景

特点：当上面一行的空间不够容纳新的TextView时候，
应用场景：图片墙

2、响应式布局
兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape)
2.1、Meta标签定义
使用 viewport meta 标签在手机浏览器上控制布局

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />

通过快捷方式打开时全屏显示

<meta name="apple-mobile-web-app-capable" content="yes" />

隐藏状态栏

<meta name="apple-mobile-web-app-status-bar-style" content="blank" />

iPhone会将看起来像电话号码的数字添加电话连接，应当关闭

<meta name="format-detection" content="telephone=no" />

2.2、使用Media Queries适配对应样式
2.2.1、设备类型(media type):

all所有设备
screen 电脑显示器

2.2.2、设备特性(media feature):

width浏览器宽度；
height浏览器高度；
device-width设备屏幕分辨率的宽度值；
device-height设备屏幕分辨率的高度值；
orientation浏览器窗口的方向纵向还是横向，当窗口的高度值大于等于宽度时该特性值为portrait，否则为landscape；
aspect-ratio比例值，浏览器的纵横比；
device-aspect-ratio比例值，屏幕的纵横比。

@media only screen and (min-device-width:241px) and (max-device-width:320px){
　　 selector{ ... }
}

3、响应式内容
3.1、响应式图片

<span data-picture data-alt="图片描述文本">
    　<span data-src="small.jpg"></span>
    　<span data-src="medium.jpg"     data-media="(min-width: 400px)"></span>
    　<span data-src="large.jpg"      data-media="(min-width: 800px)"></span>
    　<span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
    　<!-- 浏览器不支持JS时的备用方案. -->
    　<noscript>
        　<img src="external/imgs/small.jpg" alt="图片描述文本">
    　</noscript>
</span>

其原理就是JS获取Source的源以及CSS Media Queries规则，输出适应图片
3.2、高分辨率(DPI)下的响应式处理

（1）、SVG：优点可承载色彩丰富、设计复杂图形，且渲染不会出现边缘不顺滑；缺点是IE的支持不完美。
（2）、Icon fonts：支持多浏览器，图形颜色大小的修改成本低，易于维护；图形表现单一，不支持色彩丰富且复杂的图形，IE6渲染有毛边。
（3）、-webkit-image-set:只支持单个图形的适配，不利于图形合并，兼容不完美（Safari 6+, Chrome 21+）。
JS检测：var retina = window.devicePixelRatio > 1;

CSS Media Query:

@media (-webkit-min-device-pixel-ratio: 2), 
/* Webkit-based browsers */
　　(min--moz-device-pixel-ratio: 2),   
 /* Older Firefox browsers (prior to Firefox 16) */
　　(min-resolution: 2dppx),             
/* The standard way */
　　(min-resolution: 192dpi)            
 /* dppx fallback */

3.3、高分辨率下的1px border

由于高清屏的特性，1px是由2×2个像素点来渲染，那么我们样式上的border:1px在Retina屏下会渲染成2px的边框，与设计稿有出入，为了追求1px精准还原，我们就不得不拿出一个完美的解决方案。

在Photoshop中，如果需要看似0.5px的边框，常见的方法就是对1px边框加上阴影模糊1px。同理，我们在retina屏下需要做到真实的1px边框，可利用box-shadow属性模拟。

@media only screen and (-webkit-min-device-pixel-ratio:1.5),
　　only screen and (min-device-pixel-ratio:1.5) {
　　button {
　　border:none;
　　padding:0 16px;
　　box-shadow: inset 0 0 1px #000,
　　inset 0 1px 0 #75c2f8,
　　0 1px 1px -1px rgba(0, 0, 0, .5);
　　}
　　}

十七、移动端布局方案
rem方案

十八、overflow:hidden有什么缺点？什么时候失效？
通常一个盒子的内容是被限制在盒子边界之内的。但有时也会产生溢出，即部分或全部内容跑到盒子边界之外。溢出将在满足下列条件之一时出现：

一个不换行的行元素宽度超出了容器盒子宽度。

一个宽度固定的块元素放在了比它窄的容器盒子内。

一个元素的高度超出了容器盒子的高度。

一个子孙元素，由负边距值引起的部分内容在盒子外部。

text-indent属性引起的行内元素在盒子的左右边界外。

一个绝对定位的子孙元素，部分内容在盒子外。但超出的部分不是总会被剪裁。子孙元素的内容就不会被子孙元素和其包含块之间的祖先元素的overflow的设置所剪裁。

十九、transition和animation的区别

触发条件不同。transition通常和hover等事件配合使用，由事件触发。animation则和gif动态图差不多，立即播放。

循环。 animation可以设定循环次数。

精确性。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性， transition中所有样式属性都要一起变化。

与javascript的交互。animation与js的交互不是很紧密。tranistion和js的结合更强大。js设定要变化的样式，transition负责动画效果，天作之合，比之前只能用js时爽太多。

二十、对less在开发中有哪些应用？
1、样式可以嵌套使用，使用简便，更有结构性
2、可以定义变量，后面可以统一使用一样的样式在相同的组件上，可以通过更换变量值，改变所有使用该变量的组件样式

@fontSize-small: 12px;

3、mixin，就是用一个变量表示一组的样式

.vk-clearfix() {
    &::before,
    &::after {
        content: " ";
        display: table;
    }

    &::after {
        clear: both;
    }
}

其它类名，直接将mixin变量引入，就可以拥有mixin变量的所有样式

.layout {
  .vk-clearfix
}

mixin可以看出是函数，可以传参

.px2rem(@name, @px) {
    @{name}: @px / @root-px;
}
@root-px: 1rem

设置字体大小，将px转成rem

.main {
  .px2rem(font-size, 28);
}

4、可以简化多类名的使用

,circle .circle-red {}

在less可以更简单的表示同时存在多个类名的元素

.circle {
    &-red {;
    }
}

二十一、CSS 选择器的优先级是怎样的？

内联样式表的权值为 1000
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1

二十二、解释一下“::before”和“:after”中的双冒号和单冒号的区别

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容
还是用CSS2的单冒号写法比较安全

大前端——知识点回顾（CSS）

CSS

水平居中

垂直居中

父容器(Grid Container)的属性

display

grid-template-columns / grid-template-rows

grid-template-areas

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端

前端开发笔记

我爱编程