ife2015spring-task0001笔记总结

盒模型及定位

6.1 任务描述
Q1. 用两种方法来实现一个背景色为红色、宽度为960px的DIV在浏览器中居中

效果图：

方法一：巧用margin

<div id="method1"></div> <!--方法一：巧用margin-->

div#method1 {background-color: red;width:960px;height: 50px;margin: 0 auto;
}

方法二：弹性盒

<div id="method2"><div id="c1"></div></div>

div#method2 {display: flex;   justify-content: center;}#c1 {background-color: red;width:960px;height: 50px;
}

Q2.请在不使用border-radius的情况下实现一个可复用的高度和宽度都自适应的圆角矩形
效果图：

<div id="box"><div class="radius"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div><p>这是css文本框</p><div class="radius"><div class="r5"></div><div class="r6"></div><div class="r7"></div><div class="r8"></div></div>
</div>

#box {  /*step1 设置框体长宽*/width:960px;height: 50px;margin:50px auto;
}
.r1,.r2,.r3,.r4,.r5,.r6,.r7,.r8 {  /*step2 设置圆角像素高 用来组合*/display: block;height: 1px;overflow: hidden;
}
.r1,.r8 {margin: 0 5px;background-color: #000;
}
.r2,.r7 {margin: 0 3px;border-left: 2px solid;border-right:2px solid;
}
.r3,.r6 {margin: 0 2px;border-left: 1px solid;border-right:1px solid;
}
.r4,.r5 {margin: 0 1px;border-left: 1px solid;border-right:1px solid;
}
#box p {border-right:1px solid #000; border-left:1px solid #000; overflow:hidden; margin: 0 auto;  text-align: center;
}

具体的绘制逻辑可以看这里
注意，border-left: 2px solid; border-right:2px solid;不等于border：0 2px solid；后者的solid属性会让上下border为0的指令失效。

Q3. 用两种不同的方法来实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化

效果图：

方法一：栅格布局

<div class="table"><div class="a"></div><div class="b"></div><div class="c"></div>
</div>

.table {  /*方法一： 栅格布局*/display: grid;width: 80%;grid-template-columns: 100px auto;grid-template-rows: 50px 50px;
}
.a {grid-row: 1;grid-column: 1;background: rgb(221, 160, 160);
}
.b {grid-row: 1;grid-column: 2;background: rgb(218, 125, 125);
}
.c {grid-row: 2;grid-column: 1/3;background: rgb(218, 65, 65);
}

方法二：表格布局table (适用于表格)《css权威指南》p735

<table><tr><td class="d"></td><td class="e"></td></tr><tr><td class="f" colspan="2"></td></tr>
</table>

table { width: 80%;border-collapse: collapse;
}
tr { height: 50px;
}
.d {width: 100px;background: rgb(221, 160, 160);
}
.e {width:auto;background: rgb(218, 125, 125);
}
.f {background: rgb(218, 65, 65);
}

ps.单元格之间的边框不是用border控制，而是用border-collapse控制。

方法三： float布局

<div class="table2"><div class="g"></div><div class="h"></div><div class="i"></div>
</div>

.table2 {width:80%;
}
.g {background-color:  rgb(221, 160, 160); width:100px; float: left; height: 50px;}
.h{background-color: rgb(218, 125, 125); height: 50px;}
.i{background-color: rgb(218, 65, 65); width: 100%; height: 50px; }

Q4.用两种不同的方式来实现一个三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化

效果图：

方法一：弹性盒布局 flex box

<div class="table4"><div class="a1"></div><div class="b1"></div><div class="c1"></div>
</div>

.table4 { /*弹性盒*/display: flex;height: 50px;width: 80%;
}
.a1 {width:300px;flex: none;background-color:  rgb(221, 160, 160);
}
.b1 {flex: 1 1 auto;background-color: rgb(218, 125, 125);
}
.c1 {width:300px;flex: none;background-color: rgb(218, 65, 65);
}

方法二：栅格布局grid

<div class="table5"><div class="a2"></div><div class="b2"></div><div class="c2"></div></div>

.table5 { /*栅格布局*/display: grid;height: 50px;width: 80%;grid-template-columns: 300px auto 300px;
}
.a2 {background-color:  rgb(221, 160, 160);
}
.b2 {background-color: rgb(218, 125, 125);
}
.c2 {background-color: rgb(218, 65, 65);
}

方法三：定位position

<div class="table6"><div class="a3"></div><div class="b3"> </div><div class="c3"></div>
</div>


.table6 {position: relative;height: 50px;width: 80%;margin-left: 50px;margin-top: 50px;margin-bottom: 50px;
}
.a3 {width: 300px;position: absolute; top:0; left:0; background-color:  rgb(221, 160, 160);
}
.b3 {margin:0 300px;background-color: rgb(218, 125, 125);
}
.c3 {width: 300px;position: absolute; top:0; right:0; background-color: rgb(218, 65, 65);
}

Q5.实现一个浮动布局，红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化

效果图：

方法：弹性盒布局

<div class="table7"><div class="a4">1</div><div class="b4">2</div><div class="c4">3</div><div class="d4">4</div><div class="e4">5</div><div class="f4">6</div><div class="g4">7</div><div class="h4">8</div><div class="i4">9</div>
</div>

.table7 {display: flex;flex-flow: row wrap;width:50%;background-color: rgb(218, 65, 65);
}
.a4,.b4,.c4,.d4,.e4,.f4,.g4,.h4,.i4 {width: 300px;height: 50px;background-color: rgb(56, 45, 206);margin: 5px;
}

ife2015spring-task0001笔记总结相关推荐

JavaScript作用域学习笔记(ife2015spring学习心得)
本文参照以下两位前辈的文章,加上自己的见解,有错误之处还望大家指出鸟哥:Javascript作用域原理理解 JavaScript 作用域和作用域链为什么要理解作用域初学js便听人说这门语言作用 ...
【读书笔记】知易行难，多实践
前言: 其实,我不喜欢看书,只是喜欢找答案,想通过专业的解答来解决我生活的困惑.所以,我听了很多书,也看了很多书,但看完书,没有很多的实践,导致我并不很深入在很多时候. 分享读书笔记: <高效1 ...
【运维学习笔记】生命不息，搞事开始。。。
001生命不息,搞事不止!!! 这段时间和hexesdesu搞了很多事情! 之前是机械硬盘和固态硬盘的测速,我就在那默默的看着他一个硬盘一个机械测来测去. 坐在他后面,每天都能看到这位萌萌的小男孩,各 ...
SSAN 关系抽取论文笔记
20210621 https://zhuanlan.zhihu.com/p/353183322 [KG笔记]八.文档级(Document Level)关系抽取任务共指id嵌入一样但是实体嵌入的时候 ...
pandas以前笔记
# -*- coding: utf-8 -*- """ Created on Sat Jul 21 20:06:20 2018@author: heimi "& ...
PyTorch 学习笔记（六）：PyTorch hook 和关于 PyTorch backward 过程的理解 call
您的位置首页 PyTorch 学习笔记系列 PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解发布: 2017年8月4日 7,195阅读 ...
容器云原生DevOps学习笔记——第三期：从零搭建CI/CD系统标准化交付流程
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
容器云原生DevOps学习笔记——第二期：如何快速高质量的应用容器化迁移
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
王道考研计算机网络笔记第六章：应用层
本文基于2019 王道考研计算机网络: 2019 王道考研计算机网络个人笔记总结第一章:王道考研计算机网络笔记第一章:概述&计算机网络体系结构第二章:王道考研计算机网络笔记第 ...
王道考研计算机网络笔记第五章：传输层
本文基于2019 王道考研计算机网络: 2019 王道考研计算机网络个人笔记总结第一章:王道考研计算机网络笔记第一章:概述&计算机网络体系结构第二章:王道考研计算机网络笔记第 ...

ife2015spring-task0001笔记总结

ife2015spring-task0001笔记总结相关推荐

最新文章

热门文章