容易错总结：父亲元素下的子元素选择.w是父亲 abcd是父亲下面的子元素，注意后面直接加空格就行 不要加，如下图是正确的
一、浮动
1、什么是浮动？
答：漂浮起来移动。（就是让原本两个竖着div横着排列起来）
2、语法是什么？
答：float：left/right/none
3、浮动的作用：页面排版（比如两个div，用了浮动会让脱离文本标准流不占据空间，假如第一个加浮动了就会飞起来了，第二个不加就会挤上去与第一个重合）
4、特点总结：
1⃣、会让元素脱离标准文档流（正常显示的样式）
2⃣、宽度不设置不会再继承父元素的宽度了
3⃣、浮动属于半脱离：只能遮盖背景不遮盖内容（文字。。。。。。）
4⃣、浮动的参照物为父元素
5、浮动基于父亲元素发生的
聊天记录那个缩写还没跟上呢
6、css的清除浮动影响（有两种方法：第一种就用div把它套起来，第二种是加clear标签来清除浮动）（在下面的元素加clear）
Clear：none；允许有浮动对象
Clear：right；不允许右边有浮动对象
Clear：left；不允许左边有浮动对象
Clear:both;不允许有浮动对象
注：清除浮动只是改变元素的排列方式，该元素还是漂浮着，不占据文档位置。
二、盒子模型
1、盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒模型。
2、内容区：设置的宽度和高度就是咱们的内容区（有特殊的还没讲呢）
三、border（边框）属性
1、边框宽度：border-width:4/3/2/1/0（四个值：上 右 下 左。 三个值：上 左右 下。 二个值：上下 左右。 一个值：上右下左
解释：从上面开始，沿顺时针方向取值，当值不够时，执行对面的值，当对面的也没有时，他会执行上面的值）。
当不设置border-width默认为1px（有border-style的时候）。
单边框设置：上边框 border-top：30px blue solid; 下 border-bottom 左 border-left 右 border-right。
2、边框颜色：border-color:（没有border-color默认为黑色）
3、边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)【注：如果想有边框的话必须要设置border-style！！！】
简写：border：30px solid blue; 参数的顺序可以随意调换
4、边框圆角：border-radius
四个值从左上角开始（比较特别）
四、padding内边距属性
1、padding的使用方法（内间距）当分析一个缝隙相对于当前容器来说是里面的时候，就用padding。
填充：padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 也称补白。
用法：
2、用来调整内容在容器中的位置关系
3、padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值
4、属性值的4种方式：
四个值：上 右 下 左 {padding:0px 0px 0px 40px;}
三个值：上 左右 下 {padding:10px 20px 30px ;}
二个值：上下 左右 {padding:10px 20px ;}
一个值：四个方向 padding:2px;/*定义元素四周填充为2px*/
说明：可单独设置一方向填充，如：上方向padding-top:10px; 右方向padding-right:10px; 下方向padding-bottom:10px; 左方向padding-left:10px;
5、也可以写成padding-top：100px，其他部位不写的话其他边默认没有
五、margin边界属性（两个块之间的间隔）
1、、margin的使用方法
边界：margin,在元素外边的空白区域，被称为边距。
margin-left:左边界 margin-right:右边界 margin-top:上边界 margin-bottom:下边界
属性值的4种方式：margin可以给负数
四个值：上 右 下 左 三个值：上 左右 下 二个值：上下 左右
一个值：四个方向 margin:2px;/*定义元素四边边界为2px*/
margin:0 auto;/*一个有宽度的元素在浏览器中横向居中。*/
注：不会增大显示大小 其他三个（padding content border）会增大显示大小
2、margin相关问题以及解决方法：
1⃣、margin-top的解析
现象：默认情况下给子元素添加了margin-top之后，父元素会跟着一起下来。
解决方法：A、给最近的父元素添加border-top
B、给父元素添加overflow:hidden;（溢出隐藏)
2⃣、相邻的两个元素之间上面的设置margin-bottom：300px，下面的元素设置margin-top：200px，结果出来的值不值500px，而是300px，出来的是两个之间的最大值，这个是一个bug，我们应该手动去避免它。
附注1对话框浮动练习、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0%;margin: 0%;
}
.a1,.a2,.a3,.a4,.a5,.a6,.a7,.a8,.a9{
width:100%;
height:60px;
background-color: hotpink;
}
.son1,.son3,.son6,.son7{
float:left;
background-color: gray;
height:60px;
width: 100px;
}
.son2,.son4,.son5,.son8,.son9{
float: right;
background-color: greenyellow;
height: 60px;
width: 100px;
}
</style>
</head>
<body>
<div class="a1">
<div class="son1">撒电话1</div>
</div>
<div class="a2">
<div class="son2">撒电话2</div>
</div>
<div class="a3">
<div class="son3">撒电话3</div>
</div>
<div class="a4">
<div class="son4">撒电话4</div>
</div>
<div class="a5">
<div class="son5">撒电话5</div>
</div>
<div class="a6">
<div class="son6">撒电话6</div>
</div>
<div class="a7">
<div class="son7">撒电话7</div>
</div>
<div class="a8">
<div class="son8">撒电话8</div>
</div>
<div class="a9">
<div class="son9">撒电话9</div>
</div>
</body>
</html>
附注2盒子模型风车练习、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0%;margin: 0%;
}
.w{
width: 200px;
height: 200px;
}
.w .a,.b,.c,.d{
width: 0%;
border-width: 50px;
border-style: solid;
float: left;
border-color: yellow green blue red;
}
.w .a{
border-color: white white blue white;
}
.w .b{
border-color: white white white red;
}
.w .c{
border-color: white green white white;
}
.w .d{
border-color: yellow white white white;
}
</style>
</head>
<body>
<div class="w">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</div>
</body>
</html>
524
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
