CSS复习二——盒模型和浮动（附思维导图）
文章目录
盒模型的组成
盒子的内边距padding（具体请见思维导图）
- 内边距是指内容和盒子边框之间的距离
- 如果盒子已经有了高度和宽度，此时指定内边框会撑大盒子 - 特殊情况， 如果这个盒子，没有宽度(继承的默认和父元素一样大，无效) 则padding 不会撑开盒子
盒子的边框border
- 边框会影响盒子的实际大小
- 在开发的过程中，测量盒子大小的时候，不量边框；如果量了边框需要在width或者height减去
###盒子的外边距margin - 块级元素盒子水平居中：
- 首先要指定盒子的宽度
- margin:0 auto;
需要注意的问题
- 外边距合并：嵌套或者垂直的两个盒子用margin 定义元素的垂直外边距时，可能会出现外边距的合并（或塌陷）
- 解决方法：采取浮动或只给一个盒子margin值
CSS3盒子的新特性
- 圆角边框
border-radius:length;
代码：
<body>
<div> </div>
<p> 特价 免费送 </p>
</body>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/*border-radius: 100px;*/
border-radius: 50%;
}
p {
width: 100px;
height: 20px;
background-color: red;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 20px;
border-radius: 10px;
}
</style>
- 盒子阴影
代码：
<div></div>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 50px auto;
/*box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；*/
box-shadow: 0 15px 30px rgba(0,0,0,.3);
}
</style>
box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；
初探CSS+HTML
- 类名需要用含义，，不能随便取类名，而且结构中要采取语义化标签
- 多多采用前端辅助工具（Snipaste、PS）简化我们的操作
CSS布局的三种机制
网页布局的本质：摆放div盒子，并对盒子进行修饰
浮动的初衷是完成文字环绕图片效果
标准流
- 块级元素 自上而下布局，块级元素会独占一行
- 行内元素 自左向右布局，行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
浮动：多个块级元素一行内排列显示
- 目的：为了解决多个块级元素同行显示时出现的缝隙问题
- 布局时最常用
- 浮动元素的性质：
- 浮动的元素是脱离标准流的，不占用位置
- 浮动的元素性质类似于行内块，而且不会有外边距合并的问题
- 父盒子里面的元素只要有一个元素浮动，其余元素都要浮动
- 浮动的盒子默认向父元素的左、上方对齐
- 网页布局一般步骤：标准流父元素上下排列位置，内部子元素浮动排列左右位置
定位
浮动布局的注意事项
- 浮动和标准流的父盒子搭配使用
- 一个元素浮动了，理论上其兄弟元素也要浮动
- 浮动的元素只会影响浮动盒子后面的标准流
清除浮动？
为什么要清除浮动
- 有的时候父盒子需要根据浮动元素的大小来确定高度，因此父盒子不给高度，但是浮动的元素是脱标的，不占有位置，当父盒子高度为0时会影响下面的标准流盒子。
- 当父盒子没有高度时，一定要记得清除浮动
- 清除浮动代码：
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
附：思维导图
个人向总结整理，如有疏漏，尽情指正！
787
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
