CSS层叠样式总结

最新推荐文章于 2024-01-09 20:49:39 发布

桃子&果然

最新推荐文章于 2024-01-09 20:49:39 发布

阅读量399

点赞数

分类专栏：前端学习总结文章标签： css html5 前端

本文链接：https://blog.csdn.net/sinat_31420295/article/details/118534032

版权

前端学习总结专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS 层叠样式表

如何在页面中引入CSS

行内式

标签的style属性，不推荐使用，少量的样式可以这样写。结构和样式分开

内嵌式

在 head 标签内部放置 style 标签。与行内式差不多，但是这里注意⚠️是不支持嵌套的。

<head>
  <style>
    选择器:{
      k:v;
      k:v;
    }
  </style>
</head>

外链式

把CSS单独放在一个或者多个文件中

引入的语法：

<head>
  <link rel="stylesheet" href="style.css">
</head>

CSS 选择器

标签选择器标签名

直接选择到所有的标签

h1 {
  color:red;
}

ID选择器

选择到ID为XXX的元素

#box2 {
  color:skyblue;
}

类选择器

将样式提取到一类,复用

.f30{
  font-size:30px;
}

通配符选择器

*选择所有的元素

* {
  padding:0;
  margin:0;
}
/*
* *选择所有的标签
*/

复合选择器

并集选择器（群组选择器）
```
p,div,h2{
  background-color:red;
}
```

交集选择器（同时满足的情况）

li.f30{
  font-size:30px;
}
/* 表示li并且class=f30 的生效 
*/

后代选择器（特殊的交集，注意⚠️这里有空格，交集选择器没有空格）

/* div的后代中class=f30的生效。不需要连续*/
div .f30{
  font-size:30px;
}

/*这样的选择方式是，必须是亲儿子*/
div > .f30{
  font-size:30px;
}

书上说：一个人看见你笑他就跟着笑，这个人不是傻子就是喜欢你

常用CSS属性

text-decoration:设置文字的装饰效果
- none 表示没有下划线
- underline 加下划线
- overline 上划线
- line-through 中划线
text-indent：设置文本首行缩进
- 32px 首行缩进32px（针对文字大小确定）
- 2em em是相对单位，相对于当前元素的font-size
font-weight：设置文字加粗（取值100-700之间）
- normal普通相当于400
- bold 加粗相当于700
font-style：设置字体样式
- italic：文字倾斜
- normal：正常
font-family：设置字体（假如字体有特殊符号，必须要用引号引起来）
- 宋体、微软雅黑
- 中英文都可以
- 多个字体用逗号隔开。把最保险的放在最后
line-height：设置行高，文字行与行之间的高度，通常用它来实现垂直居中（单行文本垂直居中，一般设置为line-height= height即可）
复合属性：
- font：italic 400 20px/20px。（字体样式、加粗、字号、行高、字体【宋体】）字号和字体同时具有才可以简写
opacity: 透明度设置（0 完全透明、1 完全不透明）（opacity有兼容性问题。所以为了解决兼容性问题，一般加上如下代码fliter:alpha(opacity=30)）

背景（background）

background-color 背景颜色

background-color:red设置背景颜色即可

background 背景图

background-image:url(abc.img) 。

背景图片默认会平铺（即如果div足够大，超过了图片的大小，就会重复展示。）

background-repeat:no-repeat 用来解决平铺的问题，没有背景图的地方则用背景颜色填充（所以可以让美工切1px但是很长的图，然后平铺，减小网络开销）

background-repeat：

repeat（默认）
no-repeat 不平铺
repeat-x X方向平铺
repeat-y Y方向平铺

background-position背景图的定位

正的就向右向下移动，反之向左向上
可以使用具体的像素也可以使用方位名词：
- left、right、center、top、bottom
也可以使用百分比

background-attachment （有兼容性问题）

background-attachment：fixed背景图固定

简写：background: red url(a.jpeg) 0,0 no-repeat fixed 红色背景、图片地址、定位、不重复、固定

overflow 属性

overflow 本意是处理多余的内容，但是这个属性会有一些特殊的用法

基本用法

overflow:hidden让溢出的内容隐藏起来
overflow:visable 让溢出的内容可见
overflow:scroll 多余内容显示滚动条（内容如果多的时候有滚动条，少的时候滚动条不能用，但是会有占位，还是会展示出来）
overflow:auto 自动，溢出的时候才有滚动条，不溢出没有滚动条（根据内容灵活展示）

偏方

清除父子塌陷问题（给父级增加overflow:hidden）
清除float的影响（给父级增加overflow:hidden）

vertical-align 属性

vertical-align 属性设置标签的垂直对齐方式(一般用来调整图片与文字或者图片与图片在垂直方向上的对齐方式)只能用于行内或者行内块元素

middle 居中对齐
top 顶部对齐
bottom 底部对齐
base-line 基线对齐

你后来藏匿的，认为傻气的，故意说不的，哪一桩不是你爱过的？

元素的显示模式

元素显示模式分类

按照元素的表现特性，可以将元素划分为三大类型：块级元素、行内元素、行内块元素

块级元素

块级元素：div、p、li、dd、dt、h1~h6…

元素的特点：

独占一行
设置宽高有效果（padding、margin、line-height）
不设置宽度默认是父级的百分百

行内元素

行内元素：**span、em, i, strong, b, a **

元素特点：

可以与其他行内元素并排
设置宽高无效（不支持垂直方向的padding和margin，但是左右的是支持的。设置padding-top会撑开，但是是向上的撑开，而不是向下的）设置line-height无效，但是还是会将高度撑起来，但是对它本身是无效的。
尺寸靠内容撑开
行高line-height对他生效
margin：0 auto 对其无效。因为这个只对有宽度的块级元素生效

行内块元素

行内块元素：img

元素特点：

可以与其他行内元素或者行内块元素并排
可以设置宽高

显示模式的转换

display：改变元素的显示模式，取值如下：

none 不展示
block 块级元素
inline 行内元素
inline-block 行内块元素

盒子模型

绝大多数的标签都可以看作是有宽高的盒子。五个重要的属性width、height、padding、margin、border

width指的是内容的宽度，height指的是内容的高度。注意⚠️：不是盒子的真实宽度和高度而是内容的高度和宽度
padding 指的是盒子的内边距。指的是盒子内容到边框的距离
border 指的是边框的样式。border:1px solid #000 一像素，实心，黑色
- 三要素划分：
  - border-width 边框宽度
  - border-style 边框样式(solid实线、dashed虚线、dotted点状、double双实线)
  - border-color 边框颜色
- 方向划分
  - border-left 左边框
  - border-right 右边框
  - border-top 上边框
  - border-bottom 下边框

margin 外边距。相邻元素之间的距离

用margin实现有宽度的块级元素水平居中：margin-left:auto;margin-right:auto 或者margin：0 auto;
上下居中margin是不能做的

margin父子塌陷问题：

当父元素没有设置padding、border、或者内容时，给儿子设置的垂直margin会传叠加（传递）给父亲

<style>
  .father{
    width:100px;
    height:100px;
    background-color:red;
  }
  .son{
    width:50px;
    height:50px;
    background-color:green;
    margin-top:20px;
  }
  
  /* 解决方案:  转化为父亲的padding
  但是注意，加了 padding之后，父亲的height要相应的减少一定的数值，因为要保证盒子的整体不变
  */
  
  .father{
    width:100px;
    height:80px;
    background-color:red;
    padding-top:20px;
  }
  .son{
    width:50px;
    height:50px;
    background-color:green;
  }
  
  /* 解决方案：给父亲增加overflow：hidden */
  .father{
    width:100px;
    height:80px;
    background-color:red;
    overflow：hidden;
  }
  .son{
    width:50px;
    height:50px;
    background-color:green;
    padding-top:20px;
  }
</style>

<body>
  <div class="father">
    <div class = "son">
      	想要的是儿子距离父亲的上边距有20px；但是结果会是整体距离上面20px；
      	此时，如果给父亲元素设置内容、边框、或者padding，就会正常。
      	一旦发生塌陷，如果父亲也有margin-top：30px；那会整体向下30px，以父子中大的值为准，不会叠加
    </div>
  </div>
</body>

解决办法：
- 将儿子的margin 转化为父亲的padding，但是转化的时候注意不要撑开父亲的高度和宽度。（不要改变父亲的长宽）
- 给父亲设置一个overflow：hidden属性(触发了BFC，让元素以块级元素展示，margin都不生效了。***BFC***有空查一查)

兄弟之间margin塌陷问题

兄弟之间，垂直方向上，一个设置margin-bottom、一个设置margin-top会出现塌陷问题。还是以数值比较大的为准。

<style>
  /*初始化样子*/
  .box1{
    width:100px;
    height:100px;
    background-color:red;
    margin-bottom:30px;
  }
  .box2{
    width:50px;
    height:50px;
    background-color:green;
    margin-top:20px;
  }
  
  /* 解决方案:  全部设置到一个元素上即可*/
  
  .box1{
    width:100px;
    height:80px;
    background-color:red;
    margin-bottom:60px;
  }
  .box2{
    width:50px;
    height:50px;
    background-color:green;
  }
  
</style>
<body>
  <div class="box1">
  </div>
  <div class = "box2">
  </div>
</body>

刚刚好，看见你幸福的样子，于是幸福着你的幸福

浮动

空白折叠现象

为什么要有浮动？当我想要实现两个有宽高的元素并排的时候，怎么办呢？

想到的方法就是将两个div转成行内块元素，这样既可以并排，又可以设置宽高。但是当我们这么做的时候，在两个行内块之间会出现一个空白。这个空白是怎么产生的呢？这个空白是因为在两个div之间有回车换行，这个回车换行被当作了文本来解析。当然可以将两个行内块元素并排写，但是这样并不是最好的办法。而浮动的诞生就可以解决上面的问题，而且没有空白，可以设置宽高。

浮动的特点

相互贴靠，遇到空间不够的时候会换行（其实是找上一个元素，上一个不能停靠，就找上上个，直到找到为止）
浮动的元素可以设置宽高，比如span也可以设置宽高
浮动元素脱离标准文档流。不占空间，不再受显示模式的限制，不再区分块级还是行级

注意：

谁要浮动就在谁的身上加float。比如ul中的li要浮动，要加在li上

浮动的问题

浮动元素脱标，所以使用浮动以后，会对后面的元素布局有影响
浮动元素也不能撑开父亲的高度

清除浮动影响方法

给浮动元素的父亲设置高度：既然孩子脱标，不能撑开父亲，想要不影响后面的布局，那就给父亲设置一个和儿子一样的高度（不灵活，很少用）

clear:both：在父亲的末尾增加一个元素，并且给元素设置属性：clear:both。此时可以清除浮动，并且父亲的高度也会被撑开。但是有缺点：多了一个HTML结构（结构在渲染的时候影响性能，越少越好）

<style>
    .wrap{
        border:4px solid red;
    }
    .wrap div.div1,.wrap div.div2{
        width:200px;
        height:200px;
        float:left;
    }
    .wrap .div3{
        /*清除左右浮动，左边就是left，右边是right*/
        clear:both;
    }
    .wrap2{
        width:100px;
        height:100px;
        background-color:green;
    }
</style>
<body>
    <div class='wrap'>
        <div class='div1'>
            
        </div>
        <div class='div2'>
            
        </div>
        <div class='div3'>
            注意这个元素他不能浮动，也不能有任何的内容
        </div>
    </div>
    <div class = 'wrap2'>
        
    </div>
</body>

给浮动的父级元素增加一个属性：overflow:hidden(小偏方、它的本意还是说让多余的内容隐藏起来)
使用CSS增加伪元素（伪元素不是真的增加元素。默认增加的是一个行内元素 like span ）(但是直接这样写不能复用。所以还是要定义一个class)

<style>
    .box{
      border: 4px solid #fff;
    }
    /* 尾函数增加元素 */
    .box::after{
      /* 这个属性一定要写，内容自定义。当前情况不用写 */
      content: '';
      clear: both;
      display: block;
    }
    .box div{
      width: 100px;
      height: 100px;
      float: left;
    }
    .son1{
      background-color: #234532;
    }
    .son2{
      background-color: aqua;
    }
    .box2{
      width: 300px;
      height: 300px;
      background-color: burlywood;
    }
</style>
<body>
    <div class="box">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
    <div class="box2"></div>
</body>

最优方法（可重复使用）

<style>
  .box{
      border: 4px solid #fff;
    }
  
	/* class中带有clear-fix的末尾会自动加以下样式 */
  .clear-fix::after{
    content: '';
    clear: both;
    display: block;
  }
  /* clear:both有兼容性问题，在IE7以下是不认识的，所以有下面的写法 */
  .clear-fix{
    *zoom: 1;
  }
  
  .box div{
      width: 100px;
      height: 100px;
      float: left;
    }
    .son1{
      background-color: #234532;
    }
    .son2{
      background-color: aqua;
    }
    .box2{
      width: 300px;
      height: 300px;
      background-color: burlywood;
    }
</style>

<body>
    <div class="box clear-fix">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
    <div class="box2"></div>
</body>

不要愁老之将至，你老了一定很可爱。

定位 Position

position:static（默认值）

相对定位 position:relative

参考点

⚠️相对定位是相对于自己原来的位置进行定位。

position:relative;
top:50px;
left:50px;
/*此时盒子会相对于原来的位置向右下角移动*/

相对定位的特点

相对定位的元素不会脱标
原来元素所占的空间还在（老家留坑）
可以提升层级（会把其他标准流元素压住）

相对定位使用

相对于自己的位置做微调
主要是用来配合绝对定位来使用。

绝对定位 position:absolute

参考点

⚠️ 绝对定位以祖先的具有定位的元素（只要不是默认的static就可以）为参考点进行位置的定位。

假如该绝对定位的元素没有定位的祖先元素，则以body作为参考点。
假如具有定位的祖先，则以最近的具有定位的祖先为参考点

绝对定位的特点

元素脱标
假如不设置宽度，则由内容来撑开
可以提升层级

绝对定位的使用

子绝父相（父亲相对，儿子绝对）父亲相对定位，结构比较稳定。

固定定位

参考点

⚠️固定定位参考的是浏览器的窗口的左上角

绝对定位特点

脱标
层级提高（谁在后面，谁的层级就会高一些）

固定定位使用

一般是想把某个东西固定到浏览器某个位置时使用，比如***返回顶部***

z-index

z-index 是设置定位元素层级的（普通元素static是无效的）

Z-index 默认值为0；数值为整数。值越大，越在上面

z-index值相同的话，看HTML结构，谁在后面谁就在上面

注意⚠️：从父现象

当两个元素进行重叠的时候，不一定z-index大的就在上面。会先比较父亲的z-index。值比较大的在上面，如果父亲的z-index值一样，则比较儿子的z-index。

<!-- 样式 -->
<style>
    div{
      width: 200px;
      height: 200px;
      background-color: burlywood;
      position: relative;
      margin: 100px;
    }

    .box1{
      z-index: 1;
    }
    .box2{
      z-index: 0;
    }

    .son1{
      width: 120px;
      height: 120px;
      background-color: chartreuse;
      position: absolute;
      top: 150px;
      left: 330px;
      z-index: 0;
    }
    .son2{
      width: 120px;
      height: 120px;
      background-color:coral;
      position: absolute;
      top: -50px;
      left: 330px;
      z-index: 99;
  }
</style>
<!-- 结构 -->
<!-- 此时两个儿子重叠在一起，虽然son2的层级高，但是box2的层级比较低，所以son1在上面 -->
<body>
    <div class="box1">
        <p class="son1"></p>
    </div>
    <div class="box2">
        <p class="son2">
        </p>
    </div>
</body>

BFC

Block Formatting Context 块级格式化上下文

指的是页面的一个渲染区域，拥有自己的渲染规则。它决定了其子标签如何进行定位以及与其他标签的相互关系和作用

一个独立的 块级渲染区域，只有块级盒子参与。它规定了内部的block_level ,BOX 如何布局，并且这个区域与外部毫不相干。

如何生成BFC

根元素
float属性不为none（即设置了float）
overflow属性不为visible
display属性值为inline-block
position属性值为 absolute或者fixed

BFC渲染特点

内部标签会在垂直方向一个接一个放置。
垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的垂直margin会发生重叠（所以这就是为什么会发生兄弟和父子margin塌陷。因为同处于html的BFC）
每个标签的左外边距，与包含块的左边界相接触，从左到右，即便浮动也是如此（从左到右的排列）（这句话不太明白，但是似乎是这样：因为触发了BFC所以这个BFC就可以叫做是块了。所谓的包含块的左边界，可能指的是包含这个BFC区域的左边界，也就是BFC的父级）
BFC的高度，浮动的子元素也会参与计算。
BFC是一个隔离的独立的容器，容器里面的子元素，不会影响外面的标签

BFC的用处

解决margin塌陷问题（虽然会带来塌陷问题，但是只要我们触发新的BFC就解决了塌陷问题）
清除浮动的影响（原因参考特点4、5）
实现两列三列布局
避免文字环绕

<style>
    .box{
      width: 200px;
      border: 1px solid green;
    }
    .float-box{
      float: left;
      width: 100px;
      height: 100px;
      background-color: gray;
    }
    /* 增加以下代码来解决环绕问题 */
    .box > p{
      overflow: hidden;
    }
</style>

<body>
    <div class="box">
        <div class="float-box"></div>
        <p>这是文字文字这是文字文字这是文字文字这是文字文字这是文字文字这是文字文字这是文字文字这是文字文字这是文字文字这是文字文字这是文字文字这是文字文字这是文字文字</p>
    </div>
</body>