IFE_part1(task4-6)

今日实践了以下文本相关的所有属性内容：

 

• text-indent
• text-transform
• text-decoration
• text-align
• word-spacing
• white-space
• color
• line-height
• font
• font-family
• font-size
• font-weight
• font-face

所写的HTML如下：

   <!-- 控制文本缩进 -->
    <p style="text-indent: 20px;">text-indent</p>

    <!-- 控制文本大小写 -->
    <p style="text-transform:uppercase">text-transform</p>

    <!-- 控制文本修饰 -->
    <p style="text-decoration: overline">text-decoration</p>

    <!-- 控制文本对齐方式 -->
    <p style="text-align: center">text-align</p>

    <!-- 属性增加或减少单词间的空白 -->
    <p style="word-spacing: 20px;">word-spacing A</p>

    <!-- 设置如何处理元素内的空白。 -->
    <p style="white-space: pre;">white-space       --pre</p>

    <!-- 设置字体颜色 -->
    <p>color</p>

    <!-- 属性设置行间的距离（行高） -->
    <p>line-height</p>

    <!-- 设置所有字体属性 -->
    <p style="font:italic bold 12px/20px arial,sans-serif;">font</p>

    <!-- 设置字体 -->
    <p style="font-family:'Times New Roman',Georgia,Serif;">font-family</p>

    <!-- 设置字体大小 -->
    <p style="font-size: 250%">font-size</p>

    <!-- 设置文本的粗细 -->
    <p style="font-weight: 900">font-weight</p>

    <!-- 通过 CSS3，web 设计师可以使用他们喜欢的任意字体 -->
    <P>font-face</P>

用两种方法来实现一个背景色为红色、宽度为960px的<DIV>在浏览器中居中：

HTML如下：

  <!-- 实现居中布局的两种方法 -->
    <div class="box1">第一种方法:通过设置margin实现DIV居中</div>
    <div class="box2">第二种方法:先设置绝对定位position: absolute;
                    然后这在水平方向上让div的最左与屏幕的最左相距50%，
                    再用transform向左平移它自己宽度的50%，实现DIV居中</div>

 所对应的的CSS文件如下：

/* 实现居中方法1:使用margin */
.box1 {
    background-color: red;
     960px;
    margin: 0 auto;
    text-align: center;
}
/* 实现居中方法2:使用绝对定位 + transform */
.box2 {
    position: absolute;
    background-color: red;
     960px;
    left: 50%;
    transform: translate(-50%,0);
    text-align: center;
}   

 

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

HTML如下：

<!-- 实现一个可复用的高度和宽度都自适应的圆角矩形    -->
    <div class="div4">
            <div class="top1"></div>
            <div class="top2"></div>
            <div class="top3"></div>
            <div class="top4"></div>
            <div class="top5"></div>
            <div class="main">
                有的圆角矩形是复杂图案，无法直接用border-radius，请在不使用border-radius的情况下实现一个可复用的高度和宽度都自适应的圆角矩形
            </div>
            <div class="bottom5"></div>
            <div class="bottom4"></div>
            <div class="bottom3"></div>
            <div class="bottom2"></div>
            <div class="bottom1"></div>
        </div>

 所对应的CSS文件如下：

/* 实现自适应圆角 */
.div4{
    margin-top: 50px;
    overflow: hidden;
}
.top2, .bottom2, .top3, .bottom3, .top4, .bottom4, .top5, .bottom5{
    height: 1px;
    background: lightblue;
    overflow: hidden;
}
.top1, .bottom1{
    margin: 0px 5px;
    border-top: solid 1px black;
}
.top2, .bottom2{
    margin: 0px 3px;
    border-left: solid 1px black;
    border-right: solid 1px black;
}
.top3, .bottom3{
    margin: 0px 2px;
    border-left: solid 1px black;
    border-right: solid 1px black;
}
.top4, .bottom4{
    margin: 0px 1px;
    border-left: solid 1px black;
    border-right: solid 1px black;
}
.top5, .bottom5{
    margin: 0px 1px;
    border-left: solid 1px black;
    border-right: solid 1px black;
}
.main{
    height: 100%;
    border-left: solid 1px black;
    border-right: solid 1px black;
    background: lightblue;
}

 ps:这段代码不是自己写的，是我搜索得来，目前正在理解消化。

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

HTML如下：

<!-- 实现两列布局的两种方法 -->
    <div class="container">
        <div class="initial">左侧部分宽度固定</div>
        <div class="flex1">右侧部分宽度随浏览器宽度的变化而自适应变化 </div>
    </div>
    
    <div class="container2">
            <div class="initial2">左侧部分宽度固定</div>
            <div class="float1">右侧部分宽度随浏览器宽度的变化而自适应变化 </div>
    </div>

 所对应的CSS如下：

/* 实现两列布局方法1：利用flex */
.container {
    /* background-color: red; */
    display: flex;
    height: 100px;
}
.initial {
     300px;
    background-color: red;
}
.flex1 {
    background-color: palevioletred;
    flex:1;
}

/* 实现两列布局方法2：利用float */
.container2 {
    height: 100px;
}
.initial2 {
    height: inherit;
     300px;
    float: left;
    background-color: rosybrown;
}
.float1 {
    height: inherit;
    background-color: gray;
    margin-left: 300px;
}

 

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

HTML如下：

<!-- 实现三列布局的两种方法 -->
    <div class="container3">
        <div class="three_1">第一列</div>
        <div class="three_2">第二列</div>
        <div class="three_3">第三列</div>
    </div>

    <div class="container4">
        
        <!-- 这里要注意一下盒子的顺序，第三列要排到第二位，不然会被挤到下一列 -->
        <!-- 利用左右浮动来进行布局我是考虑到的，但是盒子顺序不对会导致布局错误的原因我还没有找到 -->
            <div class="three_1_1">第一列</div>
            <div class="three_3_3">第三列</div>
            <div class="three_2_2">第二列</div>

    </div>

 所对应的CSS如下：

/* 实现三列布局方法1:利用flex */
.container3 {
    display: flex;
    height: 100px;
}
.three_1 {
     200px;
    height: inherit;
    background-color: indigo;
}
.three_2  {
    flex: 1;
    height: inherit;
    background-color:darkcyan;
}
.three_3 {
     200px;
    height: inherit;
    background-color: darkorchid;
}

/* 实现三列布局方法2：利用float */

.container4 {
    height: 100px;
}
.three_1_1 {
     200px;
    float: left;
    height: inherit;
    background-color: forestgreen;
}
.three_2_2 {
    margin-left: 200px;
    margin-right: 200px;
    height: inherit;
    background-color: tomato;
}
.three_3_3 {
     200px;
    float: right;
    height: inherit;
    background-color: salmon;
}

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

HTML如下：

   <!-- 实现一个浮动布局，红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化  -->
    <div class="clr"></div>
    <div class="div9">
        <div class="flexbox"></div>
        <div class="flexbox"></div>
        <div class="flexbox"></div>
        <div class="flexbox"></div>
        <div class="flexbox"></div>
        <div class="flexbox"></div>
        <div class="flexbox"></div>
        <div class="flexbox"></div>
        <div class="flexbox"></div>
        <div class="clr"></div>
    </div>

 所对应的CSS如下：

/* 实现一个浮动布局，红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化  */
.div9{
    background-color: red;
    overflow: hidden;
    margin-top: 50px;
}

.flexbox{
    float: left;
    margin: 10px 10px;
     300px;
    height: 300px;
    background-color: blue;
}

.clr{
    clear: both;
}

 

今日总结：

• 掌握CSS各种选择器
• 掌握CSS的继承、层叠、样式优先级机制
• 掌握文本、文字、链接相关的样式属性
• 掌握背景属性
• 掌握列表相关的样式属性
• 深入了解行高属性
• 掌握块状元素、内联元素、和内联块状元素的概念与区别
• 掌握盒模型的所有概念，学会如何计算各种盒模型相关的数值
• 掌握position的相关知识
• 掌握float的相关知识
• 掌握基本的布局方式
• 了解Grid、Flexbox等布局方式

继续努力。