美文网首页海纳百川
CSS常见知识点回顾

CSS常见知识点回顾

作者: 凛冬已至_123 | 来源:发表于2018-06-24 18:46 被阅读0次

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

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: 0outline: 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的产生
  1. 根元素;
  2. float属性不为none;
  3. position为absolute或fixed;
  4. display为inline-block, flex, 或者inline-flex;
  5. overflow不为visible;
  • 特性
  1. 内部的Box会在垂直方向,一个接一个地放置。
  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠每个元素的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
  3. BFC的区域不会与float box重叠。
  4. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
  5. 计算BFC的高度时,浮动元素也参与计算
  • 作用
  1. margin 合并
  2. contain float

7. 响应式设计(不过多阐述)

  • 响应式设计:页面的设计和开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。简单说就是你设计的网站能够在不同终端下进行正常显示
  • 实现方法
  1. 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;
  }
}
  1. 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.元素居中的方式

  • 水平居中
  1. text-align 在父元素上设置 text-align: center 使文字/图片水平居中
.container {
  text-align: center;
}
  1. margin
.container {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
  • 垂直居中
  1. padding
.ct{
  padding: 40px 0;
  text-align: center;
  background: #eee;
}
  1. 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;
}
  1. vertical-align
.box img{
  vertical-align: middle;
  background: blue;
}
  1. table-cell
.box{
  width: 300px;
  height: 200px;
  border: 1px solid ;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
  1. display: flex
.space {
  width: 100vw;
  height: 100vh;  /* 设置宽高以显示居中效果 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
}
  1. 最简单的方法
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浏览器不同版本之间的表现差异而引入的。
  1. 属性前缀法(即类内部Hack):例如 IE6能识别下划线""和星号"* ",IE7能识别星号" *",但不能识别下划线"",IE6~IE10都认识"\9",但firefox前述三个都不能认识
  2. 选择器前缀法(即选择器Hack)
  3. 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(这个一般是给后端用的,需要学的话自行搜索)

结束语

本文章用于自我复习

相关文章

  • CSS常见知识点回顾

    本文章不涉及太基础的知识点,主要用来记忆常用的知识点 1.CSS常用单位 em 1em=默认字体大小的倍数(比如默...

  • 前端基础知识点

    1.html常见知识点 2.css常见知识点 3.js常见知识点 数组知识点 4.计算机网络知识点 5.数据结构 ...

  • 前端知识点之谈一谈css盒模型、BFC

    知识点:--css 盒模型--标准模型和 IE 模型--BFC 谈一谈 css 盒模型、BFC 是面试中常见的问题...

  • css常见知识点

    1.display:inline-block 简单来说就是将对象呈现为inline对象,但是对象的内容作为bloc...

  • CSS面试常见知识点

    原文在我最近刚弄的个人博客:http://hellopan.top intro 因为篇幅问题,把CSS和HTML的...

  • CSS常见样式知识点

    1.块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别 块级元素:div , p , form, ul...

  • CSS 2020

    CSS三大知识点 盒子模型 浮动 定位 标签显示模式 块级元素 block-level 常见元素(div ) 宽...

  • CSS学习笔记四——水平垂直居中/文字图片对齐/多列布局/圣杯布

    css布局考察的知识点比较综合,基本就是使用上了所有css的基础技巧,以下是一些比较常见的场景总结。 水平居中 方...

  • day26课堂笔记

    一,知识点回顾 1》什么是网络 2》网络协议:了解常见的协议 ARP---------->交换机---------...

  • 大前端——知识点回顾(CSS)

    CSS 一、CSS3新特性锚伪类target 在点击完链接a标签后,锚链接目标元素就多了个伪类 :target:,...

网友评论

    本文标题:CSS常见知识点回顾

    本文链接:https://www.haomeiwen.com/subject/wkfsyftx.html