[散修弟子]CSS-9217|2021年03月21日的日报-技能树.IT修真院

发表于： 2021-03-21 23:37:16

1 1027

今天完成的事情：

1.学习使用text-align

1.center 属性来控制内容居中

2.left 左对齐

3.right 右对齐

4.justify 两端对齐,最后一行将不生效。如果需要最后一行生效可以在后加一个伪类设置一个空白div，并设置宽度100%，display:inline-block

2.学习了display属性，通常使用的属性值：

1.inline 将元素转换为行内元素

2.block 将元素转化为块元素

3.inline-block 将元素转换为行内元素，并同时具有块元素的属性方法，列如设置marin和padding的高度

4.none 隐藏元素

还有一个不常用的table-cell属性，可以用来设置上下居中

```

.background{
    width: 300px;
    height: 300px;
    border: 1px solid #333;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.background img{
    width: 260px;
    height: 180px;
    background-color: red;
}

```

    <div class="background">
        <img src="##">
    </div>

```

以及左右自适应

```

.head{ 
    width: 45px; 
    height: 45px; 
    background-color: grey; 
    float: left; 
    margin: 30px 30px; 
} 
.sms{ 
    display: table-cell; 
} 
.picture{ 
    height: 120px; 
    width: 80px; 
    background-color: red; 
}

```

    <div class="head">Head</div>
    <div class="sms">
        <p>得胆可书韩让选韩终过竟有丹德次在陈答罪，同叹兴性又逃这快足情场问不留，君视是用讨，帝事斗药清，极畴。</p>
        <div class="picture">Picture</div>
    </div>