1. 1. 要点归纳
  2. 2. 存在问题
  3. 3. 学习任务

前端学习第三周

要点归纳

  1. 文本水平居中
    1
    text-align: center;

将这句话加在div的CSS部分，可以使该div中的文本水平居中，在没有设置垂直居中的时候，默认文本是和div的上边框对齐的

  1. 块级元素与内联元素
  • 块级元素只能放在不同的行，会自动换行，但是可以设置内外边距
  • 内联元素在没有换行符和超出边框的宽度时不会换行，不可以设置内外边距

  • 使块级元素变成内联元素时在需要改变属性的元素的CSS部分加以下内容

    1
    display: inline;
    • 应用如上代码，块级元素变成内联元素以后，就无法设置内外边距，为了解决此问题，将上面代码优化如下：这样一来，既可以放在一行，也可以设置内外边距
      1
      display: inline-block;
  1. div的水平垂直居中
    1
    2
    3
    4
    5
    6
    7
       width: 1200px;
    height: 800px;
       position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -400px;
    margin-left: -600px;

此方法用的绝对定位的原理，这里的百分比相对于距离最近的祖先元素（div）,,由于本身的div有长宽，所以在定位以后需要设置外边距，均为负一半的距离

除此方法以外，还可以直接设置边距

  1. 水平方向的描述词为 left center right,垂直方向的描述词汇为top middle bottom
  2. 文本的垂直居中，可以设置外边距

  3. 设计思想：如果给出大小相同，样式相同的很多框，但是颜色不一样，可以设置两类选择器，一类管理样式，一类管理颜色，这样可以少些很多重复的内容，在class里面选择两种样式既可

    1
    2
    3
    4
    5
    6
    7
    .border {}
    .red {}
    .green {}
    <div class="border red">
    </div>
    <div class="green">
    </div>

  4. 圆弧的画法

    1
    2
    3
    4
    width:50px;
    height:50px;
    border-radius: 0 0 100% 0;
    background:#Fc0;

以上可以画出右下角的1/4圆弧，半径为50px

  1. 带有弧度的边框

    1
    2
    3
    4
    5
    6
       width: 120px;
    height: 40px;
    background: #BABABA;
       border: 1px solid #BABABA;
       border-radius: 2px; /*关键*/
       display: inline-block;

  2. 文本垂直居中
    line-height 设置为框的高度

    存在问题

  3. markdown 中图片怎么展示，图片的文件应该存在什么地方？（图床上）
  4. 居中分不分div和文本？（对）
  5. 制作网页的一般思路是什么，用什么步骤做，网页的布局有没有规律，同类的布局有没有类似的框架？网页的哪些地方的长宽需要设死，哪些需要自适应?(宽度设死。高度是被其中的元素撑开的)

  6. 链接和选择器是怎么结合的？

    1
    .class a :hover{}

  7. 什么时候用浮动（看心情）

  8. 一个父div 里面有很多子div,将子div变成内联，需要每个儿子都加display: inline-block;还是只在父亲的CSS部分加display: inline-block;就好？（前者）
  9. 圆弧里面的百分比和像素值分别代表什么？（百分比为边框四个角）

    学习任务

  10. 完成上周遗留任务四，关于水平垂直居中以及画圆的练习
  11. CSS样式的综合练习