本章主要写了一些文本字体的属性设置,背景设置以及盒子模型
目录
text-align: justify 两端对齐,如果让最后一行也实现加text-align-last: justify
text-align: center 居中
text-align: center;
text-align: left 左对齐 默认样式
text-align: left;
用于实现垂直居中(行高=盒子高度)
line-height: 150px;
定义一条删除线
text-decoration: line-through;
text-align: right 右对齐
text-align: right;
用于定义文本上的一条线
text-decoration: overline;
text-align: justify 两端对齐,如果让最后一行也实现加text-align-last: justify
text-align: justify;
text-align-last: justify;
只给首行缩进,缩进两个字符时,值等于字体大小乘2
text-indent: 40px;
用于清除a标签的默认下划线
text-decoration: none;
用于定义文本下的一条线
text-decoration: underline;
单词首字母大写
text-transform: capitalize;
单词全大写
text-transform: uppercase;
单词全小写
text-transform: lowercase;
背景色
background-color: green;
背景图
background-image: url(./img/1.jpg);
背景图平铺方式
background-repeat: no-repeat;
背景图片大小
background-size: 100% 100%;
设置为行级元素
display: inline;
padding顺序,margin同理
上下左右都是10
padding: 10px;
上下10 左右20
padding: 10px 20px;
上10 左右20 下30
padding: 10px 20px 30px;
上10 右20 下30 左40
padding: 10px 20px 30px 40px;
margin塌陷 同级之间上下取大值
嵌套盒子 子盒子加margin不生效,需要给父盒子加padding或者border
margin-right: 60px;
设置为块级元素
display: inline-block;
隐藏
display: none;
设置为块级元素,而且可以将隐藏的元素显示
display: block;
将元素隐藏,但不放弃自己的位置
visibility: hidden;
边框宽度 边框样式 边框颜色
border:10px solid red ;
单独设置下边框
border-bottom: 10px solid red;
设置圆角 50%是圆形 px固定值可以设置小圆角
border-radius: 50%;