The way to the font end:CSS基础

CSS全称：Cascading Style Sheets，层叠样式表 HTML注释： CSS注释：/xxx/ JS注释：//

CSS的展现方式：内联样式，内部样式，外部样式 @import:url("abc.css")/"xxx.css" 用于从其他样式表引入样式规则，这些规则必须优先于其他类型的规则。

文件路径：

相对路径：

(1) css/a.css ./css/a.css
这两种的写法是一样的，只不过后面的写法更加规范一些。表示index.html和CSS文件夹是同级目录 (2)b.css 这种写法表示a.css和b.css在同级目录下 (3)../img/a.png 在a.css中要插入图片a.png，首先找到css/a.css，发现css和img同级所以需要在往上一级找，接着就是../img/a.png

绝对路径：

/user/bin/src/config 本地文件的绝对地址，相当于一个写死的地址。网站路径： http://cdn.swiper.js / http://bootstrap.css 一般我们写入网站的相对路径

书写规范：

语法区分大小写，但建议统一使用小写
不使用内联的style属性绑定样式
id和class使用有意义的单词，分隔符建议使用" - "
有可能就是用缩写（新手的话不建议使用缩写，还是老老实实的把全称给写了）
属性值为0的CSS省略单位
块内容注意要缩进
属性名冒号后面要加一个空格（别问问啥，防止以后踩坑）

选择器类型：
1. 基础选择器
2. 组合选择器
3. 属性选择器
4. 伪类选择器
5. 伪元素选择器
  基础选择器：
  
  *：通用选择器
  
  ：id选择器
  
  .：类选择器 elmement：标签选择器
  
  组合选择器：
  
  多元素选择器：elmement , element{} 后代选择器： E F{} 匹配E元素所有的后代子代选择器：E>F{ } 匹配E元素的子元素相邻选择器：E+F{ } 匹配E元素直接相邻的同级元素F 普通相邻选择器：E~F{}匹配E元素之后的同级元素F 多个类的选择器： .class.active{} 选中既含有class属性又含有active属性的选择器 ID和class选择器：elment#id{}，同上。
  
  属性选择器：
  
  E[attr]:所有含有属性attr的元素 E[attr =value]:所有含有属性值attr=value的元素 E[attr~=value]: 匹配 E[attr^=value]:匹配属性值为attr以value开头的元素 E[attr$=value]:匹配属性值attr以value为结尾的元素 E[attr*=value]:匹配属性attr值包含value的元素

块级元素和行内元素

块级元素可以包含行内元素和块级元素，但是行内元素只能包括行内元素（文本，行内）
块级元素占据一整行的空间，行内占据自身宽度空间
宽高设置，内外边距的差异 block-level: div h1~h6 p hr form ul dl ol pre table li dd dt tr td th inline-level: em strong span a br img button input label select textarea code script 宽高：对块级元素设置宽高有效，但是对行内元素设置宽高是无效的！边框：border：width style color; border-top/right/left/bottom 用CSS实现三角形：
```
.triangle{
width: 0px;
height: 0px;
border: 20px solid red;
border-right-color: transparent;
border-bottom-color: transparent;
border-top-color: transparent;
}
```
margin/padding:外边距/内边距 margin/padding: top right bottom left; margin外边距是合并的。块级元素的居中margin： 0 auto；行内元素的居中text-align: center;

文本

chrome: 设置的最小字体是12px，默认字体是16px 解决最小字体的方法：css中的语法： -webkit-text-transform: scale(0.75) // 原来字体的0.75倍文本的对齐方式： text-align: left/right/center/justify(两边对齐) 首行缩进：text-indent: 首行缩进的距离文字样式：text-decoration: none/underline/line-through/overline 改变文字大小：text-transform: none/uppercase（全部大写）/lowercase/capitalize（首字母大写）改变字（单词）之间的间隔：word-spacing: 字母间隔修改的是字符和字母之间的间隔：letter-spancing: 单行文本溢出用...省略号表示：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

隐藏or透明

opacity: 0; 透明度为0，整体
visibility： hidden; 和opacity: 0 类似
display： none 消失，不占用位置
background-color: rgba(0,0,0,.2)只是背景色透明

几个小练习：

块级元素和行内元素分别有哪些？动手测试并列出4条以上的特性

block-level: div h1~h6 p hr form ul dl ol pre table li dd dt tr td th inline-level: em strong span a br img button input label select textarea code script 区别：给块级元素设置宽高有效，给行内元素设置宽高无效块级元素可以容纳行内元素和其他元素，但是行内元素只能容纳行内元素块级元素独自占据一整行的空间，而行内元素只占据自身的宽度空间块级元素的高度，行高以及外边距和内边距都可控制；行内元素的高，行高及外边距和内边距部分可改变行内元素设置margin，padding只有左右有效，上下无效

什么是 CSS 继承? 哪些属性能继承，哪些不能？

CSS继承：父元素设置了某种样式的属性，子元素也显示这种属性。可以继承的属性：color , font: size/wight/family/line-height 不可继承的属性：border,margin,padding,display

如何让块级元素水平居中？如何让行内元素水平居中?

行内元素水平居中： text-align: center; 块级元素水平居中： margin-left: auto; margin-right: auto;

用 CSS 实现一个三角形

.triangle{ width:0px; height:0px; border: 40px solid black; border-color: transparent transparent green; } 预览地址：http://js.jirengu.com/jopasusona/1/edit?html,css,output

单行文本溢出加 ...如何实现?

white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /需要注意的上面的代码如果直接对行内元素使用是没有效果的/ 预览地址：http://js.jirengu.com/jopasusona/1/edit?html,css,output

px, em, rem 有什么区别

px是指一个具体的固定的单位 em是一个相对的单位是相对于父元素字体的大小 rem 是一个相对的单位，是相对于根元素的大小

解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?

body{ font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif; } font: size/line-height style 字体大小是12像素，行高是字体像素大小的1.5倍，默认使用字体的样式为tahoma 后面用逗号隔开表示为备用字体。'\5b8b\4f53'表示为宋体，这是Unicode编码格式如果电脑中没有tahoma就使用arial字体，如果没有arial字体就使用'Hiragino Sans GB'字体，如果没有就使用宋体，最后使用sans-serif字体

代码练习：

http://js.jirengu.com/jenukobiqe/1/edit?html,css,output http://js.jirengu.com/vonahuzozu/1/edit?css,output http://js.jirengu.com/relojuhigi/3/edit http://js.jirengu.com/nezamatubo/1/edit?html,css,output http://js.jirengu.com/qakabehiwe/1/edit?html,css,output

背景

background: 简写属性，作用是将背景属性设置在一个声明中 background-attachment: 背景图片是否固定/随着页面的其余部分滚动 background-color: 背景颜色 background-image: 设置图像为背景 background-position:设置图像的起始位置 background-repeat:设置图像是否重复 background-size：设置背景的大小/contain:图片包含在其中/cover：图片等比例缩放

CSS Sprite雪碧图/精灵图

指将不同的图片/图标合并在一张图上
使用CSS Sprite可以减少网络的请求，提高网页的加载性能 inline-block属性：即呈现出inline的特性（不占据一整行，宽度由内容宽度决定）有呈现出block属性（可以设置宽高，内边距）

inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?

我们知道inline元素是以行内元素显示，block是指以块级元素显示。 inline的元素好处宽度是有自己的内容决定，但是不能设置宽高，内外边距 block的元素好处是可以设置宽高，内外边距，内容是从上倒下的。给元素设置为inline-block属性是将元素同时具备这两种属性。解决缝隙：

相邻的元素之间不要有空格
父级元素设置：font-size: 0; 子元素正常设置font-size 解决对齐：默认情况下是以文字的基线对齐的，通过设置vertical-align: bottom/top来实现顶端或者低端的对齐

icon的实现方式：

最朴素的一种方式：直接图片引入，然后设置图片的宽度或者高度，然后通过设置vertical设置对齐方式
精灵图：通过background-position:进行调节图片的位置
icon-font （1）制作字体文件（2）声明font-family 1>使用本地链接 2>使用cdn （3）使用font-family：1>使用HTML实体 2>使用CSS：before
svg

浮动

清除浮动的代码：

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

文字是不受浮动影响的*
BFC清理浮动： Block Format Content
触发 BFC 的条件如下： 1.根元素(整个页面就是一个大的BFC)； 2.float为 left | right； 3.overflow为 hidden | auto | scroll； 4.display为 inline-block | table-cell | table-caption | flex | inline-flex； 5.position为 absolute | fixed；

浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?

浮动的元素脱离了文档流
浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个任意非浮动元素靠齐
浮动元素后面的内联元素会向此浮动元素的外边距靠齐影响：父容器：无法撑开父元素，导致父元素坍塌其他浮动元素：在同一个方向上，如果一个元素发生了浮动，那么同方向上其他浮动元素会紧随其后面。不同方向上，不会发生影响；但是孔家不够的情况下会被挤下去。普通元素：如果为块级元素，则会忽略浮动占据它的位置，元素会处在浮动元素的下层。如果为内联元素，则会环绕浮动元素排列文字：文字是不受浮动元素影响的，文字会围绕浮动的元素排列
清除浮动指什么? 如何清除浮动? 两种以上方法

浮动会让元素脱离文档流，浮动不再占据文档流的位置，也使浮动元素周围的元素表现的如同浮动元素不存在一样，给布局带来了一些副作用，清除浮动就是解决浮动的坍塌行为。（1）
```
.clearfix:after{
content: '';
display: block;
clear: both;
}
```
（2）在结尾处加一个空的div

.clearfix{clear:both}

JackWong992 / article