css笔记 一.css基本知识

css的继承

1.子父派生

div p{…}
这样div下面的子孙元素p都会继承该属性

2.直接派生

div > p{…}
这样只有作为div的儿子的p才能继承相关属性,孙子等子孙则不行

3.浏览器寻找派生节点顺序

浏览器寻找节点的顺序是从左至右的
例 : span section div p h1
实际上的寻找顺序是 h1 ==> p ==> div ==> section ==> span

选择器

1. 并列选择器

例:div.demo{…}
就只会选择class为demo的div标签

2.分组选择器

例: em strong > .demo,
strong p,
div{
…code
}
则三个分组共用同一代码块

3.父子选择器

例:div .demo{…}
会选择div下所有class为demo的元素
注意与并列选择器的区别就是,多了一个空格

css权重值(优先级):

首先以下的数据都是256进制的

选择方式	权重值
!important	Infinity
行间样式 (style)	1000
根据id选择	100
根据class选择	10
根据标签选择	1
*(通配符)	0

权重计算方式

<div id="outDiv" class="out">
	<p id="inP" class="in">123</p>
</div>

    #outDiv p{ //计算权重 : 1000 + 1
        background-color : red;
    }

    .out .in{ //计算权重 : 10 + 10
        background-color : green;
    }

元素类型

行级元素 :内容决定元素所占位置,不可通过css修改宽高

eg:span,a,strong,em

行级块元素 : 内容决定大小,可以改变宽高

eg:img

注意使用img时有个常见bug,当我们在一行上放置多张图片时,图片之间会有一定的间隙,这个间隙如果我们在开发阶段可以使用margin强行消除,但是当我们将前端所有代码去掉所有空格与回车压缩发给后端运行时,那些间隙又会消失,造成页面崩坏

原因:上面两种又被称为文本元素,在代码中有空格时,会导致元素之间文本分隔,造成空隙

块级元素 :独占一行,可以通过css修改宽高

eg: div,p,ul,ol
浮动流

浮动元素:使用float属性,导致元素产生了浮动流
注意:

所有产生了浮动流得元素,块级元素看不见它们
产生了bfc得元素以及文本类型得元素以及文本都能看得见浮动元素

伪元素:

html得一个标签生成时会有两个伪元素,这两个伪元素在html中不可见
但是在css中可以操作,并且可以被引擎渲染出来

   <span>牛</span>
   span::before{
       content: "中国"
   }

   span::after{
       content:",那还用说"
   }

//结果 :   中国牛,那还用说

注意

1.所有得伪元素都可以被当成正常得元素进行操作
2. 伪元素出生就是行级元素

使父元素包裹浮动元素

1.在子元素得最下方放置一个p标签等逻辑性得标签,给该标签属性clear=both从而清除浮动(不能使用,这样就修改了html结构,违反开发规范)

	<div class = "parent">
		<div class = "item"></div>
		<div class = "item"></div>
		<div class = "item"></div>
		<div class = "clear"></div>
	</div>

2.利用伪类,可以在父元素得伪元素中设置清除浮动

 parent::after{
    content:"";
    clear:both;
}

 <div class = "parent">
 	<div class = "item"></div>
 	<div class = "item"></div>
 	<div class = "item"></div>
 	<div class = "clear"></div>
 </div>

元素定位

absolute : 绝对定位

脱离原来位置(不占空间)进行定位
相对于有定位的最近的父级进行定位,没有则相对于document进行定位

relative : 相对定位

保留原来位置(占据对应空间)进行定位
相对于自己原来的位置进行定位
常用方式:(子绝父相)

fixed : 固定

<div class="fixed"></div>

.fixed{
    width: 100px;
    height: 100px;
    background-color: #fbf33d;
    position: fixed;
    left: 50%;
    top: 10%;
}

margin塌陷

在水平方向上,子元素的margin相对于父元素进行移动
但是在垂直方向上,子元素的margin却是相对于文档的,而且父子元素在垂直方向上取两者margin的最大值

 <div class="parent">
      <div class="son"></div>
  </div>
  .parent{
      height: 100px;
      width: 100px;
      background-color: red;
      margin: 200px 0 0 200px;
  }

  .son{
      height: 50px;
      width: 50px;
      background-color: black;
      margin-left:20px;/*子元素相对于父元素向右20像素*/
      margin-top:20px;/*没有任何作用*/
      margin-top:300px;/*父子整体相对于文档向下300像素*/
  }

解决方案:

1.在父元素上设置border-top(基本不用,会被产品经理与ui锤的)
2.父元素设置overflow:hidden
3.设置父元素display:inline-block
4.设置父元素position:absolute

margin合并

在兄弟元素的垂直方向上margin值得计算是合并得

  <div style = "margin-bottom=200px">123<div>
  <div style = "margin-top=100px">456<div>

结果两个div得间距只有200px而不是300px,
因为取得是兄弟元素间得最大值,而不是简单的累加
解决方案:

不解决!!!,自己好好计算margin值,别上下都设置margin

css常用知识点

1em = 1 * font-size

body默认margin值8px

浏览器默认字体大小16px

设置了float:right/left ,position:absolute得元素
系统会隐式得设置display:inline-block

行级元素只能嵌套行级元素(a标签不能嵌套a标签)
块级元素可以嵌套任意元素(p标签内不能嵌套块级元素)

当行级元素设置为display:inline-block后
外面的文本会与元素内的文本,底对齐