1.行高(http://css.doyoe.com/properties/text/line-height.htm)
什么是行高?
答:一行文字实际占用的高度。
取值方式:PX,百分比。
百分比:按照默认的字体大小取值。
特殊用法:
要让一行文字垂直居中,可以将行高设置为盒子高。(多行文字失效)
行高,字号一般都是偶数。
(谷歌浏览器最小可``以设置12px,默认是16px)
div{
height: 100px;
}
p{
line-height: 100px;
}
2.字号字体(http://css.doyoe.com/properties/font/font.htm)
网页,中文主要使用的字体:微软雅黑,宋体,黑体。英文:Arial,Consolas。英文在前,中文在后。
常用字体英文输入:
微软雅黑:Microsoft Yahei
宋体:SimSun
黑体:SimHei
font-weight: 指定文本字体的粗细
取值方式:数字,单词
数字:100-900;
单词:lighter normal,bold,bolder
font后面可以跟字号,字体,行高,加粗… (必须写的两个值 字号 字体)
字体大小
取值:单词,em,px,百分比
3.段落 基线
设置文本居中方式
text-align: left;
首行文本缩进 em px 百分比
text-indent: 2em
文本修饰 none,正常,默认值。underline:下划线。 overline:上划线。 line-through:中划线。
单词间间距: 中文无效。
word-spacing: 数值+px
单个字母间的间距
letter-spacing: 数值+px
大小写转换
text-transform: lowercase;
基线对齐
vertical-align: bottom;
4.盒子模型
标准盒模型
什么叫盒子?
一个元素在页面中真实占据的位置。
五个部分:内容的宽,内容的高,内边距,边框,外边距。
宽:width px;
高:height px;
定义的内容的宽和高。
padding:
内容和边框之间的距离。
内边距是可以被背景色渲染的。
5. padding内边距 (http://css.doyoe.com/properties/dimension/padding.htm)
padding:
内容和边框之间的距离。
内边距是可以被背景色渲染的。
可以给单边设置内边距:
padding-left: 50px;
padding-top: 30px;
padding-right: 40px;
padding-bottom: 60px;
四值法:
单值:上下左右。
双值:上下 左右。
三值:上 左右 下
四值:上 右 下 左 顺时针。
5.border边框(http://css.doyoe.com/properties/backgrounds/border.htm)
定义元素边框的外观特性
三要素写法:
宽度,样式,颜色
也可以 可以给单边设置边框
border-left:
border-top:
border-right:
border-bottom:
利用边框做一个倒三角
1.设置边框,然后将内容宽高设置为0
2.取消底部边框。
3.将左右边框的颜色改为white。(透明色)
div{
width: 0px;
height: 0px;
border: 20px solid white;
border-bottom: none;
border-top-color: green;
}
6.margin外边距(http://css.doyoe.com/properties/dimension/margin.htm)
外边距两个盒子之间的距离。
1.属性接受1~4个参数值。如果提供四个参数值,将按上、右、下、左的顺序作用于四边;提供三个,第一个用于上,第二个用于左、右,第三个用于下;提供两个,第一个用于上、下,第二个用于左、右;只提供一个,同时用于四边。
2.外延边距始终透明,即不可见也无法设置背景等任何样式。
3.某些相邻的margin会发生合并,我们称之为margin折叠:
7.补充
7.1技巧
假如有一个padding/border/margin 与其他的三条边不同,其他三条边一样,这个时候我们设置总体样式,再单独去设置它的样式。
border: 5px solid red;
/* css:层叠特效 */
border-bottom: 10px dashed green;
7.2清除默认样式
有一些标签会有默认的样式,比如默认的margin。
我们可以使用:
*{
margin: 0;
padding: 0;
}
7.3高度
我们一般是不设置高度的,而是用内容去撑开盒子的高。
内容的多少不是由咱们决定的,使用自适应可以避免大片留白和内容溢出。
7.4溢出内容隐藏
overflow: hidden;
7.5外边距塌陷
垂直方向上相邻的两个盒子,如果都有外边距,则外边距相交的地方会出现外边距重合现象,也叫作外边距塌陷。
取值:margin相遇的部分,并不是两个margin值的和,而是为最大值。
如果两个margin值为负数,取值为绝对值最大的。
如果一正一负,结果为两者之和。
7.6居中办法
文字居中
水平居中:
text-align:center
垂直居中:
- 单行文本 line-height等于盒子的高。
盒子居中
水平居中:
margin: 0 auto;
垂直居中
给盒子添加一个上下一样的padding。
7.7父子盒模型
真实的宽:内容的宽+左padding+左border+右padding+右border
真实的高:内容的高+上padding+下padding+上border+下border
子盒子的宽度若不设置默认为父盒子的内容的宽。
若设置了边框和内边距,父盒子的内容宽减去边框和内边距的大小,剩下的就是子盒子的宽度。