知识整理

最新推荐文章于 2024-06-13 21:20:19 发布

圆滚滚肉肉

最新推荐文章于 2024-06-13 21:20:19 发布

阅读量198

点赞数

文章标签： css javascript

本文链接：https://blog.csdn.net/weixin_40507158/article/details/109327330

版权

1.三栏布局

题目：宽度300px，高度100px已知，中间自适应，如何布局

1. 浮动方法

方法：

左边的左浮动，右边的右浮动，由于宽度高度已知所以我们可以给其设置指定的宽高 width:300px, height:100px，右边的块要加上margin-top：-100px，否则会被中间的块挤下去
中间的margin-left：300px，margin-right：300px

<body>
    <section class="layout float">
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>解决方案</h1>
            </div>
            <div class="right"></div>
            </div>
    </section>
    </section>
    <style media="screen">
        .left-center-right .left {
            float: left;
            background-color: pink;
            width: 300px;
            height: 100px;
        }
        
        .left-center-right .right {
            float: right;
            background-color: red;
            width: 300px;
            height: 100px;
            margin-top: -100px;
        }
        
        .left-center-right .center {
            background-color: purple;
            margin-left: 300px;
            margin-right: 300px;
        }
        
        .left-center-right .center::after {
            content: '';
            display: block;
            clear: both;
        }
    </style>

</body>

2. 绝对定位

1.把三个块最外层的父元素下边的div设为绝对定位absolute
左边：left：0
右边：right：0
中间：left：300px +right：300px
2.注意宽度高度不要忘记写

<body>

    <style media="screen">
        .container .left-center-right>div {
            position: absolute;
        }
        
        .left-center-right .left {
            background-color: pink;
            width: 300px;
            height: 100px;
            left: 0;
        }
        
        .left-center-right .right {
            background-color: red;
            width: 300px;
            height: 100px;
            right: 0;
        }
        
        .left-center-right .center {
            background-color: purple;
            left: 300px;
            right: 300px;
        }
    </style>
    <section class="container">
        <div class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>解决方案</h1>
            </div>
            <div class="right"></div>
        </div>
    </section>

</body>

3. flex布局

1.父元素设display：flex
中间块设flex：1

<body>

    <style media="screen">
        .container .left-center-right {
            display: flex;
        }
        
        .left-center-right .left {
            background-color: pink;
            width: 300px;
            height: 100px;
        }
        
        .left-center-right .right {
            background-color: red;
            width: 300px;
            height: 100px;
            right: 0;
        }
        
        .left-center-right .center {
            background-color: purple;
            flex: 1;
        }
    </style>
    <section class="container">
        <div class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>解决方案</h1>
            </div>
            <div class="right"></div>
        </div>
    </section>

</body>

4. 表格布局

父元素：display：table+width：100%
父元素>div：{
display：table-cell
}

<body>

    <style media="screen">
        .container .left-center-right {
            display: table;
            width: 100%;
        }
        
        .container .left-center-right>div {
            display: table-cell;
        }
        
        .left-center-right .left {
            background-color: pink;
            width: 300px;
            height: 100px;
        }
        
        .left-center-right .right {
            background-color: red;
            width: 300px;
            height: 100px;
        }
        
        .left-center-right .center {
            background-color: purple;
        }
    </style>
    <section class="container">
        <div class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>解决方案</h1>
            </div>
            <div class="right"></div>
        </div>
    </section>

</body>

5.网格布局

1.父元素：{
display：grid；
width：100%；
grid-template-rows：高度；
grid-template-columns：宽度 auto 宽度；
}

<body>

    <style media="screen">
        .container .left-center-right {
            display: grid;
            width: 100%;
            grid-template-rows: 100px;
            grid-template-columns: 300px auto 300px;
        }
        
        .left-center-right .left {
            background-color: pink;
            width: 300px;
            height: 100px;
        }
        
        .left-center-right .right {
            background-color: red;
            width: 300px;
            height: 100px;
        }
        
        .left-center-right .center {
            background-color: purple;
        }
    </style>
    <section class="container">
        <div class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>解决方案</h1>
            </div>
            <div class="right"></div>
        </div>
    </section>

</body>

1.小补充

flex布局垂直水平居中

display：flex；
flex-direction：column；
align-items：center；
justify-content：center；

2.盒模型

1. 基本概念：标准模型+IE模型

2. 两者区别：计算宽度和高度的不同

标准模型：只指content
IE模型：宽和高是计算border+padding+content

3. css可设置这两种模型

box-sizing：content-box（默认）
box-sizing：border-box

4.js如何获取盒模型对应的宽和高

dom.style.width/height 只能取内联样式的宽度和高度
dom.currentStyle.width/height 只IE支持
window.getComputedStyle(dom).width/height
dom.getBoundingclientRect().width/height

5. BFC(边距重叠解决方案）

问题描述： Margin上下重叠的情况

兄弟级的块之间：不会相加，以数值大的为准
解决方法：float或者是inline-block
父子级的块之间：子级的上下margin会与父级上下margin重叠，不会相加，以数值大的为准
解决方法：overflow：hidden或者是加padding或者加border或者子级加position：absolute

（1）BFC：块级格式化上下文

（2）原理：（BFC渲染规则）

在BFC垂直方向的边距会发生重叠
BFC区域不会与浮动元素的box重叠
BFC在页面上是一个独立的容量
计算BFC高度时，浮动元素会参与运算

（3）解决重叠方法

给父级元素添加overflow：hidden
float元素不为none
position值不为static/relative
overflow不为visible
display为inline-block，table-cell，flex，inline-flex，table-caption

（4）BFC作用

防止外边距重叠
清除浮动的影响
防止文字环绕

6.清除浮动的方法

clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css样式： {clear:both;height:0;overflow:hidden;}
给浮动元素父级设置高度
方法：以浮制浮（父级同时浮动）
父级设置成inline-block
br 清浮动
给父级添加overflow:hidden 清浮动方法
7.万能清除法 after伪类清浮动（现在主流方法，推荐使用）
选择符:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}

3.DOM事件

1. DOM事件的级别

element.onclick=function(){}
element.addEventListener("click",function(){},false)
element.addEventListener("keyup",function(){},false)

事件监听的三种方式

传统的事件绑定方法：事件名称之间一定要加上on，比如说onclick,onload,onmousemove，当给同一个元素绑定多个事件的时候，只有最后一个事件会被添加，传播模式只能是冒泡模式
addEventListener()，里面的第三个参数可以控制指定事件是否在捕获或者是冒泡阶段执行。True：在捕获阶段执行，false是在冒泡阶段执行。
而且他在绑定事件的时候不需要事件名称前加on，可以给同一个元素绑定多个事件，不会发生覆盖的事件。
attachEvent()：是后绑定先执行，必须带on，比如onclick,onmouseover

2. 事件模型

捕获事件：事件冒泡是从下到上，事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。【推荐】
冒泡事件：事件捕获是从上到下，事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。

3. 事件流

事件通过捕获到达目标元素，从目标元素再上传到window对象就是冒泡
事件流描述的是从页面接收事件的顺序，DOM2级事件流包括以下阶段
（1）事件捕获阶段
（2）处于目标阶段
（3）事件冒泡阶段（ie只支持此阶段）

4. 描述DOM事件捕获的具体流程

5. Event对象常见应用

event.preventDefault()阻止默认行为
Event.stopPropagation()阻止冒泡
Event.stopImmediatePropagation()
Event.Target当前被点击的对象
Event.currentTarget 当前所绑定的事件，指向事件绑定的元素

圆滚滚肉肉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
知识整理

这里写目录标题1.三栏布局1. 浮动方法2. 绝对定位3. flex布局4. 表格布局5.网格布局1.小补充2.盒模型1. 基本概念：标准模型+IE模型2. 两者区别：计算宽度和高度的不同3. css可设置这两种模型4.js如何获取盒模型对应的宽和高5. BFC(边距重叠解决方案）（1）BFC：块级格式化上下文（2）原理：（BFC渲染规则）（3）解决重叠方法（4）BFC作用6.清除浮动的方法3.DOM事件1. DOM事件的级别事件监听的三种方式2. 事件模型3. 事件流4. 描述DOM事件捕获的具体流程5.
复制链接

扫一扫