前端知识-CSS(二)

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代码中的元素将被显示在最前面。

不同的鼠标类型：

 
 


请把鼠标移动到单词上，可以看到鼠标指针发生变化：
auto

crosshair

default

e-resize

help

move

n-resize

ne-resize

nw-resize

pointer

progress

s-resize

se-resize

sw-resize

text

w-resize

wait

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 。 这样可以避免在不同的浏览器中出现可见的差异。

      
            
            
            
      
      
            
右对齐
            
以下实例演示了如何使用position来实现右对齐：

            

                  
菜鸟教程 -- 学的不仅是技术，更是梦想！
            
      

左右对齐 - 使用 float 方式

我们也可以使用 float 属性来对齐元素:
我们可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题:

      
            
            
            
      
      
            

                  
                  菜鸟教程 - 学的不仅是技术，更是梦想！！！
            
            
在父元素上添加clearfix类，并设置overflow:auto;来解决问题

            

                  
                  菜鸟教程 - 学的不仅是技术，更是梦想！！！
            
      

垂直居中对齐 - 使用 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%);
}