目录
网页布局过程:
-
先准备好相关的网页元素,网页元素基本都是盒子Box。
-
利用CSS设置好盒子样式,然后摆放到相应位置。
-
往盒子里装内容
网页布局的核心本质:就是利用CSS摆盒子。
所谓盒子模型:就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
CSS盒子模型本质上就是一个盒子,封装周围的HTML元素,由内到外依次分为内容(content)、填充(padding)、边框(border)和边界(margin)4部分
1. 内容-元素溢出
作用:控制溢出元素的内容的显示方式
属性名:overflow
hidden 溢出隐藏
scroll 溢出滚动(无论是否溢出,都显示滚动条位置)
auto 溢出滚动(溢出才显示滚动条位置)
2. 边框
border可以设置元素的边框。边框有三部分组成:边框宽度(粗细)边框样式 边框颜色
border: border-width || border-style ||border-color
边框简写:
border: 1px solid red; 没有顺序
2.1 表格细线边框
border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
语法:
border-collapse: collapse
-
collapse单词是合并的意思
-
border-collapse: collapse;表示相邻边框合并到一起
2.2 边框会影响盒子实际大小
边框会额外增加盒子的实际大小。两种解决办法:
-
测量盒子大小的时候不测边框
-
如果测量的时候包含了边框,则需要width/height 减去边框宽度
2.3 边框制作小三角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 0;
height: 0;
border: 100px solid red;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
小三角朝哪个方向,剩余的三个方向颜色就设置为transparent
要使小三角方向朝下,其他条件不变,只需把左右下的边框颜色设置为透明即可
3. 内边距
padding 属性用于设置内边距,即边框与内容之间的距离
padding: 10px;
/* 上 右 下 左 */
padding: 10px 20px 30px 40px;
/* 上 左+右 下 */
padding: 10px 30px 50px;
/* 上下 左右 */
padding: 10px 30px;
注意:
-
内容和边框有了距离,添加了内边距。
-
padding影响了盒子实际大小。
也就是说,如果盒子已经有了宽度和高度,此时再指定内边框,会撑大盒子。
解决方案:
如果保证盒子跟效果图大小保持一致,则让width/height减去多出来的内边距大小即可。
4. 外边距
外边距典型应用
外边距可以让块级盒子水平居中,但是必须满足两个条件:
① 盒子必须指定了宽度
② 盒子左右的外边距都设置为 auto
.header { width: 960px; margin: 0 auto; }
常见的写法:
-
margin-left: auto; margin-right: auto;
-
margin: auto;
-
margin: 0 auto;
注意:以上方法是让块级元素水平居中,行内块元素或者行内元素水平居中给其父元素添加 text-align: center 即可
4.1 外边距合并
场景:垂直排列的兄弟元素,上下margin会合并
解决:取两个margin中的较大值生效,尽量只给一个盒子添加 margin 值
4.2 外边距塌陷
场景:父子级的标签,子级添加上外边距会产生塌陷问题
现象:导致父级一起向下移动
解决方法:
- 取消子级 margin-top,父级设置 padding-top
- 父级设置 overflow: hidden
- 父级设置 border-top
-
还有其他方法,比如浮动、固定,绝对定位的盒子不会有塌陷问题
4.3 行内元素-内外边距问题
场景:行内元素添加 margin 和 padding,无法改变元素垂直问题
解决方法:给行内元素添加 line-height 改变元素垂直问题
5. 圆角
radius半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果
boeder-radius: 10px;
/* 左上 右上 右下 左下 */
border-radius: 10px 20px 30px 40px;
/* 左上 右上+左下 右下 */
border-radius: 10px 30px 50px;
/* 左上+右下 右上+左下 */
border-radius: 10px 30px;
-
参数值可以为数值或百分比的形式
-
如果是正方形,想要设置一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为50%
-
如果是一个矩形,设置为高度的一半就可以
-
该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角
-
分开写:border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius
6. 盒子阴影
作用:给元素添加阴影
属性名: box-shadow
属性值: x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影;
注意:x轴偏移量和y轴偏移量必须书写
默认是外阴影,内阴影需要添加 inset
7. 文字阴影
text-shadow属性
text-shadow: h-shadow v-shadow blur color;