首页手记 css基础03-盒模型、网站布局思想、浮动以及浮动带来的影响

css基础03-盒模型、网站布局思想、浮动以及浮动带来的影响

标签：

Html/CSS CSS3

定义：

在CSS处理页面的时候，它认为每个元素都是包含在一个不可见的盒子里，盒子模型由内容区域、内容区域周围空间（内边距padding）、内边距的外边缘（边框，border）和边框外面将元素与相邻元素隔开的不可见区域（margin）构成。我们将盒子模型想象成一幅挂在墙上的画，画是内容，衬边是内边距，画框是边框，与相邻画框之间的距离是外边距。

边框（给html元素添加边框线，会改变元素的宽度）

上边框

1. Border-top-color:颜色值;上边框的颜色

2. Border-top-style:线型;线型有solid实线 dashed虚线dotted点状线

3. Border-top-width:粗细；例如border-top-width:2px;

简写为

Border-top:粗细线型颜色;

右边框

1. Border-right-color:颜色值;上边框的颜色

2. Border-right-style:线型;线型有solid实线 dashed虚线dotted点状线

3. Border-right-width:粗细；例如border-right-width:2px;

简写为

Border-right:粗细线型颜色;

下边框

1. Border-bottom -color:颜色值;上边框的颜色

2. Border-bottom-style:线型;线型有solid实线 dashed虚线dotted点状线

3. Border-bottom-width:粗细；例如border-bottom-width:2px;

简写为

Border-bottom:粗细线型颜色;

左边框

1. Border-left-color:颜色值;上边框的颜色

2. Border- left -style:线型;线型有solid实线 dashed虚线dotted点状线

3. Border- left -width:粗细；例如border- left -width:2px;

简写为

Border- left:粗细线型颜色;

上右下左四条边框的样式一样

可以简写为 border:粗细线型颜色；

盒子模型（div、等块元素、行内块元素）

盒子的必要属性：

内容区：width、height和 border:

内边距 padding(将盒子撑大，盒子的宽高会改变)

内容和边框之间的距离

1. Padding-top：数值；内容和上边框之间的距离

2. Padding-right：数值；内容和右边框之间的距离

3. Padding-bottom：数值；内容和下边框之间的距离

4. Padding-left：数值；内容和左边框之间的距离

简写形式

Padding：10px 20px 30px 40px;上边框距离10px 右 20px 下边框30px 左40px

Padding:10px 20px 30px; 上10px 左右 20px 下 30px

Padding:10px 30px; 上下10px 左右30px

Padding:10px; 上右下左都是10px

注意：一个值的话上右下左等距；两个值上下等距、左右等距；三个值左右等距。

外边距 margin（默认8px，不会将盒子撑大是盒子与盒子之间的距离）

这里需要在注意的是：外边距在操作行内与元素的时候只能操作元素与元素左右之间的距离，不能操作上下距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 80px;
 height: 90px;
 border:2px solid blue;
 padding: 20px 15px;
 -ms-word-wrap:break-word;
 word-wrap:break-word;
 }
        .box2{
            width: 50px;
 height: 50px;
 border:2px solid pink;
 padding: 20px;
 margin:20px;
 }
        span{
            border:1px solid red;
 /*padding:20px;*/
 margin:20px;
 }
    </style>
</head>
<body>
<div class="box1">
    <a href="https://www.imooc.com/u/6491408/articles">https://www.imooc.com/u/6491408/articles</a>
</div>
<div class="box2">木子大大</div>
<span>木子大大</span><span>木子大大</span><br>
<span>木子大大</span>

</body>
</html>

网站布局的一个思想

网站的结构就是两部分（横向和纵向）如果是纵向的就是正常的文档流，设置内容器的宽度和高度，设置内容和边框之间的距离 padding ,边框往外的部分margin border调这些属性就可以

如果是横向排列，我们就要使用浮动

浮动（在需要浮动的元素上面添加浮动，将不在一行的元素排在一行上面）

Float：left；左浮动

Float: right; 右浮动

浮动的特点：

使元素站队（站队的边界是他父级的边界），一行站满后从下一行开始

设置浮动的元素，不占空间（脱标）

设置浮动的元素层级高于普通元素

设置浮动之后，无论之前是否是块元素，设置浮动之后一定是块元素

盒子被浮动后后面的盒子会根据文本流动占位移动那个盒子的位置

清除浮动（清楚周边的浮动流，恢复到正常的文档流）

Clear:left;

Clear:right;

Clear:both; /*清除左浮动，右清除右浮动*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent{
            width: 400px;
 height: 150px;
 border:1px solid pink;
 padding: 20px;
 }
        .child{
            width: 90px;
 height: 100px;
 border: 1px solid hotpink;
 float: left;
 margin-right: 20px;
 }
        .child3{
            float: right;
 }
        .child4{
            width: 100px;
 height: 150px;
 border: 1px solid black;
 clear: both;
 }
    </style>
</head>
<body>
<div class="parent">
    <div class="child child1">muzidigbig</div>
    <div class="child child2">muzidigbig</div>
    <div class="child child3">muzidigbig</div>
    <div class="child4">muzidigbig</div>
</div>
</body>
</html>