2018-09-03CSS随笔

1. 添加CSS的四种方式

1. 内联style 属性

2. style 标签

3. 外部文件css      例如：<link rel="stylesheet" href="./a.css" >

4. @import url(./a.css) ;

2. 如何做横向导航栏

1. 给所有子元素添加 float:left

2. 给其父元素添加 clearfix 类
   例如：

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

3.a 标签继承

a {  color : inherit ;
}

4. a 标签下划线取消的属性

a{ text-decoration: none; 
}

5.  写类的样式时，若类的名称取得太简单，容易影响其他地方

要具体，例如：

.topNavBar  .logo .card{  font-size:24px;  font-family: "Arial Black" ;
}

6. 公有的属性可以写在父类上，以减少代码量，通过继承 使子类拥有父类相同属性；

7. 两个span标签之间若存在间隙，不管多大的间隙，系统都默认给出一个空格的距离；

8. margin 和 padding 的区别：

margin ： 外边距
padding : 内边距
margin : 10px 20px 10px 20px ;   遵从 ：上  右 下 左
padding: 10px 20px 10px 20px;   遵从： 上 右 下 左

9. body 默认会有一个 8px margin 边框。

10. CSS全称： Cascading Style Sheet

11. 搜索好看的壁纸可以谷歌 wallhaven

12. 背景图如何放置

<div class="banner" style="background-image:url(./img/rs-cover.jpg)"></div>

13. 一个元素的高度是由什么决定的

高度由其内部文档流元素的高度总和决定

14. 文档流是什么：文档内元素的流动方向

15. 内联元素： 从左往右流动，

例如span标签
如果流动受到阻碍，则换行继续流
若内容是英文，长度很长，那么宽度不够时，不会换行。
若想让长英文换行，加一个css样式 element.style{
word-break:break-all;
}

16. 块级元素： 每一个块占一行，所有的块依次往下流动

不管元素长度多么短，都是占用一行的
若想让块级元素在一行，可以用float:left 父级元素加clearfix css达到目的
css 3 新出了一个属性：

div{display:inline-block;
}

17. 如何调试css 给元素标签 加border     --》简称 border 大法！！！

span{ border:1px solid red 
}

18. 建议行高：每种字体的建议行高都不一样。

19. font-size :100px;

100指的是什么，指的是字的最高点距离字的最低点的大小。

20. 块级元素的行高由其内部文档流元素高度决定的

内联元素的高度跟字体与设计师设计的字体高度有关。比较难确定。

line-height 比 font-size 大点就正常行高 ,由 line-height 决定
若 font-size 很大  那就不好说了。玄学。

21. 最容易出现bug的 属性： height  情非得已千万写高度

22. 脱离文档流 相对于屏幕固定；

.topNavBar{  position :fixed;  top:0;  left:0;
}

23. 让背景图自适应，居中：

.banner{   height:515px;   background-image: url(./img/rs-cover.jpg);   background-position: center center;   backgroung-size: cover;
}

24. 给背景图加一个半透明效果：

.banner .mask {   height: 515px;   background-color: rgba(0,0,0,0.8);
}

25. 让卡片水平居中：

.userCard{  margin-left: auto;  margin-right: auto;
}

26. 内联元素不接受宽高，如何让他接受，加一个属性即可

span{  display:inline-block;
}

27. 考点：如何用css画一个三角形

div{  border:10px solid red;  width:0px;  height:0px;  border-top-color:black;  border-right-color:blue;  border-left-color:green;  border-top-width:0px;
}div{border: 100px solid transparent;width: 0px;height:0px;border-left-color: #E6686A;border-top-width:0px;
}

28. 如何把方的变为圆的 border-radius:50%;

div{border: 4px solid red;border-radius:50%;
}

作者：饥人谷_鱼鱼鱼
链接：https://www.jianshu.com/p/268ab2d7602a