CSS入门

一、什么是CSS？
1.两个人合作发明了CSS
1994年哈肯·维姆·莱提出了CSS的最初建议。伯特·波斯（Bert Bos）当时正在设计一个叫做”Argo”的浏览器，他们决定一起合作设计CSS。
2.W3C开始接管CSS
1997年初，W3C内组织了专门管CSS的工作组，其负责人是克里斯·里雷。
3.CSS 2.1
1998年5月W3C发表了CSS2
CSS2.1
修改了CSS2中的一些错误，删除了其中不被支持的内容和增加了一些已有的浏览器的扩展内容。
4.CSS3
从2011年开始CSS被分为多个模块单独升级，统称为CSS3。
·CSS选择器 level3
·CSS媒体查询level3
·CSS Color level3
现在兼容性最低IE8
5.css工具
·LESS CSS
一种简化、功能更多的CSS语言
·SASS
一种简化、功能更多的CSS语言
·PostCSS
一种CSS处理程序（修正CSS）

css的引入方式
1.内敛style属性
2.style标签
3.外链CSS
<link rel="stylesheet" href="./.style.css">
4.css中引入css
@import url(./.b.css);

二、CSS的使用
-1.元素的高度
block元素的高度是有其内部文档流元素的高度综合决定
inline元素的高度可以用line-height设置

文档流：文档内元素的流动方向。
inline"Z型"
block"I型"

文字断行：

中文

.cn {
    word-break: break-all;
}

英文

.en {
    word-break: break-word;
}

-2.绝对定位
使元素脱离文档流
方式i

.nav {
   position: fixed;
}

使用之后，盒子内元素会出现收缩。如果内部有float存在，会出bug。此时需要新盒子(div)将其包裹即可解决。
方式ii
其父级元素增加（参考HELLO下面的三角形）

.father {
     position: relative;
   
}

需要脱离的元素

.child {
     position: absolute;
     left: 5px; /*三角形定位*/
     top: 100%;
}

-3使一个div元素居中
设置该div

div {
     margin-left: auto;
     margin-right: auto;
}

-4调整一个块级元素的宽高
最好用padding调整，不要写width&height！不要写width&height不要写！width&height！，有BUG!
-5如何用CSS画一个三角形
css画图可以参考：https://css-tricks.com/
首先：

div {
     border: 100px solid transparent;
     width: 0px;
     border-top-color: pink;
     border-right-color: red;
     border-bottom-color: blue;
     border-left-color: orange;
}

图片1.png

然后：

div {
     border: 100px solid transparent;
     width: 0px;
     border-left-color: orange;
     border-top-width: 0px;
}

图片2.png

CSS入门

推荐阅读更多精彩内容