css基础笔记十五, css布局样式大全.详细篇包含浮动,定位,弹性盒子,栅格,网格等布局方式

凡梦_leo

已于 2024-09-22 10:34:50 修改

阅读量1.5k

点赞数 44

分类专栏： # CSS 文章标签： css 笔记前端 css3

于 2024-07-09 14:49:23 首次发布

本文链接：https://blog.youkuaiyun.com/qq_55006020/article/details/140294573

版权

基础布局

基础的按照html的规则,一次摆放html div的元素然后css设置尺寸和美化样式

代码示例:

<!DOCTYPE html>
<!--
常用属性
width 宽度
height 高度
backround-color 背景颜色
float   浮动
-->
<html lang="en">
<!--上中下布局-->
<head>
    <meta charset="UTF-8">
    <title>布局网页常用结构</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .header{
      width: 100%;
      height:100px;
      background-color: #fcc;
    }
    .nav{
      width: 100%;
      height:500px;
      background-color: yellow;
    }
    .footer{
      width: 100%;
      height:200px;
      background-color: aqua;
    }
  </style>
</head>
<body>
<div class="header">页眉</div>
<div class="nav">导航</div>
<div class="footer">底部内容</div>

</body>
</html>

效果

浮动布局

使用浮动,改变html元素原本的位置,然后调整样式展示不同的布局方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上中下左右结构布局</title>
  <style>
/*<!-- 清除浏览器默认边距   -->*/
    .root{
      margin: 0;
      padding: 0;
    }
    /*页眉和导航共同设置*/
    .header,.nav,.a123{
      width: 100%;
      height: 100px;
    }
    /*如果要显示页脚,要把中间部分也设置一下下,不然页脚不出来了*/
    .a1{
      width: 100%;
      height: 500px;
    }
    .left,.center,.right{
      width:33.3% ;
      height: 100%;
    }

  </style>
</head>
<body>
<div class="root">
  <div class="header" style="background-color: red">页眉</div>
  <div class="nav" style="background-color: #ffcccc">导航</div>
  <div class="a1">
    <div class="left" style="float: left;background-color: sandybrown;">左边文章</div>
    <div class="center" style="float:left;background-color: aquamarine">中间文章</div>
    <div class="right" style="float: left; background-color: deeppink">右边文章</div>
  </div>
  <div class="a123" style=" background-color: #006699;">页脚</div>
</div>
</body>
</html>

定位布局

通过不同的定位方式, 更改div容器的位置实现布局

顶部和底部容器：使用position: fixed;固定在视口的顶部和底部。
容器（.container）：使用position: relative;作为其他绝对定位元素的参照。
左侧、中间和右侧内容：使用position: absolute;相对于.container进行定位。通过left、right和width属性控制它们的位置和大小。
滚动：中间内容区（.main-content）设置overflow-y: auto;以允许垂直滚动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>布局示例</title>
  <style>
    body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.header, .footer {
    position: fixed;
    width: 100%;
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    z-index: 1000;
}

.header {
    top: 0;
}

.footer {
    bottom: 0;
}

.container {
    position: relative;
    height: calc(100% - 60px); /* 减去头部和底部的高度 */
    padding: 20px 0; /* 为内容添加一些内边距 */
    box-sizing: border-box;
}

.sidebar, .main-content, .aside {
    position: absolute;
    height: 100%;
}

.sidebar {
    left: 0;
    width: 20%;
    background-color: #f4f4f4;
    padding: 20px;
    box-sizing: border-box;
}

.main-content {
    left: 20%; /* 左侧栏的宽度 */
    width: 60%; /* 剩余空间的大部分给中间内容 */
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto; /* 如果内容太多，可以滚动 */
}

.aside {
    right: 0;
    width: 20%;
    background-color: #f4f4f4;
    padding: 20px;
    box-sizing: border-box;
}

/* 确保滚动时，中间内容区可以滚动 */
.main-content, .container {
    overflow: hidden;
}

/* 其他样式可以根据需要添加 */

  </style>


</head>
<body>
    <div class="header">顶部导航</div>
    <div class="container">
        <div class="sidebar">左侧内容</div>
        <div class="main-content"