精华内容
下载资源
问答
我要提问

  • 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布局方式