css笔记

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 合并的情况：
    前提 ： 未脱离文档流的块级元素，垂直方向的外边距
  1. 垂直毗邻的兄弟元素之间：
    垂直相邻元素之间的外边距会发生合并，除非两者是由于清除浮动后才在视觉上垂直毗邻:
<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

  1. 父元素与其第一个以及最后一个子元素之间
    和第一个子元素合并要求: 父元素与子元素之间不存在间隔(border/padding/行内内容)，没有bfc,没有清除浮动
    和最后一个子元素的合并: 不存在间隔

  2. 一个空块级元素的上下外边距
    当一个块级元素自身上下外边距中间没有间隔时(没有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);
}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 14,179评论 1赞 92
  • CSS 笔记
    CSS 指层叠样式表（Cascading Style Sheets），是一种用来为结构化文档（如 HTML 文档或...
    神齐阅读 2,233评论 0赞 14
  • CSS基础
    CSS 是什么 css(Cascading Style Sheets)，层叠样式表，选择器{属性:值；属性：值}h...
    崔敏嫣阅读 1,578评论 0赞 5
  • CSS相关总结
    一、CSS入门 1、css选择器 选择器的作用是“用于确定（选定）要进行样式设定的标签（元素）”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,733评论 0赞 6
  • 更新第二天
    今天是中国传统的七夕，我跟Belinda吃了水果餐，去年的情人节是如何过的我已经不记得了，不过没有情人的情人节我也...
    陈彦乔的简书空间阅读 242评论 0赞 0

友情链接更多精彩内容