CSS常见知识点回顾

2018-06-24 本文已影响0人凛冬已至_123

本文章不涉及太基础的知识点，主要用来记忆常用的知识点

1.CSS常用单位

em 1em=默认字体大小的倍数(比如默认20px,那么2em为40px)
rem 1rem=根元素(html节点)字体大小的倍数。ie8及一下不支持rem

html {
  font-size: 10px; /* 不建议设置 font-size: 62.5%; 在 IE 9-11 上有偏差，具体表现为 1rem = 9.93px。 */
}

.sqaure {
  width: 5rem;  /* 50px */
  height: 5rem; /* 50px */
}

vw, vh 1vw = 1%视口宽度，1vh = 1%视口高度（一般用于自适应屏幕设计）
百分比（%）

.container {
  width: 80%;
  margin: 5% auto;
  font-size: 200%;
}

相对于父元素尺寸设置的百分比设置，块级元素不要随便加width：100%

currentColor关键字表示和当前元素的color一样的颜色

  <div class="box">box
    <span class="child">child</span>
  </div>

  <style>
    .box {
      color: red;
    }
    .child {
      border: 4px solid currentColor;
    }

  </style>

calc : 用于计算样式

width: calc(90% - 15px);

transform: rotate(45deg) 旋转角度
transform: translate(50px, 60px) 相对于当亲位置的移动，效果类似于relative，主要用于absolute的居中效果实现

2.box-sizing及相关知识点

box-sizing 用于更改用于计算元素宽度和高度的默认的 CSS 盒模型。
box-sizing: content-box 默认值

.box {
  width: 300px;
  border: 10px;
}

渲染出来的盒子宽度为 320px
box-sizing: border-box

.box {
  width: 300px;
  border: 10px;
  padding: 10px;
  box-sizing: border-box;
}

渲染出来的盒子宽度为 300px

outline 如果你看到被选中的 <a> <input> <button> 周围有一圈黄或蓝色的外框，就是 outline 了，可以通过设置 outline: 0 或 outline: none 去除
inline-block缝隙问题父元素设置font-size: 0; inline-block元素上重新设置font-size

3.表格样式

border-collapse
border-collapse 属性用于设置表格边框是分开还是合并。

collapse 合并 正常青年用法
separate 分开 文艺青年用法

table {
  border-collapse: collapse;
}

4. 清除浮动

overflow: hidden

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="box">
    <p>12121</p>
  <p>wewew</p>
  </div>

</body>
</html>
// style
p {
  background-color: red;
  float: left;
}

.box {
  background-color: blue;
  overflow: hidden;
}

clearfix

.clearfix {
content: '';
clear: both;
display: block;
}

5.定位易忘点

固定定位
position: fixed 相对浏览器窗口进行定位。因此当滚动产生时，固定定位元素依然处于窗口的某个固定位置

.box {
  right: 30px;
  bottom: 30px;
  position: fixed;
}

粘性定位
position: sticky 是相对定位和固定定位的结合。默认情况下表现为相对定位，当浏览器窗口顶端与元素的距离等于 top 属性的值时，转变为固定定位。

.samecon h2{
      position: -webkit-sticky;
      position: sticky;
      top: 20px;
      background:#ccc;
      padding:10px 0;
}

6.BFC

BFC 全称 Block Formatting Context。

每个渲染区域用formatting context表示，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用

在正常流中的盒子要么属于块级格式化上下文，要么属于内联格式化上下文

BFC的产生

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

特性

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

作用

margin 合并
contain float

7. 响应式设计（不过多阐述）

响应式设计：页面的设计和开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。简单说就是你设计的网站能够在不同终端下进行正常显示
实现方法

meta：媒体查询

//html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
//css
@media (min-width: 700px) {
  .layout {
    width: 600px;
  }
}

style (只做提示，详解请自行搜索)

运用flex、gird布局
运用vh、vw、%单位

8.伪类与伪元素与样式引用

@important 使用

@important 'common.css'

伪类-伪class(即假装选中了元素)

p:nth-child(2)
{
background:#ff0000;
}

link visited hover active不做过多阐述，注意他们之间的顺序

a:link{
  color: blue;
}
a:visited{
  color: yellow;
}
a:hover{
  color: red;
}
a:active{
  color: pink;
}

伪元素(只写2个常用的)
before/after
清除浮动

.clearfix:after {
    content:"";
    display:block;
    clear:both;
}

9.元素居中的方式

水平居中

text-align 在父元素上设置 text-align: center 使文字/图片水平居中

.container {
  text-align: center;
}

margin

.container {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

垂直居中

padding

.ct{
  padding: 40px 0;
  text-align: center;
  background: #eee;
}

position:absolute

.dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -150px;
  width: 400px;
  height: 300px;
}

.dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 300px;
}

vertical-align

.box img{
  vertical-align: middle;
  background: blue;
}

table-cell

.box{
  width: 300px;
  height: 200px;
  border: 1px solid ;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

display: flex

.space {
  width: 100vw;
  height: 100vh;  /* 设置宽高以显示居中效果 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
}

最简单的方法

height: 100px;
line-height: 100px;

10. 浏览器兼容

css hack
由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。
CSS Hack大致有3种表现形式
CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

属性前缀法(即类内部Hack)：例如 IE6能识别下划线""和星号"* "，IE7能识别星号" *"，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识
选择器前缀法(即选择器Hack)
IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)：，针对IE6及以下版本：。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效

常见hack写法

.box{
  color: red;
  _color: blue; /*ie6*/
  *color: pink; /*ie67*/
  color: yellow\9;  /*ie/edge 6-8*/
}
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->

常见属性的兼容情况
- inline-block: >=ie8
- min-width/min-height: >=ie8
- :before,:after: >=ie8
- div:hover: >=ie7
- inline-block: >=ie8
- background-size: >=ie9
- 圆角: >= ie9
- 阴影: >= ie9
- 动画/渐变: >= ie10
常见的兼容处理范例

.clearfix:after{
  content: '';
  display: block;
  clear: both;
}
.clearfix{
  *zoom: 1; /* 仅对ie67有效 */
}

.target{
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

 <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

11. css布局

浮动+margin

  <style>
    #content:after{
      content: '';
      display: block;
      clear: both;
    }
    .aside{
      width: 200px;
      height: 500px;
      background: yellow;
      float: right;
    }
    .main{
      margin-right: 210px;
      height: 400px;
      background: red;
    }

    #footer{
      background: #ccc;
    }

  </style>

  <div id="content">
    <div class="aside">aside</div>
    <div class="main">content</div>
  </div>
  <div id="footer">footer</div>

flex布局(查文档吧)

<!DOCTYPE html>
<html>
<head>
<style>
     html,body{
       margin:0;
       padding:0;
     }
     #header {
       height: 40px;
       background: red;
     }
     #content{
        display:flex;
     }
     .aside{
       background-color:yellow;
       width: 200px;
       height: 400px;
     }
     .main{
       background-color:green;
       flex:1;
     }
</style>
</head>
<body>
  <div id="header">header</div>
  <div id="content">
    <div class="aside">左边栏</div>
    <div class="main">中间栏</div>
  </div>

</body>
</html>

grid布局
bootstrap(这个一般是给后端用的，需要学的话自行搜索)

结束语

本文章用于自我复习