CSS 的元素显示模式
HTML 元素一般分为块元素和行内元素两种类型,除此之外,还包含行内块元素,也就是块元素和行内元素的特性都有
常见的块元素
h1~h6 p div ol ul li
注意,文字类的元素,不能放块元素
常见的行内元素
a, strong,i,em,span,del,s,ins,u等等
a标签的是行内元素,注意而且内部可以放块元素
行内块元素
总结
元素显示模式转换
单行文字垂直居中的原理
行高等于盒子的高度,文字居中
CSS 的背景
背景颜色
background-color:transparent;
背景图片
背景平铺
图片位置
背景图片固定
背景复合写法
背景色半透明
盒子模型
盒子模型(Box Model)组成
padding和border都会让其原来的盒子变大,CSS2是计算padding和border的部分,如果保证盒子跟效果图大小保持一致,则让 width/height 减去多出来的内边距大小即可。在CSS3进行了完善设置数据可以修改计算的内容。
边框(border)
Padding内边距
外边距(margin)
外边距合并
使用 margin 定义块元素的垂直外边距时,可能会出现外边距的合并。
主要有两种情况:
1. 相邻块元素垂直外边距的合并
2. 嵌套块元素垂直外边距的塌陷
情况一:下外边距上外边距
情况二:嵌套盒子父上外边距,子上外边距
解决方案:
① 可以为父元素定义上边框。
② 可以为父元素定义上内边距。
③ 可以为父元素添加 overflow:hidden。
清除内外边距
圆角边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圆角边框常用写法</title>
<style>
.yuanxing {
width: 200px;
height: 200px;
background-color: pink;
/* border-radius: 100px; */
/* 50% 就是宽度和高度的一半 等价于 100px */
border-radius: 50%;
}
.juxing {
width: 300px;
height: 100px;
background-color: pink;
/* 圆角矩形设置为高度的一半 */
border-radius: 50px;
}
.radius {
width: 200px;
height: 200px;
/* border-radius: 10px 20px 30px 40px; */
/* border-radius: 10px 40px; */
border-top-left-radius: 20px;
background-color: pink;
}
</style>
</head>
<body>
1. 圆形的做法:
<div class="yuanxing"></div>
2. 圆角矩形的做法:
<div class="juxing"></div>
3. 可以设置不同的圆角:
<div class="radius"></div>
</body>
</html>
盒子阴影
记住这个即可