前端知识-CSS(二)

文章目录

CSS尺寸
[CSS Display(显示) 与 Visibility（可见性）](#CSS Display(显示) 与 Visibility（可见性）)
- [CSS Display - 块和内联元素](#CSS Display - 块和内联元素)
- display可设置的值
[CSS Position(定位)](#CSS Position(定位))
- 重叠的元素
[CSS Overflow](#CSS Overflow)
- overflow属性值：
[CSS Float(浮动)](#CSS Float(浮动))
CSS对齐
- 元素居中对齐
- 文本居中对齐
- 图片居中对齐
- [左右对齐 - 使用定位方式](#左右对齐 - 使用定位方式)
- [左右对齐 - 使用 float 方式](#左右对齐 - 使用 float 方式)
- [垂直居中对齐 - 使用 padding](#垂直居中对齐 - 使用 padding)
- [垂直居中 - 使用 line-height](#垂直居中 - 使用 line-height)
- [垂直居中 - 使用 position 和 transform](#垂直居中 - 使用 position 和 transform)

CSS尺寸

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。

属性	描述
height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

CSS Display(显示) 与 Visibility（可见性）

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。

CSS Display - 块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。

块元素的例子： h1、p、div

内联元素只需要必要的宽度，不强制换行。

内联元素的例子：span、a

display可设置的值

inline：行内显示
block：块显示
none：不显示
table：表格显示
inline-block：行内块显示

CSS Position(定位)

position属性值：

static：HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
relative：相对定位元素的定位是相对其正常位置。移动相对定位元素，但它原本所占的空间不会改变。
fixed：元素的位置相对于浏览器窗口是固定位置。
absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html
sticky：基于用户的滚动位置来定位。

重叠的元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序（负数显示在下面，正数显示在上面，数越小越往下），如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

不同的鼠标类型：

复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
</body>
</html>

CSS Overflow

overflow属性值：

visible：默认值。内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，并且其余内容是不可见的。
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
inherit：规定应该从父元素继承 overflow 属性的值。
注意:overflow 属性只工作于指定高度的块元素上。

CSS Float(浮动)

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
彼此相邻的浮动元素,如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
清除浮动 - 使用 clear。eg：.text-line {clear:both}

属性	描述	值
clear	指定不允许元素周围有浮动元素。	left、right、both、none、inherit
float	指定一个盒子（元素）是否可以浮动。	left、right、none、inherit

CSS对齐

元素居中对齐

要水平居中对齐一个元素(如 div), 可以使用 margin: auto;
注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;

图片居中对齐

要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中:

左右对齐 - 使用定位方式

我们可以使用 position: absolute; 属性来对齐元素:

设置了position:absolute后，需要设置right/left/top/bottom边距

注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。

提示: 当使用 position 来对齐元素时, 通常元素会设置 margin 和 padding 。这样可以避免在不同的浏览器中出现可见的差异。

复制代码

<!DOCTYPE html>
<html>
      <head>
            <title>CSS 对齐</title>
            <meta charset="utf-8">
            <style>
                  .right {
                        position: absolute;
                        right: 0px;
                        border: 1px solid #73AD21;
                        padding: 10px;
                  }
            </style>
      </head>
      <body>
            <h2>右对齐</h2>
            <p>以下实例演示了如何使用position来实现右对齐：</p>

            <div class="right">
                  <p>菜鸟教程 -- 学的不仅是技术，更是梦想！</p>
            </div>
      </body>
</html>

左右对齐 - 使用 float 方式

我们也可以使用 float 属性来对齐元素:

我们可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题:

复制代码

<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8"/>
            <title>float对齐</title>
            <style>
                  div {
                        border: 3px solid #4CAF50;
                        padding: 5PX;
                  }
                  .img1 {
                        float: right;
                  }

                  p {
                        margin-top: 300px;
                  }

                  .clearfix {
                        overflow: auto;
                  }

                  .img2 {
                        float: right;
                  }
            </style>
      </head>
      <body>
            <div>
                  <img class="img1" src="images/index_button.png" alt="按钮" width="170px" height="170px">
                  菜鸟教程 - 学的不仅是技术，更是梦想！！！
            </div>
            <p>在父元素上添加clearfix类，并设置overflow:auto;来解决问题</p>

            <div class="clearfix">
                  <img class="img2" src="images/index_button.png" alt="按钮" width="170px" height="170px"></img>
                  菜鸟教程 - 学的不仅是技术，更是梦想！！！
            </div>
      </body>
</html>

垂直居中对齐 - 使用 padding

CSS 中有很多方式可以实现垂直居中对齐。一个简单的方式就是头部顶部使用 padding:

如果要水平和垂直都居中，可以使用 padding 和 text-align: center:

垂直居中 - 使用 line-height

我们让 line-height 属性值和 height 属性值相等来设置 div 元素居中

复制代码

.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;
}

垂直居中 - 使用 position 和 transform

除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中:

复制代码

.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}
 
.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}