复习下css布局记录

时间 2019-11-29

标签复习 css 布局记录栏目 CSS 繁體版

原文原文链接

写在前面

今天面试，结果其中就有死在了一个炒鸡简单的css布局上面，css

经典的html

问A、C定高，B定宽，D自适应，怎么搞web

http://www.javashuo.com/article/p-yfkljbtm-bn.html面试

基础的position

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
        html,body,.parent{height:100%;overflow:hidden;}
        div{outline: #000 solid 1px;}
        .top{position:absolute;top:0;left:0;right:0;height:100px;}
        .left{position:absolute;left:0;top:100px;bottom:50px;width:200px;}
        .right{position:absolute;left:200px;right:0;top:100px;bottom:50px;}
        .bottom{position:absolute;left:0;right:0;bottom:0;height:50px;}
	</style>
</head>
<body>
<div class="parent">
    <div class="top"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
</div>
</body>
</html>

Flex

http://www.runoob.com/w3cnote/flex-grammar.htmlsegmentfault

Flex是Flexible Box的缩写，意为”弹性布局”，布局

任何一个容器均可以指定为Flex布局。学习

.box{
  display: flex;
}
.box{
  display: inline-flex;
}
.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

设为Flex布局之后，子元素的float、clear和vertical-align属性将失效。测试

容器6个属性

flex-direction属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	    *{
	    	margin: 0;
	    }
        div{outline: #000 solid 1px;}
        .test{width: 50px;height: 50px}
        .partent{display: flex;flex-direction:row;}
	</style>
</head>
<body>
<div class="partent">
	<div class="test a">A</div>
	<div class="test b">B</div>
	<div class="test c">C</div>
	<div class="test d">D</div>
</div>
</body>
</html>

flex-direction属性决定主轴的方向（即项目的排列方向）。ps：具体名词看教程flex

flex-wrap属性

默认状况下，项目都排在一条轴线上。flex-wrap属性定义，若是一条轴线排不下，如何换行。spa

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

（1）nowrap（默认）：不换行。，在测试的时候还发现这仍是会自适，

ps：后面知道了是应为flex-shrink：1

这里的都是200*200的正方形。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start（默认值）：头对齐

flex-end：尾对齐

center：居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每一个项目两侧的间隔相等。因此，项目之间的间隔比项目与边框的间隔大一倍。

div{
    display:flex;
    justify-content:center;
    align-items:center;
}

水平垂直居中的用法

align-items属性

align-items属性定义项目在交叉轴上如何对齐。

align-content属性

align-content属性定义了多根轴线的对齐方式。若是项目只有一根轴线，该属性不起做用。

项目6个属性

如下6个属性设置在项目上。

order

flex-grow

flex-shrink

flex-basis

flex

align-self

order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

flex-grow属性
flex-grow属性定义项目的放大比例，默认为0，即若是存在剩余空间，也不放大。

flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即若是空间不足，该项目将缩小。

ps：看到这里就明白前面的为何不换行或有适应效果了。

flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

align-self属性

align-self属性容许单个项目有与其余项目不同的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，若是没有父元素，则等同于stretch。

学习完毕，而后重写（抄）下那种布局的flex写法

这里有个小点：由于是未知高，须要设立最外的parent div充满，

因此学习了一个vh单位

vh为相对于视口的高度。视口被均分为100单位的vh

因此

.parent{
    display:flex;
    flex-direction:column;
    min-height: 100vh;
}

代码为

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	    *{
	    	margin: 0;
	    }
        div{outline: #000 solid 1px;}
        .parent{display:flex;flex-direction:column;min-height: 100vh;}/*列方向进行布局*/
        .top{height:100px;}
        .bottom{height:50px;}
        .middle{flex:1;display:flex;}/*占据剩余区域,而后又做为新的容器*/
        .left{width:200px;}
        .right{flex:1;}
	</style>
</head>
<body>
<div class="parent">
    <div class="top"></div>
    <div class="middle">
        <div class="left">aaaa</div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</div>
</body>
</html>