css

css页面布局一般分为两种：三行两列布局和两行三列布局

代码实例：

<!-- 三行两列布局 -->
<body>
    <div class="header"></div>
    <div class="main">
        <div id="list">

        </div>
    </div>
    <div class="footer"></div>
</body>
//css文件
html,body{
    padding: 0%;
    margin: 0;
}
.header{
    background-color: blue;
    width: 100%;
    height: 130px;
    border: 0;
}
.main{
    background-color: blueviolet;
    width: 100%;
    height: 520px;
    border: 0;
}
.footer{
    background-color: chartreuse;
    width: 100%;
    height: 110px;
    border: 0;
}
.main #list{
    width: 250px;
    height: 100%;
    float: left;
    background-color: black;
}
<!-- 两行三列 -->
<body>
    <div class="header"></div>
    <div class="main">
        <div id="left"></div>
        你好
        <div id="right"></div>
    </div>
</body>
//css文件
html,body{
    padding: 0;
    margin: 0;
}
.header{
    background-color: aqua;
    width: 100%;
    height: 200px;
}
.main{
    background-color: red;
    width: 100%;
    height: 560px;
}
.main #left{
    background-color: aquamarine;
    width: 25%;
    height: 100%;
    float: left;
}
.main #right{
    background-color: blue;
    width: 25%;
    height: 100%;
    float: right;
}

由于页面中header、main、footer几个模块的宽和高都是相对于html和body的，所以若想让模块充斥整个网页，就需要在css文件中先定义HTML和body的格式
css常用的几个选择器：
类选择器；
标签选择器；
id选择器；
css中float浮动：left左浮动、right右浮动、none不浮动、inherit继承浮动
浮动的副作用：
会使元素脱离标准流，但是可以用clear来清除浮动；
css定位模型position：
static：自然模型，不脱离常规流，不受left、right等偏移量的影响，其布局方式为垂直自上而下，水平从左到右
relative：可定位的祖先元素，在偏移时保留了常规流的空间，可使用top、right、bottom、left、z-index等进行相对定位
absolute：是元素脱离常规流，不保留常规流的空间，可使用偏移元素进行偏移
fixed：使元素不脱离视觉窗口
sticky：relative+fixed（吸附定位）

posted @ 2019-05-28 10:40  凌ぃ寒  阅读(113)  评论(0)    收藏  举报