1.字体 font
(1)font-* 字体相关的属性,这一类具有继承性(给父元素设置了,子元素或后代元素也会有作用)
(2)font-style: italic;
(3)font-weight: bold;
(4)font-family: 宋体;
2.背景 background
(1)background-*,背景这一系列的属性不具有继承性
(2)background-color
(3)background-image
(4)background-repeat(背景图片是否平铺)
no-repeat 不平铺、repeat 平铺、repeat-x 水平平铺、repeat-y 垂直平铺
(5)background-position(背景图片的位置)
【1】background-position: x y;
x为负数,背景图片水平向左移动,为正数,水平向右移动
y为负数,背景图片重直向上移动,为正数,重直向下移动
【2】 top right bottom left center
/* background-position: -100px -100px; */
background-position: center center;
(6)background-size(背景图片的尺寸(cover 把图片自动填充满整合标签))
/* background-size: 100% 100%; */
/* background-size: cover; */
/* contain 这个属性由原图片的尺寸(宽度*高度)来决定
如果宽度大于高度 就是以横向填充标签(水平方向)
如果高度大于宽度 就是以纵向填充标签(垂直方向) */
background-size: contain;
3.文本 text
(1)text-* 文本相关的属性,具有继承性
(2)text-decoration(修饰文本线)
line-through 删除线、 underline 下划线 、 overline 上划线
(3)text-align(设置文本水平对齐方式)
(4)color(字体颜色)
#盒子模型
4.边框 border
(1)边框,可以撑开盒子大小。
(2)一个标签有四个边,每个边可以有大小、样式、颜色组成。
border-width 边框宽度
border-style: solid (实线 、虚线、点线)
border-color 边框颜色
border:10px solid grenn 简写
/* border-width: 10px; */
/* border-style: solid; */
/* border-color: green; */
/* border: 10px solid green; */
(3)border-top、border-right、border-bottom、border-left
/* 上边框 */
border-top: 30px solid purple;
/* 右边框 */
border-right: 30px solid orange;
/* 下边框 */
border-bottom: 30px solid blue;
/* 左边框 */
border-left: 30px solid green;
(4)实现三角形图案
.box-4 {
/* transparent: 透明 */
background-color: transparent;
/* 上边框 */
border-top: 100px solid transparent;
/* 右边框 */
border-right: 100px solid transparent;
/* 下边框 */
border-bottom: 100px solid blue;
/* 左边框 */
border-left: 100px solid transparent;
width: 0px;
height: 0px;
}
<div class="box box-4"></div>
5.内边距 padding
(1)内边距: 是指边框与内容之间的间距。可以撑开盒子大小。
(2)padding-left 、padding-top: 80px 、 padding-right: 40px 、 padding-bottom: 30px;
(3)简写:
/* 上 右 下 左 */
padding: 80px 40px 30px 50px;
6.外边距 margin
(1)外边距。不会撑开盒子大小。
(2)元素作用于浏览器或其他元素之间的间距。元素与元素之间的间距。
(3)margin-left 正数往右边移动,负数往左边移动
margin-top 正数往下边移动,负数往上边移动
(4)margin:0 auto:设置内容水平居中
7.行高 line-height
(1)属性值: 倍数 / px
例:line-height: 1.75;
line-height: 20px;
(2)遇到一行文本(单行文本)垂直居中,可以设置行高等于标签的高度
(3)遇到多行文本垂直居中,可以通过内边距设置居中
例:padding-top: 80px;
padding-bottom: 80px;
8.圆角 border-radius
(1)分别设置不同的圆角:
border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-left-radius 左下角
border-bottom-right-radius 右下角
(2)例1(border-radius):
.box {
width: 200px;
height: 200px;
background-color: blue;
/* 圆角属性 */
border-radius: 100px;
}
例2(分别设置):
.demo {
width: 200px;
height: 300px;
background-color: green;
/* 分别设置不同的圆角 */
border-top-left-radius: 40px;
border-top-right-radius: 40px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}