传统css布局

最新推荐文章于 2022-12-20 10:23:27 发布

努力努力再努力12138

最新推荐文章于 2022-12-20 10:23:27 发布

阅读量209

点赞数

分类专栏：前端 css 文章标签： html css 定位

本文链接：https://blog.csdn.net/weixin_43490111/article/details/113185867

版权

前端同时被 2 个专栏收录

29 篇文章 1 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

css布局重点

浮动float
定位position
盒模型
flex
grid/layout

1.正常布局流

块元素（display:block）:下一个元素会另起一行
内联元素（display:inline）：与上一个元素在同一行，不能设置宽高
内联块（display: inline-block）：如果你想控制内联元素的尺寸，inline-block 混合了inline 和 block的特性
ps:
外边距叠加
如果两个相邻的元素都设置了margin 并且两个margin有重叠，那么更大的设置会被保留，小的则会消失

文字水平居中：text-align
垂直居中：高度等于行高

2.弹性盒子（display:flex）

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../learn/learn.css">
    <!-- <link rel="stylesheet" href="../learn/learn.js"> -->
    <title>learn</title>
    <script src="../learn/learn.js"></script>
</head>
<body>
    <header><h1>Sample flexbox</h1></header>
    <section>
        <article><h1>first article</h1>asdasdas</article>
        <article><h1>second article</h1>sadasdasda</article>
        <article>
            <div class="thirdActicle">
                <button>1</button>
                <button>2</button>
                <button>3</button>
                <button>4</button>
                <button>5</button>
            </div>
            <div>dcvrvewvwev</div>
            <div>xkncjwecbyubeckjwecnucn</div>
        </article>
        
    </section>
</body>
</html>

css


header {
    background-color: blueviolet;
    color: azure;
    text-align: center;
    height: 100px;
    line-height: 100px;
}

section {
    display: flex;
    flex-flow: row nowrap;/*section是个flex容器，里面的东西横着放*/
}

article {
    background-color: aqua;
    flex: 1 200px;
    margin: 7px;
    height: 300px;
}

article:nth-of-type(3) {
    flex: 3 200px;
    display: flex;/*flex容器，里面的东西竖着放*/
    flex-flow: column wrap;
}

article:nth-of-type(3) div:first-child {
    display: flex;/*设在父容器*/
    flex: 1 100px;
    flex-flow: row wrap;
    margin: 3px;
    align-items: center;/*竖轴*/
    justify-content: space-around;/*横轴*/
}


.thirdActicle button {
    flex: 1 80px;
    font-size: 18px;
    margin: 5px;
    line-height: 1.5;
}

3.网格布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../learn/learn.css">
    <!-- <link rel="stylesheet" href="../learn/learn.js"> -->
    <title>learn</title>
    <script src="../learn/learn.js"></script>
</head>
<body>
    <header><h1>Sample flexbox</h1></header>
    <section>
        <article><h1>first article</h1>asdasdas</article>
        <article><h1>second article</h1>sadasdasda</article>
        <article>chbsdbcjsdj</article>
        <article>jsxnckjasncjk</article>
    </section>
    
</body>
</html>


header {
    background-color: blueviolet;
    color: azure;
    text-align: center;
    height: 100px;
    line-height: 100px;
}

section {
    display: grid;
    /* grid-template-columns: 1fr 1fr 1fr;总共3列，1:1:1:比列分配 */
    /* grid-template-columns: repeat(3, 1fr); */
    /*显式网格 与上一行同义*/
    grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); 
    grid-auto-rows: 100px;
    /*隐式网格*/
    /* grid-auto-rows: minmax(100px,auto); */
    /*最小高度为100px，超过后会随内容大小自定义*/
    grid-gap: 20px;/*行列间隙*/
}

4.浮动

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../learn/learn.css">
    <!-- <link rel="stylesheet" href="../learn/learn.js"> -->
    <title>learn</title>
    <script src="../learn/learn.js"></script>
</head>
<body>
    <h1>Simple float example</h1>
    <img src="../img/lanqian.jpg" alt="万茜">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
        vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
        tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel,
        viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
        Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
        ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget
        fermentum sapien.</p>
    
    <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit
        amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
        elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
        cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
        dis parturient montes, nascetur ridiculus mus.</p>

    <p>This is my very important paragraph.
        i am a distinguished gentleman of such renown that my paragraph
        needs to be styled in a manner befitting my majesty. Bow before
        my splendour, dear students, and go forth and learn CSS!</p>
    <h1>column layout example</h1>
    <div class="column">
        <h2>first</h2>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
            vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
            tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel,
            viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
            Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
            ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget
            fermentum sapien.</p>
    </div>
    <div class="column">
        <h2>Second column</h2>
        <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere
            sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
            tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu
            urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
            penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="column">
        <h2>Third column</h2>
        <p>Nam consequat scelerisque mattis. Duis pulvinar dapibus magna, eget congue purus mollis sit amet. Sed euismod
            lacus sit amet ex tempus, a semper felis ultrices. Maecenas a efficitur metus. Nullam tempus pharetra pharetra.
            Morbi in leo mauris. Nullam gravida ligula eros, lacinia sagittis lorem fermentum ut. Praesent dapibus eros vel
            mi pretium, nec convallis nibh blandit. Sed scelerisque justo ac ligula mollis laoreet. In mattis, risus et
            porta scelerisque, augue neque hendrerit orci, sit amet imperdiet risus neque vitae lectus. In tempus lectus a
            quam posuere vestibulum. Duis quis finibus mi. Nullam commodo mi in enim maximus fermentum. Mauris finibus at
            lorem vel sollicitudin.</p>
    </div>
    <div class="clearfix"></div><!--清除浮动的-->
    <footer>
        <p>
            &copy;2016 your imagination. This isn't really copyright, this is a mockery of the very concept. Use as you
            wish.
        </p>
    </footer>
    
</body>
</html>

css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;/*是边框之内的都为盒子而不只是内容了*/
}

body {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
}

p {
    line-height: 2;
    word-spacing: 0.1rem;
}

p:nth-of-type(3) {
    width: 400px;
    
}

p:nth-of-type(3)::first-line {
    text-transform: uppercase;
}

p:nth-of-type(3)::first-letter {
    font-size: 3em;
    border: 1px solid black;
    background: red;
    float: left;
    padding: 2px;
    margin-right: 4px;
}

img {
    float: right;
    margin-left: 30px;
    width: 100px;
    height: 100px;
}

div:nth-of-type(1) {
    width: 36%;
    float: left;
}

div:nth-of-type(2) {
    width: 30%;
    float: left;
    margin-left: 4%;
}

div:nth-of-type(3) {
    width: 26%;
    float: right;
}

.clearfix {
    clear: both;
}

footer {
    margin-top: 4%;
}

.column, footer {
  padding: 1%;
  border: 2px solid black;
  background-color: red;
}

5.定位

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../learn/learn.css">
    <!-- <link rel="stylesheet" href="../learn/learn.js"> -->
    <title>learn</title>
    <script src="../learn/learn.js"></script>
</head>
<body>
    <h1>Basic document flow</h1>
    
    <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
    
    <p class="positioned">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width
        and height is our content + padding + border width/height.</p>
    
    <p class="pos">We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins,
        not both.</p>
    
    <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and
        adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line
            if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image
        will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
    <!-- 表格 dt为标题 dd 为内容 -->
        <dl>
        <dt>A</dt>
        <dd>Apple</dd>
        <dd>Ant</dd>
        <dd>Altimeter</dd>
        <dd>Airplane</dd>
        <dt>B</dt>
        <dd>Bird</dd>
        <dd>Buzzard</dd>
        <dd>Bee</dd>
        <dd>Banana</dd>
        <dd>Beanstalk</dd>
        <dt>C</dt>
        <dd>Calculator</dd>
        <dd>Cane</dd>
        <dd>Camera</dd>
        <dd>Camel</dd>
        <dt>D</dt>
        <dd>Duck</dd>
        <dd>Dime</dd>
        <dd>Dipstick</dd>
        <dd>Drone</dd>
        <dt>E</dt>
        <dd>Egg</dd>
        <dd>Elephant</dd>
        <dd>Egret</dd>
    </dl>
</body>
</html>

css

/* 定位的不出现在文档流中 */
* {
    margin: 0;
    padding: 0;
}

body {
    width: 500px;
    margin: 0 auto;
    /* position: relative; */
    height: 1400px;
}

h1 {
    position: fixed;
    /* 相对视口，固定的 */
    top: 0;
    width: 500px;
    margin: 0 auto;
    background: white;
    padding: 10px;
}

p {
    background: aqua;
    border: 3px solid blue;
    padding: 10px;
    margin: 10px;
}

p:nth-of-type(1) {
    margin-top: 60px;
}

dt {
    background-color: black;
    color: white;
    padding: 10px;
    position: sticky;
    top: 0;
    left: 0;
    margin: lem 0;
    /* 上下 左右 */
}
/* fixed：超过会重叠而sticky会交替 */

/* p:nth-of-type(1) {
    position: absolute;
    background: lime;
    top: 10px;
    right: 30px;
    z-index: 1;
    更高的值在上面显露
} */

span {
    background: red;
    border: 1px solid black;
}

.pos {
    position: sticky;
    /* 位置相对定位，超过位置后被固定 */
    top: 30px;
    left: 30px;
}

/* .pos {
    position: absolute;绝对定位，位置不存在原来层，在自己的独立层
    子绝父相才能在父容器偏移，不然就是相对于页面偏移
    top: 30px;
    left: 30px;
    margin: 0;
}

.positioned {
    position: static; 
    静态定位为默认行为
    position: relative;相对定位，占位还是原来位置的
    top: 30px;
    left: 30px;
    background: yellow;
} */