CSS基础知识2
- 行高
——什么是行高?
他是一行文字实际占用的高度。
取值方式:px,百分比。
百分比:按照默认的字体大小取值。
特殊用法:
要让一行文字垂直居中,可以将行高设置为盒子高。(多行文字失效)
行高,字号一般都是偶数。
-
字号字体
——网页中,中文主要使用的字体:微软雅黑,宋体,黑体。
英文:Arial,Consolas英文在前,中文在后。
微软雅黑:Microsoft Yahei
宋体:SimSun
黑体:SimHei
—取值方式:数字,单词
数字:100-900;
单词:lighter normal,bold,bolder
fwb:font-weight: bold;
fw:font-weight: normal;
italic :跟字体样式有关系,oblique斜体
font: 30px/60px “Consolas”;
必须写的两个值 字号 字体 -
字体大小
font-size: 32px;
}
p{
/* 取值:单词,em,px,百分比 /
/ font-size: xx-small; /
/ font-size: xx-large; /
/ font-size: 48px; /
/ font-size: 1em; */
font-size: 200% -
段落
——— /* 设置文本居中方式 */
text-align:center;/* 首行文本缩进 em px 百分比 /
text-indent: 2em;
/ 文本修饰
none,正常,默认值。
underline:下划线。
overline:上划线。
line-through:中划线。
/
/ text-decoration: line-through; /
color: green;
/ 单词间间距: 中文无效。 /
/ word-spacing: 48px; /
/ 单个字母间的间距 /
/ letter-spacing: 48px; /
/ 大小写转换 */
text-transform: lowercase -
基线
——margin: 0;
padding: 0;
}
div{
border: 1px solid red;
}
img{
/* 基线对齐 */
vertical-align: bottom; -
盒模型
————标准盒模型
什么叫盒子?
一个元素在页面中真实占据的位置。
五个部分:内容的宽,内容的高,内边距,边框,外边距。
宽:width px;
高:height px;
定义的内容的宽和高。
padding:
内容和边框之间的距离。
内边距是可以被背景色渲染的
11. padding
——padding:
内容和边框之间的距离。
内边距是可以被背景色渲染的。
可以给单边设置内边距:
padding-left: 50px;
padding-top: 30px;
padding-right: 40px;
padding-bottom: 60px;
四值法:
单值:上下左右。
双值:上下 左右。
三值:上 左右 下
四值:上 右 下 左 顺时针。
-
边框
————width: 300px;
height: 300px;
background-color: pink;
margin: 40px;
三要素写法:
宽度,样式,颜色单一方向设置
-
倒三角
————width: 0px;
height: 0px;
border: 20px solid white;
border-bottom: none;
border-top-color: green;
}
/* 1.设置边框,然后将内容宽高设置为0
2.取消底部边框。
3.将左右边框的颜色改为white。(透明色)
14.margin
————外边距
两个盒子之间的距离。
- 补充
————假如有一个padding/border/margin 与其他的三条边不同,其他三条边一样,这个时候我们设置总体样式,再单独去设置它的样式
水平居中(必须有宽度)
有一些标签会有默认的样式,比如默认的margin。