CSS

CSS

层叠样式表（英语：Cascading Style Sheets，简写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. CSS 3
   从 2011 年开始 CSS 被分为多个模块单独升级，统称为 CSS 3。这些模块有：

• CSS 选择器 level 3
• CSS 媒体查询 level 3
• CSS Color level 3
• 更多请 搜索 CSS spec

CSS引入方法

1. style 属性

<h1 style="text-align: center; color: red;">你好</h1>

2. style标签

<style>
    p{background-color:red;
    color: black}
</style>

3. css link

<link rel="stylesheet" type="text/css" href="./a.css">

4. css import

<style type="text/css">
    @import url("./a.css");
</style>

横向布局（float + clearfix）

给子元素添加float: left;，给父元素添加clearfix

<nav>
  <ul class="clearfix">
      <li style="float: left;"><a href="#">关于</a></li>
      <li><a href="#">技能</a></li>
      <li><a href="#">作品</a></li>
      <li><a href="#">博客</a></li>
      <li><a href="#">日历</a></li>
      <li><a href="#">联系方式</a></li>
      <li><a href="#">其他</a></li>
  </ul>
</nav>

clearfix

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

常见CSS属性

1. font-family、font-size 、font-weight
2. ul、body 的默认 margin 和 padding

一般浏览器中都对body标签进行默认的margin设置为8px，不同的浏览器会设置成不同的值，它是由浏览器的user-agent-stylesheet提供的，如果我们要修改body的默认值，只要覆盖其css样式即可:

body {
  margin: 0px;
  padding: 0px;
}

3. color、background-color、margin、padding
4. line-height

div高度

div高度由其内部文档流元素的高度总和决定。
文档流：文档内元素流动的方向

• 内联元素从左往右流动，如果遇到宽度不足，则换行继续从左往右。

遇到长的英文单词，不会自己打断，使用word-break: break-all可以打断。

• 块级元素，每一个块都占一行，从上往下流动。

脱离文档流

1. position: fixed;

.topNavBar {
  padding: 22px 0px 22px 0px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

• 影响div高度。
• 脱离后会收缩，需要设置宽度。
• 需要设置宽度时，可以单独设置一个新的div（将元素移动到其内部）来调节。

2. position: relative; position: absolute;
   给子元素添加 position: absolute;
   给父元素添加 position: relative;

.usercard .welcome {
  background-color: #e6686a;
  color: white;
  display: inline-block;
  padding: 5px 15px;
  position: relative;
}
.usercard .welcome .triangle {
  display: block;
  border: 8px solid transparent;
  width: 0px;
  border-left-color: #e6686a;
  border-top-width: 0px;
  position: absolute;
  left: 4px;
  top: 100%
}

3. position取值

• sticky
• absolute
• fixed
• relative
• static

CSS三角形

.triangle {
  border: 8px solid transparent;
  width: 0px;
  border-left-color: #e6686a;
  border-top-width: 0px;
}