C1考核--任务03

最新推荐文章于 2024-04-25 23:17:19 发布

lynpupu

最新推荐文章于 2024-04-25 23:17:19 发布

阅读量188

点赞数

分类专栏： C1认证考核

本文链接：https://blog.csdn.net/lyn_jiang/article/details/116905462

版权

C1认证考核专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS盒子模型，包括margin、border和padding的含义，以及它们在布局中的应用。讨论了水平和垂直布局的规则，浮动元素的影响，以及定位技术。此外，还涉及到了HTML5的新特性如draggable属性和日期选择器，并通过实例展示了如何使用CSS实现复杂布局。同时，文章提到了Flex布局作为现代布局的解决方案，强调了其在复杂布局中的优势。

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

使用富文本编辑器

输入如下代码：

<p><font color="#9c00ff">hello world</font></p>
<table class="table table-bordered">
  <tbody>
    <tr bgcolor="#00F001">
      <td>1</td><td>2</td>
    </tr>
    <tr bgcolor="#FFF001">
      <td>3</td><td>4</td>
    </tr>
  </tbody>
</table>
<p>1</p>
<p><br></p>
<p>点击这个按钮</p>
<button onclick="buttonFunction1('hello','world')">我要考试</button>
<script>
function buttonFunction1(s1,s2){
	alert(s1+s2);
  }
</script>

输出结果：

所见即所得开发

<head>
	<link rel="stylesheet" href="xxx.css">
</head>

设置文本样式
设置元素样式
设置类
选择某个特定的标签

<p class="paragraph" id="para1">hello</p>

可以通过下面三种方式选择这个标签：

p {color:xxxx;}
.paragraph {color:xxxx;}
#para1 {color:xxxx;}

CSS盒子模型

基础知识

在这里插入图片描述

margin值确定当前盒子与相邻盒子之间的间隙值
盒子的宽(或高)=内容的宽(或高)+2 * padding+2 * border
盒子布局方式：

水平布局
一个元素在其父元素中，水平方向必须满足以下等式：
margin-left+border-left+padding-left+width+margin-right+border-right+padding-right = 父元素的width
如果只设置了子元素的width，其他值没有设置，则浏览器会默认把子元素的padding-right更改，使其满足上面的等式。如果有一个值被设置称为auto，则浏览器会默认调整那个值。如果有多个值被设置为auto，优先让子元素的width值最大，其他为0。
垂直布局
可以设置一个overflow

显示类型：
外部显示类型块级盒子<div> <p> <h1>等
内部显示类型行内盒子<span><a>等
边距塌陷
当两个盒子靠在一起的时候，只有一份外边距margin

垂直外边距：
a. 兄弟元素之间：margin均为正数，则取较大值；一正一负取其和；均为负值取绝对值大的
b. 父子元素之间：父子元素之间的相邻外边距，子元素的会传递给父元素。(上外边距)。
水平外边距：
行内元素不支持设置width和height，如果想要设置，可将行内元素的属性改成块元素：从display:inline改为display:block；或者将其改为行内块元素display:inline-block;
行内元素可以设置padding，border，margin，在垂直方向都不会影响页面的布局，但是超出范围后会覆盖其他的盒子。

定位

static 静态定位
relative 相对定位会在静态定位上偏移
absolute 绝对定位会一层一层往上找，直到找到父辈中有position属性（无论position是多少），然后以它为标准偏移

文档普通流与浮动
浮动能使block脱离文档流
元素的层级

父级盖不住子级
没有position属性的，无法用z-index属性
z-index数值大的，在上面
同层级，代码在后面的盖住代码在前面的

拓展题题解

深入理解CSS盒子模型的多层次含义：
布局的传统解决方案，基于盒状模型，依赖 display 属性(none、inline、block、inline-block等) + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。而新的Flex布局将成为未来布局的首选方案。
参考网址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210520162748477.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5bl9qaWFuZw==,size_16,color_FFFFFF,t_70
取色器：1-6为#C4CF8D，7-8为#F2A363，9为F7CB9C，数字颜色为#FEFEFE，黄色底色为
#FBDC9B，边框颜色为#A9A9A9
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./CSS/style.css">
    <style>
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        .container {
            width: 700px;
            height: 500px;
            background-color: #FBDC9B;
            border: 5px solid #A9A9A9;
            padding:15px;
        }
        .type1{
            float: left;
            height: 100%;
            width: 28%;
        }
        .type2{
            float: left;
            height: 39%;
            width: 68%;
            margin-left: 15px;
            
        }
        .type3{
            float: left;
            height: 59%;
            width: 69%;
            margin-left: 15px;
            margin-top: 15px;
        }
        .type3a{
            float: left;
            width: 46%;
            height: 101%;
        }
        .type3b{
            float: left;
            width: 46%;
            height: 100%;
            margin-left: 15px;
        }
        .box1{
            width: 100%;
            height: 29%;
            color: #FEFEFE;
            background-color: #C4CF8D;
            border: 1px solid #A9A9A9;
            margin-bottom:15px;
        }
        .box2{
            width: 100%;
            height: 70%;
            color: #FEFEFE;
            background-color: #C4CF8D;
            border: 1px solid #A9A9A9;
        }
        .box3{

            width: 100%;
            height: 100%;
            color: #FEFEFE;
            background-color: #C4CF8D;
            border: 1px solid #A9A9A9;
            float: left;
        }
        .box4{

            width: 100%;
            height: 100%;
            color: #FEFEFE;
            background-color: #C4CF8D;
            border: 1px solid #A9A9A9;
            float: left;
            position: relative;
            left:0px;
            top:0px;
            z-index: 10;
        }
        .box5{
            width: 100%;
            height: 48%;
            color: #FEFEFE;
            background-color: #C4CF8D;
            border: 1px solid #A9A9A9;
            float: left;
        }
        .box6{
            margin-top: 15px;
            width: 100%;
            height: 48%;
            color: #FEFEFE;
            background-color: #C4CF8D;
            border: 1px solid #A9A9A9;
            float: left;
        }
        .box7{
            float: left;
            width: 100px;
            height: 100px;
            color: #FEFEFE;
            background-color: #F2A363;
            border: 1px solid #A9A9A9;
            position: relative;
            left: 20px;
            top: 30px;
        }
        .box8{
            float: left;
            width: 100px;
            height: 100px;
            color: #FEFEFE;
            background-color: #F2A363;
            border: 1px solid #A9A9A9;
            position: relative;
            left: 200px;
            top: -60px;
        }
        .box9{
            width: 100px;
            height: 100px;
            color: #FEFEFE;
            background-color: #F7CB9C;
            border: 1px solid #A9A9A9;
            position: relative;
            top: 230px;
            left:20px;
            z-index: 1;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="type1">
            <div class="box1">1</div>
            <div class="box2">2</div>
        </div>
        <div class="type2">
            <div class="box3">3
                <div class="box7">7</div>
                <div class="box8">8</div>
            </div>
            
        </div>
        <div class="type3">
            <div class="type3a">
                <div class="box4">4</div>
                <div class="box9">9</div>
            </div>
            <div class="type3b">
                <div class="box5">5</div>
                <div class="box6">6</div>
            </div>
            
        </div>
    </div>
</body>
</html>

自测题

HTML5为了使img元素可拖放，需要增加什么属性？
答：需要增加draggable=”true”属性
HTML5哪一个input类型可以选择一个无时区的日期选择器？
答："date"类型可以选择一个无时区的日期选择器，
CSS盒子模型中的margin,border,padding都是什么意思？
答：margin:外边距，border:边框,padding:内边距
说出5种常见的HTML事件
答：
onclick：用户点击 HTML 元素。
onchange：HTML 元素改变
onload：浏览器已完成页面的加载。
onmouseover：用户在一个HTML元素上移动鼠标。
onmouseout：用户从一个HTML元素上移开鼠标。
onkeydown：用户按下键盘按键。
参考：https://blog.csdn.net/ivenqin/article/details/106896156
HTML的onblur和onfocus是哪种类型的属性？
答：属于事件类型(Form)的属性，其中onblur 属性在元素失去焦点时触发，onfocus 属性在元素获得焦点时被触发。
怎么设置display属性值使容器成为弹性容器？
答：令display:flex;
Javascript种有多少种不同类型的循环？
答：12种。参考https://www.jb51.net/article/141193.htm
用户搜索某个单词后，JavaScript高亮显示搜索到的单词，使用哪个语义化标签最适合？
答：使用mark标签，或者使用’ + Keyword + ’