CSS（三）
（一）盒子模型
网页布局三大核心：盒子模型，浮动和定位
1.网页布局的本质
1）.先准备相关元素，网页元素基本都是盒子
2）.设置CSS盒子样式，然后摆放到相应位置
3）.往盒子里面填内容
2.盒子模型的组成
盒子模型：就是把HTML页面中的布局元素看作是一个矩形盒子，也就是盛放内容的容器
CSS盒子模型本质上就是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容
3.边框（border）
border可以设置元素的边框，边框由三部分组成：边框宽度（粗细），边框样式，边框颜色
| 值 | 描述 |
|---|---|
| border-width | 规定边框的宽度。 |
| border-style | 规定边框的样式。 |
| border-color | 规定边框的颜色。 |
<style>
div {
widows: 500px;
height: 300px;
background-color: rgb(225, 108, 178);
/* border-width设置边框粗细 */
border-width: 5px;
/* border-style 设置边框样式为实线 */
/* border-style: solid; */
/* border-style 设置边框样式为虚线 */
/* border-style: dashed; */
/* border-style 设置边框样式为点状 */
border-style: dotted;
/* border-color 设置边框颜色为蓝色 */
border-color: blue;
}
</style>
1）属性设置复合写法
border：宽度 样式 颜色；
border:10px solid red;
2）单独设置某一条边
边的位置：top、bottom、left、right
border-边位：宽度 样式 颜色；
/* 上边框 */
border-top: 20px solid red;
/* 下边框 */
border-bottom: 20px solid red;
/* 左边框 */
border-left: 20px solid red;
/* 右边框 */
border-right: 20px solid red;
3）表格的细线边框
border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是像在标准的 HTML 中那样分开显示。
| 值 | 描述 |
|---|---|
| separate | 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 |
| collapse | 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 |
<style>
table,
th,
td {
border: 1px solid red;
/* 相邻边框会合并为一个单一的边框 */
border-collapse: collapse;
}
</style>
4）边框会影响盒子实际大小
边框会额外增加盒子的实际大小
解决方法：
1）测量盒子时，不测量边框
2）如果测量的时候加上了边框，则需要减去width和height的边框宽度
4.内边距（padding）
padding属性用于设置内边距，即边框与内容之间的距离
| 属性 | 作用 |
|---|---|
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| 值 | 描述 |
|---|---|
| auto | 浏览器计算内边距。 |
| length | 规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。 |
| % | 规定基于父元素的宽度的百分比的内边距。 |
div {
width: 200px;
height: 200px;
background-color: rgba(122, 215, 9, 0.315);
border: 10px solid rgb(14, 6, 245);
/* 左边距20px */
padding-left: 20px;
/* 上边距20px */
padding-top: 20px;
}
1）内边距复合写法
padding属性可以有1-4个值
| 值的个数 | 含义 |
|---|---|
| padding:5px | 1个值，代表上下左右都有5px的内边距 |
| padding:5px 10px | 2个值，代表上下5x、左右10px的内边距 |
| padding:5px 10px 20px | 3个值，代表上5px、左右10px、下20px |
| padding:5px 10px 20px 30px | 4个值，代表上5px、右10px、下20px、左30px |
/* 代表上下左右都有5px的内边距 */
/* padding: 5px; */
/* 代表上下5x、左右10px的内边距 */
/* padding: 5px 10px; */
/* 代表上5px、左右10px、下20px */
/* padding: 5px 10px 20px; */
/* 代表上5px、右10px、下20px、左30px */
/* padding: 5px 10px 20px 30px; */
2）内边距会影响盒子实际大小
内边距会额外增加盒子的实际大小，解决方法需要减去width和height的内边距宽度
3）让内边距不会影响盒子实际大小
如过让盒子本身没有指定width和height属性，则此时padding不会撑开盒子大小
<head>
<style>
h1 {
height: 200px;
background-color: pink;
padding: 30px;
}
div {
width: 300px;
height: 100px;
background-color: blue;
}
p {
padding: 30px;
background-color: brown;
}
</style>
</head>
<body>
<h1></h1>
<div>
<p></p>
</div>
</body>
5.外边距（margin）
margin属性用于设置外边距，即控制盒子与盒子之间的距离
| 属性 | 作用 |
|---|---|
| margin-top | 上内边距 |
| margin-bottom | 下内边距 |
| margin-left | 左内边距 |
| margin-right | 右内边距 |
| 值 | 描述 |
|---|---|
| auto | 浏览器计算外边距。 |
| length | 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。 |
| % | 以包含元素宽度的百分比指定外边距。 |
1）外边距复合写法
与padding复合写法一致
| 值的个数 | 含义 |
|---|---|
| margin:5px | 1个值，代表上下左右都有5px的外边距 |
| margin:5px 10px | 2个值，代表上下5x、左右10px的外边距 |
| margin:5px 10px 20px | 3个值，代表上5px、左右10px、下20px |
| margin:5px 10px 20px 30px | 4个值，代表上5px、右10px、下20px、左30px |
2）外边距应用
外边距可以让块级盒子水平居中，但是必须满足两个条件：
1.盒子必须指定宽度
2.盒子的左右外边距设置为auto即可
.header {
width: 300px;
height: 200px;
background-color: pink;
margin: 0 auto;
}
行内元素或者行内块元素水平居中给其父元素添加text-align:center即可
3）外边距合并
相邻块元素垂直外边距合并：
上下相邻的两个块元素（兄弟关系）相遇时，上面块元素有下外边距margin-bottom，下面块元素有上边距margin-top，则它们的垂直边距不是margin-bottom与margin-top之和，而是取两个之中较大的那一个为垂直边距
嵌套块元素垂直外边距塌陷：
对于两个嵌套的块元素，父元素有上边距，同时子元素也有上边距，此时父元素会塌陷较大的外边距（父元素的外边距取较大的一个）
解决方案：
1.可以为父元素定义上边框
2.可以为父元素定义上内边框
3.可以为父元素添加overflow:hidden
其他方法：浮动，定位，绝对定位等
PS：浮动的盒子不会有外边距塌陷的问题
6.清除内外边距
网页元素很多都有默认的内外边距，而且不同浏览器的默认的也不一样，因此我们在布局之前，首先要清除网页元素的内外边距
PS：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级元素和行内块元素就可以啦
（二）PS基本操作
CTRL+ R 或者 视图>标尺 调出标尺
右击标尺，将单位改为像素
CTRL+ + 放大视图
CTRL+ - 缩小视图
按住空格，鼠标变成小手，可以拖动视图
用选区拖动，可以测量大小
CTRL+ D 可以取消选区，或则是点击旁边的空白
吸管工具可以吸取颜色
（三）圆角边框
border-radius属性设置元素的圆角边框
圆与边框交集形成圆角效果，radius——半径
| 值 | 描述 |
|---|---|
| length | 定义圆角的形状。 |
| % | 以百分比定义圆角的形状。 |
div {
width: 300px;
height: 150px;
background-color: red;
border-radius: 25px;
}
1）圆形
当盒子为正方形时，圆角边框半径设置为边长的一半即可
.yuan {
width: 200px;
height: 200px;
background-color: rgb(255, 0, 0);
/* border-radius: 50px; */
/* 也可以用百分比来表示半径为宽度和高度的50%，更加方便 */
border-radius: 50%;
}
2）圆边矩形
.yb {
width: 400px;
height: 100px;
background-color: rgb(255, 0, 0);
/* 半径为宽度的一半 */
border-radius: 50px;
}
3）圆角矩形
.yj {
width: 400px;
height: 100px;
background-color: rgb(255, 0, 0);
/* 半径小于宽度的一半 */
border-radius: 30px;
}
4）椭圆
.ty {
width: 400px;
height: 100px;
background-color: rgb(255, 0, 0);
/* 不能小于50% */
border-radius: 50%;
}
5）复合属性简写
该属性是可以跟两个值的，分别为左上右下，右上左下对角线
该属性是可以跟三个值的，分别为左上、右上左下、右下
该属性是可以跟四个值的，分别为左上、右上、右下、左下
.dd {
width: 400px;
height: 100px;
background-color: rgb(255, 0, 0);
/* border-radius: 左上右下、右上左下 */
/* border-radius: 10px 40px; */
/* border-radius: 左上、右上左下、右下 */
/* border-radius: 10px 20px 30px; */
/* border-radius: 左上、右上、右下、左下 */
/* border-radius: 10px 20px 30px 40px; */
}
6）单独设置一个角
border-top-left-radius:2px;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
border-bottom-left-radius:2px;
（四）盒子阴影
box-shadow 属性向框添加一个或多个阴影。
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊距离，影子模糊虚实。 |
| spread | 可选。阴影的尺寸，影子模糊大小。 |
| color | 可选。阴影的颜色。常用透明度 |
| inset | 可选。将外部阴影 (outset) 改为内部阴影。内部阴影和外部阴影 用逗号隔开 |
div {
width: 200px;
height: 200px;
background-color: #f00;
box-shadow: 10px 10px 10px 5px rgba(0, 0, 0, 0.3);
}
PS：
1.outset为默认值，不能写在属性中
2.盒子阴影不会占用盒子的大小，不会影响其他盒子的排列
（五）文字阴影
text-shadow 属性向文本设置阴影
text-shadow: h-shadow v-shadow blur color;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色。参阅 CSS 颜色值。 |
div {
width: 400px;
height: 200px;
background-color: pink;
font-size: 40px;
line-height: 200px;
text-shadow: 5px 5px 5px #FF0000;
}
浙公网安备 33010602011771号