CSS杂记（二）

最新推荐文章于 2021-09-26 11:07:39 发布
最新推荐文章于 2021-09-26 11:07:39 发布
阅读量462 收藏
点赞数
分类专栏： CSS 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zx442008375/article/details/120258493
版权

CSS杂记（二）

CSS之文本垂直居中

单行文本垂直居中

将height赋值给line-height即可，原理是单行文字总会处于行高的中线上

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        border: 1px solid #333;
        line-height: 100px;
      }
    </style>
  </head>
  <body>
    <div><span>123</span></div>
  </body>
</html>

image-20210906125212325

多行文字垂直居中

步骤如下

  1. 将容器的display设置为table
  2. 将容器中的文本的display设置为table-cell
  3. 将容器中的文本的vertical-align设置为middle
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        border: 1px solid #333;
        display: table;
      }

      span {
        display: table-cell;
        vertical-align: middle;
      }

      table {
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div><span>你好贾斯丁!你好贾斯丁!你好贾斯丁!</span></div>
    <table border="1">
      <tr>
        <td>123 123 123 123 123</td>
        <!-- td里的单行/多行文本默认垂直居中，利用这一点，可以使用上述css中的方法来实现相同的效果 -->
      </tr>
    </table>
  </body>
</html>

CSS之清除图片之间的空隙

方法：在代码里消除掉img标签之间的空格或者换行，因为内联元素（包含内联块元素）之间的空格或者换行符会被解释成文本分隔符。

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      img {        width: 100px;        border: 1px solid #444;      }    </style>  </head>  <body>    <img      src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"      alt=""    /><img      src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"      alt=""    /><img      src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"      alt=""    />    <img      src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"      alt=""    />  </body></html>

image-20210906130045914

CSS之样式初始化

开发项目时，一份公共的css（例如common.css, global.css, style.css）用来初始化，然后单独的页面如果有特殊的需求则单独声明css

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      body {        font-family: Arial, Helvetica, sans-serif;      }      ul {        padding: 0;        margin: 0;        list-style: none;      }      h1,      h2,      h3,      h4,      h5,      h6 {        font-weight: normal;      }      input,      textarea,      button {        outline: none;      }      a {        text-decoration: none;      }      i,      em {        font-style: normal;      }    </style>  </head>  <body>    <h1>test</h1>    <h2>test</h2>    <h3>test</h3>    <h4>test</h4>    <h5>test</h5>    <h6>test</h6>    <ul>      <li>test</li>      <li>test</li>      <li>test</li>      <li>test</li>    </ul>    <input type="text" />    <textarea name="" id="" cols="30" rows="10"></textarea>    <button>按钮</button>    <a href="">test</a>    <i>test</i>    <em>test</em>  </body></html>

image-20210906134451477

CSS之注释

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      /* 这是单行注释的写法 */              /* 这是多行注释的写法      这是多行注释的写法 */    </style>  </head>  <body></body></html>

CSS之盒模型

盒子的构成

  1. 宽高所划分的区域 width/height
  2. 内边距 padding
  3. 边框 border
  4. 外边距 margin
<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .outer-box {        width: 200px;        height: 200px;        border: 10px solid green;        padding: 50px;        margin: 50px;      }      .inner-box {        width: 100px;        height: 100px;        background: orangered;      }    </style>  </head>  <body>    <div class="outer-box"><div class="inner-box"></div></div>  </body></html>

img

内容盒模型与边框盒模型

可以通过设置box-sizing来改变盒模型，默认盒模型为content-box内容盒模型。

在content-box内容盒模型下，设置的width等于content-width, 也即可视宽度为content-width + padding + border

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .outer-box {        width: 200px;        height: 200px;        border: 10px solid green;        padding: 50px;        margin: 50px;        box-sizing: content-box;      }      .inner-box {        width: 100px;        height: 100px;        background: orangered;      }    </style>  </head>  <body>    <div class="outer-box"><div class="inner-box"></div></div>  </body></html>

image-20210906141555838

image-20210906141406402

在border-box边框盒模型下，设置的width等于content-width + padding + border，所设即所得，如果改变border和padding的值，content-width将会自适应变化。

image-20210906141511821

image-20210906141522794

一般来讲，盒子都使用边框盒子模型border-box来防止修改盒子边框/内边距时盒子内容溢出

div{    box-sizing:border-box;}

兼容性

做项目时，考虑兼容性，还应写如下兼容code

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .outer-box {        width: 200px;        height: 200px;        border: 10px solid green;        padding: 50px;        margin: 50px;        box-sizing: border-box;        /* 做项目时，考虑兼容性，还应写如下兼容code */        /* FireFox */        -moz-box-sizing: border-box;        /* Chrome Safari */        -webkit-box-sizing: border-box;        /* IE8以下 */        -ms-box-sizing: border-box;        /* presto Opera */        -o-box-sizing: border-box;      }      .inner-box {        width: 100px;        height: 100px;        background: orangered;      }    </style>  </head>  <body>    <div class="outer-box"><div class="inner-box"></div></div>  </body></html>

CSS之padding/margin的写法格式

顺时针顺序来设置值

padding格式如下，margin同理

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .test {        width: 100px;        height: 100px;        /* padding: 20px 30px 40px 50px;                     上   右   下   左        padding: 20px;                 全部        padding: 20px 40px;                 上下 左右        padding: 20px 40px 60px;                  上  左右  下        padding-left: 10px;        padding-right: 10px;        padding-top: 10px;        padding-bottom: 10px; */      }    </style>  </head>  <body>    <div class="test"></div>  </body></html>

CSS之100%

当一个样式被设置为100%时，它将会从父元素继承该样式值

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .outer-box {        width: 200px;        height: 200px;        border: 10px solid green;        padding: 50px;        margin: 50px;      }      .inner-box {        width: 100%;        height: 100%;        background: orangered;      }    </style>  </head>  <body>    <div class="outer-box"><div class="inner-box"></div></div>  </body></html>

image-20210906140537095

CSS之水平居中

设置margin左右为auto可以实现水平居中

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box {        width: 200px;        height: 200px;        background: orangered;      }      .box1 {        width: 50px;        height: 50px;        background: orchid;        /* 设置margin左右为auto可以实现水平居中 */        margin: 50px auto;      }    </style>  </head>  <body>    <div class="box"><div class="box1"></div></div>  </body></html>

image-20210906144707200

CSS之body默认margin

各个浏览器都有不同的body默认margin

IE8上下16px，左右8px

IE7上下16px，左右11px

Chrome上下左右都是8px

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .header {        width: 100%;        height: 60px;        background: palevioletred;      }    </style>  </head>  <body>    <div class="header"></div>  </body></html>

image-20210906145210202

CSS标准文档流

定义

文档流指得是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局。

脱离文档流的方法

  1. 浮动（设置float）
  2. 绝对定位（position:absolute;）
  3. 固定定位（position:fixed;）

CSS之定位

可能的值

值描述
absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit规定应该从父元素继承 position 属性的值。

绝对定位

position:absolute

绝对定位会新建一层，原来所在层被其所占的位置会被释放。

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box1 {        width: 100px;        height: 100px;        background: palevioletred;        position: absolute;      }      .box2 {        width: 200px;        height: 200px;        background: orangered;      }    </style>  </head>  <body>    <div class="box1"></div>    <div class="box2"></div>  </body></html>

image-20210906170219588

绝对定位注意事项

当绝对定位元素一直往上找不到非static定位的父级元素时，其会以html根元素为基准来定位

以下例子因找不到非static父级元素而以html根元素来定位

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box1 {        width: 400px;        height: 400px;        border: 1px solid #000;        margin: 100px 0 0 100px;      }      .box2 {        width: 200px;        height: 200px;        background: #888;      }      .box1 .box2 .box3 {        position: absolute;        top: 0;        left: 0;        width: 50px;        height: 50px;        background: orangered;      }    </style>  </head>  <body>    <div class="box1">      <div class="box2">        <div class="box3"></div>      </div>    </div>  </body></html>

image-20210906172606958

以下例子在根元素之前，找到了非static定位的父元素

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box1 {        position: absolute;        width: 400px;        height: 400px;        border: 1px solid #000;        margin: 100px 0 0 100px;      }      .box2 {        width: 200px;        height: 200px;        background: #888;      }      .box1 .box2 .box3 {        position: absolute;        bottom: 0;        left: 0;        width: 50px;        height: 50px;        background: orangered;      }    </style>  </head>  <body>    <div class="box1">      <div class="box2">        <div class="box3"></div>      </div>    </div>  </body></html>

image-20210906172916316

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box1 {        position: absolute;        width: 400px;        height: 400px;        border: 1px solid #000;        margin: 100px 0 0 100px;      }      .box2 {        width: 200px;        height: 200px;        background: #888;        position: relative;      }      .box1 .box2 .box3 {        position: absolute;        bottom: 0;        left: 0;        width: 50px;        height: 50px;        background: orangered;      }    </style>  </head>  <body>    <div class="box1">      <div class="box2">        <div class="box3"></div>      </div>    </div>  </body></html>

image-20210906173045006

left/right 与 top/bottom

被设置定位的元素可以使用left/right和top/bottom来设置他们的位置

left是以被定位元素的左边界为基线的, right是以右边界，top/bottom同理

例如left:30px的作用是让绝对定位元素距非static定位的父级元素左边界30像素，其余三个设置样式同理。

此外，left和right同时只能取其一，top/bottom同理

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box1 {        width: 100px;        height: 100px;        background: palevioletred;        position: absolute;        top: 50px;        left: 50px;      }      .box2 {        width: 200px;        height: 200px;        background: orangered;      }    </style>  </head>  <body>    <div class="box1"></div>    <div class="box2"></div>  </body></html>

image-20210906170814899

相对定位

position:relative

相对定位会新建一层，原来所在层被其所占的位置不会被释放。

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box1 {        width: 100px;        height: 100px;        background: palevioletred;        position: relative;      }      .box2 {        width: 200px;        height: 200px;        background: orangered;      }    </style>  </head>  <body>    <div class="box1"></div>    <div class="box2"></div>  </body></html>

image-20210906170945472

相对定位另一个例子

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box1 {        position: absolute;        width: 400px;        height: 400px;        border: 1px solid #000;        margin: 100px 0 0 100px;      }      .box2 {        width: 200px;        height: 200px;        background: #888;        position: relative;      }      .box1 .box2 .box3 {        position: relative;        bottom: 0;        left: 0;        width: 50px;        height: 50px;        background: orangered;      }    </style>  </head>  <body>    <div class="box1">      <div class="box2">        <div class="box3"></div>      </div>    </div>  </body></html>

image-20210906173317906

为何box1没有移动，因为相对定位的移动是相对于元素本身之前的位置，此例中

bottom:0left:0

意味着，bottom:0向元素底部添加0像素， left:0向元素左边添加0像素

下面这个相对定位的例子中，

top: 50px;right: 100px;

意味着，top:50px向元素顶部添加50像素， right:100px向元素右边添加100像素

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box1 {        position: absolute;        width: 400px;        height: 400px;        border: 1px solid #000;        margin: 100px 0 0 100px;      }      .box2 {        width: 200px;        height: 200px;        background: #888;        position: relative;      }      .box1 .box2 .box3 {        position: relative;        top: 50px;        right: 100px;        width: 50px;        height: 50px;        background: orangered;      }    </style>  </head>  <body>    <div class="box1">      <div class="box2">        <div class="box3"></div>      </div>    </div>  </body></html>

image-20210906173919164

相对定位的通常用法

  1. 为绝对定位的元素提供非static父级元素，方便其做移动操作
  2. 参考下例3

两个box的用例，方便理解相对定位与绝对定位

1，两个box都无定位设置，正常排列

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box1 {        width: 100px;        height: 100px;        background: #000;      }      .box2 {        width: 100px;        height: 100px;        background: orangered;      }    </style>  </head>  <body>    <div class="box1"></div>    <div class="box2"></div>  </body></html>

image-20210906190429565

2，box1设置为绝对定位，移动到新的层，原来的位置被释放，box2占据原box1位置

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box1 {        position: absolute;        width: 100px;        height: 100px;        background: #000;      }      .box2 {        width: 100px;        height: 100px;        background: orangered;      }    </style>  </head>  <body>    <div class="box1"></div>    <div class="box2"></div>  </body></html>

image-20210906190548588

3，设置box1为绝对定位，box2为相对定位，div box2由于后来并且新建了一层，故移动到最顶层（类似PS新建的图层会在顶层的原理）

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box1 {        position: absolute;        width: 100px;        height: 100px;        background: #000;      }      .box2 {        position: relative;        width: 100px;        height: 100px;        background: orangered;      }    </style>  </head>  <body>    <div class="box1"></div>    <div class="box2"></div>  </body></html>

image-20210906190650404

4，设置box2为绝对定位

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box1 {        width: 100px;        height: 100px;        background: #000;      }      .box2 {        position: absolute;        width: 100px;        height: 100px;        background: orangered;      }    </style>  </head>  <body>    <div class="box1"></div>    <div class="box2"></div>  </body></html>

image-20210906191326250

可以发现，绝对定位的元素不会主动去占据非脱离文档流元素的文档流。

例外：如果这个文档流是它之前所占有的，它可能会被动地视觉上地覆盖那个文档流（是由于box1释放了文档流，box2自动填充该文档流导致的视觉覆盖，box1没有主动移动去覆盖），如下

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box1 {        position: absolute;        width: 100px;        height: 100px;        background: #000;      }      .box2 {        width: 100px;        height: 100px;        background: orangered;      }    </style>  </head>  <body>    <div class="box1"></div>    <div class="box2"></div>  </body></html>

image-20210906193131252

z-index

某些时候，我们希望人为地干涉图层的Z轴顺序，就可以用到z-index，如下

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box1 {        position: absolute;        z-index: 1;        width: 100px;        height: 100px;        background: #000;      }      .box2 {        position: relative;        width: 100px;        height: 100px;        background: orangered;      }    </style>  </head>  <body>    <div class="box1"></div>    <div class="box2"></div>  </body></html>

image-20210906193905221

这个例子本该呈现橘色的方块，但由于类box1设置了z-index:1，人为地提高了div box1的层数（靠近人眼）。

绝对定位中的两栏设计

用到了上面所讲的原理

image-20210906201455067

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      html,      body {        overflow-y: hidden;        margin: 0;        height: 100%;      }      .left {        position: absolute;        width: 300px;        height: 100%;        background: palegreen;      }      .right {        margin-left: 300px;        height: 100%;        background: orange;      }    </style>  </head>  <body>    <div class="left"></div>    <div class="right">test</div>  </body></html>

image-20210906201252235

width/height的auto/100%

width:100%;

被设置元素的content-width取父元素的content-width的100%

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .div1 {        width: 100px;        padding: 10px;        border: 2px solid #000;        background: #888;      }      p {        width: 100%;        padding: 10px;        border: 2px solid #000;        margin: 10px;        background: rgb(204, 204, 204);      }    </style>  </head>  <body>    <div class="div1">      <p>test</p>    </div>  </body></html>

image-20210911124705764

image-20210911124727854

image-20210911124739822

width:auto;

是包含块的默认值，即包含块的content-width + padding + border + margin 等于父元素的content-width

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .div1 {        width: 100px;        padding: 10px;        border: 2px solid #000;        background: #888;      }      p {        width: auto;        padding: 10px;        border: 2px solid #000;        margin: 10px;        background: rgb(204, 204, 204);      }    </style>  </head>  <body>    <div class="div1">      <p>test</p>    </div>  </body></html>

image-20210906212650351

image-20210906212711497

image-20210906212726239

height:100%;

即取父元素的content-height的100%。包含块的父级元素如果没有显示地将height设置为非auto值，那么包含块所设置的height:100%;将会失效，因为height默认值为auto，auto * 100% = NaN将NaN赋值给包含块的height属性是没有任何意义的，包含块的height仍将继续取auto

父元素未设置height（height为默认值auto）
<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .div1 {        width: 100px;        /* height: 50px; */        padding: 10px;        border: 2px solid #000;        background: #888;      }      p {        width: auto;        height: 100%;        padding: 10px;        border: 2px solid #000;        margin: 10px;        background: rgb(204, 204, 204);      }    </style>  </head>  <body>    <div class="div1">      <p>test</p>    </div>  </body></html>

image-20210906213403411
image-20210906213413784

父元素显示设置height为非auto值
<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .div1 {        width: 100px;        height: 50px;        padding: 10px;        border: 2px solid #000;        background: #888;      }      p {        width: auto;        height: 100%;        padding: 10px;        border: 2px solid #000;        margin: 10px;        background: rgb(204, 204, 204);      }    </style>  </head>  <body>    <div class="div1">      <p>test</p>    </div>  </body></html>

image-20210906213602936

image-20210906213611421

image-20210906213622706

height:auto;

包含块的高度取决于内容content-width的高度。

margin居中对齐

可以使用margin:0 auto;来达到水平方向居中对齐的效果

此处的auto效果与width:auto;效果类似，都有系统自动分配的意思。

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .div1 {        width: 100px;        height: 50px;        padding: 10px;        border: 2px solid #000;        background: #888;        margin: 0 auto;      }    </style>  </head>  <body>    <div class="div1"></div>  </body></html>

image-20210906213934494

CSS之float（浮动）

float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围。在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框（内联块，可设置宽高并浮动在一行），而不论它本身是何种元素。

注释： 假如在一行只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

浮动的设计初衷

浮动元素浮动到容器的一侧，使得文本能包裹它（常应用于图片），原因是元素浮动后会成为Inline-block，作为inline元素的文本自然环绕（与其排列在一行，行满时换行）在inline-block属性的浮动元素周围。

image-20210907132726905

可能的值

值描述
left元素向左浮动。
right元素向右浮动。
none默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit规定应该从父元素继承 float 属性的值。

float解决文字不包裹图片的问题

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      img {        float: left;        width: 150px;        border: 1px solid #000;      }    </style>  </head>  <body>    <img      src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"      alt=""    />    Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora consequatur    minima ea libero illum temporibus quos minus labore exercitationem, ducimus    officia debitis nam dolore ipsam vel quo aliquam veritatis numquam sequi    sint maxime. Consequatur dolore totam eius nihil itaque, ex quidem ad atque    sapiente numquam inventore sunt officiis error quos? Lorem ipsum dolor sit    amet consectetur adipisicing elit. Tempora consequatur minima ea libero  </body></html>

image-20210907010646052

浮动流

非浮动流块级元素无法识别浮动流元素的位置，所以浮动流元素box1的位置会被box2所占据

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box1 {        float: left;        width: 100px;        height: 100px;        background: orangered;      }      .box2 {        width: 200px;        height: 200px;        background: orchid;      }    </style>  </head>  <body>    <div class="box1"></div>    <div class="box2"></div>  </body></html>

image-20210907010952078

此例中，span是内联元素，能识别到浮动流，并且切合了浮动的初衷（文本包裹浮动元素），所以span中的文字会环绕在浮动元素周围（而不是移动到box1的正下方）。

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box1 {        float: left;        width: 100px;        height: 100px;        background: orangered;      }    </style>  </head>  <body>    <div class="box1"></div>    <span      >Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto      tempora cupiditate eligendi cum culpa aliquid! Praesentium vero      accusantium fuga, labore quod dolorem maxime magnam ea suscipit delectus,      minus culpa laboriosam fugiat modi, tempore maiores? Aut, nulla? Accusamus      excepturi aspernatur sunt reiciendis doloremque perferendis quidem      delectus, veniam, consectetur maxime dolorum laboriosam voluptas? Quam      asperiores magnam in dolores quos, officiis exercitationem dolore? Facere      deleniti eligendi quasi reprehenderit dicta saepe quos cum vitae, ea      excepturi tempore nihil corporis error unde recusandae modi reiciendis      voluptas deserunt maiores, dolore est porro at hic. Aut, ratione aliquam      molestiae esse necessitatibus sed dignissimos iure eligendi debitis      maiores.</span    >  </body></html>

image-20210907132510318

就算使用p这个块级元素，文本还是会围绕在浮动元素的周围，而不是去填充它释放的文档流。还是切合了浮动的初衷。

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box1 {        float: left;        width: 100px;        height: 100px;        background: orangered;      }    </style>  </head>  <body>    <div class="box1"></div>    <p>      Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto      tempora cupiditate eligendi cum culpa aliquid! Praesentium vero      accusantium fuga, labore quod dolorem maxime magnam ea suscipit delectus,      minus culpa laboriosam fugiat modi, tempore maiores? Aut, nulla? Accusamus      excepturi aspernatur sunt reiciendis doloremque perferendis quidem      delectus, veniam, consectetur maxime dolorum laboriosam voluptas? Quam      asperiores magnam in dolores quos, officiis exercitationem dolore? Facere      del    </p>  </body></html>

image-20210907132643454

此例中，内联块元素img也能识别浮动流

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box1 {        float: left;        width: 100px;        height: 100px;        background: orangered;      }      img {        width: 150px;      }    </style>  </head>  <body>    <div class="box1"></div>    <img      src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"      alt=""    />  </body></html>

image-20210907011529267

此例中，浮动流元素能识别浮动流元素

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box1 {        float: left;        width: 100px;        height: 100px;        background: orangered;      }      .box2 {        float: left;        width: 200px;        height: 200px;        background: burlywood;      }    </style>  </head>  <body>    <div class="box1"></div>    <div class="box2"></div>  </body></html>

image-20210907011714771

此例中，添加了overflow:hidden;的块级元素也能够识别浮动流

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box1 {        float: left;        width: 100px;        height: 100px;        background: orangered;      }      .box2 {        width: 200px;        height: 200px;        background: burlywood;        overflow: hidden;      }    </style>  </head>  <body>    <div class="box1"></div>    <div class="box2"></div>  </body></html>

image-20210907012248755

综上所述， 内联元素、内联块级元素、浮动流元素、溢出隐藏块级元素都能够识别浮动流元素的位置

clear

clear属性规定元素的哪一侧不允许出现浮动元素。该属性只对块级元素有效。

说明

clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

注意： 设置clear的元素实际上要靠移动自身来达到周围没有浮动元素的效果。

特殊情况： 对有浮动属性的内联元素或者内联块级元素也有效

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      img {        width: 150px;      }      .img1 {        float: left;        /* clear: both; */      }      .img2 {        float: left;        clear: both;      }    </style>  </head>  <body>    <img      class="img1"      src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"    />    <img      class="img2"      src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"    />  </body></html>

image-20210907015409647

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box {        width: 300px;        border: 10px solid #000;      }      .box::after {        content: "";        display: block;        clear: both;      }      .box1 {        float: left;        width: 100px;        height: 100px;        background: burlywood;      }      .box2 {        float: left;        width: 100px;        height: 100px;        background: orangered;        clear: left;      }    </style>  </head>  <body>    <div class="box">      <div class="box1"></div>      <span class="box2">123</span>    </div>  </body></html>

image-20210908012153273

clear的特殊情况

clear对左浮动在最左侧或者右浮动在最右侧的元素（头部元素）是无效的。

设置clear的元素实际上要靠移动自身来达到周围没有浮动元素的效果

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      img {        width: 150px;      }      .img1 {        float: right;        /* clear: both; */        background: lightpink;      }      .img2 {        float: right;        clear: right;        background: lightgreen;      }    </style>  </head>  <body>    <img      class="img1"      src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"    />    <img      class="img2"      src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"    />  </body></html>

image-20210907022621297

float以后变为内联块级元素

可设置宽高，并且浮动在一行，故具备内联块级元素特点

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box {        width: 200px;        border: 10px solid #000;        /* overflow: hidden; */        /* float: left; */      }      .box .inner-box {        float: left;        width: 100px;        height: 100px;      }      .box .inner-box.box1 {        background: burlywood;      }      .box .inner-box.box2 {        background: brown;      }      .text-box {        width: 100px;        border: 1px solid #000;      }      .clear-fix {        clear: both;      }      ul {        padding: 0;        margin: 0;        list-style: none;      }      ul {        width: 300px;        margin-top: 20px;        border: 1px solid #000;      }      ul li {        float: left;        width: 100px;        height: 100px;      }    </style>  </head>  <body>    <div class="box">      <div class="inner-box box1"></div>      <div class="inner-box box2"></div>      <p class="clear-fix"></p>    </div>    <ul>      <li>1</li>      <li>2</li>      <li>3</li>      <p class="clear-fix"></p>    </ul>  </body></html>

image-20210907021642142

float/clear应用实例

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .div1 {        width: 200px;        height: 100px;        background: red;      }      .div2 {        float: left;        width: 400px;        height: 100px;        background: green;      }      .div3 {        width: 200px;        height: 200px;        background: yellow;      }      .div4 {        float: left;        width: 300px;        height: 200px;        background: cyan;      }      span {        border-bottom: 1px solid #000;      }    </style>  </head>  <body>    <div class="div1">div1</div>    <div class="div2">div2</div>    <div class="div3">div3</div>    <div class="div4">div4</div>  </body></html>

image-20210907125119154

总结

浮动元素的默认运动规则（以左浮动为例）

先向上漂浮直至遇到占据文档流的元素或者视口顶部边界后停下，然后向左漂浮直至遇到占据文档流的元素或者浮动元素或者视口左边界后停下
**特殊情况：**向上漂浮时遇到文本元素（无论是内联还是块级, div除外）都会挤压文本元素中的文字到浮动元素的上方和右侧（即文本围绕浮动元素，常用于文本包裹图片，这也是浮动的初衷）另外，当文本元素（无论是内联还是块级）在HTML中排列在浮动元素的下方时，文本元素中的文本不会出现在浮动元素的下方而是围绕在浮动元素右方和下方，原理同上。注意：在这种特殊情况下，块级元素的文档流空间是不会变的，原来占据多少，占据的位置都不会变，只是里面的文本会去环绕浮动元素。内联元素的文档流空间是会变的，分为两种情况：1，内联元素的文本没有在两个方向（上右/右下等等）上包裹浮动元素，那么内联元素的文档流空间是不会包含浮动元素下方的空间的。2，内联元素的文本在两个方向（上右/右下等等）上包裹浮动元素，那么内联元素的文档流空间是包含浮动元素下方的空间的。

此例中，left和right两个包含块都在header包含块中，所以往上漂浮的过程中遇到的第一个占据文档流的元素就是header包含块。

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .header {        width: 100%;        height: 60px;        background: #000;        border: 5px solid brown;      }      .header .left {        float: left;        width: 200px;        height: 100%;        background: green;      }      .header .right {        float: left;        width: 200px;        height: 100%;        background: orange;      }    </style>  </head>  <body>    <div class="header">      <div class="left"></div>      <div class="right"></div>    </div>  </body></html>

image-20210907183925144

另一个例子，实现span文本左右分布并居中

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .header {        width: 100%;        height: 60px;        border: 5px solid brown;        background: #000;        color: orange;        line-height: 60px;      }      .header .right {        float: right;      }    </style>  </head>  <body>    <div class="header">      <span class="left">123</span>      <span class="right">456</span>    </div>  </body></html>

image-20210907184119865

创建通用类clearfix配合after伪元素消除浮动

<!DOCTYPE html><html lang="zh-CH">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .clearfix::after {        content: "";        display: block;        clear: both;      }      .box {        width: 200px;        border: 10px solid #33691e;      }      .box .box1 {        width: 100px;        height: 100px;        background: #aed581;        float: left;      }      .box .box2 {        width: 100px;        height: 100px;        background: #8bc34a;        float: left;      }    </style>  </head>  <body>    <div class="box clearfix">      <div class="box1"></div>      <div class="box2"></div>    </div>  </body></html>

image-20210912220308104

此例中定义了.clearfix以及其after伪元素，哪个容器需要清除浮动的话直接加上这个类即可，非常方便。

伪元素的content用法

1，加小图标

<!DOCTYPE html><html lang="zh-CH">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      p::before {        content: url(Moshify/images/wechat_s.png);        margin-right: 5px;        vertical-align: middle;      }    </style>  </head>  <body>    <p>点击打开微信</p>  </body></html>

image-20210912220308104

2，做欢迎致辞

<!DOCTYPE html><html lang="zh-CH">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      p::before {        content: attr(data-username);      }    </style>  </head>  <body>    <p data-username="Moe">欢迎您再次来到本网站</p>  </body></html>

image-20210912220526205

<p data-username=“Moe”>中的"Moe"是从后端动态获取的，不同的用户会有不用的响应，从而达到“一人一词”的效果。

盒子阴影box-shadow

用法示例

<!DOCTYPE html><html lang="zh-CH">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box1 {        width: 300px;        height: 150px;        margin: 100px;        background: orange;        /* box-shadow: 水平位置（必） 垂直位置（必）模糊距离 阴影尺寸 阴影颜色 阴影种类; */        /* box-shadow:20px 10px; */        /* box-shadow: 0 10px; */        /* box-shadow: 10px 0; */        /* box-shadow: -10px -20px; */        /* box-shadow: 10px 10px 20px; */        box-shadow: 10px 10px 5px 5px;      }      .box2 {        width: 300px;        height: 150px;        margin: 100px;        background: orange;        /* box-shadow: 水平位置（必） 垂直位置（必）模糊距离 阴影尺寸 阴影颜色 阴影种类; */        /* box-shadow:20px 10px; */        /* box-shadow: 0 10px; */        /* box-shadow: 10px 0; */        /* box-shadow: -10px -20px; */        /* box-shadow: 10px 10px 20px; */        box-shadow: 15px 15px 5px;      }      .box3 {        width: 300px;        height: 150px;        margin: 100px;        background: orange;        /* box-shadow: 水平位置（必） 垂直位置（必）模糊距离 阴影尺寸 阴影颜色 阴影种类; */        /* box-shadow:20px 10px; */        /* box-shadow: 0 10px; */        /* box-shadow: 10px 0; */        /* box-shadow: -10px -20px; */        /* box-shadow: 10px 10px 20px; */        box-shadow: 0 0 10px 10px orangered inset;        /* 阴影尺寸会在上下左右均匀增加阴影的尺寸 */        /* 而水平/垂直偏移只会使得阴影的位置发生偏移，不会改变阴影的大小 */      }    </style>  </head>  <body>    <div class="box1"></div>    <div class="box2"></div>    <div class="box3"></div>  </body></html>

image-20210912221811778

阴影遮挡

<!DOCTYPE html><html lang="zh-CH">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      body {        margin: 0;      }      .header {        position: relative;        z-index: 1;        width: 100%;        height: 60px;        background: yellow;      }      .box {        width: 300px;        height: 200px;        background: orange;        margin-left: 200px;        box-shadow: 0 0 10px #666;        /* 兼容性设置 */        -webkit-box-shadow: 0 0 10px #666;        -moz-box-shadow: 0 0 10px #666;        -o-box-shadow: 0 0 10px #666;      }    </style>  </head>  <body>    <div class="header"></div>    <div class="box"></div>  </body></html>

image-20210912222350710

此例结合z-index来达到遮挡阴影的效果，注意，z-index只能配合非static定位元素使用。

CSS之圆角border-radius

用法示例

<!DOCTYPE html><html lang="zh-CH">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box1 {        width: 200px;        height: 200px;        background: tomato;        /* 正圆，设置为50%即可，这里指的是高度的50%，也即100px，填写100px会达到同样的效果 */        /* border-radius: 50%; */        /* 一般设置像素单位即可 */        border-radius: 10px;      }      .box2 {        width: 200px;        height: 100px;        background: orange;        /* 长方体两侧半圆，设置为高度的50%即可 */        border-radius: 50px;        /* 兼容性设置 */        -webkit-border-radius: 50px;        -moz-border-radius: 50px;        -o-border-radius: 50px;      }    </style>  </head>  <body>    <div class="box1"></div>    <div class="box2"></div>  </body></html>

image-20210912223530541

圆角溢出处理

给父元素添加overflow:hidden;来移除溢出圆角的子级图片。

<!DOCTYPE html><html lang="zh-CH">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box {        width: 443px;        height: 591px;        border: 1px solid rgb(85, 85, 85);        border-radius: 20px;        overflow: hidden;       }      img {        width: 100%;        height: 100%;      }    </style>  </head>  <body>    <div class="box">      <img src="./Moshify/images/example.jpg" alt="" />    </div>  </body></html>

image-20210912224413243

image-20210912224536209

CSS之background

用法示例

<!DOCTYPE html><html lang="zh-CH">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box {        width: 300px;        height: 150px;        margin: 100px;        border: 1px solid #000;        background-image: url(./Moshify/images/kehuan.jpg);        /* background-size: 300px 150px; */        /* background-size: 100% 100%; */        background-size: 50% 50%;        background-repeat: no-repeat;        /* background-repeat: repeat-x; */        /* background-repeat: repeat-y; */        /* background-position: center; */        /* background-position: 50% 50%; */        /* background-position: top right; */        /* background-position: right bottom; */        /* background-position: center bottom; */        /* background-position: center left; */        background-position: 20px 20px;      }    </style>  </head>  <body>    <div class="box"></div>  </body></html>

image-20210912225356974

background-image

用法示例
<!DOCTYPE html><html lang="zh-CH">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      body {        margin: 0;      }      .banner {        width: 100%;        height: 600px;        background: orange;        background-image: url(./Moshify/images/banner.jpg);        /* cover不会怪异缩放，会按本身的比例缩放至覆盖整个background区域 */        /* 多余的部分会被裁切，通常搭配bg postion center一起使用 */        /* background-size: cover; */        /* background-position: center center; */        /* contain会缩放图片以让图片完整地显示在background区域 */        /* 出现的留白区域会默认重复填充，通常搭配bg repeat no-repeat一起使用*/        background-size: contain;        background-repeat: no-repeat;      }    </style>  </head>  <body>    <div class="banner"></div>  </body></html>

image-20210912231341016

background-attachment

<!DOCTYPE html><html lang="zh-CH">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      html {        height: 100%;        background-color: green;        background-image: url(./Moshify/images/chengbao.jpg);        background-size: 100% 100%;        /* bg attach scroll, 背景图片会随着页面的滚动而滚动 */        /* background-attachment: scroll; */        /* bg attach fixed, 背景图片不会随着滚动轴滚动，           可以理解内容在滚动，滚动出了屏幕 */        background-attachment: fixed;        color: #fff;      }      .box {        height: 500px;        background-image: url(./Moshify/images/chengbao.jpg);        background-size: 100% 100%;        /* bg attach local，背景图片会随着被设置元素内的内容滚动而滚动 */        background-attachment: local;        overflow-y: scroll;      }    </style>  </head>  <body>    <br /><br /><br /><br /><br /><br /><br /><br />111<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />222<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />333<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />444<br /><br /><br /><br /><br /><br /><br />    <div class="box">      <br /><br /><br /><br /><br /><br /><br /><br />111<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />222<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />333<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />444<br /><br /><br /><br /><br /><br /><br />    </div>  </body></html>

示例分别演示了，background-attachment: scroll;和background-attachment: fixed;的用法

图片太大，就不做GIF演示了，如需体验，自行copy代码测试。

background复合写法

<!DOCTYPE html><html lang="zh-CH">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      html {        height: 100%;        /* background-color: green;        background-image: url(./Moshify/images/chengbao.jpg);        background-size: 100% 100%; */        /* bg attach scroll, 背景图片会随着页面的滚动而滚动, scroll是默认值 */        /* background-attachment: scroll; */        /* bg attach fixed, 背景图片不会随着滚动轴滚动，           可以理解内容在滚动，滚动出了屏幕 */        /* background-attachment: fixed; */        color: #fff;        /* background的复合写法，不推荐 */        /* background:background-color background-image background-repeat background-attachment background-position/background-size */        background: green url(./Moshify/images/chengbao.jpg) no-repeat fixed 0 0/100%          100%;      }    </style>  </head>  <body>    <br /><br /><br /><br /><br /><br /><br /><br />111<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />222<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />333<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />444<br /><br /><br /><br /><br /><br /><br />  </body></html>

Logo

当logo属的css未被加载成功时，采用备选链接，如下

ps: 如果logo url不可用，此方法会失效。。

<!DOCTYPE html><html lang="zh-CH">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .logo {        width: 72px;        height: 72px;      }      .logo h1 {        margin: 0;      }      .logo h1 .logo-hd {        display: block;        width: 72px;        height: 0;        padding-top: 72px;        background: url(./Moshify/images/logo.png) no-repeat 0 0/72px 72px;        /* border: 1px solid #000; */        overflow: hidden;      }    </style>  </head>  <body>    <div class="logo">      <h1>        <a href="" class="logo-hd">微信</a>      </h1>    </div>  </body></html>

当logo所属的css加载成功时，显示如下

image-20210912235807860

当logo所属的css加载失败时，显示如下

image-20210912235925199

CSS之z-index

定义和用法

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释： 元素可拥有负的 z-index 属性值。

注释： Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

说明

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

默认值：auto
继承性：no
版本：CSS2
JavaScript 语法：object.style.zIndex=“1”

可能的值

值描述
auto默认。堆叠顺序与父元素相等。
number设置元素的堆叠顺序。
inherit规定应该从父元素继承 z-index 属性的值。

CSS之a标签锚点定位

在制定网站时，常常会需要添加侧边导航，通过点击导航让页面自动滚动到指定位置，如：秒杀商品的网页部分。这就涉及到a标签的锚点应用。

什么是锚点

通俗地讲，我们想要通过点击锚点链接跳转到的资源，就是锚点。它可以在页面内部，也可以在其他页面内。

所以要使用锚点定位，需要设置锚点与锚点链接，有两种设置方法

1，name定位法

在此例中，通过点击锚点链接"点击此处到目标位置"即可定位至锚点目标"目标位置"处。

name定位法中，必须使用a标签来作为锚点目标，同时设置该a标签的name值与锚点链接中的href值相对应

如下：href="#mao"

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>  </head>  <body>    <a href="#mao">点击此处到目标位置</a>    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />    <a name="mao">目标位置</a>  </body></html>

d95ae44a-8a61-4447-a123-f11e5f46bbda

很多时候锚点目标不一定是a标签，这个时候需要使用下一种方法，id定位法了。

2，id定位法

id定位法中，可以使用任何标签来作为锚点目标，同时设置该标签的id值与锚点链接中的href值相对应

如下：href="#mao"

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box1 {        width: 100px;        height: 100px;        background: orange;      }    </style>  </head>  <body>    <a href="#mao">点击此处到目标位置</a>    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />    <div class="box1" id="mao">目标位置</div>  </body></html>

0b3f0a50-79b4-42a0-9a8e-b3715bda69e2

你甚至可以跳转到另一个页面的锚点目标位置

index.html

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box1 {        width: 100px;        height: 100px;        background: orange;      }    </style>  </head>  <body>    <a href="test_css3.html#otherPage" target="_blank"      >点击此处到test_css3.html的目标位置</a    >  </body></html>

test_css3.html

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box1 {        width: 100px;        height: 100px;        background: orangered;      }    </style>  </head>  <body>    <div class="box1" id="otherPage">另一个页面的目标位置</div>  </body></html>

571d58f8-67cb-4aa5-b06c-59aacf2b6722

CSS伪类之:target

定义和用法

a标签里的href的URL后面跟有锚名称#，指向文档内某个具体的元素。这个被链接的元素就是目标元素（target element）

:target选择器可用于选取当前活动的目标元素。

此例中，

id为tab1和tab2的目标元素在:target的限定范围内，故其作为活动的目标元素时会被套用蓝色背景

id为tab3的目标元素没有在:target的限定范围内，故其作为活动的目标元素时不被套用蓝色背景

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .tab_content {        height: 800px;        background: red;        margin-bottom: 100px;      }      #tab1:target,      #tab2:target {        background: blue;      }    </style>  </head>  <body>    <ul class="tabs">      <li><a href="#tab1">标签一</a></li>      <li><a href="#tab2">标签二</a></li>      <li><a href="#tab3">标签三</a></li>    </ul>    <div id="tab1" class="tab_content">      <!--tabed content-->    </div>    <div id="tab2" class="tab_content">      <!--tabed content-->    </div>    <div id="tab3" class="tab_content">      <!--tabed content-->    </div>  </body></html>

64868859-881a-4147-a581-10dc03ad47f5

95a58537-82ce-47f7-a681-7388c20b6c1b

987146dd-ccc0-4517-ab59-a7e810e8c52c

IFC布局规则

IFC(Inline Formatting Contexts)直译为"内联格式化上下文"，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响) IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。 同个ifc下的多个line box高度会不同。
IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。
那么IFC一般有什么用呢？
水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

GFC布局规则

GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文"，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。
那么GFC有什么用呢，和table又有什么区别呢？
首先同样是一个二维的表格，但GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义和控制。

FFC布局规则

FFC(Flex Formatting Contexts)直译为"自适应格式化上下文"，display值为flex或者inline-flex的元素将会生成自适应容器（flex container），可惜这个牛逼的属性只有谷歌和火狐支持，不过在移动端也足够了，至少safari和chrome还是OK的，毕竟这俩在移动端才是王道。
Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。 伸缩容器中的每一个子元素都是一个伸缩项目。
伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局。

CSS之浮动元素/绝对定位元素的宽高

当没有设置宽高或者宽高设置为auto时

**浮动元素/绝对定位元素(absolute和fixed)它们的width和height都由子元素来决定。**如下：

content-width等于子元素的content-width + padding + border + margin

height与width同理。

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box2 {        background: cyan;        float: left;      }      p {        margin-top: 50px;        padding-top: 50px;        border-top: 10px solid tomato;        margin-bottom: 50px;        padding-bottom: 50px;        border-bottom: 10px solid tomato;        margin-left: 50px;        padding-left: 50px;        border-left: 10px solid tomato;        margin-right: 50px;        padding-right: 50px;        border-right: 10px solid tomato;      }    </style>  </head>  <body>    <div class="box2">      <p>test</p>    </div>  </body></html>

image-20210909163217574

当宽高设置为100%时

width:100%;

浮动元素的width等于其父级的content-width

absolute定位元素的width等于其相对定位父元素的content-width + padding， 但是当其相对定位父元素为html元素时，它的width等于html元素的content-width + padding + border + margin

fixed定位元素的width等于html元素的content-width + padding + border + margin

height:100%;
当父级元素设置了height时，

浮动元素的height等于其父级的content-height

absolute定位元素的height等于其相对定位父元素的content-height + padding， 但是当其相对定位父元素为html元素时，它的height取值由来未知。。

fixed定位元素的height取值由来未知。。

CSS之word-wrap, word-break, white-space

word-wrap

定义和用法

word-wrap 属性允许长单词或 URL 地址换行到下一行。

可能的值
值描述
normal只在允许的断字点换行（浏览器保持默认处理）。
break-word在长单词或 URL 地址内部进行换行。

长单词换行示例

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      p {        width:100px;        word-wrap:break-word;        background: chocolate;      }    </style>  </head>  <body>    <p>test test tessssssssssssssssssssssssst test</p>  </body></html>

image-20210909235825321

word-break

定义和用法

word-break 属性规定自动换行的处理方法。

**提示：**通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。

可能的值
值描述
normal使用浏览器默认的换行规则。
break-all允许在单词内换行。
keep-all只能在半角空格或连字符处换行。

normal默认换行示例

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      p {        width:100px;        word-break:normal;        background: chocolate;      }    </style>  </head>  <body>    <p>troopoo troopoo troopoo troopoo</p>  </body></html>

image-20210910000218072

允许在单词内换行break-all

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      p {        width:100px;        word-break:break-all;        background: chocolate;      }    </style>  </head>  <body>    <p>troopoo troopoo troopoo troopoo</p>  </body></html>

image-20210910000330946

只允许在半角空格或者连字符处换行

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      p {        width:100px;        word-break:keep-all;        background: chocolate;      }    </style>  </head>  <body>    <p>troopootroopootr oopoo-troopoo</p>  </body></html>

image-20210910000546838

white-space

定义和用法

white-space 属性设置如何处理元素内的空白。

这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

可能的值
值描述
normal默认。空白会被浏览器忽略。
pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap保留空白符序列，但是正常地进行换行。
pre-line合并空白符序列，但是保留换行符。
inherit规定应该从父元素继承 white-space 属性的值。

在元素中禁止文本折行

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      p {        width:100px;        white-space: nowrap;        background: chocolate;      }    </style>  </head>  <body>    <p>test test test test test test test</p>  </body></html>

image-20210909234933802

white-space的默认表现下，会忽略多余的空白（多个空白转换成一个空白），并且达到宽度极限时会换行（单词很长时不会换行，如遇长单词会等到空白出现才换行）

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      p {        width:100px;        white-space: normal;        background: chocolate;      }    </style>  </head>  <body>    <p>test    test tessssssssssssssssssssssssst test</p>  </body></html>

image-20210909235333401

此时可以同时设置word-wrap为break-word来强制长单词到达宽度极限时换行

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      p {        width:100px;        white-space: normal;        background: chocolate;      }    </style>  </head>  <body>    <p>test    test tessssssssssssssssssssssssst test</p>  </body></html>

image-20210909235624671

text-align之justify

text-align:justify; 可以实现两端对齐

在默认情况下，要想有两端对齐效果，需要满足两点：一是有分隔点，如空格；二是要超过一行，此时非最后一行内容会两端对齐。

<!DOCTYPE html><html lang="zh-CH">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .justify {        text-align: justify;        background: gray;      }      .justify li {        display: inline-block;      }    </style>  </head>  <body>    <ul class="justify">      <li>        <img          src="https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png"          alt=""        />        <p>图标描述1</p>      </li>      <li>        <img          src="https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png"          alt=""        />        <p>图标描述2</p>      </li>    </ul>  </body></html>

image-20210911121339937

上面的例子满足了第一点：<li>标签中间有换行符，在默认white-space属性下会转换成普通空格，但是并不满足第二点，内容并没有超过一行。这里hack一下，用after伪元素来操作。如下：

<!DOCTYPE html><html lang="zh-CH">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .justify {        text-align: justify;        background: gray;      }      .justify li {        display: inline-block;      }      .justify::after {        content: "";        display: inline-block;        width: 100%;      }    </style>  </head>  <body>    <ul class="justify">      <li>        <img          src="https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png"          alt=""        />        <p>图标描述1</p>      </li>      <li>        <img          src="https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png"          alt=""        />        <p>图标描述2</p>      </li>    </ul>  </body></html>

image-20210911121728282

上面的例子让伪元素独占最后一行，使得第一行满足了justify的两个条件，进而实现了两端对齐的效果。

justify的另外一个例子

设置简易登录框

<!DOCTYPE html><html lang="zh-CH">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      span {        text-align: justify;        float: left;        width: 100px;        font-size: 16px;      }      input {        width: 100px;      }      span::after {        content: "";        display: inline-block;        width: 100%;      }    </style>  </head>  <body>    <div class="box">      <span>昵称</span>：<input type="text" />      <br />      <br />      <span>电子邮箱</span>：<input type="email" />    </div>  </body></html>

image-20210911134651033

可替换的内联元素

img/input/svg

因为它们的表现随其属性的变化而变化，例如改变img元素的src属性则会替换掉img所展示的图片

MoeCodeFree
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端小白的第一篇博客—CSS定位
SAKURE2210866448的博客
10-06 265
CSS定位的一些个人理解 本人是还没有入门的技术小白，仅以此篇记录成长，欢迎大家一起讨论学习，也欢迎在评论区指出问题~~ 言归正传啦，以下是关于CSS中定位的个人理解。 一、分类 在CSS中定位分为：static静止定位、relative相对定位、absolute绝对定位、fixed固定定位、inherit继承定位。本文主要讨论相对定位，绝对定位与固定定位。 二、应用 （1）相对定位 相对自己的原...
【前端】【html/css】前端学习之路（十一）：定位方式（position）
SuiKaSan的自学室
07-08 3805
定位（position）    说到定位，可能概念都会有些模糊，那么为了清楚定位的作用，下面是定位在网页中的一些应用：①②③    以上三个地方，如果使用标准流或者浮动，实现会比较复杂或者难以实现，此时用定位来做就比较简单。1.元素的定位属性元素的定位属性主要包括定位模式和边偏移两部分（1）边偏移边偏移属性描述top顶端偏移量，定义元素相对于其父元素上边线的距离bottom底部偏移量，定义元素相对...
今日份CSS学习：position属性
SAS13的博客
09-26 508
一、position属性 1、position: static static为每个元素获得的默认值。即没有定位，意味着将元素放在文档流中的正常位置，其元素不会受到 top, bottom, left, right影响。 2、position: absolute 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。 ...
CSS定位-6.3绝对定位-position: absolute；--是相对于除了static定位之外的第一个父元素进行定位，如果没有就相对于页面定位--好好看6，7例子
qq_44280574的博客
09-01 648
1.什么是绝对定位 （1.）是相对于除了static定位之外的第一个父元素进行定位，如果没有就相对于页面定位 是相对于除了static定位之外的第一个父元素进行定位，如果没有就相对于页面定位【好好理解这句话】即，【绝对定位，是相对于，已经定位的父元素进行定位的，就是，它会从它的父元素一点一点往上层去找，（如果它的父元素的定位属性是除了position:static 之外的其他的呢，它就以它的父元素作为参考点；如果它的父元素就是普普通通的static，那么它就继续往上找，如果都不是，就找到了body这一块，也
css中把内联元素变成块元素
qq_41555580的博客
09-19 2543
使用display：block即可实现 例子如下 首先写出css代码 <style type="text/css"> span{ background-color: #2cde57; } .span1{ display: block; width: 1000px; ...
CSS3二级下拉动画滑动菜单特效代码
03-20
CSS3二级下拉动画滑动菜单是一款CSS3二级下拉动画菜单，这款CSS3菜单的特点是在菜单展开时，菜单的背景会出现滑动的动画效果。
CSS（二）
01-08
外边距合并7．margin-top 塌陷二、CSS 元素溢出overflow 属性介绍：三、块元素、内联元素、内联块元素课堂练习四、浮动文档流浮动特性清除浮动五、定位关于定位定位元素特性定位元素层级CSS实现垂直居中的问题六、...
CSS3二级环形动画菜单特效代码
03-20
CSS3二级环形动画菜单，旋转动画菜单。
纯CSS二级导航菜单
11-20
纯CSS二级导航菜单
纯CSS制作二级导航下拉列表
04-30
网页制作前端用纯CSS制作二级导航，用最简单的CSS样式实现二级导航下拉列表，html和css样式简洁清晰，一看就会，拿来就能直接用。
html怎么转换内联元素,css怎么将内联元素设成块元素？
weixin_39544333的博客
06-02 336
元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。下面我们来看一下css将内联元素设成块元素的方法。css使用display：block样式即可将内联元素设成块元素，display属性规定元素应该生成的框的类型。css将内联样式设成块元素示例：cssspan{background-color: #2cde57;}.span1{disp...
css取消a标签自动换行,css中a元素放长英文字母或者数字自动换行的解决
weixin_28678517的博客
08-03 641
request 、response和session的区别request: 1.request.getParameter("key")接受的是来自客户登陆端的数据,接受的是post或get方式传送的value. 2.请求的默认字符集是IS ...&lt&semi;转&gt&semi; jsp页面向action传值的方法(最后一种简单)多的不说,直接上代码; stru...
Python爬虫入门 Urllib库的基本使用
dixu7849的博客
03-31 6576
1.分分钟扒一个网页下来 怎样扒网页呢？其实就是根据URL来获取它的网页信息，虽然我们在浏览器中看到的是一幅幅优美的画面，但是其实是由浏览器解释才呈现出来的，实质它是一段HTML代码，加 JS、CSS，如果把网页比作一个人，那么HTML便是他的骨架，JS便是他的肌肉，CSS便是它的衣服。所以最重要的部分是存在于HTML中的，下面我们就写个例子来扒一个网页下来。 1 import ...
html教程圆角边框,css教程制作css圆角边框(兼容全部浏览器)
weixin_36256447的博客
06-08 203
复制代码代码如下:b{display:block;height:1px;background:#f6f6f6;overflow:hidden;}.w300{width:300px;margin:0 4px;background:#ccc;} /*第一角度*/.w300-2{width:300px;margin:0 3px;} /*第二脚度*/.w302{widt...
-1. HTML&CSS 基础总结
Holsen_bakery's Learning notes Blog
03-05 817
HTML&CSS 基础知识笔记总结
火狐text-align:justify设置两端对齐失效
ClassicSong的博客
08-26 1277
都这个时代了，火狐居然不支持text-align:jusitify；可能吗？？？
6-2、选择器
鸵鸟
09-06 854
选择器
CSS 定位布局、弹性布局、和动画animation、CSS过渡Transitions、自适应布局、兼容性问题
weixin_45038370的博客
08-11 711
CSSday04 布局和动画 定位 固定定位 position:fixed； 固定在视口区的某一位置，原来位置不保留，如果没有设置定位属性，在原来位置固定定位 固定定位 固定与视口区的某个位置，不随页面滚动而滚动 脱离文本流，原先位置不保留 没有设置定位属性的时候，在原来位置显示 比如说一个网页右下角的广告 相对定位 position: relative; 相对于原先位置进行定位，没有定位属性的情况下，默认在当前位置，不脱离文档流，原先位置保留 相对定位 相对于原来文档流中的位置定位 不
java web树形图查询_Javaweb生成族谱树形图
weixin_34079177的博客
02-25 385
/*** 族谱树形*/@Action(value = "depttree", results = { @Result(name = "success", location = "/WEB-INF/admin/family/user/tree.jsp") })public String depttree() throws Exception {HttpServletRequest request =...
css选择第二个子元素
最新发布
07-27
要选择第二个子元素，可以使用CSS伪类选择器`:nth-child()`。这个选择器可以接受一个参数，用来指定要选择的元素在其父元素的位置。例如，要选择父元素的第二个子元素，可以这样写： ```css 父元素:nth-child(2) { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值