【Java Web基础】一些网页设计基础（一）

1. 父盒子下子盒子的左右浮动布局

父盒子CSS：

.parent {display: flex;}

子盒子CSS：

.logo {float: left;}
.title {float: right;}

2. 浮动布局中，高度较小的盒子撑起整个盒子的高度

参考flex布局 ——子元素保持自身高度
这是弹性布局中的问题，会自动拉伸最小的那个盒子高度。解决方法：给父元素添加 align-items: flex-start
父盒子CSS：

.parent {display: flex; align-items: flex-start;}

解决后，子盒子高度不再自动拉伸：

3. 在2中，logo和title都是顶着放置的，让logo和title垂直居中

参考子元素在父元素盒子水平垂直居中显示的办法，但是绝对定位比较死板，所以这里更倾向于使用弹性盒的思路。
利用弹性布局的优势，直接给logo和title加CSS样式。
子盒子CSS：

.logo {float: left; margin: auto;}
.title {float: right; margin: auto;}

效果：

4. 字体大小自适应

为了适应在不同端下的字体大小自适应变化，不应该使用绝对的"px"对字体大小做限制，可以取而代之使用“rem等”
我对字体加上了如下css样式：

.title {float: right; margin: auto; font-size: 2.3rem}

正常响应：

手机端响应：

5. 响应式布局

为了适应不同响应大小下的情况，可以采用响应式布局：
22 【响应式布局】，这里搜了个付费文章，不过看示例代码大概能想起一些之前的东西
大概就是通过@media来根据屏幕大小，来指定不同的样式，根据不同的屏幕大小来变化就行了，例子：

/*<=767px适应样式*/
@media screen and (max-width: 767px){
    .sysname-div {
        margin-right: 10px;
    }
}
/*>=768px适应样式*/
@media screen and (min-width: 768px){
    .sysname-div {
        margin-right: 30px;
    }
}
/*>=992px适应样式*/
@media screen and (min-width: 992px){
    .sysname-div {
        margin-right: 40px;
    }
}
/*>=1200px适应样式*/
@media screen and (min-width: 1200px){
    .sysname-div {
        margin-right: 150px;
    }
}