web前端 4 CSS布局与定位

2020-04-12

CSS布局与定位

盒子模型

页面上的区域，图片，导航，列表，段落，都可以是盒子
盒子模型是由内容+内边距+边框+外边距组成

盒子CSS属性

height 内容高度
width 内容宽度
border 边框
padding 内边距（内容和边框之间的距离）
margin 外边距（边框和其他盒子之间的距离）

overflow 内容溢出盒子框的设置 hidden 超出部分不显示 scroll 显示滚动条 auto 如果有超出部分，才显示滚动条

border属性

border-width 边框大小 px thin细 middle中 thick粗
border-style dashed虚线 dotted点星线 solid实线 double双实线
border-color 颜色
也可以直接使用border width style color

padding属性和margin属性

由于浏览器会默认设置字体和盒子模型的padding，margin属性，可以清空默认设置的属性再使用自定义添加的属性值是0可以不需要单位

*{
    margin:0;
    padding:0;
}

margin padding border属性的取值顺序是上右下左 省略的3，4位置的值那么3和1值对应 4和2值对应
margin:1px; 表示4个反向都是1px
margin:1px 2px; 表示上下是1px 左右是2px
margin:1px 2px 3px 表示上1px 右2px 下3px 左2px

注意：

1）每个div标签独占一行
2）margin属性再垂直反向上有合并效果，合并结果是只采用高距离的外间距，水平方向没有

3）使用margin属性设置盒子的水平居中效果 margin:0 auto auto表示左右外边距自动计算距离来让浏览器自动居中 0是上下的值可以任意

CSS定位

1）文档流 系统默认CSS定义方式所有元素默认从左到右从上到下排列有的元素独占一行有的元素和其他元素在同一行中
2）浮动定位 把盒子分别向左和向右浮动例如一列中可以排放多个div标签通过float属性设置
3）层定位 盒子像图层一样可以相互叠加通过position属性设置

文件流定位

文件流定位中的元素分类
1）block 独占一行的元素元素的height width padding margin 可以设置

2）inline 非独占一行的元素不可以设置高度宽度每个inline元素之间都有一个间距，可以在inline元素外边套层block元素来解决

3）inline-block 非独占一行的元素但可以设置高度宽度

三种不同类别的文件流定位元素都可以通过display属性来互相转换

总结

练习：制作导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #news{
            width: 300px;
            margin: 100px auto;  /*水平居中*/
            font-size: 0; /*设置链接之间没有空隙*/
        }
        a{
            display: inline-block;
            width: 80px;
            height: 30px;
            font-size: 14px;
            text-align: center; /*文字水平居中*/
            text-decoration: none; /*没下划线*/
            line-height: 30px; /*设置行高和高度一致来做到垂直居中*/
            border-bottom: 1px solid #ccc;
        }
        /*鼠标放到链接时的样式*/
        a:hover{
            color: white;
            background-color: #ccc;
            border: 1px solid orange;
            border-bottom-color: white;
        }
    </style>
</head>
<body>
    <div id="news">
        <a href="#">链接1</a>
        <a href="#">链接2</a>
        <a href="#">链接3</a>
    </div>
</body>
</html>

效果图

浮动定位

float 设置定位方向 left right none
clear 清除当前元素每个方向的浮动定位 left/right 左侧/右侧不会有浮动元素 both表示该元素两则不存在浮动元素

float属性特点

1）设置float属性的元素原有的位置会让其他元素给占用
2）如果盒子的宽度不够那么float属性的元素会占据一行后向下一行继续占据，有一种情况是第一行中的每个元素比较高会让后面换行的元素卡住

练习：3行2列布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            font-size:14px;
        }
        #container{
            margin: 0 auto;
            width: 1000px;
            height: 500px; /*定义最外层盒子的时候宽度必须要定义好，高度可以不定义由内容撑开*/
            /*background-color: #6cf;    */
        }
        #header{ /*header会继承父元素caontainer的宽度1000px，因此不需要设置*/
            height: 100px;
            background-color: #6cf;
            margin-bottom: 5px;
        }
        #main{
            height: 400px;
            /*background-color: #cff;*/
            margin-bottom: 5px;
        }
        #aside{
            float: left;
            width: 300px;
            height: 400px;
            background-color: #6cf;
        }
        #content{
            float: left;
            width: 695px;
            height: 400px;
            background-color: #cff;
            margin-left: 5px;
        }
        #footer{
            height: 60px;
            background-color: #6cf;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="header"></div>
        <div id="main">
            <div id="aside"></div>
            <div id="content"></div>
        </div>
        <div id="footer"></div>
    </div>    
</body>
</html>

练习：4行3列布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            font-size:14px;
        }
        #container{
            margin: 0 auto;
            width: 1000px;
            height: 500px; /*定义最外层盒子的时候宽度必须要定义好，高度可以不定义由内容撑开*/
            /*background-color: #6cf;    */
        }
        #header{ /*header会继承父元素caontainer的宽度1000px，因此不需要设置*/
            height: 100px;
            background-color: #6cf;
            margin-bottom: 5px;
        }
        #nav{
            height: 30px;
            background-color: #09c;
            margin-bottom: 5px;
        }
        #main{
            height: 400px;
            /*background-color: #cff;*/
            margin-bottom: 5px;
        }
        .aside{
            float: left;
            width: 200px;
            height: 400px;
            background-color: #6cf;
        }
        #aside2{
            margin-left: 5px;
        }
        #content{
            float: left;
            width: 590px;
            height: 400px;
            background-color: #cff;
            margin-left: 5px;
        }
        #footer{
            height: 30px;
            background-color: #6cf;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="header"></div>
        <div id="nav"></div>
        <div id="main">
            <div id="aside1" class="aside"></div>
            <div id="content"></div>
            <div id="aside2" class="aside"></div>
        </div>
        <div id="footer"></div>
    </div>    
</body>
</html>

层定位

position属性设置当前元素以哪种方式单位
static 默认是流文件定位 left rigth top bottom z-index都不能使用
fixed 固定定位相对于浏览器单位 left rigth top bottom z-index的值都是对于浏览器作为参照物设定
relative 相对定位相对于当前元素的上层父元素定位 left rigth top bottom z-index的值是相对于上层是static或者relative或者absolute元素定位，relative元素脱离文档流定位，但他本来文档流位置依然存在其他文档流元素不会去占据它原来的位置
absolute 绝对定位相对于static元素之外的其他元素定位 left rigth top bottom z-index的值是相对于上层是relative或者absolute元素定位，如果没有以body标签为参照物，absolute元素文档流定位，其他文档流元素会占据它原来的位置

left rigth top bottom属性指定当前元素与参照物的左右上下边界的边距距离，一般使用两个方向来确定当前元素的位置
z-index属性表示当前元素层叠的位置值越大越在外层覆盖其他元素

一般在父元素使用relative，子元素使用absolute并定义好距离，这样当移动父元素时，子元素也会自动移动

relative定位和absolute定位区别