css笔记

作者: Gaarahan | 来源:发表于2019-04-18 11:36 被阅读0次

0. 关于百分比宽高

在使用百分比指定元素的宽高时，相对于父元素的宽高值会因为子元素定位方式的不同而不同
子元素是relative,sticky,static时，百分比相对于父元素的content-box的宽高值
子元素是absolute 时，百分比相对于父元素的padding-box的宽高值

<div class="con">
  <div id="son1">
  </div>
  <div id="son2">
  </div>
</div>

.con{
  width:100px;
  height:100px;
  padding:25px;
  margin:25px;
  position:relative;
}
#son1{
  width:100%; /*该元素是相对于父元素的content-box的宽高值，为100px*/
  height:100%;
}
#son2{
  position:absolute;
  width:100%; /*该元素相对于父元素的padding-box,为150px*/
  height:100%;
}

1.sticky 粘性定位

粘性定位可以理解为一种特殊的固定定位，它相对的是父元素的viweport(视窗)，
需要注意的是，当使用粘性定位时，指定的top,left等值，不再是规定元素的位置，而是
一个判断元素是否进行定位固定的阀值

例如设置sticky元素的top为10px时:
在元素相对于父元素的viewport的content的上边距离为10px之前，元素一直处于其原本所在
的位置，但当这个距离达到10px之后，元素会以类似fixed定位的形式固定在当前位置

常见的使用是在顶部栏之下的导航栏，顶部栏用来放置logo，网站标题等，只在页面的最顶端
出现，导航栏用来让用户无论何时，都可以点击，因此需要固定在窗口的最上面，一个简单
的演示如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>guide bar</title>
    <style type="text/css" media="all">
      .top-bar{
        height:50px;
        background-color:red;
      }
      .guide-bar{
        height:50px;
        background-color:blue;
        /*使用粘性定位，当元素到达视窗顶部时，让其固定*/
        position:sticky;
        top:0;
      }
      .content{
        background-color:green;
        height:2000px;
      }
      </style>
  </head>
  <body>
    <div class="top-bar">
      This is Top bar
    </div>
    <div class="guide-bar">
      This is Guide bar
    </div>
    <div class="content">
      This is content
    </div>
  </body>
</html>

2. margin合并

指块级元素之间的相邻的上下margin会产生的合并现象，合并之后的margin大小是原本margin中
较大的值
注意浮动元素(float)及绝对定位的元素(absolute,fixed)，因为脱离了文档流，
不会发生margin合并现象
margin 合并的情况：
前提： 未脱离文档流的块级元素，垂直方向的外边距

垂直毗邻的兄弟元素之间：
垂直相邻元素之间的外边距会发生合并，除非两者是由于清除浮动后才在视觉上垂直毗邻:

<div>
  <p class="a">This is paragraph A</p>
  <p class="b">This is paragraph B</p>
</div>

`html{
  font-size:10px;
}
div{
  border-top:1px solid red;
  margin-top:2rem;
}
.a{
  margin:0;
  font-size:18px;
  background-color:pink;
  height:5rem;
  margin-bottom:3rem;
  float:left;
}
.b{
  font-size:18px;
  background-color:grey;
  height:5rem;
  margin-top:4rem;
  clear:both;
}
.c{
  font-size:18px;
  background-color:grey;
  height:5rem;
  margin-top:4rem;
    clear:both;
  }

在上面的示例中，两个段落之间的间距是3rem,原因如下：

非浮动元素使用清除浮动属性，会将当前元素的border边界挪到浮动元素的margin边界下方，
因此段落B在段落A的margin的正下方

逐渐增加B段落的上边距时，我们会发现在B的margin-top小于8rem时，B的位置都不变，而当
其大于8rem时，B会开始下移 :

通过清除浮动，B的border位置已经确定，此时上margin会往上找，找到其文档流中的上一个
内容，即父元素的border-top，只有当上margin触及该border后，继续增加margin会将元素向下挤
此时margin-top(b) = margin-bottom(a) + height(a) = 8rem

父元素与其第一个以及最后一个子元素之间
和第一个子元素合并要求: 父元素与子元素之间不存在间隔(border/padding/行内内容)，没有bfc,没有清除浮动
和最后一个子元素的合并: 不存在间隔
一个空块级元素的上下外边距
当一个块级元素自身上下外边距中间没有间隔时(没有padding border content ,未设置height,min-height)，
也会出现margin合并

<div class="a"></div>
<div class="con"></div>
<div class="b"></div>

.con{
  margin:10px;
}
.a{
  height:50px;
  background-color:green;
}
.b{
  height:50px;
  background-color:green;
}

margin合并后
1. 若原有margin皆是正值，新的外边距是原margin中的最大值
2. 若原有的margin一正一负，正负的margin会相互抵消，新的margin是其中最大值
  加上最小值的计算结果
3. 若原有的margin皆是负值，新的margin是其中最小值

<div>
  <p class="a">this is paragraph a</p>
  <p class="b">this is paragraph b</p>
  <p class="c">this is paragraph c</p>
  <p class="d">this is paragraph d</p>
</div>

.a{
  height:80px;
  margin-bottom:30px;
  background-color:pink;
}
.b{
  height:80px;
  margin-top:50px;
  margin-bottom:-30px;
  background-color:red;
}
.c{
  height:80px;
  margin-top:50px;
  margin-bottom:-20px;
  background-color:blue;
  border:5px solid black;
}
.d{
  height:80px;
  margin-top:-30px;
  background-color:gray;
}

如上，a,b之间的margin皆为正 => margin(a,b) = max(50,30) = 50px
b,c之间的margin一正一负 => margin(b,c) = 50px + (-30px) = 20px
c,d之间的margin皆为负值 => margin(c,d) = min(-30,-20) = -30px

块级格式化上下文BFC

FC是一块独立的渲染区域，在其中有一套独立的渲染规则，BFC是针对块级元素的渲染规则

关于 :nth-child

选择器:nth-child()用法如下:
A B:nth-child(x)
以前的错误理解：选择A元素的第x个满足B的子元素
实际：选择A元素的第x个子元素，且该元素必须满足B

<div class="a">
  <span class="b">hello</span>
  <span class="c">hello</span>
  <span class="b">hello</span>
</div>

对于上面的html，有这样的选择：

.a .c:nth-child(1){} //无符合
.a .b:nth-child(1){} //第一个
.a .b:nth-child(2){} //无符合
.a .c:nth-child(2){} //第二个
.a .b:nth-child(3){} //第三个

同样机制的还有nth-last-child(),last-child(),first-child()

css中的 calc() 函数

使用calc() 函数，可以完成在css中进行各种值(长度，频率，角度，时间，百分比，数字)的计算
同一种值的不同单位可以同时写在函数中，解析器会自动完成计算. eg:width:calc(100% - 10px);
使用加减符号时，左右都必须有括号
该函数可以同css中的自定义变量一起使用
eg.

{
  --w:50px;
  width: calc(var(--w) - 10px);
}

网友评论

觉得很有用

本文标题：css笔记

本文链接：https://www.haomeiwen.com/subject/bnuzwqtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！