大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

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%;
}