目录
1、盒模型的组成部分是content、padding、border、margin
一、浮动属性的使用
1、属性
float 使..浮动、使..漂浮
2、属性值
- left
- right
- none
3、特点
- 浮动只能控制元素在水平方向上移动
- 浮动会使元素脱离文档流 元素的初始位置不存在 当前元素会漂浮在浏览器的上方
- 浮动是会破坏初始的布局方式
- 浮动的停止条件
- 当元素浮动的时候 碰到父级的包含框就会停止浮动
- 当多个元素浮动的时候 默认是左右排列 => 浮动属性碰到前面含有浮动属性的元素也会停止浮动
- 当子级元素大于父级元素宽度的时候 最后一个子级元素会往下移动 直至找到足够的空间
4、流
- 普通流/文档流 网页的正常布局 从上到下 从左到右
- 浮动流
- 定位流
<style>
.box {
width: 500px;
height: 500px;
background-color: pink;
}
.box1 {
width: 200px;
height: 200px;
background-color: rgb(226, 19, 53);
float: left;
}
.box2 {
width: 150px;
height: 150px;
background-color: green;
float: left;
}
.box3 {
width: 100px;
height: 100px;
background-color: purple;
float: left;
}
</style>
</head>
<body>
<!-- 快捷键 div.box -->
<div class="box">
<div class="box1">制作</div>
<div class="box2">666</div>
<div class="box3">888</div>
</div>
</body>
5、文本图片环绕效果
浮动的特殊情况:文本图片的环绕效果
- 浮动会使元素脱离文档流 下面的元素就会被上面的覆盖
- 但是!文本是一个特殊的结构(真实的dom结构) 不会被浮动元素盖住
- 浮动元素只会盖住盒子大小
<style>
div {
width: 800px;
height: 600px;
background-color: pink;
}
img {
width: 300px;
height: 400px;
float: left;
}
</style>
</head>
<body>
<div>
<img src="https://img1.baidu.com/it/u=1428889552,2927850461&fm=253&fmt=auto&app=138&f=JPEG?w=334&h=500" alt="">
<p>王嘉尔(Jackson
Wang/잭슨),1994年3月28日出生于香港,中国香港流行乐男歌手、音乐人、主持人、设计师、创意总监。王嘉尔12岁参加全运会,获得人生第一枚击剑金牌;在个人运动生涯中拿下三枚亚洲冠军、三枚全国冠军、九枚国际和香港冠军。2014年以GOT7成员的身份出道;同年获得SBS演艺大赏综艺部门男子新人奖。2015年与何炅搭档主持脱口秀节目《拜托了冰箱》。2016年与何炅搭档主持综
</p>
</div>
</body>
二、盒模型的概念
之前学习html 用来布局 css美化页面 浮动 解决元素的位置 多个元素之间的间距要怎么设置?
盒模型概念:设置元素与元素之间的间距
组成部分
- content 内容区域 对应快递模型中的快递物品
- padding 内边距 对应快递模型中的快递物品和快递盒之间的填充物
- border 边框 对应快递模型中的快递盒
- margin 外边距 对应快递模型中的快递物品的间距
三、padding内边距的使用
1、padding属性的使用:内边距(填充、补白)
- 从快递模型中得出padding内边距设置父级元素与子级元素之间的间距
- padding内边距通常是给父级元素设置的
- padding内边距会将当前的元素撑大,为了不影响布局 需要在宽高上减去相应的padding值
- padding也可以在子级元素上添加 依然会撑大当前元素的宽高大小
2、padding方向值
- padding:一个属性值 表示上下左右
- padding:两个属性值 表示上下 和 左右
- padding:三个属性值 表示上 和 左右 和 下
- padding:四个属性值 表示上 右 下 左
padding方向值还可以使用padding-方向即可
- padding-left/top/right/bottom
3、总结
- padding可以给父级添加也可以给子级添加
- 父级:所有子级位置间距都是相同的时候
- 子级:每个子级之间的间距都是不一样的
思考:padding可不可以使用负值? 不可以接负值
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
background-color: pink;
padding: 50px;
/* 宽度:padding的左侧和右侧 50+50px
高度:padding的上和下 50+50px */
}
p {
width: 100px;
height: 100px;
background-color: green;
}
.p1 {
padding-left: 100px;
}
.p2 {
padding-left: 50px;
}
</style>
</head>
<body>
<div>
<!-- 快递盒 -->
<p class="p1">小小1</p>
<p class="p2">小小2</p>
</div>
</body>
四、margin外边距的使用
1、margin外边距的使用
- margin在快递模型中对应的是多个快递之间的位置关系
- margin通常是用来设置同级元素之间的位置间距
- 哪个元素需要设置间距就给当前元素添加margin外边距即可
- margin不会将当前元素的宽高大小撑大 不用减去相应的margin
2、margin方向值
- margin:一个属性值 表示上下左右
- margin:两个属性值 表示上下 和 左右
- margin:三个属性值 表示上 和 左右 和 下
- margin:四个属性值 表示上 右 下 左
margin方向值还可以使用margin-方向即可 - margin-left/top/right/bottom
3、思考:
- 内外边距可不可以换着用?
- margin可不可以接负值? 可以
4、margin的常见bug
- 在父级元素下只有一个子级元素 给子级元素设置margin-top会错误解析到父级元素
- padding替代margin
- 给父级添加边框属性(还没学习)
- 文本溢出属性: overflow:hidden
- 两个同级元素设置margin-top/bottom 之间会取最大值
<style>
.p1 {
width: 200px;
height: 200px;
background-color: red;
}
.p2 {
width: 200px;
height: 200px;
background-color: green;
margin-top: 100px;
}
</style>
</head>
<body>
<!-- div[class="box$"]*2{第$个盒子} -->
<div class="p1">第1个盒子</div>
<div class="p2">第2个盒子</div>
</body>
五、内外边距的总结
1、盒模型的组成部分是content、padding、border、margin
- content 表示元素设置的宽度和高度
- padding和margin表示内外边距
- border (表示边框 明天学习)
2、内外边距的总结
相同点
- 都可以设置元素的间距
- 方向值写法都是一样
不同点
- padding表示内边距 设置了会撑大当前元素的宽高大小
- margin表示外边距 设置不会撑大当前元素的宽高大小
3、固定用法
- *{margin:0;padding:0} 清除浏览器和页面中的所有元素的间距
- 版心选择器{margin:0 auto} 版心居中