css知识点

444 阅读13分钟
  1. 传统布局和flex布局有什么区别
1. flex允许子元素不设置宽高,而是由算法动态去计算
2. 传统布局,基于盒模型,依赖 display属性 、position属性 、float属性,而FLEX用来为盒状模型提供最大的灵活性,不强制要求子元素的大小,任何一个容器都可以指定为 Flex 布局,可以简便、完整、响应式地实现各种页面布局。
3. flex在移动端兼容性:ios8不兼容,android4.4不兼容
4. 文档流:文档流指元素在文档中的位置由元素在html里的位置决定,块级元素独占一行,自上而下排列;内联元素从左到右排列
5. 脱离文档流的方式:
    1. 浮动,通过设置float属性
    2. 绝对定位,通过设置position:absolute
    3. 固定定位,通过设置position:fixed
  1. 给出三列布局,左右两边宽度一定,比如120px啦,然后中间的自适应宽度
1. 定位解决
  <div class="container">
    <div class="center-wrap">
      <p>this is center</p>
    </div>
    <div class="left-wrap"></div>
    <div class="right-wrap"></div>
  </div>
    .left-wrap, .right-wrap {
      position: absolute;
      top: 0;
      width: 200px;
      bottom: 0;
    }
    .left-wrap {
      left: 0;
      background-color: blue;
    }
    .right-wrap {
      right: 0;
      background-color: red;
    }
    .center-wrap {
      margin: 0 200px;
      background-color: pink;
    }
 2. flex解决   
    .container {
      display: flex;
    }

    .left-wrap, .right-wrap {
      width: 200px;
      height: 100vh;
    }

    .left-wrap {
      background-color: blue;
      order: 1;
    }

    .right-wrap {
      background-color: red;
      order: 2;
    }

    .center-wrap {
      flex: 1;
      background-color: pink;
      order: 3;
    }
  1. 左边固定,右边自适应布局
    .left-wrap {
      float: left;
      width: 200px;
      height: 100vh;
      background-color: blue;
    }

    .center-wrap {
      margin-left: 200px;
      background-color: pink;
    }
  1. 如何理解CSS的盒子模型?
每个HTML元素都是长方形盒子。
(1)盒子模型有两种:IE盒子模型、标准W3C盒子模型;IE的content部分包含了border和pading。
(2)标准W3C盒模型包含:内容(content)、填充(padding)、边界(margin)、边框(border)。
  1. CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算?CSS 3新增伪类有哪些?
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, UL LI DL DD DT;
不可继承 :border padding margin width height ;
优先级就近原则,样式定义最近者为准,载入样式以最后载入的定位为准。
优先级为:
     !important >  id > class > tag  
     important 比 内联优先级高
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  单选框或复选框被选中。
  1. margin-left为负值是把元素左移
  2. 列出display的值,说明它们的作用。position的值里,relative和absolute定位原点是?
display的值:
block 像块类型元素一样显示。
none 缺省值。像行内元素类型一样显示。
inline-block 像行内元素一样显示,但其内容像块类型元素一样显示。
list-item 像块类型元素一样显示,并添加样式列表标记。
relative和absolute定位原点:
absolute:生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。
relative:生成相对定位的元素,相对于其正常位置进行定位。
  1. display:none与visibility:hidden的区别?
display:none 不显示对应的元素,在文档布局中不再分配空间(回流+重绘)
visibility:hidden 隐藏对应元素,在文档布局中仍保留原来的空间(重绘)
  1. 浮动主要原因是父级没有高度
  2. 38 如果需要手动写动画,你认为最小时间间隔是多久,为什么?
多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms = 16.7ms。
  1. 43 style标签写在body后与body前有什么区别?
页面加载自上而下 当然是先加载样式。
写在body标签后由于浏览器以逐行方式对HTML文档进行解析,当解析到写在尾部的样式表(外联或写在style标签)会导致浏览器停止之前的渲染,等待加载且解析样式表完成之后重新渲染,在windows的IE下可能会出现FOUC现象(即样式失效导致的页面闪烁问题)
  1. px, em, rem 有什么区别
px是像素,是固定单位
em是相对于直接父元素单位的大小,em就是倍数,是相对单位
rem是相对于根元素的大小,rem也是倍数,是相对单位
  1. 让一个元素”看不见”有几种方式?有什么区别?
display:none;彻底消失(看不见也摸不到),不占据原来位置;
visibility: hidden;隐藏(看不见但摸得到),占据原来的位置;
opacity: 0;元素透明度为0,只是不显示,但是元素还在,还占据原来的位置
  1. css3有哪些新特性
CSS3选择器 (伪类选择器nth-child/)
圆角 (border-radius)
阴影和滤镜 (box-shadow/filter)
文字阴影 (text-shadow)
文字渲染 (text-decoration)
背景色渐变 (linear-gradient)
3D (translate3d)
缩放,偏移,倾斜,旋转 (transform) 如:transform: scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\ rotate(30deg)
过渡动画 (animation)
动画 (transition)
  1. display: table-cell :e可以做栅格布局
<style>
.content ul li {
  display: table-cell;
  border: 1px solid #ccc;
  text-align: center;
  height: 100px;
  border-right: none;
  line-height: 100px;
}
</style>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
  1. 如何自定义滚动条?
::-webkit-scrollbar {
    width: 4px; /*垂直方向滚动条宽度*/
    height: 4px; /*水平方向滚动条高度*/
}
/*滚动条轨道*/
::-webkit-scrollbar-track {
    background-color: pink;
} 
/*滑块*/
::-webkit-scrollbar-thumb {
    background-color: red;
}
  1. 简述一下src与href的区别
href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。

src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
  1. transition和animation的区别是什么?
过渡属性transition可以在一定的事件内实现元素的状态过渡为最终状态,用于模拟一种过渡动画效果,但是功能有限,只能用于制作简单的动画效果;
动画属性animation可以制作类似Flash动画,通过关键帧控制动画的每一步,控制更为精确,从而可以制作更为复杂的动画。
  1. html语义化
意义:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的
代码的同时让浏览器的爬虫和机器很好地解析。 注意:
  1. meta viewport相关
<!DOCTYPE html>  H5标准声明,使用 HTML5 doctype,不区分大小写
<head lang=”en”> 标准的 lang 属性写法
<meta charset=’utf-8′>    声明文档使用的字符编码
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>   优先使用 IE 最新版本和 Chrome
<meta name=”description” content=”不超过150个字符”/>       页面描述
<meta name=”keywords” content=””/>      页面关键词
<meta name=”author” content=”name, email@gmail.com”/>    网页作者
<meta name=”robots” content=”index,follow”/>      搜索引擎抓取
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 为移动设备添加 viewport
<meta name=”apple-mobile-web-app-title” content=”标题”> iOS 设备 begin
<meta name=”apple-mobile-web-app-capable” content=”yes”/>  添加到主屏后的标题(iOS 6 新增)
是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”format-detection” content=”telphone=no, email=no”/>  设置苹果工具栏颜色
<meta name=”renderer” content=”webkit”>  启用360浏览器的极速模式(webkit)
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>     避免IE使用兼容模式
<meta http-equiv=”Cache-Control” content=”no-siteapp” />    不让百度转码
<meta name=”HandheldFriendly” content=”true”>     针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓
<meta name=”MobileOptimized” content=”320″>   微软的老式浏览器
<meta name=”screen-orientation” content=”portrait”>   uc强制竖屏
<meta name=”x5-orientation” content=”portrait”>    QQ强制竖屏
<meta name=”full-screen” content=”yes”>              UC强制全屏
<meta name=”x5-fullscreen” content=”true”>       QQ强制全屏
<meta name=”browsermode” content=”application”>   UC应用模式
<meta name=”x5-page-mode” content=”app”>    QQ应用模式
<meta name=”msapplication-tap-highlight” content=”no”>    windows phone 点击无高光
设置页面不缓存
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>

左右自适应布局

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box {
      display: inline-table;
    }
    .left {
      display: table-cell;
      width: 100%;
      background-color: red;
    }
    .right {
      height: 100px;
      background-color: blue;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left"></div>
    <div class="right">asdasd</div>
  </div>
</body>
<script>
  
</script>
</html>

1px 解决方案

<style>
    .border-1px {
      position: relative;
    }
    .border-1px::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 200%;
      height: 200%;
      transform-origin: 0 0;
      transform: scale(.5);
      border: 1px solid red;
      box-sizing: border-box;
    }
</style>
<body>
  <div class="container">
    <div class="name border-1px">我欲成风</div>
  </div>
</body>

什么是BFC

这个元素里面的子孙元素,不会影响外部元素的布局。

overflow: hidden;为啥能清除浮动

overflow: hidden会触发BFC

哪些元素会生成BFC

根元素
float 属性不为 none
position 为 absolute 或 fixed
display 为 inline-block, table-cell, table-caption, flex, inline-flex
overflow 不为 visible

bfc经典应用

父元素
.par {
    background-color: blue;
    margin-top: 0;
    margin-bottom: 0;
}
子元素
.child {
  width: 50px;
  height: 50px;
  margin-top: 50px;
  margin-bottom: 50px;
  background-color: pink;
}

解决图片空白

display:block;
vertical-align:bottom;
float:left;

空白间距:4px

vertical-align: 属性

baseline
sub
super
middle	
bottom
text-top
text-bottom

z-index默认值为auto

z-index:0 与 z-index:auto
z-index:0 的会创建一个新的层叠上下文而auto 不会,两者在有区别 (0 会在auto 上面)

span之间的空白符

空格、换行或回车所产生空白符所致

垂直水平居中

父盒子:display: table-cell;
text-align: center;
vertical-align: middle;

子盒子:display: inline-block;

px,em,rem 的区别

px 像素(Pixel)。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的,是一个虚拟长度单位,是计算 机系统的数字化图像长度单位,如果 px 要换算成物理长度,需要指定精度 DPI。
em 是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置, 则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小,因此并不是一个固定的值。
rem 是 CSS3 新增的一个相对单位(root em,根 em),使用 rem 为元素设定字体大小时,仍然是相对大小, 但相对的只是 HTML 根元素。

nth-child"和"nth-of-type"的区别

“nth-child”选择的是父元素的子元素,这个子元素并没有指定确切类型,同时满足两个条件时方能有效果:其一是子元素,其二是子元素刚好处在那个位置;“nth-of-type”选择的是某父元素的子元素,而且这个子元素是指定类型。

translate代替top left marg等做位移有好处么

top/left是布局类的样式,这个样式的变化会导致重排(reflow/relayout),所谓重排即指对这些节点以及受这些节点影响的其它节点,进行CSS计算->布局->重绘过程,这个过程的前2步是消耗大量资源的
translate是一个绘制样式(这名词我瞎编的),这个样式的变化会导致重绘(repaint),即在屏幕上重新画一下,不会进行CSS计算和布局这2个性能大户,

flex布局

flex-direction
justify-content
align-items
flex-wrap
flex
order: 控制顺序,大的在后面

隐藏一个元素

opacity:0:该元素隐藏起来,但不会改变页面布局,如果该元素绑定了事件会触发。
visibility:hidden:该元素隐藏起来,但不会改变页面布局,不会触发该元素已经绑定的事件。
display:node:把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素删掉。

画一个三角形

.child {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

@supports

可以通过**@supports**来判断是否支持某个css属性。
@supports (property: value){
  element {
    property: value;
  }
}

// 例
@supports (display: flex){
  .flex {
    display: flex;
    float: none;
  }
}

重排何时发生

  • 添加或删除可见的DOM元素

  • 元素位置的改变

  • 元素尺寸的改变(padding、margin、border、height、width)

  • 内容改变(文本改变或图片尺寸改变)

  • 页面渲染器初始化

  • 浏览器窗口尺寸改变

  • 滚动条的出现(会触发整个页面的重排)

DOM,天生就慢

浏览器把实现页面渲染的部分和解析js的部分分开来实现,既然是分开的,一旦两者需要产生连接,就要付出代价。

官方例子:把DOM和js(ECMAScript)各自想象为一座岛屿,它们之间用收费桥进行连接。ECMAScript每次访问DOM,都要途径这座桥,并交纳“过桥费”。访问DOM的次数越多,费用也就越高。

推荐的做法是:尽可能的减少过桥的次数,努力待在ECMAScript岛上。

link 与 @import 的区别

link功能较多,可以定义 RSS,定义 Rel 等作用,而@import只能用于加载 css
当解析到link时,页面会同步加载所引的 css,而@import所引用的 css 会等到页面加载完才被加载
@import需要 IE5 以上才能使用
link可以使用 js 动态引入,@import不行