说明
盒子模型(css重点)
css学习三大重点: css盒子模型、 浮动、 定位
- 目标:
- 能说出盒子模型由哪四部分组成: 内容、边框、内外边距
- 能说出内边距的作用,设置不同数值分别代表的意思: 控制内部块级元素和宽框的距离
- 能说出块级盒子居中对齐需要的2个条件
- 能说出外边距合并的解决办法
- 应用:
- 能利用边框复合写法给元素添加边框
- 能计算盒子的实际大小
- 能利用盒子模型布局模块案例
1. 看透网页布局的本质
- 看透网页布局的本质:
- 首先利用CSS设置好盒子的大小,然后摆放盒子的位置
- 最后把网页元素(文字、图片等)放入盒子里面
2. 盒子模型(Box Model)
- 所谓盒子模型:
- 就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器.
3. 盒子边框 (border)
3.1 边框重叠
- 两个单元格之间的边框会出现重叠,从而使边框变粗
table{
border-collapse: collapse;
}
- collapse 单词是合并的意思
- 以上属性表示相邻的边框合并在一起
table{
border-collapse: collapse;
}
4. 内边距 (padding)
- 内容与边框的距离
- 会改变盒子的大小
div{
width: 200px;
height: 200px;
border: 1px solid red;
padding: 10px 20px;
}
- 此时的盒子高度是220px,宽度是220px
- padding的值按顺时针安利
4.1 要求盒子的左边内边距是5像素
padding-left: 5px;
4.2 要求简写的形式写出一个盒子上下是25像素,左右是15像素
padding: 25px 15px;
4.3 简写的形式写出一个盒子上内边距是12像素下内边距是0左内边距是25右内边距是10
paddding: 12px 10px 0 25px
4.4 字数不一样的导航栏制作解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.nav {
width: 100%;
最低0.47元/天 解锁文章
1244
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
