精华内容
下载资源
问答
  • css 布局方式

    2019-09-11 21:15:48
    星期六, 25. 三月 2017 11:41下午 css 布局方式的总览 图片来源 cssConf大会时阿里的 寒冬winter 老师 css 布局的方式分为的部分 css布局方式 盒子内部的布局...

    星期六, 25. 三月 2017 11:41下午

    css 布局方式的总览

    图片来源 cssConf大会时阿里的 寒冬winter 老师

    css 布局的方式分为的部分

    css 的布局方式

    • 盒子内部的布局
      • 文本的布局
      • 盒子本身的布局
    • 盒子之间的布局 visual formmatting
      • 脱离正常normal flow的盒子的布局
        • absolute 布局上下文下的布局
        • float布局上下文下的布局、
      • 正常normal flow下的盒子的布局
        • BFC ( block formatting context ) 布局上下文下的布局
        • IFC 布局上下文下的布局
        • FFC 布局上下文下的布局
        • table 布局上下文下的布局
        • css grid 布局上下文下的布局

    1. 盒子内部的布局

    • 文本的布局
      * 有个line boxes包裹每行文字,这是看不见的;
      * line boxes 会取子元素最高的 line-height
      * 通过line-height 可以设置单行文本的水平的居中
    • box 布局
    图片的来源w3c

    2. 盒子之间的布局

    • absolute 布局 (脱离文档流)
    • float 布局 (脱离文档流)
    • normal flow (正常文档流的布局) (上下文)
      • bfc ( block formatting context ) 块级文档上下文
        • 满足下方任意一个条件,会为子元素,创建一个新的 bfc的上下文
          * 根元素 (body)
          * float 元素不为 none
          * overflow 不为 visible
          * display 为inline-block,table-cell,table-caption
          * postition 的值为 absolute , fixed
      • ifc (Inline formatting contexts ) 行内块级上下文
      • ffc ( Flex Formatting Contexts ) 伸缩格式化上下文
      • table ( table formatting context ) 表格布局上下文
      • grid ( grid formatting context ) 网格格式化上下文

    3. 需要的注意的地方

    • bfc上下文下的布局
      * float 布局的元素
      * 会被假装成行内元素进行布局,向浮动的方向挤,挤不开就会到第二行
      * 当与元素排在一行时,会先渲染 float的元素

            <div> 
                <span style = 'padding:10px'>  one  </span>
                <div  style = 'float:left' > left </div>
                <span>  two </span>
            </div>
      
       *  这个是效果图

        * left 出现在了 one,two 的前方

    4. float布局

    • 浮动元素对周围元素造成的影响
      • 其他元素会环绕float的元素
      • 浮动元素可以设置外边距,不与周围元素的外边距重合
      • 生成块级框(display: block)
      • 浮动的元素顶部不能超过父元素的顶边
        • 可以设置 负的margin( margin: -10px) 来打破这条规则
    • 浮动元素的重叠问题
      出现的原因: 浮动元素可以设置 负的margin值,
      • 行内元素与浮动元素的重叠
        行内元素的内容,背景,边框都在浮动元素之上

      • 块框与浮动元素的重叠
        块框的背景,边框 会在浮动元素下方,内容在浮动元素上方

      • 浮动与浮动重叠
        后面的覆盖前面的

    • 父元素塌陷问题

        <div id = 'parent'> 
            <div  style = 'float:left' > one  </div>
        </div>

      父元素没有高度,这样不能添加点击的事件,所以需要清楚浮动也可以给父元素设置高度

        <div id = 'parent' style = 'height : 200px'> 
            <div  style = 'float:left' > one  </div>
        </div>
      • 清楚浮动的方式:
        1.添加一个子元素设置 clear : both

        <div id = 'parent' style = 'height : 200px'> 
            <div  style = 'float:left' > one  </div>
        <div  style = 'clear:both' >  </div>

        2.给父元素添加一个伪类
        html部分

        <div id = 'parent' style = 'height : 200px'> 
            <div  style = 'float:left' > one  </div>
        </div>

        css伪类

            .clearfix:before, .clearfix:after{
                content : “”;
                display : block;
                overflow:hidden;
             }
    展开全文
  • css布局方式

    2019-11-10 20:05:30
    css布局方式 1.行布局 2.多列布局:两列 三列 4.圣杯布局,双飞翼布局: 三列布局 中间自适应宽度 两边定宽 中间优先渲染 圣杯布局与双飞翼布局的区别: 圣杯:加一个包含main,left,right整体的容器,设置容器左右的...

    css布局方式

    1.行布局

    2.多列布局:两列 三列

    4.圣杯布局,双飞翼布局: 三列布局 中间自适应宽度 两边定宽 中间优先渲染

    圣杯布局与双飞翼布局的区别:

    圣杯:加一个包含main,left,right整体的容器,设置容器左右的padding,浮动左右元素填充padding,需设置position:relative,因为要设置left,right位置,同时调节margin-left

    双飞翼:只需要给main元素加一个容器,设置容器的margin-left,margin-right,左右元素浮动设置margin-left即可

    <!--圣杯布局-->
    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    		body{
    			margin:0;
    			padding:0;
    			width:100%;
    			min-width:700px;
    			text-align:center;
    		}
    		.header,.footer{
    			width:100%;
    			height:40px;
    			background:#eee;
    			float:left;
    		}
    		.body{
    			padding:0 200px 0 220px;
    		}
    		.main,.left,.right{
    			position:relative;
    			float:left;
    		}
    		.main{
    			width:100%;
    			min-height:300px;
    			background:green;
    		}
    		.left{
    			width:220px;
    			min-height:300px;
    			background:red;
    			margin-left:-100%;
    			left:-220px;
    		}
    		.right{
    			width:200px;
    			min-height:300px;
    			background:blue;
    			margin-left:-200px;
    			right:-200px;
    		}
    	</style>
    </head>
    <body>
    
    </body>
    	<div class="header">header</div>
    	<div class="body">
    		<div class="main">middle</div>
    		<div class="left">left</div>
    		<div class="right">right</div>
    	</div>
    	<div class="footer">footer</div>
    </html>
    <!--双飞翼布局-->
    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    		body{
    			margin:0;
    			padding:0;
    			min-width:700px;
    			color:#fff;
    			text-align:center;
    		}
    		.header,.footer{
    			width:100%;
    			height:40px;
    			background:#ddd;
    			float:left;
    		}
    		.main,.left,.right{
    			float:left;
    		}
    		.main{
    			width:100%;
    			min-height:300px;
    		}
    		.main-item{
    			margin-left:220px;
    			margin-right:200px;
    			min-height:300px;
    			background:green;
    		}
    		.left{
    			width:220px;
    			min-height:300px;
    			background:gold;
    			margin-left:-100%;
    		}
    		.right{
    			width:200px;
    			min-height:300px;
    			background:orange;
    			margin-left:-200px;
    		}
    	</style>
    </head>
    <body>
    
    </body>
    	<div class="header">header</div>
    	<div class="body">
    		<div class="main">
    			<div class="main-item">main-item</div>
    		</div>
    		<div class="left">left</div>
    		<div class="right">right</div>
    	</div>
    	<div class="footer">footer</div>
    </html>

    在这里插入图片描述

    展开全文
  • CSS布局方式

    2020-04-11 17:12:17
    CSS有三种布局方式: 1.默认文档流方式 以默认的html元素的结构顺序显示 2.浮动布局方式 通过设置html元素的float属性显示 3.定位布局方式 通过设置html元素的position属性显示 ...

    CSS有三种布局方式:

    1.默认文档流方式
    以默认的html元素的结构顺序显示

    2.浮动布局方式
    通过设置html元素的float属性显示

    3.定位布局方式
    通过设置html元素的position属性显示

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,407
精华内容 3,362
关键字:

css布局方式