盒子模型:
1.盒子模型的概述:
1.1网页布局的过程:
- 先准备好相关的网页元素.
- 利用CSS设置好盒子模型找到对应的位置 (核心)
- 往盒子里放内容.
1.2盒子模型(BOX MODEL)的组成:
-
border 盒子边框
-
content 内容
-
padding 内边距 (盒子和内容的距离)
-
margin 外边距 (盒子与盒子之间的距离)
2.盒子边框(border):
-
border可以设置元素的边框 .边框三部分组成 粗细 样式 颜色.
border: boder-width || border-style || border-color /* 宽度边框的粗细 边框的样式 边框的颜色 */-
边框的粗细(用px作为单位):
div { width: 300px; height: 200px; border-width: 5px; } -
边框的样式:
/*实线边框*/ div { border-style: solid; } /*虚线边框*/ div { border-style: dashed; } /*点线边框*/ div { border-style: dotted; } -
边框的颜色:
div { border-color: red; } -
边框的复合写法:
border: 宽度 样式 颜色; /*没有顺序要求*/ -
边框的分开写法:
border-top: 宽度 样式 颜色; /*只使用上边框*/
-
2.1 表格的细线边框的方法 (表格本质上是一个外盒子 加上若干个内盒子组成):
table {
border: 1px solid red; /*设置表格外边框为1px 实线边框 颜色为红色*/
}
td {
border: 1px solid red; /*设置表格内框线为 1px 实线类型 颜色为红色*/
}
-
合并相邻的边框 使用border-collapse: collapse; :
td { border-collapse: collapse; /*设置相邻的盒子相互贴着 collapse英语合并的意思*/ }
注意 : 盒子边框会影响盒子的大小,测量盒子大小时,不要测量边框,如果测量时包含了边框需要减去width /height减去边框宽度;
2.2 c s s 3新增特性:
-
圆角边框 border-radius: length; (radius 语言单词半径的意思) :
div { width: 300px; height: 150px; background-color: pink; /*设置盒子背景颜色*/ border-radius: 10px;/*让四个角变成圆角 这里写的值是半径值*/ } -
常用圆边框写法 <border-radius: 50%;>:
/*方法一:圆形边框 原理 准备一个正方形的盒子 然后border-radius属性半径写边像素的一半*/ div { width: 300px; height: 300px; background-color: pink; /*设置盒子背景颜色*/ border-radius: 150px;/*让四个角变成圆角 这里写的值是半径值*/ } /*方法二:border-radius属性写50% 这个是最常用的写法*/ div { width: 300px; height: 300px; background-color: pink; border-radius: 50%; } -
常用药丸效果的写法:
/*一个矩形 使用border-radius值设置为高度的一半即可 */ div { width: 300px; height: 150px; background-color: pink; border-radius: 75px; }效果图:
-
椭圆的实现方法:
div { width: 300px; height: 150px; background-color: pink; border-radius: 150px/75px; /*宽度的一半/高度的一半*/ } -
我们平常使用的是这个属性的简写写法其实这个属性有复合写法: 左上角、右上角、右下角、左下角;
分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius
-
原理:它会拿四个半径为10px的圆 到矩形的四个角去靠近:
3.内边距(padding ):
-
padding用于设置内边距 ,边框与内容的距离:
属性 作用 padding-left 左内边距 padding-right 右内边距 padding-top 上内边距 padding-bottom 下内边距 div { padding-left: 10px; /*设置坐内边距为10px*/ }- 内边距的复合写法:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hjbDuDBL-1671403503522)(imag/image-20221005110312721.png)]
注意:padding 会影响盒子的实际大小,所以在设计盒子的时候要调整盒子的宽度高度.
padding 撑开盒子的好处:
-
新浪导航栏:
<style> .nav { height: 41px; border-top: 3px solid #ff8500; /*只使用上边框*/ border-bottom: 1px solid #edeef0; /*给下框线设置颜色*/ background-color: #fcfcfc; /*设置盒子背景*/ line-height: 41px; } /* 像这种导航栏因为文字数量不一样不适合指定盒子的宽度 所以我们只需要指定一个高度然后直接使用内边距撑开 */ .nav a { /* a属于含内显示模式不可以指定高度,所以要转换成含内块元素 */ display: inline-block; height: 41px; padding: 0 20px; /*上下0px 左右20px*/ font-size: 12px; color: #4c4c4c; text-decoration: none; } .nav a:hover { background-color: pink; color: #ff8500; } </style> <!-- ************************************************ --> <body> <div class="nav"> <a href="#">新浪导航</a> <a href="#">手机新浪网</a> <a href="#">移动客户端</a> <a href="#">微博</a> <a href="#">尼玛</a> </div> </body>padding不会撑开盒子的情况:
- 如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小
4.外边距:
-
margin 属性用于设置外边距,即控制盒子和盒子之间的距离.
属性: 作用: margin-left 左外边距 margin-right 右外边距 margin-top 上外边距 margin-bottom 下外边距 -
外边距 margin的复合写法:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E1kcmhnv-1671403503523)(imag/image-20221009090054556.png)]
###### 5.1外边距的典型应用: -
外边距可以让块级 (注意:行内元素,或者行内块元素是无效的)盒子水平居中(但必须,满足两个条件):
1.盒子必须指定宽度(width)
2.盒子左右边距都要设为(auto<自动>)
div {
width: 900px;
height:200px;
background-color: red;
margin: 100px auto; /*margin-left: auto; margin-right: auto;margin: auto;margin: 0 auto;*/
}
注意:<以下方法是让块元素水平居中 行内元素水平居中要给其父元素添加:text-align:center居中>
<style>
div {
width: 900px;
height:200px;
background-color: red;
margin: 100px auto;
text-align: center;
}
</style>
</head>
<body>
<div> <span>里面的文字</span> </div>
4.1嵌套块元素垂直外边距的塌陷
- 对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
- 错误展示:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>嵌套块元素垂直外边距的塌陷</title>
<style>
.father {
width: 400px;
height: 400px;
background-color: blueviolet;
margin-top: 50px;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"> </div>
</div>
</body>
</html>
效果图:
塌陷问题解决方案:
可以为父元素定义上边框。
.father {
border: 1px solid transparent; /*给父元素添加一个1像素的透明边框边框*/
width: 400px;
height: 400px;
background-color: blueviolet;
margin-top: 50px;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
可以为父元素定义上内边距。
.father {
padding： 1px; /*给父亲一个内边距*/
width: 400px;
height: 400px;
background-color: blueviolet;
margin-top: 50px;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
可以为父元素添加 overflow:hidden (最常用的方案 不会让盒子变大)
.father {
overflow: hidden;
width: 400px;
height: 400px;
background-color: blueviolet;
margin-top: 50px;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
解决后的效果图:
4.2 清除网页元素的内外边距:
- 网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。(css第一行代码)
* {
padding: 0;
margin: 0;
}
- 注意: 行内元素比较特殊,尽量只设置左右内外边距不要设置上下内外边距,但是转换成块元素就可以了.
5.盒子阴影:
-
C S S 3中新增了盒子阴影,我们可以使用box-shadow 属性设置盒子的阴影.
box-shadow: h-shadow v-shadow blur spread color inset;
div {
div {
width: 300px;
height: 300px;
background-color: pink;
margin: 100px auto;
box-shadow: 10px -4px 10px 10px rgba(0,0,0,0.3);/*inset这个属性默认就好不要写,写出来不显示效果*/
}
}
注意:
- 默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效
- 盒子阴影不占用空间，不会影响其他盒子排列。
三.综合案例的新知识点:
1.怎么去掉li 前面的圆点:
li {
list-style: none;
}
style=“zoom: 67%;” />
div {
div {
width: 300px;
height: 300px;
background-color: pink;
margin: 100px auto;
box-shadow: 10px -4px 10px 10px rgba(0,0,0,0.3);/*inset这个属性默认就好不要写,写出来不显示效果*/
}
}
注意:
- 默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效
- 盒子阴影不占用空间，不会影响其他盒子排列。
三.综合案例的新知识点:
1.怎么去掉li 前面的圆点:
li {
list-style: none;
}
扫一扫
3553
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
