Bootstrap前端总结·基础篇·CSS(三)补充

前者总结系列

  • 前者总结·基础篇·CSS(一)布局
  • 前者总结·基础篇·CSS(二)视觉
  • 前端总结·基础篇·CSS(三)补充
  • 前者总结·基础篇·JS(一)原型、原型链、构造函数和字符串(String)
  • 前端总结·基础篇·JS(二)数组深拷贝、去重以及字符串反序和数组(Array)
  • 前端总结·基础篇·JS(三)arguments、callee、call、apply、bind及函数封装和构造函数
  • 前者总结·基础篇·JS(四)异步请求与跨域方案
  • 前端总结·工具篇·管理(一)常用模块化方案

目录

一、移动端
    1.1 视口(viewport)
    1.2 媒体查询(media query)
    1.3 相对字体大小(rem/em)
二、选择器
    2.1 常用
    2.2 关系
    2.3 伪元素
    2.4 伪类
    2.5 优先级
三、样式重置(reset)
    3.1 常用重置
    3.2 重置插件(Normalize.css)
四、浏览器前缀
    4.1 前缀由来
    4.2 解决方案
五、兼容性
    5.1 IE条件注释
    5.2 IE hack
    5.3 指定渲染模式
五、CSS库

一、移动端

运动端还未曾上车。先来总结一下老三只基本的走端支付特色:视口(viewport)、媒体询问(@media)和对立字体大小。

1.1 视口(viewport)

增长视口之后,页面将会见活动裁剪成适合走页面的深浅。

Bootstrap 1

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

width=device-width  // 把页面宽设置成设备一样
initial-scale=1.0  // 初始缩放为1.0
user-scalable=no  // 不允许用户缩放(此处有坑,有时会无效)

1.2 媒体询问(media query)

以下只是针对媒体询问利用的一个演示。实际被我们经常因此媒体询问来冲不同幅度之装备显示不同的布局。

Bootstrap 2

/* HTML */

<div class="media">meida</div>

/* CSS */

.media {
    background-color: gray;
    color: white;
}
@media screen and (max-width:1000px) {
    .media {
        background-color: red;
    }
}
@media screen and (max-width:800px) {
    .media {
        background-color: orange;
    }
}

1.3 相对字体大小(rem/em)

rem是相对于清字体的轻重,em是对立于父级的字体大小。

/* HTML */

<div class="rem">rem</div>

/* CSS */

/* 根字体在html而不是body中 */

html {
    font-size: 60px;  /* 修改根字体,对应div中的字体会改变 */
}
.rem {
    font-size: 1.2rem;
}

二、选择器

2.1 常用

标签(tag)、id和好像(class)都是常用的选择器。其中class最为常用。

// id在页面中是唯一的,class的属性可以有多个

<p id="mark" class="mark important">mark</p>
<p class="mark todo">have a lunch</p>

p {color:red;}  // 标签选择器
#mark {color:red;}  // id选择器
.mark {color:red;}  // 类选择器

2.2 关系

后代(parent child-child) 子代(parent>child) 兄弟(+) 相邻(~)。

手足选择器常用来打造,导航栏中间的一模一样长条边框线。

Bootstrap 3

<ul>
  <li class="brother"><a>one</a></li>
  <li>two</li>
  <li>three</li>
</ul>

ul li {color:red;}  // 后代选择器,one、two和three都变成红色
ul>li {color:red;}  // 子代选择器,two和three变成红色
.brother+li {color:red;}  // 兄弟选择器,two变成红色
.brother~li {color:red;}  // 相邻选择器,two和three变成红色

中间线示例

li {
    float: left;
    list-style-type: none;
    padding: 5px;
}
li+li {
    border-left: 1px solid red;
}

2.3 伪元素

伪类有::before、::after、::selection、::first-line、::first-letter。

里面::before常用来制造三角形和登陆框左边的图标。更多请见kingkit。

Bootstrap 4

/* HTML */

<div class="triangle">triangle</div>

/* CSS */

.triangle {
    position: relative;
    border: 1px solid red;
    padding: 2px 4px;
    width: 60px;
    height: 20px;
    margin-left: 10px;
    border-radius: 10%;  // 设置矩形圆角
}
.triangle::before,.triangle::after {
    content: "";
    position: absolute;
    top: 7px;
    left: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent red transparent transparent;  // 右边框设置为红色
    border-width: 5px 10px 5px 0;  // 左边框设置为0
}
.triangle::after {
    left: -9px;
    border-right-color: white;  // 设置三角形内容为白色
}
.triangle::selection {
    color: red;  // div内选中的部分会变成红色
}

2.4 伪类

LVHA(:link,:visited,:hover,:active)、:focus、lang、first-child(last-child,nth-child(n))

div:first-child {}
div:nth-child(5) {}
div:last-child {}

2.5 优先级

优先级最高的凡安了!important的因素,其次看元素的权重。权重相同时看何人离HTML更接近(内嵌>内链>外链),近之预先级更胜似。

权重分配是attr:1000,id:100,class:10,tag:1。当有强选择器组合的上,他们的权重的同就是总权重。权要的优先级赛。

display: none!important;  // 优先级最高,IE6不支持同一选择符中的!important
.parent > div {}  // 权重计算 10+1=11

同级的照就近原则(内嵌>内连>外链),越近优先级更强
优先级最高

老三、样式重置(reset)

3.1 常用重置

* {box-sizing:border-box;}  /* IE8+ */
body {margin:0;}  /* 去除边距 */
ul {margin:0;padding-left:0;}  /* 去除边距和左填充 */
li {list-style-type:none;}  /* 去除列表的圆点 */
a {text-decoration:none;}  /* 去除下划线 */

3.2 重置插件(Normalize.css,IE8+)

理所当然,你也可免和谐写重置样式,使用插件制动辅助您完了。

季、浏览器前缀

思念使下无标准化的初特色,往往伴随在相同深堆兼容前缀。各浏览器采用自己之私房前缀实现新力量,我派在写了了相当性能之后,还要长同样长长的标准属性。等交性标准化后咱们就非欲再行长标准属性了。

div
{
    transition: width 2s;
    -moz-transition: width 2s;  /* Firefox 4 */
    -webkit-transition: width 2s;   /* Safari 和 Chrome */
    -o-transition: width 2s;    /* Opera */
}

4.1 前缀由来

以实验性意义尚未标准化之前,浏览器厂商为了开发者能够快的经验这些新特效。通过带前缀的CSS属性使得这些效应可以一直叫以。

消至格后,则可以通过不带前缀的性设置样式。但是于没有更新浏览器的用户来说,样式依旧用经过个人属性访问。

这样,你不得不写N条兼容代码。chrome(-webkit-)、firefox(-moz-)和opera(-o-)。safari和chrome一样,私有属性前缀也是-webkit-。

4.2 解决方案

此刻,你需要的凡一个Autoprefixer或者-prefix-free。

五、兼容性

除手写IE兼容性,你为堪直接行使IE9.js自动处理IE6-9的bug。另外,让IE6-9支撑之支撑圆角、背景渐变、边框图片、盒阴影、rgba等可视化的效应可据此CSS3PIE。让IE6-8支持媒体询问好采取Respond.js。IE6-7支持CSS3
box-sizing可以使用borderBoxModel.js。IE6-8支持:first-child等高级CSS选择符,可以用selectivizr。让IE8及以下的浏览器支持H5新因素,可以就此html5shiv.js。

5.1 IE条件注释

马上看似代码只有IE会解析,其他浏览器会作为注释处理。更多要见天堂之转动木马。

<!--[if IE 6]>
    <script type="text/javascript" scr="IE6.js"></script>
<![endif]-->

if <条件> IE <版本>
条件:gt/gte/lt/lte/!(大于/大于等于/小于/小于等于/非)
版本:5.5/6/7/8

!IE 通常连在一起

5.2 IE hack

为对不同IE浏览器进行体制修改,可以使css
hack。更多要见freshlover。

指定版本:IE6(_),IE7(+),IE8(/),IE9(:root 9)
指定范围:IE6-7(*),IE8-10(\0),IE9-10(\9\0),IE All(\9)

.hack{
    _color:red;  /* IE6 */
    color:red\0;  /* IE8-10 */
}
:root .hack{color:red\0;}  /* IE9 */

5.3 指定渲染模式

卿可以吧IE指定渲染模式,当用户设置谷歌插件GCF之后,将会强制页面下chrome模式渲染。更多请见剧本的拙。

<meta http-equiv="X-UA-Compatible" content="IE=7" />  // IE8-9使用IE7模式渲染
<meta http-equiv="X-UA-Compatible" content="IE=8" />  // IE8-9使用IE8模式渲染
<meta http-equiv="X-UA-Compatible" content="edge" />  // IE8-9使用IE最高版模式渲染
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  // 安装GCF之后,IE使用chrome模式渲染

五、CSS库

为便于高效的再度兑现用之效用,把常用的功用封装起来。通过安装class的章程,使用封装好之css库。更多要见深开源。

CSS3悬浮效果(Hover.CSS)、提示(HINT.css)、进度(progress.js)、加载动画(css-loaders)、按钮(Buttons)、预处理(less,sass)、界面(Bootstrap)。

总结

当下同样节关键参照的书有:《CSS设计指南》和《CSS揭秘》。主要参照的网站及博客有梦之都、本子的寒、W3School、纵深开源、kingkit、天堂的旋转木马和freshlover。另外还有有平常底积攒。

前景半只月的创新频率不克担保了,快和舒缓了说禁止。

相关文章