精华内容
下载资源
问答
  • 主轴与侧轴呈十字关系 Flex常用属性: 1.Flex实现水平垂直居中布局 <div class="father"> <div class="child">div> div> .child{ height:200px; width: 200px; background-color: red; } .father{ display: flex; ...

    Flex布局(弹性布局)

    (https://www.runoob.com/w3cnote/flex-grammar.html)
    采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。

    注意:为Flex布局以后,子元素的float、clear和vertical-align属性将失效。 主轴与侧轴呈十字关系

    Flex常用属性:
    在这里插入图片描述

    1.Flex实现水平垂直居中布局

    <div class="father">
        <div class="child"></div>
    </div>
    
    .child{
        height:200px;
        width: 200px;
        background-color: red;
    }
    .father{    
        display: flex;
        justify-content: center;
        align-items:center;
        width: 100%;
        height: 800px;
        background-color: yellow;
    }
    

    2.Flex实现两列布局

    <div class="parent">
            <div class="left"></div>
            <div class="right"></div>
    </div>
    
    *{
        margin: 0;
        padding: 0;
    }
    .parent{
        display:flex;
        height:300px;
    }
    .left{
        flex:0 0 auto;
        background-color:red;
        width:700px;
    }
    .right{
        flex:1 1 auto;
        background-color:#484;
    }
    

    3.Flex实现三列布局

    <div class="parent">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
     </div>
    
    .parent{
        height: 300px;
        display: flex;
    }
    
    .left,.right{
       flex: 0 0 auto;
        background-color: red;
        width: 200px;
        
    } 
    .center{
        flex: 1 1 auto;
        background-color: green;
        width: 200px;
    }
    

    ————————————————————————————

    其它常规方式实现布局

    1.水平-垂直布局

    1.1 水平居中布局

    (1)方案一: 优点:浏览器兼容性比较好 缺点:text-algin属性具有继承性,导致父级元素的文本也居中显示

    <div class="father">
        <div class="child"> </div>
    </div>
    
    .father{text-align: center;}
    .child{display: inline-block;} /*将自己变为文本类元素*/
    

    (2) 方案二:

    优点:只需对子级元素进行设置就可以实现水平方向居中效果
    缺点:如果子级元素脱离文档流(定位或浮动),那么margin属性值就无效了。

    <div class="father">
        <div class="child"> </div>
    </div>
    
    .child{
        display:table/block; /*table是设置元素为<table>元素*/
        margin: 0 auto;
    }
    

    (3) 方案三:

    优点:无论父级元素是否脱离文档流,不影响子级元素水平居中效果
    缺点:对老版本浏览器兼容性不好

    .child{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            height:200px;
            width: 200px;
            background-color: red;
        }
    .father{position: relative;
            height: 200px;
            width: 100%;
            background-color: yellow;}
    

    1.2 垂直居中布局

    (1) 方案一:

    优点:浏览器兼容性比较好
    缺点:vertical-algin属性具有继承性,导致父级元素中的文本内容也垂直居中

    .child{
        height:200px;
        width: 200px;
        background-color: red;
    }
    .father{    
        width: 100%;
        height: 800px;
        background-color: yellow;
        display: table-cell; /*设置元素为<td>元素*/
        vertical-align: middle;
    }
    

    (2)方案二:

    优点: 父级元素是否脱离文档流都不影响子级元素垂直居中效果
    缺点:transform属性是CSS3中新增属性,浏览器支持情况不好。

    .child{
        height:200px;
        width: 200px;
        background-color: red;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .father{    
        width: 100%;
        height: 800px;
        background-color: yellow;
        position: relative;
    }
    

    1.3 水平垂直居中布局

    (1) 方案一:

    .child{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .father{    
      position: relative;
    }
    

    (2) 方案二:

    .child{
        display:table/block;
        margin:0 auto;
    }
    .father{    
      display:table-cell;
      vertical-align:middle;
    }
    

    —————————————————————————————

    2.1 两列布局

    (1) 方案一:

    优点:实现方式简单
    缺点:自适应元素margin属性值与定宽元素的width属性值一致,定宽元素浮动与自适应元素不浮动导致浏览器兼容性不好

     <div class="left">左:定宽</div>
     <div class="right">右:自适应</div>
    
    .left, .right{
        height: 300px;
        }
    .left{
        background-color: red;
        width: 100px; /*定宽*/
        float: left;
    }
    .right{
        margin-left: 100px;
        background-color: yellow;
    }
    

    优化方案:

    <div class="father">
        <div class="left">左:定宽</div>
        <div class="right-fix">
            <div class="right">右:自适应</div>
        </div>
    
    .left,.right{
        height: 300px;
    }
    .left{
        background-color: red;
        width: 100px;
        float: left;
        position: relative;
    }
    .right-fix{
        float: right;
        width: 100%;
        margin-left: -100px;
    }
    .right{
        background-color: yellow;
    }
    

    (2) 方案二:

    优点 :解决方案一的问题
    缺点 : overflow属性不仅解决了两列布局问题,同时设置了内容溢出的情况

    <div class="left"></div>
    <div class="right"></div>
    
    .left,.right{height: 400px;}
    .left{
        width: 400px;
        background-color: red;
        float: left;
    }
    .right{
        background-color: yellow;
        overflow: hidden;/*开启BFC模式 当前元素内部环境与外界完全隔离*/
    }
    

    (3) 方案三:

    优点:浏览器兼容性比较好
    缺点:将所有元素的display属性值设定为table相关值,受到相应制约

    <div class="parent">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    
    .parent{
        display: table;
        table-layout: fixed;
    }
    .left,.right{height: 400px;
    display: table-cell;}
    
    .left{
        width: 100px;
        background-color: red;
    }
    .right{
        background-color: yellow;
        width: 100px;
    

    2.2 三列布局

    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
    
    .left,.center,.right{height: 300px;}
    
    .left{
        width: 400px;
        background-color: red;
        float: left;
    } 
    .center{
        width: 400px;
        background-color: green;
        float: left;
    }
    .right{
        background-color: yellow;
        margin-left: 800px;
    }
    

    2.3多列布局

    columns属性
    column-count 定义列的数量 属性值:auto 默认值,用于表示列的数量由其他CSS属性决定
    number 正整数,用于定义列的数量 column-width 定义列的宽度 属性值:auto 默认值,用于表示列的宽度由其他CSS属性决定
    number 正整数,用于定义列的宽度

    <div class="parent">
        <div class="col1"></div>
        <div class="col2"></div>
        <div class="col3"></div>
        <div class="col4"></div>
    </div>
    
    .parent{
        column-count: 4;
        column-width:300px;
    }
    .col1,
    .col2,
    .col3,
    .col4 {
        height: 300px;
    }
    .col1{
        background-color: hotpink;
    }
    .col2{
        background-color: lightblue;
    }
    .col3{
        background-color: green;
    }
    .col4{
        background-color: yellow;
    }
    

    列的间距:column-gap属性用于设置列与列之间的间距
    属性值:normal 默认间距1em length 正整数
    列的边框:column-rule 属性用于定义列与列之间的边框
    属性值:

    • column-rule-width 边框宽度
      column-rule-color 边框颜色
      column-rule-style 边框样式

    横跨多列: column-span 用于定义一个列元素是否跨列
    属性值:none 不跨列
    all 元素跨所有列
    列的填充: column-fill 属性用于定义列的高度是由内容决定还是统一高度
    属性值:auto 默认值 列的高度由内容决定
    balance 用于表示列的高度根据内容最多的一列高度决定

    2.4 圣杯布局

    <div class="parent">
        <div class="center">自适应</div>
        <div class="left">左:定宽</div>
        <div class="right">右:定宽</div>
    </div>
    
    .parent{
        height: 300px;
        margin-left:300px;
        margin-right:300px;
    }
    .center,.left,.right{
        height: 300px;
        float: left;
    }
    .left,.right{
        width: 300px;
    }
    .left{
        background-color: red;
        margin-left: -100%;
        position: relative;
        left:-300px;
    }
    
    .center{
        background-color: green;
        width: 100%;
    }
    
    .right{
        background-color: yellow;
        margin-left: -300px;
        position: relative;
        right: -300px;
    }
    

    2.5 双飞翼布局

    <div class="parent">
        <div class="center">
            <div class="inner"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    
    .parent{
        height: 300px;
    }
    .center,.left,.right{
        height: 300px;
        float: left;
    }
    .left,.right{
        width: 300px;
    }
    
    .left{
        background-color: red;
        margin-left: -100%;
    }
    
    .center{
        background-color: green;
        width: 100%;
    }
    .inner{
        height: 300px;
        background-color: blue;
        margin-left: 300px;
        margin-right: 300px;
    }
    
    .right{
        background-color: yellow;
        margin-left: -300px;
    }
    

    3.1 等分布局

    <div class="column1">1</div>
    <div class="column2">2</div>
    <div class="column3">3</div>
    <div class="column4">4</div>
    
    .column1,.column2,.column3,.column4{
        float: left;
        height: 300px;
        width: 25%;
    }
    
    .column1{
        background-color: pink;
    }
    .column2{
        background-color: red;
    }
    .column3{
        background-color: yellow;
    }
    .column4{
        background-color: blue;
    }
    

    4.1 全屏布局

    在这里插入图片描述

    <header></header>
    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <footer></footer>
    
    *{margin: 0;}
    header{
        height: 100px;
        position: fixed;
        top:0;
        left: 0;
        right: 0;
        background-color: lightgray;
    }
    
    .content{
        position: fixed;
        left: 0;
        right: 0;
        top: 100px;
        bottom: 100px;
        overflow: auto;
    }
    
    .content .left{
        width: 300px;
        height: 100%;
        position: fixed;
        left: 0;
        top: 100px;
        bottom: 100px;
        background-color: lightcoral;
    }
    
    .content .right{
        margin-left: 300px;
        background-color: lightgreen;
        height: 1000px;
    }
    
    footer{
        height: 100px;
        position: fixed;
        bottom:0;
        left: 0;
        right: 0;
        background-color: lightblue;
    }
    

    相关文献

    Web前端-移动端开发知识点及常用适配方案

    展开全文
  • 前端7大常用布局方式

    千次阅读 多人点赞 2019-10-21 16:35:51
    Web前端常用布局方式 页面的布局方式是块状元素依次从上至下、从左至右进行布局 布局的作用 对公司、企业而言视觉极佳的布局效果能让在瞬间抓住客户的心,能吸引潜在的合作者。 适用性 ,根据不同行业情况进行不同...

    Web前端常用布局方式

    页面的布局方式是块状元素依次从上至下、从左至右进行布局

    布局的作用

    对公司、企业而言视觉极佳的布局效果能让在瞬间抓住客户的心,能吸引潜在的合作者。

    1. 适用性 ,根据不同行业情况进行不同效果的制作。
    2. 吸引性,视觉效果优秀的布局效果能瞬间吸引客户。

    布局方式

    一、静态布局

    静态布局是最为原始的布局方式,没有什么技术性可言,往往是计算机行业刚刚入门的小白使用的布局方式。制作的网页上的元素尺寸一律以px为单位。

    .bor{
    	width: 360px;
    	height: 255px;
    	border: 1px solid black;
    	margin-bottom: 30px;
    }
    .bor p{
    	color: #000000;
    	font-size: 16px;
    }
    .border-pic{
    	width: 360px;
    	height: 255px;
    	margin-left: 10px;
    	margin-top: 10px;
    	overflow: hidden;
    }
    .border-pic img{
    	width: 360px;
    	height: 255px;
    }
    

    布局特点: 页面上的布局是按最初写代码时候的布局方式进行布局的,常规的pc网站是进行设置了宽度值进行布局的,不会随着pc端的屏幕的大小而变化。
    优点: 这种布局方式不管是对资深的前端开发工程师还是刚入门的小白来说都是最简单的,最让人容易以接受、学习的,没有我们所说的兼容性的问题。这种布局方式大多用在门户网站和企业的官网上,这些官网的设备的尺寸是固定的,这种布局方式往往是最简单的方法。
    缺点: 不会随着pc端的屏幕大小而变化。

    二、弹性布局(flexbox)

    弹性布局可以简便、完整、响应的实现各种页面上的布局。与静态不同的是,使用em或rem单位(lem=16px,1rem=10px)进行相对布局,相对使用百分比更加方便、灵活,相应同时支持浏览器的字体大小调整和缩放的等正常显示。
    优点:
    1.适应性强,在做多种不同的屏幕分辨率不同的界面是非常使用。
    2.随意按照宽度、比例划分元素的宽高。
    3.可以轻松的改变元素的显示顺序。
    4.网页布局实现快捷,维护起来更加容易。
    如果做移动端时,如果客户对细微的之处的要求不高,使用弹性布局进行制作是最好的选择,一份css+一份js调节font-size搞定。
    缺点: 浏览器兼容性较差,只能兼容到IE9及以上。

    三、自适应布局(bootstrap)

    自适应布局分别为不同屏幕不同分辨率定义布局,即是创建多个静态页面,每个静态页面对应一个屏幕分辨率的一个范围内。在改变不同的屏幕分辨率可以切换到不同的静态布局上,但是布局中的元素位置会发生改变,但是在每个静态布局中,页面中的元素不会随着窗口大小的调整发生变化。使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验,在同一个设备下实际还是固定的布局。
    优点:
    1.对网站的复杂程度兼容性更大;
    2.对开发工程师来说制作的成本代价更低;
    3.代码执行效果更高效;
    4.测试时更加容易,运营相对更加精准。
    缺点: 在现如今的移动端设计百花齐放的时期之下,同一个网站往往需要为不同的设备制作不同的页面,不但会增加开发成本,还会因为客户的需求改变时,可能会改动多套代码、流程相比较来说较繁琐。

    四、流式布局(fluid)

    流式布局的布局方式是页面的元素的宽度按照屏幕的分辨率进行适配的调整,但是整体布局不变,也称之为栅栏系统。使用%百分比定义宽度,高度大都是用px来固定住,可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。
    缺点: 屏幕大小变化时,页面元素也随之变化但是布局不变。这就会因为如果屏幕太大或太小都会布局时元素无法正常显示。

    五、响应式布局

    响应式布局是css3增加的新布局方式,该布局方式2010年提出来的一个概念,说白了就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。响应式几乎成为优秀页面布局的标准。
    设计方法: 媒体查询+流式布局。通常使用@media媒体查询,和网格系统配合相对布局单位进行布局,实际上说白了就是综合响应式等技术通过css给单一网页不同设备分辨率返回不式时的技术。
    优点: 适应pc端和移动端,如果有足够的耐心,页面效果会很完美。
    缺点:
    1.只能适应主流的宽高;
    2.如果匹配足够多的设备屏幕的大小,对于工程师来说工作量不小,设计更需要多个版本,工作量增大。

    六、浮动布局

    浮动布局进行调用浮动属性改变页面中元素的位置,浮动布局应该是目前各大网站用的最多的一种布局方式了,但是也特别复杂。浮动元素是脱离文档流的,但不脱离文本流。浮动元素有左浮动(float : left)和右浮动(float : right)两种

    .lian{
    	width: 90%;
    	padding-left: 5%;
    }
    .lian img{
    	float: right;
    	margin-top: -180px;
    }
    .phone ul li{
    	list-style: none;
        margin-top: 50px;
        margin-left: 70px;
        color: #808080;
    }
    .phone ul li img{
    	position: absolute;
    	margin-left: -80px;
    	float: left;
    	margin-top: -5px;
    }
    .view{
    	margin-top: 50px;
    	margin-left: -5px;
    	float: left;
    }
    .view input{
    	width: 120px;
    	height: 40px;
    	border-radius: 6px;
    	border: 1px solid #3CB371;
    	background-color: #3CB371;
    	font-size: 16px;
    	color: white;
    

    优点: 兼容性比较好
    缺点: 浮动带来的影响比较多,页面宽度不够的时候会影响布局。

    七、定位布局

    定位布局时利用position属性控制页面元素设置一些不规则布局。
    定位元素的各个属性:
    1.static 静态定位: HTML元素的默认值,即没有定位,元素出现在正常的流中。

    div.static {
        position: static;
        border: 3px solid #73AD21;
    }
    

    2.fixed 固定定位: 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关,因此不占据空间。Fixed定位的元素和其他元素重叠。

    p.pos_fixed{
        position:fixed;
        top:30px;
        right:5px;
    }
    

    3.relative 相对定位: 相对定位元素的定位是以自身为参照物。对象不可层叠、不脱离文档流,移动相对定位元素,但它原本所占的空间不会改变。通过 top,bottom,left,right 定位。

    h2.pos_top
    {
        position:relative;
        top:-50px;
    }
    

    4.absolute 绝对定位 absolute 定位使元素的位置与文档流无关,因此不占据空间。元素和其他元素重叠。通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位。

    h2{
        position:absolute;
        left:100px;
        top:150px;
    }
    

    5.sticky 粘性定位 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed,它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

    div.sticky {
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 0;
        background-color: green;
        border: 2px solid #4CAF50;
    }
    

    6.z-index 因为页面中元素的定位与文档流无关,所以定位的元素可以覆盖在文档流上面。所以z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面/后面)。z-index的值必须取正整数,数值越大显示的优先级就越高。 如果两个定位元素重叠,而且还没有指定z - index,name最后定位在HTML代码中的元素将被显示在最前面。

    展开全文
  • 前端常用两种布局方式:双飞翼布局以及圣杯布局
  • 本内容主要包含常用的web开发中所需要用到的布局方式,可以作为参考引用到自己的项目开发中。
  • web前端html+css常用布局05列表布局

    千次阅读 2015-08-27 20:55:37
    web前端html+css常用布局05列表布局 注意:引入jquery的jquery-2.1.4.min.js包 图片从自己目录中路径。 代码: html> html> head lang="en"> meta charset="UTF-8"> title>title> script src="jquery...


    web前端html+css常用布局05列表布局

    注意:引入jquery的jquery-2.1.4.min.js包

    图片从自己目录中路径。


    代码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery-2.1.4.min.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            h3{
                color: #666;
                font-weight: 600;
                font-size: 18px;
            }
            body{
                background-color: #f4f4f4;
            }
            .myContents{
                width: 1200px;
                margin: 0 auto;
                margin-bottom: 20px;
                background-color: #fff;
            }
            .mylist {
                width: 1180px;
                height: 200px;
                margin: 0 auto;
                padding: 20px 30px 20px 30px;
    
            }
    
            .p1, .p2, .ptime {
                font-family: "微软雅黑";
                color: #999;
            }
            .p1, .p2 ,.ptime{
                font-size: .875em;
            }
            .listLeft {
                width: 260px;
                height: 180px;
                float: left;
                margin-top: 10px;
            }
    
            .listLeft .listImage {
                width: 260px;
                height: 180px;
            }
    
            .listRight {
                width: 860px;
                height: 200px;
                float: left;
                margin-left: 20px
            }
    
            .myTitle {
                margin-top: 0;
            }
    
            h3 {
                float: left;
                margin-top: 0px;
            }
    
            .p1 {
                margin-top: 45px;
                line-height: 200%;
                /*左右对齐*/
                text-align: justify;
                max-height: 113px;
                min-height: 113px
            }
    
            .p2 {
                margin-top: 16px;
            }
    
            .p2 a {
                /*去掉下划线*/
                text-decoration: none;
                color: #3587c6;
    
            }
    
            .ptime {
                float: right;
            }
            .page-location{padding: 20px 0;font-size: 12px;color: #666;  margin-left: 30px}
            .page-location a{display: inline;color: #3487c4}
            .page-location span{color: #333}
    
            .pagination{position: relative;height: 30px;padding-bottom: 40px;}
            .pagination ul{position: absolute;right: 0;top: 0; list-style: none}
            .pagination li{cursor:pointer;float: left;height:26px;width: 26px;color: #666;line-height:26px;text-align: center;border-radius: 2px; }
            .pagination li.active{background-color:#3587c6;color: #fff }
            .pagination { margin-right: 30px;}
        </style>
    </head>
    <body>
    
    <div class="myContents">
        <div class="page-location">您现在的位置:<a href="#"> 掌上贵金属</a> &gt;<a href="#"> 新手学院</a> &gt; <span>列表页</span></div>
        <div class="mylist">
    
            <div class="listLeft">
                <img class="listImage"src="images/img01.jpg">
                </img>
            </div>
            <div class="listRight">
                <div class="myTitle">
                    <h3>天津贵金属交易所</h3>
    
                    <p class="ptime">2015-5-12</p>
                </div>
                <p class="p1">
                    以下简称“津贵所”)是根据国务院关于《推进滨海新区开发开放有关问题的意见》
                    (国发﹝2006﹞20号)的政策精神,经天津市政府批准,由天津产权交易中心发起设立的公司制交易所。
                    津贵所注册资本金为一亿元人民币,由中国中信集团控股,天津产权交易中心、中国黄金集团公司等企业参股
                    中国黄金集团公司等企业参股
                </p>
    
                <p class="p2"><a href="#">查看全文</a></p>
            </div>
        </div>
    
        <div class="pagination">
            <ul class="clearfix">
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
            </ul>
        </div>
    </div>
    
    
    </div>
    <script type="text/javascript">
        $(function() {
            $(".pagination li").click(function() {
                var index = $(this).index();
                $(".pagination li").removeClass("active");
                $(".pagination li").eq(index).addClass("active");
            })
        })
    </script>
    
    </body>
    </html>
    

    展开全文
  • 前端常用的几种布局方式(推)

    千次阅读 2019-10-22 16:12:34
    静态布局: 最为传统的一种布局方式,网页上的所有元素都是用px为单位进行设定的。 3级标题 布局特点: 不论屏幕的大小,页面宽高始终不变,始终维持最初设计时的样式大小来显示;常规的PC端网页都是用的静态布局,也...
  • Web前端布局详解

    千次阅读 多人点赞 2019-10-21 13:35:01
    Web前端布局方式布局的概念什么是布局布局的作用布局的方式浮动布局定位布局静态布局流式布局弹性布局自适应布局响应式布局常见布局问题高度坍塌 布局的概念 什么是布局 布局前端人员的核心基础技能。 目的是...
  • 前端常用居中方法

    千次阅读 2018-09-12 13:50:02
    前端常用居中方式 整理了一些前端常用的居中方法,有错误的地方请大家多多指教。 水平居中 transform(css3) .parent { position: relative; } .child { position: absolute; left: 50%; ...
  • 最好能介绍下各自的特点,像流式布局。。。。
  • 前端常用标签

    千次阅读 2019-04-16 16:17:53
    块元素标签:在布局中默认会独占一行,块元素后的元素需换行排列。 <h1>h标签</h1> <p>p标</p> <div>div标签</div> 内联元素 内联元素标签:元素之间可以排列在一行,设置宽...
  • web前端常用命名

    2020-12-07 11:43:06
    前端常用命名方法: 连写式命名法:如topnav 中线命名法:如top-nav(此方法目前使用较多,建议使用该方法) 下划线命名法:如top_nav 驼峰命名法:如topNav 帕斯卡命名法:如TopNav 前端常用网页结构命名: 前端...
  • Vue前端常用组件库

    2020-12-01 11:27:50
    Vue前端常用组件库,包含组件文档地址和安装命令。
  • (1)一般来说有以下几种web前端自适应布局方法: 1、浮动 float:left|right——最常用布局方式之一 设置了float的元素脱离了文档流。 需要注意在使用过浮动后,需要清除浮动,从而避免影响后面的非浮动元素。 2、...
  • 静态网页通常需要适应不同分辨率的设备,常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。 1、px和视口 像素是网页布局的基础,一个像素表示了计算机屏幕所能显示的最小区域,像素分为两种类型:css像素...
  • 快速掌握前端页面布局思维要点 所要达到的标准: 对于前端布局能做到信手拈来的程度,就说明已经初见成效了。 (到了这种程度,自己会知道的) 底层: 浏览器会将HTML标签渲染成 dom 树,形成一种树形的结构,...
  • web大前端布局

    2019-10-21 18:59:33
    web大前端布局 想必新手学习代码首先都要接触到前端而在前端里面布局也是一件非常重要之一下面我们先来了解一下布局常用布局 常用布局一般分为一下几大类: 文档布局(text): 文档流本质是 nomal flow...
  • 前端常用得CSS代码分享

    千次阅读 2019-11-29 09:17:04
    本文首发于公众号:小夭同学,同步更新个人博客:故事胶片,转载请署名。代码不断更新中!! 前提 2019年11月的最后一篇...前端常用的CSS代码 1、垂直居中对齐 .vc { position: absolute; top: 50%; left: 50...
  • 前端】CSS布局问题之网格布局

    千次阅读 2018-11-20 20:47:59
    在基于C#做手持设备开发和安卓应用程序里,都常用网格来进行布局。而在网页前端,我几乎都是用用Bootstrap这种框架来设定布局,对于基础的CSS控制样式还能搞定,但是涉及到布局,就一头雾水。 比如最近用到float:...
  • Flex使用总结以及利用Flex(弹性布局)实现五大常用布局(css面试布局) 弹性布局如何实现?常用样式有哪些?
  • web页面常用布局(pc端布局和移动端布局) 什么是web布局呢? 布局也可以叫做排版,它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上,布局的方式分为两种: 1、table布局:通过table元素将页面空间划分...
  • 前端常用插件汇总

    千次阅读 2018-07-04 11:09:14
     前端路由库  详细 BigDecimal.js  提高精度的数字操作 JSDoc  根据javascript文件中注释的信息,生成API文档  详细 hotkeys  键盘事件的封装 MD5  用 MD5 的方式加密文件的库 浏览器增强类 ...
  • wrapper 页面外围控制整体布局宽度 container或#content 容器,用于最外层 layout 布局 head, #header 页头部分 foot, #footer 页脚部分 nav 主导航 subnav 二级导航 menu 菜单 submenu 子菜单 sideBar 侧栏 sidebar_...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 46,380
精华内容 18,552
关键字:

前端常用布局