CSS知识点

最新推荐文章于 2024-09-06 09:38:49 发布

萌新不会编程

最新推荐文章于 2024-09-06 09:38:49 发布

阅读量906

点赞数 33

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/2301_80382316/article/details/136123377

版权

各种显示模式

块级元素

块级标签代表的有：div、p、h等

特性：元素默认占一整行，宽度默认是父元素的宽度，高度默认由内容撑开，可以设置宽高

行内元素

行内级标签代表的有：a、span等

特性：一行可以显示多个，默认的宽度和高度均由内容撑开，不可以设置宽高

行内块元素

行内块级标签代表的有：input、button、select、img等

特性：一行可以显示多个，可以设置宽高

元素模式转换

css选择器：{display：block }  转块
css选择器：{display：inline-block } 转行内块
css选择器：{display：inline }  转行内

盒子和文本的水平垂直居中

盒子水平 + 垂直居中

flex布局（最简单）

父元素开启flex定位，并使用justify-content和align-items

.box-warpper {
  display: flex;
  justify-content: center;
  align-items: center;
}
12345

absloute 绝对定位（含两种定位方式）

子绝父相 + top | right + transform
子绝父相 + top | right | bottom | left + margin:auto

.box-warpper {
  position: relative;
}
.box-warpper .box {
  position: absolute;
  /* 定位方式 1 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 定位方式 2 */
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto; /*必须有auto，否则不生效*/
}

栅格布局 grid

父元素加入栅格，子元素margin: auto

.box-warpper {
  display: grid;
}
.box-warpper .box {
/* margin: 0 auto; 水平居中*/
/* margin: auto 0; 垂直居中*/
  margin: auto; /*水平+垂直居中*/
}

table-cell布局（不常用）

父元素必须设置宽高，不能用百分比。
父元素设置table-cell布局，文本水平居中，垂直居中
子元素设置margin：auto

.box-warpper {
  width: 500px;
  height: 500px;
  
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.box-warpper .box {
  margin: auto;
}

盒子内文本水平 + 垂直居中

文本水平居中

让div中文字水平居中：text-align: center;即可

文本垂直居中

单行文本垂直居中

如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可

  .box{
    height: 100px;
    line-height: 100px;
  }
1234

多行文本固定高度的居中

CSS中的确是有vertical-align属性，但是它只对HTML元素中拥有valign特性的元素才生效，例如表格元的"td"、“th”、“caption"等，而像"div”、"span"这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。

但是在CSS中还有一个display:table，所以我们可以使用这个属性来让"div"模拟"table"就可以使用vertical-align了。

注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上。

  .box{
    /* 子元素相关信息 */
    width: 100%;
    height: 100%;
    background-color: red;
    /* 设置定位相关 */
    display: table;
    span{
      text-align: center;
      display: table-cell;
      vertical-align: middle;
    }
  }

清除浮动

加额外标签

（主要方法）浮动元素后面加⼀个空标签，设置样式 clear:both;，左右两侧均不允许浮动元素

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度。

<style>/* 方法一： 浮动元素后⾯加⼀个空标签，设置样式 clear:both; */ 
.box {
    width:500px;
     height:500px;
    border:2px solid black;
}
.box-item {
    float:left;
    width:200px;
    height:200px;
    border:2px solid red;
}
.clear{
    clear:both;
}
</style>
<div class="box">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="clear"></div>
</div

定高法

给浮动元素的父元素设置高度大于或等于最高的浮动元素的高度，用于小板块，高度可以写死的部分

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

<style>
    /* 方法二：定⾼法 给浮动元素的⽗元素设置⾼度⼤于或等于最⾼的浮动元素的⾼度 */
    .box {
        width:500px;
        height:500px;
        border:2px solid black;
    }
    .box-item {
        float:left;
        width:200px;
        height:200px;
        border:2px solid red;
    }
</style>
<div class="box">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
</div>

父元素添加overflow:hidden

利用 overflow:hidden 清除浮动时，父元素里面不能有定位超出的元素，如果有，超出的部分会被隐藏。

原理：使用overflow:hidden时，浏览器会自动检查浮动区域的高度。

缺点：必须定义width或zoom:1，不能和position配合使用，因为内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

<style>
    /* 方法三： 给父级元素添加 overflow: hidden; */
    .box {
        width:500px;
        border:2px solid black;
        overflow:hidden;
    }
    .box-item {
        float:left;
        width:200px;
        height:200px;
        border:2px solid red;
    }
</style>
<div class="box">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
</div>

利用after伪元素清除浮动

<style>    
  .box {        
    width:500px;        
    border:2px solid black;    
  }    
  .box-item {        
    float:left;        
    width:200px;        
    height:200px;        
    border:2px solid red;    
  }    
  .clearfix::after {   /* 方法四：利⽤after伪元素清除浮动  */     
    content: "";
    clear: both;
    display: block;
  }
</style>
<div class="box clearfix">    
  <div class="box-item">1</div>    
  <div class="box-item">2</div>    
  <div class="box-item">3</div>    
  <div class="box-item">4</div>
</div>

注意：项目中我们常⽤after伪元素清除浮动，因为它不会额外增加标签，⽽且不会出现因为⽤overflow:hidden超出的部分会被隐藏，⽗元素⾼度也不⽤写死，我们只要在⻚⾯写⼀次清浮动的代码，在需要清浮动的位置加上 clearfix 类名就可以了。

父级div定义overflow:auto

原理：同overflow:hidden，使用overflow:auto时，浏览器会自动检查浮动区域的高度。

<style>    
  .box {        
    width:500px;        
    border:2px solid black; 
     overflow:auto;/*：方法五. 父级div定义overflow:auto;  */  
  }    
  .box-item {        
    float:left;        
    width:200px;        
    height:200px;        
    border:2px solid red;    
  } 
</style>  
<div class="box">    
  <div class="box-item">1</div>    
  <div class="box-item">2</div>    
  <div class="box-item">3</div>    
  <div class="box-item">4</div>
</div>