css学习笔记

一、css四种引入方式

1.内联style属性
2.style标签
3.外部文件css link引入
4.css样式表中引入 @import url(./b.css);

二、浮动的清除

子元素浮动，父元素会崩塌
给父元素添加一个类：

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

就可以解决崩塌问题。

三.其他注意事项

1.背景图网站:https://alpha.wallhaven.cc/
2..div（块级）的高度是由其内部文档流元素的高度总和决定的。
文档流：文档内元素的流动方向

1.内联元素从左向右水平流动宽度不够就换行
2.块级元素占一行从上到下垂直流动

3.tip:给元素添加上边框用来调试
4.element{word-break:break-all}中文宽度不够时会被截断
element{word-break:break-word}英文单词容器宽度不够时会被截断
5.字体大小指的是：文字最高点到文字最低点距离；内联元素行高（建议行高）一般是字体大小的1.4em(1.4倍)。
四线普 基线对齐
6.高度尽量不要固定死，会出bug；尽量让内容充起高度，同时宽度也尽量不要写100%；
7.背景图片尺寸background-size:cover;背景图充满
8.css三角形

div{
  border:10px solid red;
  width:0px;
  height:0px;
  border-color:black transparent transparent yellow;
  border-top-width:0;
}

9.position:fixed元素脱离了文档流，会造成宽度（跨度没有固定）坍塌
10.vertical-align:top;垂直对齐方式（顶部）
11.非空标签都有伪类
默认都有一个::before和::after
例子div::before{content:”;display:block;}.还有清除浮动的；
12.盒子模型

content-box：width=content
border-box(对元素使用：box-sizing:border-box)：width=content的宽度+padding+border
13.内联元素的margin-top,margin-bottom不起作用；
14.inline-block属性可能会导致底部出现一空隙，添加：vaetical-align:top;即可解决；