前端学习HTML/CSS/JS/ES6/VUE第四章CSS布局

最新推荐文章于 2021-06-29 12:22:38 发布
置顶 最新推荐文章于 2021-06-29 12:22:38 发布
阅读量382 收藏 2
点赞数 2
分类专栏： 前端系列 文章标签： css 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45345374/article/details/108976235
版权

提示：这是我的个人IT资源网站，大家可以进去看看

快乐的时光总是过得很快，转眼间双节假期已经结束，我们又要投身在工作中，去实现我们人生的价值，只要地球不爆炸，博主永远不停更，哈哈😄 ，接着上一章，我们整理了CSS的一些样式，这章我们对CSS布局进行整理，布局在我们页面设计中可以说是重中之重，犹如房子的格局，布局设计的好坏，就好比房子格局好不好，决定住的舒服不舒服，而对于页面，则是视觉体验好不好。

目录

CSS绝对定位

绝对定位属性:position值:absolute，通过指定了left,top绝对定位一个元素。
1.绝对定位
属性：position值：absolute设置了绝对定位的元素，相当于该元素被从原文档中删除了，所以“正常文字4”会紧接着出现在“正常文字2”后面，而不会留下空档。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <style>
        .abs {
            position: absolute;
            left: 150px;
            top: 50px;
        }
    </style>
</head>

<body>
    <p>正常文字1</p>
    <p>正常文字2</p>
    <p class="abs" style="color: red;">绝对定位的文字3</p>
    <p>正常文字4</p>
    <p>正常文字5</p>
</body>

</html>

效果：在这里插入图片描述
2.绝对定位是基于最近的一个定位了的父容器
对于“绝对定位的文字”这个p标签，其定位了的父容器即class="absdiv"的div，所以“绝对定位的文字”这个p出现的位置是以这个div为基础的。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对于定位了的父容器绝对定位</title>
    <style>
        .abs {
            position: absolute;
            left: 100px;
            top: 50px;
        }

        .absdiv {
            position: absolute;
            left: 150px;
            top: 50px;
            width: 215px;
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <p>正常文字1</p>
    <p>正常文字2</p>
    <div class="absdiv">
        这是一个绝对定位了的DIV
        <p class="abs" style="color: red;">绝对定位的文字</p>
    </div>
    <p>正常文字4</p>
    <p>正常文字5</p>
</body>

</html>

效果：在这里插入图片描述
3.如果最近的父容器没有定位，则会往上找
如果除body外没有定位了父容器，则以body为定位的父容器进行绝对定位。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>如果最近的父容器没有定位，则会往上找</title>
    <style>
        .abs1 {
            position: absolute;
            left: 100px;
            top: 50px;
        }

        .abs2 {
            position: absolute;
            left: 100px;
            top: 10px;
        }

        .absdiv {
            position: absolute;
            left: 150px;
            top: 50px;
            width: 215px;
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <p>正常文字1</p>
    <p>正常文字2</p>
    <div class="absdiv">
        父容器的父容器进行了定位
        <div style="border: 1px solid red;">
            最近的父容器没有定位
            <p class="abs1" style="color: red;">向上寻找定位了的父容器</p>
        </div>
    </div>
    <p>正常文字4</p>
    <p>正常文字5</p>
    <div style="border: 1px solid green;width: 215px;">
        最近的父容器没有定位
        <p class="abs2" style="color: red;">以body为定位的父容器</p>
    </div>
</body>

</html>

效果：在这里插入图片描述
4.z-index
通过绝对定位可以把一个元素放在另一个元素上，这样位置就重复，重复了，就存在一个谁覆盖谁的问题，这个时候就可以使用z-index属性，当z-index的值越大，就表示放在上面，z-index值越小就表示放在下面。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>z-index</title>
    <style>
        .abs {
            position: absolute;
            height: 50px;
            width: 100px;
            background-color: blue;
            top: 100px;
            left: 50px;
            /*当值大于0时，4和5被覆盖*/
            z-index: -1;
            text-align: center;
            padding: 5px 0;
        }
    </style>
</head>

<body>
    <p>正常文字1</p>
    <p>正常文字2</p>
    <span class="abs">z-index=-1</span>
    <p>正常文字4</p>
    <p>正常文字5</p>
</body>

</html>

效果：在这里插入图片描述
在这里插入图片描述

CSS相对定位

1.相对定位
属性：position值：relative
与绝对定位不同的是，相对定位不会把该元素从原文档删除掉，而是在原文档的位置的基础上，移动一定的距离。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        .r {
            position: relative;
            left: 150px;
            top: 50px;
        }
    </style>
</head>

<body>
    <p>正常文字1</p>
    <p>正常文字2</p>
    <p class="r">相对定位的文字3</p>
    <p>正常文字4</p>
    <p>正常文字5</p>
</body>

</html>

效果：在这里插入图片描述
2.相对定位不占用原位置
如果直接使用相对定位，会占用原位置的空间，如何实现在原来的位置移动一下，但又不占用原位置的空间，就需要绝对定位和相对定位组合使用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位实现不占用原位置</title>
    <style>
        .r {
            position: relative;
            left: 0;
            top: 0;
        }

        .a {
            position: absolute;
            left: 150px;
            top: 0px;
        }
    </style>
</head>

<body>
    <p>正常文字1</p>
    <p>正常文字2</p>
    <div class="r">
        <div class="a">
            相对定位的文字3(不占原位置)
        </div>
    </div>
    <p>正常文字4</p>
    <p>正常文字5</p>
</body>

</html>

效果：在这里插入图片描述

CSS浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
属性：float值：left,right
1.文字向右浮动
文字向右浮动，浮动后，原来的位置就让出来了，并且是在原来的高度的基础上，向右浮动。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字向右浮动</title>
    <style>
        .f {
            float: right;
        }
    </style>
</head>

<body>
    <div>正常文字1</div>
    <div>正常文字2</div>
    <div class="f">浮动的文字</div>
    <div>正常文字4</div>
    <div>正常文字5</div>
</body>

</html>

效果：在这里插入图片描述
2.文字向左浮动
文字向左浮动，首先会把原位置让出来，但是是向左浮动，所以还在原位置，后面的文字会跟上来，但是发现浮动的文字还在原位置，就只好排在后面了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字向左浮动</title>
    <style>
        .f {
            float: left;
        }
    </style>
</head>

<body>
    <div>正常文字1</div>
    <div>正常文字2</div>
    <div class="f">浮动的文字</div>
    <div>正常文字4</div>
    <div>正常文字5</div>
</body>

</html>

效果：在这里插入图片描述
3.文字围绕图片
当图片向左浮动时，文字会围绕图片

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字向左浮动</title>
    <style>
        .f {
            float: left;
        }

        div {
            width: 320px;
        }
    </style>
</head>

<body>
    <div>
        <img src="https://how2j.cn/example.gif" />
        <p>
            当图片不浮动时，文字就会换行出现在下面
            当图片不浮动时，文字就会换行出现在下面
            当图片不浮动时，文字就会换行出现在下面
            当图片不浮动时，文字就会换行出现在下面
            当图片不浮动时，文字就会换行出现在下面
            当图片不浮动时，文字就会换行出现在下面
        </p>
    </div>
    <div>
        <img class="f" src="https://how2j.cn/example.gif" />
        <p>
            当图片不浮动时，文字就会换行出现在下面
            当图片不浮动时，文字就会换行出现在下面
            当图片不浮动时，文字就会换行出现在下面
            当图片不浮动时，文字就会换行出现在下面
            当图片不浮动时，文字就会换行出现在下面
            当图片不浮动时，文字就会换行出现在下面
        </p>
    </div>
</body>

</html>

效果：在这里插入图片描述
4.文字不想围绕图片
不允许出现浮动元素
属性：clear值：left(不允许左侧有浮动元素) right(不允许右侧有浮动元素) both(不允许两边有浮动元素) none(默认值，允许两边都可以有浮动元素)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
    <style>
        .f {
            float: left;
        }

        div {
            width: 320px;
        }

        .clearp {
            clear: left;
        }
    </style>
</head>

<body>
    <div>
        <img class="f" src="https://how2j.cn/example.gif" />
        <p>
            当图片不浮动时，文字就会换行出现在下面
            当图片不浮动时，文字就会换行出现在下面
            当图片不浮动时，文字就会换行出现在下面
            当图片不浮动时，文字就会换行出现在下面
            当图片不浮动时，文字就会换行出现在下面
            当图片不浮动时，文字就会换行出现在下面
        </p>
    </div>
    <div>
        <img class="f" src="https://how2j.cn/example.gif" />
        <p class="clearp">
            当图片不浮动时，文字就会换行出现在下面
            当图片不浮动时，文字就会换行出现在下面
            当图片不浮动时，文字就会换行出现在下面
            当图片不浮动时，文字就会换行出现在下面
            当图片不浮动时，文字就会换行出现在下面
            当图片不浮动时，文字就会换行出现在下面
        </p>
    </div>
</body>

</html>

效果：在这里插入图片描述
5.水平排列div
默认的div排列是会换行的，如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方，如果超出了父容器，还会有自动换行的效果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平排列div</title>
    <style>
        #floatDiv {
            width: 200px;
        }

        #floatDiv div {
            float: left;
        }
    </style>
</head>

<body>
    默认的div排列是会换行的
    <div>
        菜单1
    </div>
    <div>
        菜单2
    </div>
    <div>
        菜单3
    </div>
    如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方，如果超出了父容器，还会有自动换行的效果
    <div id="floatDiv">
        <div>
            菜单1
        </div>
        <div>
            菜单2
        </div>
        <div>
            菜单3
        </div>
        <div>
            菜单4
        </div>
        <div>
            菜单5
        </div>
        <div>
            菜单6
        </div>
    </div>
</body>

</html>

效果：在这里插入图片描述

CSS显示方式

元素的display显示方式有多种，display:none隐藏、display:block块级、display:inline内联、display:inline-block内联-块级、其他。
1.隐藏
display:none;使得被选择的元素隐藏，并且不占用原来的位置。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隐藏</title>
    <style>
        .d {
            display: none;
        }
    </style>
</head>

<body>
    <div>可见的div1</div>
    <div class="d">隐藏的div2，使用display:none隐藏</div>
    <div>可见的div3</div>
</body>

</html>

效果：在这里插入图片描述
2.块级
display:block;表示块级元素，块级元素会自动在前面和后面加上换行，并且在其上的width和height也能够生效
div默认是块级元素
span默认是内联元素(不会有换行，width和height也不会生效)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块级</title>
    <style>
        div,
        span {
            border: 1px solid lightgray;
            margin: 10px;
            width: 200px;
            height: 100px;
        }

        .d {
            display: block;
        }
    </style>
</head>

<body>
    <div>普通的div块</div>
    <span>这是普通span</span><span>这是普通span</span><span>这是普通span</span>
    <span class="d">这是span，被改造成了块级元素</span>
</body>

</html>

效果：在这里插入图片描述
3.内联
display:inline;表示内联元素
内联元素前后没有换行，并且在其上的width和height也无效。其大小由其中的内容决定
div默认是块级元素
span默认是内联元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内联</title>
    <style>
        div,
        span {
            border: 1px solid lightgray;
            margin: 10px;
            width: 200px;
            height: 100px;
        }

        .s {
            display: inline;
        }
    </style>
</head>

<body>
    <span>这是普通span</span><span>这是普通span</span><span>这是普通span</span>
    <div class="s">这是div，被改造成了块级元素</div>
</body>

</html>

效果：在这里插入图片描述
4.内联-块级
内联是不换行，但是不能指定大小
块级时能指定大小，但是会还换行
有时候，需要元素处于同一行，同时还能指定大小，这个时候，就需要用到内联-块级inline-block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内联-块级</title>
    <style>
        span {
            display: inline-block;
            border: 1px solid lightgray;
            margin: 10px;
            width: 100px;
        }
    </style>
</head>

<body>
    <span>奔驰</span>
    <span>宝马</span>
    <span>奥迪</span>
    <span>特斯拉</span>
</body>

</html>

效果：在这里插入图片描述
5.其他
其他的显示方式像list-item显示为列表table显示为表格inline-table显示为前后无换行的表格table-cell显示为单元格

水平居中

1.内容居中
通过设置属性align="center"居中内容或者通过样式style="text-align:center"居中内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内容居中</title>
    <style>
        div {
            border: 1px solid lightgray;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div align="center">
        通过设置属性align="center"居中内容
    </div>
    <div style="text-align: center;">
        通过样式style="text-align:center"居中内容
    </div>
</body>

</html>

效果：在这里插入图片描述
2.元素居中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素居中</title>
    <style>
        div {
            border: 1px solid lightgray;
            margin: 10px;
        }

        span {
            border: solid 1px lightskyblue;
        }
    </style>
</head>

<body>
    <div>默认情况下div会占用100%的宽度，所以无法观察元素是否居中</div>
    <div style="width: 300px;margin: 0 auto;">
        设置本div的宽度，然后再使用样式margin:0 auto来使得元素居中
    </div>
    <span style="width: 300px;margin: 0 auto;">
        span是内联元素，无法设置宽度，所以不能通过margin:0 auto居中
    </span>
    <div style="text-align: center;">
        <span>span的居中可以通过放置在div中，然后让div text-align实现居中</span>
    </div>
</body>

</html>

效果：在这里插入图片描述

左侧固定，右边自动占满

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>左侧固定，右边自动占满</title>
    <style>
        .left {
            width: 200px;
            float: left;
            background-color: pink;
        }

        .right {
            overflow: hidden;
            background-color: lightskyblue;
        }
    </style>
</head>

<body>
    <div class="left">左边固定宽度</div>
    <div class="right">右边自动填满</div>
</body>

</html>

效果：在这里插入图片描述

垂直居中

1.line-height方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>line-height</title>
    <style>
        #d {
            line-height: 100px;
        }

        div {
            border: solid 1px lightskyblue;
        }
    </style>
</head>

<body>
    <div id="d">line-height适合单独一行垂直居中</div>
</body>

</html>

效果：在这里插入图片描述
2.内边距方式
借助设置相同的上下内边距，实现垂直居中效果，可以用在多行文本上。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内边距方式</title>
    <style>
        #d {
            padding: 30px 0;
        }

        div {
            border: solid 1px lightskyblue;
        }
    </style>
</head>

<body>
    <div id="d">多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容
        多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 </div>
</body>

</html>

效果：在这里插入图片描述
3.table方式
首先通过display:table-cell;把div用单元格的形式显示，然后借用单元格的垂直居中vertical-align:middle；来达到效果。这样对图片也可以居中，上一步line-height就不能对图片居中。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table方式</title>
    <style>
        #d {
            display: table-cell;
            vertical-align: middle;
            height: 200px;
        }

        div {
            border: solid 1px lightskyblue;
        }
    </style>
</head>

<body>
    <div id="d">
        <img src="https://how2j.cn/example.gif" />
    </div>
</body>

</html>

效果：在这里插入图片描述

左右固定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>左右固定</title>
    <style>
        .left {
            width: 200px;
            float: left;
            background-color: pink;
        }

        .right {
            width: 200px;
            float: right;
            background-color: pink;
        }

        .center {
            margin: 0 200px;
            background-color: lightblue;
        }
    </style>
</head>

<body>
    <div class="left">左边固定宽度</div>
    <div class="right">右边固定宽度</div>
    <div class="center">中间自适应</div>
</body>

</html>

效果：在这里插入图片描述

贴在下方

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贴在下方</title>
    <style>
        #div1 {
            position: relative;
            height: 300px;
            width: 90%;
            background-color: skyblue;
        }

        #div2 {
            position: absolute;
            bottom: 0;
            height: 30px;
            width: 100%;
            background-color: lightgreen;
        }
    </style>
</head>

<body>
    <div id="div1">
        <div id="div2">
            无论蓝色div高度如何变化，绿色div都会贴在下面
        </div>
    </div>
</body>

</html>

效果：在这里插入图片描述

块之间有空格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块之间的空格</title>
    <style>
        .nocontinue span {
            border-bottom: 2px solid lightgray;
        }

        .continue span {
            border-bottom: 2px solid lightgray;
            float: left;
        }
    </style>
</head>

<body>
    <div class="nocontinue">
        <span>有空格的span</span>
        <span>有空格的span</span>
        <span>有空格的span</span>
    </div>

    <div class="continue">
        <span>无空格的span</span>
        <span>无空格的span</span>
        <span>无空格的span</span>
    </div>

    <div style="clear:both"></div>

    <div>后续的内容</div>
</body>

</html>

效果：在这里插入图片描述

结尾

到此CSS布局相关的内容整理完毕，大家在遇到布局相关问题可以参考一下，不一定很全，有需要补充的，大家可以留言告诉我！
在这里插入图片描述
这是我觉得不错的学习网站之一，里面还是比较全面的，如果大家都能学完，保证可以找到一个不错的工作，点击进去看看吧！

ITMANLZY
关注
专栏目录
实现网页上中(左右)下布局
07-12
实现网页上中下布局的例子，中部分分左右，左侧菜单栏可根据TOP导航栏变化
vue-前端第4章class04.html
虾米大王的学习历程
06-04 39
【代码】vue-前端第4章class04.html。
html文字浮动在右边,css浮动元素中的文字
weixin_36233098的博客
06-29 1192
初学前端，对于浮动有了大概的了解，但是试验的时候发现了一个问题，代码如下：float#a{background-color:red;height:50px;width:100px;}#b{background-color:yellow;height:50px;width:100px;}#c{background-color:blue;height:50px;width:100px;}#d{back...
基本图片与文字布局（浮动，包含块）
ZJY
03-22 4517
正常流中： 1.块级元素（ ...）：换行，独自占一行显示，就算有足够的空间并排，也会在下一行显示，可以设置width宽度 2.行内元素（ ...）：若有足够的空间并排，就会并排显示 3.定位为relative仍在流中 脱离正常流： 1.设置宽度width并浮动 2.定位为absolute 或 fixed 浮动父级元素： 错误原因：规定若父级包含块的元素都是浮动元素，
前端：html+css+js+node+vue 思维导图/面试题
07-08
在前端开发领域，HTML、CSS、JavaScript、Node.js和Vue.js是至关重要的技术栈，它们构建了现代网页和应用程序的基础。下面将详细讲解这些技术及其相关的面试知识点。 1. HTML (HyperText Markup Language) HTML是...
前端三剑客（html+css+js）加vue部分基础运用2
最新发布
06-11
4. Vue.js：Vue.js是由尤雨溪开发的轻量级前端框架，其设计理念是让开发更简单、直观。Vue的核心特点包括声明式渲染、组件化、虚拟DOM、指令系统等。Vue使用MVVM（Model-View-ViewModel）架构模式，通过数据绑定实现...
前端HTML CSS JS VUE AJAX AXIOS技术人喜欢用的VSCode软件
03-17
Visual Studio Code（简称VSCode）是一款由微软开发并免费开源的代码编辑器，深受前端开发者喜爱，尤其对于HTML、CSS、JavaScript、Vue.js等技术栈的工程师来说，它是一个不可或缺的工具。这款软件提供了丰富的功能...
前端笔记 ，vue，js，html，css，css3，es6；前端笔记.rar
07-30
这些技术包括Vue.js、JavaScript（JS）、HTML、CSS以及它们的更新版本CSS3和ES6。让我们深入探讨这些关键知识点。 1. **HTML（HyperText Markup Language）**：HTML是网页内容的基础，用于定义页面结构。它由一系列...
仿华为商城部分前端界面html+css+js
06-28
此外，为了提高代码的可维护性和复用性，开发者可能会使用模块化和组件化的开发方式，例如通过ES6的模块语法或引入第三方库（如React、Vue.js等）来组织代码。同时，可能还会利用浏览器的API，如localStorage或...
移动端的垂直布局
曲小强
03-20 560
  &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
css基础框架及用法
weixin_53283606的博客
12-25 6721
作为web前端的表现层css担任着将整个网页做得更加美观的重要任务。当然想要掌握css也会比html稍微困难一些。 css有四种引入格式：内嵌式引入 行内样式 外链样式 嵌入样式 内嵌式引入： <!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> bo.
常见的几种页面内容布局方式
热门推荐
wang839305939的博客
07-27 6万+
常见的页面布局，左右自适应布局
CSS布局——水平垂直居中布局总结学习
小狼驿站
06-13 2539
简介 CSS布局可以分为几大块， 盒子内部布局 ·文本布局 ·盒模型本身的布局盒子之间的布局 ·脱离正常流的布局 ·absolute布局上下文下的布局 ·float布局上下文下的布局 ·正常流下的盒子布局 BFC布局上下文下的布局 IFC布局上下文的布局 table布局上下文下的布局 css grid布局上下文下的布局 具体内容 一、文本的水平垂直居中
响应式布局设计
weixin_39214481的博客
09-05 799
响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。 自适应布局给了你更多设计的空间，因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。虽然绝大部分状态差异较小，但仍然也算做差异。它使得把握设计最终效果变得更难，同样让响应式布局更加的难以测试和预测。但同时说难，这也算是响应式布局美的所在。在考虑到表层级别不确定因素的过程中，你也会因此更好的掌握一些基础知...
左右两栏布局
文摘资讯
12-28 436
在网页中我们常常看见有左右两栏布局，左边宽度固定，右边宽度自适应的，比如下面这样那么怎样实现这样的布局呢？我们可能会想到浮动，flex，grid布局等等。新建一个HTML页面，结构如下                        列表1            列表2            列表3            列表4                        内容内容    使用浮动
前端规范(ES6\BEM\OOCSS\SMACSS)
weixin_33881753的博客
05-14 166
前端规范 在实际开发中，由于团队成员编码习惯不一，技术层次不同，开发前定制并遵循一种代码规范能提高代码质量，增加开发效率。 Javascript Javascript规范直接参考airbnb: ES6 JavaScript Style Guide ES5 JavaScript Style Guide React/JSX Style Gui...
CSS布局
lolhahahaha的博客
05-20 285
文章目录1.绝对定位1）2）元素重叠2.相对定位3.浮动1）文字向右浮动2）文字向左浮动3)文字围绕图片3）在已经使图片左浮动了之后，使文字不环绕图片显示4）水平排列div3.显示方式1）隐藏2）块级 1.绝对定位 1） 属性:position 值：absolute <style> p.abs{ position: absolute; left: 150px; top: 50px; } </style> <p >正常文字1</p> <
垂直布局的HTML表单
歪脖先生的博客
02-23 9969
垂直布局的表单对于比较复杂的表单，要填写的内容相对较多，采用水平布局显然不合适。因此，垂直布局的表单更加常用。垂直对齐的表单中，标签和输入框可以使用三种对齐方式，包括顶对齐、左对齐和右对齐。CSS 顶对齐可以缩短用户填写表单的时间，由于标签和输入框非常靠近，处理起来毫不费力，用户只需顺着表单向下移动，就可完成整个表单。如图 7‑22 所示：图7-22 顶对齐的表单但是，顶对齐的标签会占用额外的垂...
2024前端面试必备：HTML5/CSS3/JS/TS/Vue/React兼容与样式深度解析
"这篇资料是2024年的前端面试题总结，涵盖了HTML5、CSS3、JavaScript、TypeScript4、Vue和React18等重要技术领域的知识点，旨在帮助求职者准备面试。" **HTML5** HTML5是现代网页开发的基础，它引入了许多新的标签...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值