CSS:实现自适应两栏布局的四种方法

实现两栏布局的方法

1. BFC实现自适应两栏布局

1. 什么是BFC

BFC:是一个独立的布局环境,其中的元素布局是不受外界的影响。
如果一个元素符合了成为BFC的条件,那么该元素就成为了一个隔离的独立容器BFC的区域不会与外部浮动元素重叠,且在同一个BFC内的两个相邻块级元素的外边距会重叠,但不同 BFC外边距不会重叠;在计算BFC高度时,将它内部的浮动元素也包含在内。

2. 触发BFC的方法

(常用overflow:hidden;)

  • float属性不为none
  • position为absolute或fixed
  • overflow的值不为visible
    利用BFC的特性:BFC的区域不会与外部浮动元素重叠

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .left {
            width: 100px;
            height: 300px;
            background-color: aqua;
            float: left;
        }
        .right {
            height: 400px;
            background-color: blueviolet;
            overflow: hidden;
        }
    style>
head>
<body>
    <div>
        
        <div class="left">leftdiv>
        <div class="right">rightdiv>
    div>
body>
html>

效果:
CSS:实现自适应两栏布局的四种方法_第1张图片

2. flex盒模型实现自适应两栏布局

flex盒模型,父级元素设置display为flex布局,则其内部的子元素都会自动成为容器成员,其中子元素设置为flex:1;占比即可自动填满剩下的空间。


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .parent {
            display: flex;
        }
        
        .left {
            width: 200px;
            height: 200px;
            float: left;
            background-color: #32bf32;
        }
        
        .right {
            flex: 1;
            height: 300px;
            background-color: #545454;
            /* overflow: hidden; */
            /* margin-left: 200px; */
            /* float: right;
            width: calc(100% - 200px); */
        }
    style>
head>

<body>
    <div class="parent">
        <div class="left">111div>
        <div class="right">222div>
    div>
body>

html>

3. 左浮动float+右margin-left实现自适应两栏布局


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .left {
            width: 200px;
            height: 200px;
            float: left;
            background-color: #32bf32;
        }
        
        .right {
            height: 300px;
            background-color: #545454;
            /* overflow: hidden; */
            margin-left: 200px;
        }
    style>
head>

<body>
    <div>
        <div class="left">111div>
        <div class="right">222div>
    div>
body>

html>

4. float+calc()函数实现自适应两栏布局

1. calc() 函数是什么?

calc() 函数是CSS3的新属性,用于动态计算长度值。

  • 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
  • 任何长度值都可以使用calc()函数进行计算;
  • calc()函数支持 “+”, “-”, “*”, “/” 运算;
  • calc()函数使用标准的数学运算优先级规则;
  1. 如果右边的元素同样设置了浮动,可以使用此方法

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .left {
            width: 200px;
            height: 200px;
            float: left;
            background-color: #32bf32;
        }
        
        .right {
            height: 300px;
            background-color: #545454;
            /* overflow: hidden; */
            /* margin-left: 200px; */
            float: right;
            width: calc(100% - 200px);
        }
    style>
head>

<body>
    <div>
        <div class="left">111div>
        <div class="right">222div>
    div>
body>

html>

没利用calc函数设置宽度之前:
CSS:实现自适应两栏布局的四种方法_第2张图片
设置之后:
CSS:实现自适应两栏布局的四种方法_第3张图片

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