容易错总结:父亲元素下的子元素选择.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>