CSS常见布局——两栏、三栏布局

CSS常见布局

  • 两栏布局
      • 1、float+margin
      • 2、float+BFC
      • 3、float+flex
  • 三栏布局
      • 1、双飞翼布局
      • 2、圣杯布局
  • 总结

这篇对margin-left取负值讲的很清楚,包括一些图都来自https://blog.csdn.net/darabiuz/article/details/122671084

margin负值会改变元素占据的空间。要是不给他负值,一定是在第二行显示,因为他占据空间。

本示例,left的宽度为200px,当我设置left的margin-left为200px,和他宽度一样时:会出现这样的结果:
CSS常见布局——两栏、三栏布局_第1张图片当margin-left的值百分比时,是相对于父元素宽度的百分比

两栏布局

一般两栏布局指的是左边一栏宽度固定,右边一栏宽度自适应,两栏布局的具体实现:

1、float+margin

左盒子,float:left ,宽度固定设为200px;
右盒子:margin-left:200px;宽度默认(块级元素不设置宽度或auto时为100%)

 <style>
        .parent {
     height: 100px;}
        #left {
     
            width: 200px;
            height: 100px;
           float: left;
           background-color:hotpink;
        }

        #right {
     
            height: 200px;
            margin-left: 200px;
            background-color: pink;
        }
    style>
head>
<body>
    <div class="parent">
        <div id="left">div>
        <div id="right">div>
    div>
body>

2、float+BFC

左盒子,float:left ,宽度固定设为200px;
右盒子,设置overflow:hidden,触发了BFC,其中BFC特性为不与浮动元素重叠

 <style>
        .parent {
     

你可能感兴趣的:(css,css3,html)