C1任务03-Web基础与布局

最新推荐文章于 2024-08-17 13:31:03 发布

怕鸡要做活神仙

最新推荐文章于 2024-08-17 13:31:03 发布

阅读量88

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/cylwtbaep/article/details/119452754

版权

本文详细介绍了如何使用HTML和CSS创建富文本编辑器，探讨了CSS盒子模型，包括边距、边框和内容的影响，以及浮动和定位的原理与应用。此外，还讲解了清除浮动、定位模式、叠放次序和居中定位的方法。文章还涵盖了JavaScript基础，如消息弹窗和事件处理，并提供了实际的布局案例分析。

摘要由CSDN通过智能技术生成

任务一：使用富文本编辑器

观察各种标签
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Onine</title>
    <style>
        .table1{
            width: 500px;
        }
        .tr1,
        .tr3{
            background-color: gray;
        }
        .tr2,
        .tr4{
            background-color: white;
        }

    </style>
</head>
    <body>
    <div>
        <table class="table1"  border="1" cellpadding="0" cellspacing="0" >
            <tr class="tr1">
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            <tr class="tr2">
                <td>zerone</td>
                <td>女</td>
                <td>21</td>
            </tr>
            <tr class="tr3">
                <td>zerone1</td>
                <td>女</td>
                <td>24</td>
            </tr>
            <tr class="tr4">
                <td>zerone2</td>
                <td>男</td>
                <td>25</td>
            </tr>
        </table>
    </div>
   
</body>

点击按钮实现消息弹窗
在这里插入图片描述

    <input type="button" value="登录" onclick="alertTips()">
    <script>
        function alertTips(){
            alert("登录成功");
        }
    </script>

拓展：CSS盒子模型

深入理解css盒子模型
- 边框边距：
  1. border边框会影响盒子大小
    1. 边框的复合写法
```
border:1px solid red;//没有顺序
border-top:1px solid red;
		
```
  2. context内容
  3. padding内边距
    1. 会影响盒子大小
    2. 如果盒子本身没有指定width/height属性则不会撑开盒子大小
    3. padding的复合写法
  4. margin外边距
    1. 不会影响盒子大小
    2. margin的复合写法与padding是一致的
    3. 可以让块级元素水平居中
```
第一步先设置盒子宽度
第二部，令margin:0 auto;
```
    4. 行内块和行元素的水平居中是给其父级增加text-algin：center；
  5. 相邻块元素垂直外边距合并问题：不是两个margin相加，而是取大的值做边距, 解决方案：尽量只给一个盒子添加margin值
```
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/8100fbed7a3546b48a6c1696412fff2d.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N5bHd0YmFlcA==,size_16,color_FFFFFF,t_70#pic_center)
```
1. 嵌套元素垂直外边距塌陷问题
  解决方案：
1.给父元素加上边框

2.给父元素加上内边距

3.给父元素加overflow：hidden;
- 浮动：
  float属性用于创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含块或者另一个浮动框的边缘
浮动特性
1. 会脱离标准流
2. 浮动的盒子不再保留原先的位置
3. 不管原先是什么模式的元素，添加浮动后具有行内块元素相似的特性（因此若行内元素设置了浮动，则无需转换为别的模式来设置宽高）
浮动缺点

当子元素全部设置浮动后，父元素的高度就会变为0，因为浮动不占位置，因此会导致下边的盒子向上移动

清除浮动

清除浮动带来的排版错乱影响

额外标签法（w3c推荐做法）,缺点：添加许多无意义标签，结构化差

在浮动的最后一个盒子后再加一个块级元素，相当于加了一堵墙
css中写clear：both;

子不教父之过，css给父级添加overflow：hidden；

缺点：无法显示溢出的部分

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xM0oFTo6-1629440360092)(随手写.assets/image-20210818153001997.png)]
：after 伪元素法，结构最清晰，只要写上如下代码，哪一个父盒子需要，则在class上添加空格clearfix，缺点：需要照顾低版本的浏览器
```
.clearfix:after{
	content:"";
	display:block;
	height:0;
	vlear:both;
	visibiity:hidden;
}
.clearfix{
	*zoom:1;//为了兼容ie6，7
}
```

双伪元素，使用方法与单伪元素一致

.clearfix:before,
.clearfix:after{
	content:"";
	display:table;
}
.clearfix:after{
	clear:both;
}
.clearfix{
	*zoom:1;
}

定位
可以让盒子自由自在的在某个盒子内移动位置，或者固定在屏幕中哪个位置，并且压着某个盒子

定位=定位模式+边偏移

定位模式：
1. 静态定位：即默认定位方式，无定位的意思
```
position：static;
```
2. 相对定位：
  1. 以自己原来的位置为参考系
  2. 原来在标准流的位置继续占有，后面的盒子不会浮上来
```
position：relative;
```
3. 绝对定位：
  1. 如果没有祖先元素或者祖先元素无定位，则以浏览器为参考系
  2. 如果祖先元素有定位（相对、绝对、固定都算），则以最近一级元素为参考系
  3. 绝对定位不再占有原先的位置
```
position:absolute;
```
4. 固定定位
  1. 以浏览器的可视窗口为参照点移动元素
  2. 跟父元素无关
  3. 不随滚动条滚动
  4. 固定位置不再占有原先位置
```
 position：fixed；
```
  固定在版心右侧位置的算法：
  1. 让固定位置的盒子left：50%，此时移动到版心的一半位置
  2. 让固定盒子的margin-left：版心宽度的一半
5. 粘性定位：可以看成固定定位和相对定位的混合
  1. 以浏览器的可视窗口为参照物
  2. 粘性定位占有原先的位置
  3. 必须添加top，left、right，bottom其中一个才有效
  4. 兼容性差，ie不支持
```
position：sticky；
```
定位叠放次序z-index
```
	z-index:整数；
```
- 数值是整数，默认是auto，数值越大越在上
- 如果数值相同，则按书写顺序，后来居上
- 数字后面不能加单位
- 只有定位的盒子才有z-index属性
绝对定位的盒子居中
```
 加了绝对定位的盒子不能通过margin：0 auto实现水平居中
```
方法:
```
 1. left:50%
 2. margin-方位：-盒子的一般大小
```
定位特殊性
1. 行内元素添加绝对或者固定定位，可以直接设置高度或宽度
2. 块级元素添加绝对或固定定位，如果不给宽高，默认就是内容的大小
3. 浮动元素。绝对定位（固定定位）元素的都不会触发外边距合并的问题
4. 浮动元素只会压住下面标准流的盒子，但不会压住文字（因为浮动一开始就是用来做文字环绕的）
5. 绝对定位（固定定位）会压住下面标准流的所有内容
- 布局模式
  1. 普通流(标准流)
  2. 浮动
  3. 定位
完成的css盒子模型布局

html部分

<body>
<div class="main">
    <div class="left">
        <div class="box1">1</div>
        <div class="box2">2</div>
    </div>
    <div class="right">
        <div class="box3">3
            <div class="box7">
                7
            </div>
            <div class="box8">
                8
            </div>
        </div>
        <div class="box4">4
            <div class="box9">
                9
            </div>
        </div>
        <div class="box5">5</div>
        <div class="box6">6</div>
    </div>
</div>


</body>

css部分

<meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background-color:#fcdd9c ;
            text-align: center;
        }
        .main{

            width: 755px;
            height: 482px;

            margin: 20px auto;
        }
        .box1,
        .box2,
        .box3,
        .box4,
        .box5,
        .box6 {
            border: 1px #aaaaaa solid ;
            background-color: #c5d08e;
        }
        .left{
            float: left;
            width: 233px;
            height: 482px;
        }
        .box1{
            float: left;
            width: 230px;
            height: 109px;
            line-height: 109px;

        }
        .box2{
            float: left;
            margin-top: 20px;
            width: 230px;
            height: 349px;
            line-height: 349px;

        }

        .right{
            float: right;
            width: 507px;
            height: 482px;
        }
        .box3{
            position: relative;
            float: left;
            width: 505px;
            height: 187px;
            line-height: 187px;
        }
        .box4{
            position: relative;
            float: left;
            width: 255px;
            height: 271px;
            margin-top: 20px;
            line-height: 271px;
        }

        .box5{
            float: right;
            width: 232px;
            height: 124px;
            margin-top: 20px;
            line-height: 124px;
        }
        .box6{
            float: right;
            width: 232px;
            height: 125px;
            margin-top: 20px;
            line-height: 125px;
        }
        .box7,
        .box8{
            background-color: #f3a464;
        }
        .box7{
            position: absolute;
            top: 28px;
            left: 20px;
            width: 167px;
            height: 129px;
            line-height: 129px;
        }
        .box8{
            position: absolute;
            right: 0px;
            bottom: 150px;
            margin-right: 20px;
            width: 167px;
            height: 129px;
            line-height: 129px;
        }

        .box9{
            position: absolute;
            z-index: -1;
            left: 20px;
            top: 237px;
            margin-right: 20px;
            width: 167px;
            height: 129px;
            line-height: 129px;
            background-color: #e4bc91;
        }

自测

1.HTML5为了使img元素可拖放,需要增加什么属性

draggable="true";

2.HTML.5哪一个input类型可以选择一个无时区的日期选择器?

<input type="time"> 允许用户选择时间（无时区）

3.CSS全子模型中的Margin、Border、Pading都是什么意思？

margin：外边距
border：边框
padding：内边距

4.说出至少五种常见HTML事件

window事件
form事件
keyboard事件
mouse事件
media事件

5.НTML的onblur和onfocus是哪种类型的属性?

form事件

6.怎么设置display属性的值使容器成为弹性容器?

display：flex；

7.JavaScript中有多少种不同类型的循环?

3种循环
for，do...while，while

8.用户搜索某个单词后, JavaScrip高亮显示搜索到的单词,使用哪个语义化标签最合适?

mark

怕鸡要做活神仙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
C1任务03-Web基础与布局

文章目录任务一：使用富文本编辑器任务一：使用富文本编辑器观察各种标签
复制链接

扫一扫

C1任务03-Web基础与布局

文章目录

任务一：使用富文本编辑器

拓展：CSS盒子模型

浮动特性

浮动缺点

清除浮动

定位模式：

定位叠放次序z-index

绝对定位的盒子居中

定位特殊性

自测