一、常见问题

1.问:height:100% 没有发挥作用

答:要想发挥作用还得要求其父元素设置height:100%

如下所示要为bodyhtml设置height:100%

<html>
    <body>
        <div class="container">
        </div>
    </body>
</html>

二、基础属性

background:fixed no-repeat #111fff url('./example.jpg'); 
//简写属性,作用是将背景属性设置在一个声明中

background-attachment:fixed;                //背景图像固定不随页面滚动(默认随页面滚动)

background-color:#111fff;                    //设置元素的背景颜色
background-color:rgb(180,16,16);
background-color:rgba(180,16,16,0.5);

background-image:url('./img/example.jpg')    //把图像设置为背景

background-position                            //设置背景图像的起始位置。
background-position:left top;               //左边,顶部对齐边缘(默认情况)
background-position:top;                    //顶部对齐,左右居中

background-repeat:no-repeat                    //设置背景图像不重复(默认是重复)

height: calc(100% - 60px);                   //设置元素高度为 父元素高度的100%减去60px

三、display

display的属性值主要有四个值:

  • none
  • block
  • inline
  • inline-block

1.none

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

visibility:hidden;也可以隐藏某个元素,。但它仍会占用空间影响布局。

2.block

block 元素会独占一行,多个block元素会各自新起一行。默认情况下block元素宽度自动填满其父元素宽度。

block元素可以设置widthheight属性。块级元素即使设置了宽度,仍然是独占一行。

block元素可以设置marginpadding属性。

3.inline

inline元素设置widthheight属性 无效

inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排不下才会换下一行,其宽度随该元素的内容而变化。

inline 元素的marginpadding属性,水平方向的padding-left padding-rightmargin-leftmargin-right产生边距效果;但竖直方向的padding-toppadding-bottommargin-topmargin-bottom不会产生边距效果。

4.inline-block

inline-block元素将对象呈现为`inline对象,但是对象的内容作为block对象呈现,既具有block的宽度高度特性又具有inline的同行特性。

  • 常见block元素

div , p , form , table , ol , ul , li , h1 , h2 , h3 , h4 , h5 , h6 , address , blockquote , center , dir , dl , fieldset , hr , isindex , menu , noframes , noscript , pre

  • 常见inline元素

a , span , label , i , img , input , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , kbd , q , s , samp , select , small , strike , strong , sub , sup ,textarea , tt , u , var

  • 可变元素(根据上下文关系确定该元素是块元素还是内联元素)

iframe , button , del , applet , ins , map , object , script

四、position

position属性主要有五个值:

  • static
  • relative
  • absolute
  • fixed
  • sticky

relativeabsolutefixed这三个属性值有一个共同点,都是相对于某个基点的定位,只是基点不同。这三种定位都不会对其他元素的位置产生影响,因此元素之间可能产生重叠。

1.static

如果省略position属性,浏览器就认为该元素是static定位,此时使用topbottomleftright这四个属性无效。

2.relative

relative表示,相对于默认位置(即static时的位置)进行偏移,即定位基点是本元素的默认位置。

它必须搭配topbottomleftright这四个属性一起使用,用来指定偏移的方向和距离。

3.absolute

absolute表示,相对于上级元素(一般是父元素)进行偏移,即定位基点是父元素。

但是定位基点(一般是父元素)不能是static定位,否则定位基点就会变成整个网页的根元素html。另外,absolute定位也必须搭配topbottomleftright这四个属性一起使用。

注意,absolute定位的元素会被"正常页面流"忽略,即在"正常页面流"中,该元素所占空间为零,周边元素不受影响。

4.fixed

fixed表示,相对于浏览器窗口进行偏移,即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化,好像固定在网页上一样。

它如果搭配topbottomleftright这四个属性一起使用,表示元素的初始位置是基于浏览器窗口计算的,否则初始位置就是元素的默认位置。

5.sticky

sticky跟前面四个属性值都不一样,很像relativefixed的结合:一些时候是relative定位,另一些时候自动变成fixed定位。

比如 网页的搜索工具栏

初始加载时在自己的默认位置(relative定位),

页面向下滚动时,工具栏变成固定位置,始终停留在页面头部(fixed定位),

等到页面重新向上滚动回到原位,工具栏也会回到默认位置。

sticky生效的前提是,必须搭配topbottomleftright这四个属性一起使用,不能省略,否则等同于relative定位,不产生"动态固定"的效果。

常用于 表格的表头锁定相册图片堆叠

五、对齐

1.元素水平居中对齐

1.1inline元素

只需要在父元素的css中添加text-align:center即可,inline-block元素也适用。

注意:由于text-align是可继承属性,即父元素内部的所有元素都会继承这个属性,从而父元素以及子元素内部的文本都会居中显示

1.2block元素

  1. 只需要在子元素的css中添加margin: 0 auto;即可,inline-block元素也适用。

注意:前提要求本元素设置width的值,如果值为100%居中将不起作用

  1. 父元素设置position: relative;并且子元素设置:left: 0;right: 0;top: 0;bottom: 0;margin: 0 auto;
    将子元素margin改为margin:auto;将会水平垂直居中

    .parent{
        position:relative;  /*相对定位*/
    }
    .son{
        position:absolute;  /*设置绝对定位*/
        width:100px;        /*宽度固定*/
        height:100px;
        background:#abcdef;
        top:0;
        left:0;       /*设置top | left | right | bottom都等于0*/
        right:0;
        bottom:0;
        margin:0 auto;
    }
  2. 使用Flex布局

    .parent{    
        display:flex; 
        flex-direction:row;
        justify-content:center; 
    }
    .son{
        width:100px;
        height:100px;
        background:blue;
     }
  3. transform属性

    .parent{
        position:relative;  /*相对定位*/
    }
    .son{
        width:100px;
        height:100px;
        background:pink;
        position:absolute;
        left:50%;
        transform:translate(-50%,0);
  4. 绝对定位和负的margin-left

    .parent{
          position:relative;
      }
      .son{
          width:100px;
          height:100px;
          position:absolute;
          left:50%;
          margin-left:-50px; /*-宽度/2*/
          background:green;
      }

2.元素垂直居中对齐

  1. 子元素可用vertical-align:middle(使元素垂直对齐),和display:tab-cell(让元素以表格形式渲染),父元素使用display:table(让元素以表格的形式渲染)

    .parent{
        display:table; /*让元素以表格形式渲染*/
        border:1px solid red;
        background:red;
        height:200px;
    }
    .son{
        display:table-cell; /*让元素以表格的单元表格形式渲染*/
        vertical-align:middle;/*使用元素的垂直对齐*/
        background:yellow;
    }
  2. 使用Flex布局

    .parent{
        display:flex;
        flex-direction: column;/*row表示沿水平主轴由左向右排列,column沿垂直主轴由上到下 */
        align-items: center;  /*居中*/
    }
    .son{
        width:100px;
        height:100px;
        background:orange;
    }
  3. transform属性

    .parent{
        position:relative;  /*相对定位*/
    }
    .son{
        width:100px;
        height:100px;
        background:pink;
        position:absolute;
        left:50%;
        transform:translate(-50%,0);
  4. 绝对定位和负的margin-left

    .parent{
            position:relative;
    }
    .son{
            width:100px;
            height:100px;
            position:absolute;
            top:50%;
            margin-top:-50px; /*-宽度/2*/
            background:pink;
    }

3.文字居中对齐

本元素设置text-align: center可将文字水平居中对齐(块元素和行内元素均可用)

本元素设置line-height的值等于height的值可将文字垂直居中(块元素和行内元素均可用)

也可用此方法设置图片居中

六、参考文章

阮一峰-CSS定位详解

菜鸟教程-CSS教程

博客园-block,inline和inline-block概念和区别

简书-如何实现元素的水平垂直居中

Last modification:April 22nd, 2021 at 05:15 pm
如果觉得我的文章对你有用,请我喝杯奶茶吧