渡一css8

<div class="wrapper">
        <div class="content"></div>
</div>

.wrapper {
    height: 40px;
    background-color: aquamarine;
}

.content {
    margin: 0 auto;
    width: 1000px;
    height: 40px;
    background-color: coral;
}

蓝色部分会随着页面缩小而缩小，中间橙色部分则放置内容

---

inline inline-block都叫文本类元素，文本间具有文本分隔符

凡是带有line都是文本元素

例如：就带有文本特征
插入图片后，图片间有空格，解决方法把标签间空格去掉即可

position：absolute
float：left/right
上面两个会内部把元素改为行级块元素
display:inline-bloack

当一个行级元素或文本类元素没有文字时，外面的文字会与border的底对齐

<span></span>微微就是我们啊

span {
    height: 200px;
    width: 200px;
    display: inline-block;
    background-color: #ddc;
}

当一个行级元素或文本类元素含有文字时，外面的文字会与里面的文字底对齐

span {
    height: 200px;
    width: 200px;
    display: inline-block;
    background-color: darkgoldenrod;
}

如果里面的文字很大的话 ，外面的文字会跟里面的文字低对齐

当然也可以调对齐线

10px 向上
-10px 向下
middle 中间线对齐

span {
    height: 200px;
    width: 200px;
    display: inline-block;
    background-color: darkgoldenrod;
    vertical-align: -20px;
    font-size: 40px;
}

---

div {
    padding: 0 10px;
    width: 200px;
    line-height: 20px;
    height: 20px;
    font-size: 12px;
    background-color: darkorchid;
    color: rgba(255, 255, 255, 0.8);
}

div::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 11px;
    background-image: url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4004416399,849461467&fm=26&gp=0.jpg);
    background-size: 100% 100%;
    margin-right: 5px;
    vertical-align: -1px;
}

div::after {
    content: "";
    display: block;
    width: 6.5px;
    height: 11.5px;
    float: right;
    background-image: url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=208727941,3300601089&fm=26&gp=0.jpg);
    background-size: 100% 100%;
    margin-top: 5px;
}

font-size：20px设置的是字体的高

<div class="wrapper">
        <img src="xuan1.jpg" class="img">
        <p class="content1">
            {最多两行 20px #333 顶部对齐图片 底部间距8px}
        </p>
        <p class="content2">
            {12px #666 行高1.2}使用语义化的html标签完成以下布局，考虑模块化和扩展性。 容器默认宽度320px，右侧
        </p>
    </div>

.wrapper {
    width: 320px;
}

.wrapper:hover {
    width: 400px;
}

.wrapper .img {
    width: 100px;
    height: 100px;
    float: left;
}

.content1 {
    font-size: 20px;
    line-height: 20px;
    height: 40px;
    overflow: hidden;
    color: #333;
    margin-bottom: 8px;
}

.content2 {
    font-size: 12px;
    color: #666;
    line-height: 1.2em;
}