前端之 CSS页面布局

文章目录

盒子模型

盒子模型概念
盒子模型成员介绍

Float(浮动)

清除浮动

Clear
overflow溢出属性
Positioning(定位)

Static 定位
Fixed 定位
Relative 定位
Absolute 定位
z-index重叠元素

实例

盒子模型

盒子模型概念

广义盒模型：文档中所有功能性及内容性标签，及文档中所有显示性标签
侠义盒模型：文档中以块级形式存在的标签（块级标签拥有盒模型100%特性且最常用）

盒子模型成员介绍

Margin（外边距） - 清除边框区域。Margin没有背景颜色，它是完全透明

margin成员：margin-left、margin-right、margin-top、margin-bottom

Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响

border(边框)由border-width(宽度)、border-color(颜色)、border-style(风格)三部分组成
border成员：border-left、border-right、border-top、border-bottom
border-width成员：border-left-width、border-right-width、border-top-width、border-bottom-width
border-color成员：border-left-color、border-right-color、border-top-color、border-bottom-color
border-style成员：border-left-style、border-right-style、border-top-style、border-bottom-style

Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响

padding成员：padding-left、padding-right、padding-top、padding-bottom

Content（内容） - 盒子的内容，显示文本和图像

通过设置width与height来规定content
块级标签可以设置自身宽高，默认宽为父级宽(width=auto)、高为0，高度可以由内容决定
内联标签不可以设置自身宽高，默认宽高均为0，宽高一定由内容决定

整体设置

margin：、Border(border-width：)、Padding：根据后面跟的值的个数可以对不同的边距进行设置。

赋值个数	方位
1	上下左右
2	上下、左右
3	上、左右、下
4	上、右、下、左

padding:25px 50px 75px 100px;
上填充为25px、右填充为50px、下填充为75px、左填充为100px
padding:25px 50px 75px;
上填充为25px、左右填充为50px、下填充为75px
padding:25px 50px;
上下填充为25px、左右填充为50px
padding:25px;
所有的填充都是25px

Float(浮动)

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框只能左右移动而不能上下移动，直到该块级框的外边缘碰到包含框或者其他的浮动框为止。浮动元素之后的元素将围绕它，浮动元素之前的元素将不会受到影响。

如果把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

.c2 {
    width: 50px;
    height: 50px;
    background-color: green;
    float: left;
        }

属性值

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

清除浮动

清除浮动的副作用（父标签塌陷问题）

主要有三种方式：

固定高度

添加最后一个元素<div style =“clear:both”></div>

伪元素清除法

通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格"020"或点"."，并且赋予clear属性来清除浮动。

overflow:hidden

父元素设置overflow: hidden;

伪元素清除法（使用较多）：

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

Clear

clear 属性定义了元素的哪边上不允许出现浮动元素。

属性值

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

overflow溢出属性

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

div {
    overflow: scroll;
}

属性值

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

Positioning(定位)

CSS position 属性，允许您将布局的一部分与另一部分重叠。

Static 定位

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到top, bottom, left, right影响。

Fixed 定位

元素的位置相对于浏览器窗口是固定位置。Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。

.test{
   position: fixed;
}

Relative 定位

相对定位元素的定位是相对其正常位置，可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。

.test{
   position: relative;
}

Absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:，Absolutely定位使元素的位置与文档流无关，因此不占据空间。

.test{
   position: absolute;
}

z-index重叠元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面），具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

.test{
   z-index: 999; 
}

一个元素可以有正数或负数的堆叠顺序：

实例

效果图：
在这里插入图片描述

实例代码html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
<img src="temp/1.jpg" alt="" class="background">
<div class="blog-left">
    <div class="touxian">
        <img src="temp/888.jpg" alt="">
    </div>
    <div class="title">
        <p>linwow</p>
    </div>
    <div class="info">
        <p>天行健，君子以自强不息。地势坤，君子以厚德载物。</p>
    </div>
    <div>
        <ul class="link">
            <li><a href="">关于我</a></li>
            <li><a href="">微博</a></li>
            <li><a href="">微信</a></li>
        </ul>
    </div>
    <div>
        <ul class="tag">
            <li><a href="">#唐诗</a></li>
            <li><a href="">#宋词</a></li>
        </ul>
    </div>
</div>
<a href="" id="a1"></a>
<div class="blog-right">
    <div class="c-title">
        <div >
            <span class="ti">芙蓉楼送辛渐</span>
            <span class="dt">2019-5-1</span>
        </div>
        <div class="con">
            <p>寒雨连江夜入吴，平明送客楚山孤。 洛阳亲友如相问，一片冰心在玉壶。</p>
        </div>
        <div class="bt">
            <span>唐代</span>
            <span>王昌龄</span>
        </div>
    </div>
    <div class="c-title">
        <div >
            <span class="ti">凉州词</span>
            <span class="dt">2019-5-2</span>
        </div>
        <div class="con">
            <p>葡萄美酒夜光杯，欲饮琵琶马上催。 醉卧沙场君莫笑，古来征战几人回？</p>
        </div>
        <div class="bt">
            <span>唐朝</span>
            <span>王翰</span>
        </div>
    </div>
    <div class="c-title">
        <div >
            <span class="ti">赤壁</span>
            <span class="dt">2019-5-3</span>
        </div>
        <div class="con">
            <p>折戟沉沙铁未销，自将磨洗认前朝。 东风不与周郎便，铜雀春深锁二乔。</p>
        </div>
        <div class="bt">
            <span>唐代</span>
            <span>杜牧</span>
        </div>
    </div>
    <div class="c-title">
        <div >
            <span class="ti">过零丁洋</span>
            <span class="dt">2019-5-5</span>
        </div>
        <div class="con">
            <p>辛苦遭逢起一经，干戈寥落四周星。 山河破碎风飘絮，身世浮沉雨打萍。 惶恐滩头说惶恐，零丁洋里叹零丁。 人生自古谁无死？留取丹心照汗青。</p>
        </div>
        <div class="bt">
            <span>宋代</span>
            <span>文天祥</span>
        </div>
    </div>
    <div class="c-title">
        <div >
            <span class="ti">题西林壁</span>
            <span class="dt">2019-5-10</span>
        </div>
        <div class="con">
            <p>横看成岭侧成峰，远近高低各不同。 不识庐山真面目，只缘身在此山中</p>
        </div>
        <div class="bt">
            <span>宋代</span>
            <span>苏轼</span>
        </div>
    </div>
    <div class="c-title">
        <div >
            <span class="ti">正气歌</span>
            <span class="dt">2019-5-30</span>
        </div>
        <div class="con">
            <p>余囚北庭，坐一土室。室广八尺，深可四寻。单扉低小，白间短窄，污下而幽暗。当此夏日，诸气萃然：雨潦四集，浮动床几，时则为水气；涂泥半朝，蒸沤历澜，时则为土气；乍晴暴热，风道四塞，时则为日气；檐阴薪爨，助长炎虐，时则为火气；仓腐寄顿，陈陈逼人，时则为米气；骈肩杂遝，腥臊汗垢，时则为人气；或圊溷、或毁尸、或腐鼠，恶气杂出，时则为秽气。叠是数气，当之者鲜不为厉。而予以孱弱，俯仰其间，於兹二年矣，幸而无恙，是殆有养致然尔。然亦安知所养何哉？孟子曰：「吾善养吾浩然之气。」彼气有七，吾气有一，以一敌七，吾何患焉！况浩然者，乃天地之正气也，作正气歌一首。

天地有正气，杂然赋流形。下则为河岳，上则为日星。於人曰浩然，沛乎塞苍冥。
皇路当清夷，含和吐明庭。时穷节乃见，一一垂丹青。在齐太史简，在晋董狐笔。
在秦张良椎，在汉苏武节。为严将军头，为嵇侍中血。为张睢阳齿，为颜常山舌。
或为辽东帽，清操厉冰雪。或为出师表，鬼神泣壮烈。或为渡江楫，慷慨吞胡羯。
或为击贼笏，逆竖头破裂。是气所磅礴，凛烈万古存。当其贯日月，生死安足论。
地维赖以立，天柱赖以尊。三纲实系命，道义为之根。嗟予遘阳九，隶也实不力。
楚囚缨其冠，传车送穷北。鼎镬甘如饴，求之不可得。阴房阗鬼火，春院閟天黑。(閟天黑 同：闭)
牛骥同一皂，鸡栖凤凰食。一朝蒙雾露，分作沟中瘠。如此再寒暑，百疠自辟易。
哀哉沮洳场，为我安乐国。岂有他缪巧，阴阳不能贼。顾此耿耿存，仰视浮云白。
悠悠我心悲，苍天曷有极。哲人日已远，典刑在夙昔。风檐展书读，古道照颜色。</p>
        </div>
        <div class="bt">
            <span>宋代</span>
            <span>文天祥</span>
        </div>
    </div>
</div>
<div class="back">
    <a href="#a1"><img src="http://img.lanrentuku.com/img/allimg/1206/5-120601155S6.png" alt=""></a>
</div>
<div class="fenxian">
    <span>分<br>享</span>
    <div class="fenxin-cont">
        <span>分<br>享<br>也<br>是<br>一<br>种<br>爱</span>
    </div>
</div>

</body>
</html>

实例代码css

body {
    margin: 0px;
}
.background{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
}
a {
    text-decoration: none;
}

ul {
    list-style-type: none;
    padding: 0px;
}

.clearfix:after {
    content: "";
    clear: left;
    display: block;
}


.blog-left {
    width: 20%;
    height: 100%;
    float: left;
    position: fixed;
}

.touxian {
    width: 120px;
    height: 120px;
    border: saddlebrown solid 5px;
    border-radius: 50%;
    margin: 40px auto;
    overflow: hidden;
}

.touxian img{
    width: 100%;
}

.title{
    text-align: center;
    margin: 20px;
}
.title>p {
    font-family:"华文行楷";
    font-size: 30px;
}

.info{
    text-align: center;
    margin: 20px;
}

.tag,.link{
    margin-left: 30px;
    margin-top: 50px;
    font-size: 16px;
}

li>a{
    color: #c209e2;
}
li>a:hover{
    color: aqua;
}

.blog-right {
    background-color: rgba(240,247,250,0.5);
    /*opacity: 0.3;*/
    width: 79%;
    float: right;
    margin-left: 20px;
}

.c-title{
    background-color: rgba(255,255,255,0.7);
    margin: 20px 20px 20px 20px;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}
.ti {
    font-size: 30px;
    font-family: 楷体;
    margin-left: 10px;
}
.dt {
    padding-top: 10px;
    float: right;
    margin-top: 20px;
    margin-right: 10px;
}
.con{
    text-indent: 24px;
    border-bottom: 3px solid rgba(164, 164, 164, 0.5);
}

.bt span{
    font-size: 12px;
    margin-left: 20px;
}

.back{
    position: fixed;
    right: 20px;
    bottom: 20px;
}
.fenxian{
    font-family: 微软雅黑;
    display: block;
    position: fixed;
    right: 0px;
    bottom: 250px;
    background-color: burlywood;
    padding: 10px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.fenxian:hover .fenxin-cont{
    display: block;
}

.fenxin-cont{
    width: 80px;
    height: 220px;
    display: none;
    position: fixed;
    text-align: center;
    background-color: rgba(234, 195, 136, 0.95);
    box-shadow: 0px 8px 16px 0px rgba(82, 122, 126, 0.2);
    font-size: 25px;
    font-family: 楷体;
    text-align: center;
    right: 0px;
    bottom: 220px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding-top: 10px;
}