2021-07-22

最新推荐文章于 2022-12-23 00:33:22 发布

qq_45387173

最新推荐文章于 2022-12-23 00:33:22 发布

阅读量210

点赞数

分类专栏：前端文章标签： css css3

本文链接：https://blog.csdn.net/qq_45387173/article/details/118993187

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css

块级元素

块级元素总是从新行开始，并占据可用分全部宽度（尽可能的向左向右伸展）

行内元素

内联元素不从新开始，仅占用所需的宽度

Display

Display : :none;

通常与js一起用，以隐藏和显示元素，而无需删除和重新创建他们。

覆盖默认的Display值

每个元素都有一个默认值，但是可以覆盖他。

设置元素的Display属性仅会改变元素的显示方式，而不会改变元素的种类。因此display:block的行内元素不允许

包含其他块级元素

隐藏元素

display : none; 元素可以被隐藏，并且在页面中就像是不存在似的
visibility：hidden 也可以隐藏元素，该元素仍然会占用之前的内存空间。元素将被隐藏，但会影响布局

布局 width 和max-width 和margin:auto

设置块级元素的width可以防止其延申到容器的边缘。然后可以将外边距设置为auto，已将元素在水平方向上居中显示。元素会占用指定的宽度，剩余的空间将在两个外边距之间平分
注意：当浏览器的窗口宽度小于元素的宽度时浏览器会将水平滚动条加到页面上。在这种情况下，使用max-wid

th可以减少浏览器对窗口的处理

position

position属性规定应用于元素的定位方法的类型，有五个不同的位置值：

static
relative
fixed
absolute
sticky

元素其实是使用top、bottom、left、right属性定位的。但是除非先设置了position属性，否则这些属性都将不起作用。根据不同的position值，他们的工作方式也不同。

position：static

HTML元素默认情况下的定位方式为static。静态定位元素不受top、bottom、left、right元素的影响。他不会以任何特殊的方式定位，他始终根据页面的正常流进行定位

position：relative

元素相对于其他正常位置进行定位。

设置相对定位的元素的 top、right、bottom、left属性将导致其偏离正常位置进行调整。不会对其余内容进行调整来适应元素留下来的空间

relative是相对布局，他的关键点是【相对谁】，通过top、left、right、bottom来修改元素的偏移位置，这四个

属性在流式布局中并不会起作用，首先要确定元素的起始坐标是什么！left、right、top、bottom就是告诉元素它离起点坐标的位置。相对谁？相对的是元素在流式布局中的起始位置。属性top和bottom不能同时使用，left的优先级会高于right,top的优先级会高于bottom，同时设置top和bottom，bottom会起作用

【总结】：position：relative的作用就是在不打破流式布局的前提下，让某个元素移动到某个位置。

position：absolute

absolute被称为绝对布局，absolute布局的关键点是选择哪一个元素作为布局区域，如果父级元素未设置position属性，布局区域会选择科可视区域。如果父级元素使用了position属性，布局区域会选择这个父级元素作为可视区域，会把子元素限制在父元素内。【注意】：被定为的元素是其位置除static以外的任何元素

<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        height: 1000px;
    }

    .box {
        margin: 10px;
        height: 400px;
        background-color: #eeeeee;
    }

    p {
        color: white;
        font-size: 18px;
        line-height: 40px;
    }

    p:nth-child(1) {
        background-color: red;
    }

    p:nth-child(2) {
        background-color: green;
    }

    p:nth-child(3) {
        background-color: black;
    }
</style>
<body>
    <div class="box">
        <p>前端小课，每日一课</p>
        <p>素燕，公众号</p>
        <p>前端从0-1</p>
    </div>
</body>

效果图：

修改选择器p:nth-child(2)为：

p:nth-child(2) {
    background-color: green;
    position: absolute;
}

效果图

效果发生了很大的变化：

绿色标签变窄了，恰好文字内容的宽度
黑色标签移到了红色的底部，绿色标签破坏了流式布局，不会占用流式布局的坑位，所以黑色跑到了红色下面。

继续修改child（2）

p:nth-child(2) {
    background-color: green;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

top、bottom、left、right可以同时使用，如果都设置为0，此元素的父级元素没有设置position属性的话，他会自动填满可视区域，如果父级元素设置了position则填满父级元素。
absolute布局的关键点是选择哪一个元素作为布局区域，如果父级元素未设置position属性，布局区域会选择科可视区域。如果父级元素使用了position属性，布局区域会选择这个父级元素作为可视区域，会把子元素限制在父元素内。

position:fixed

他的作用是把某个元素【固定到某个位置】，他是相对视口定位的，比如把下面的标题【Web布局方式】始终固定在顶部，无论怎么滑动都不会动

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KF5p4qNr-1626920883498)(D:\笔记\css\css.assets\image-20210720155258783.png)]

position:sticky

他的作用是在某个位置固定某个元素，比如【滑动到某个位置】后让其固定！根据用户的滚动位置进行定位。粘性元素根据滚动位置在relative和fixed之间进行切换。起先他会被相对定位，知道视口遇到给定的偏移位置为止，然后将其黏贴在适当的位置。

重叠元素

在对元素定位时，他们可以与其他元素重叠

【z-index】属性指定元素的堆栈顺序（哪个元素应该放在其他元素的前面后者后面），具有较高堆叠顺序的元素始终位于较低堆叠顺序的元素的前面。

【注意】：如果两个定位的元素重叠而未指定z-index，则位于HTML代码中最后的元素将显示在顶部。

overflow布局溢出

overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

overflow属性可以设为以下值：

visible：默认。溢出的内容不会被裁剪，内容在元素框外渲染
hidden：溢出被裁剪。其余内容将不可见。
scroll：溢出被裁减，同时添加滚动条以查看其他内容
auto：于scroll类似，但是只在有必要的时候添加滚动条，比如scroll会加两条滚动条，但是auto只会在有必要的时候添加滚动条，可能只加有个纵向的滚动条而不加横向的，这要看具体情况

【注意】：overflow属性仅适用于具有指定高度的元素上。

overflow-x和overflow-y

overflow-x 和 overflow-y 属性规定是仅水平还是垂直地（或同时）更改内容的溢出：

overflow-x 指定如何处理内容的左/右边缘。
overflow-y 指定如何处理内容的上/下边缘。

div {
  overflow-x: hidden; /* 隐藏水平滚动栏 */
  overflow-y: scroll; /* 添加垂直滚动栏 */
}

float

float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一：

left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit - 元素继承其父级的 float 值

最简单的用法是，float 属性可实现（报纸上）【文字包围图片的效果】。

box-size

使用box-size:border-box 我们设置的width就是实际的width
不使用box-size：border-box 实际width>=设置的width

flex

flex属性是flex-grow、flex-shrink、flex-basis属性的简写。

以下是 flex 容器属性：

flex-direction:属性定义容器要在哪个方向上堆叠 flex 项目。
flex-warp:属性规定是否应该对 flex 项目换行
flex-flow:属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性。
```
.flex-container {
  display: flex;
  flex-flow: row wrap;
}
```
justify-content: 属性用于对齐 flex 项目
- center：居中对齐
- flex-start :开头对其
- flex-end:末端对其
- space-around：值显示行之前、之间、之后带有空格的flex项目
- space-between：值显示行之间有空格的flex项目
align-items:属性用于垂直对齐 flex 项目。align-item适用于所有的flex容器，他是用来设置每个flex元素在交叉轴上的默认对齐方式。align-item和align-content有相同的功能，不过不同点是它是用来让每一个单行的容器居中而不是整个容器居中。
- center：值将 flex 项目在容器中间对齐
- flex-start：值将 flex 项目在容器顶部对齐
- flex-end: 值将弹性项目在容器底部对齐
- stretch: 值拉伸 flex 项目以填充容器（默认）
- baseline:值使flex项目基线对齐
align-content:属性用于对齐弹性线。align-content只适用于【多行】的flex容器，并且当交叉轴中有多余空间时对flex容器中的伸缩线进行对齐。

align-self

algin-self属性规定弹性容器内【所选项目】的对齐方式

align-self属性将覆盖容器的align-items属性所设置的对齐方式

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>align-self 属性</h1>

<p>"align-self: center;" 在容器中间对齐所选的弹性项目：</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

<p>align-self 会覆盖容器的 align-items 属性。</p>

</body>
</html>

效果图：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GhBwonuw-1626920883500)(D:\笔记\css\css.assets\image-20210721112035425.png)]

【分析】：flex-container使用flex布局,默认是stretch拉伸以填满容器，在div里面设置高度可以调整，原本3号应该和1，2，4一样的，但是div3使用了align-self:center；align-self：属性只会让用在它身上的元素起作用！

对齐

居中对齐元素

margin：auto；设置元素的宽度将防止其延伸到容器的边缘。然后，元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配：

【注意】：如果没有设置width或者设置为了100%，则居中对齐无效。

居中对齐文本

如果仅需元素内的文本居中对齐，则可以使用 text-align:center；

居中对齐图像

居中对齐图像设置左右边距为auto

左和右对齐使用position、float

对齐元素的一种方法是使用position：absolute；

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 20px;
}

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

【注意】：当使用float布局的时候，如果一个元素比包含他的元素高，并且是浮动的，他将溢出容器。可以是以使用clearfix hack来解决。

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

 <!--在包含他的容器里面设置overflow：auto-->
.clearfix {
  overflow: auto;
}

.img2 {
  float: right;
}
</style>
</head>
<body>

<h1>Clearfix</h1>

<p>在本例中，图像高于包含它的元素，然而它被浮动了，所以它会在容器之外溢出：</p>

<div>
  <img class="img1" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>

<p style="clear:right">请为包含元素添加一个带有 overflow: auto; 的 clearfix 类，以解决此问题：</p>

<div class="clearfix">
  <img class="img2" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>

</body>
</html>

文字垂直对齐

可以通过设置line-height让他等于height，就是当行高和它的width一样了，就相当于垂直对齐了！

.center {  line-height: 200px;  height: 200px;  border: 3px solid green;  text-align: center;}/* 如果有多行文本，请添加如下代码：*/.center p {  line-height: 1.5;  display: inline-block;  vertical-align: middle;}