行高
一行文字实际占用的高度。
取值方式:px,百分比。
百分比:按照默认字体大小取值。
特殊用法:要让一行文字垂直居中,可以将行高设置为盒子高。(多行文字行高失效)字号一般为偶数。
加粗:font-weight:bold;
斜体:italic;(与字体样式有关)
oblique;(普通斜体)
首行缩进:text-indent;
字间距:word-spacing;(英文)
letter-spac; (中文)
文本修饰:text-decoration:none(正常,默认样式)
underline(下划线)
overline(上划线)
line-through(中划线)
标准盒模型
盒子: 一个元素在页面中真实占据的位置。
五个部分:内容的宽,内容的高,内边距,边框,外边距。
宽:width px;
高:height px;
定义的内容的宽和高。
padding:
内容和边框之间的距离。
内边距是可以被背景色渲染的。
padding
内容和边框之间的距离。
内边距是可以被背景色渲染的。
可以给单边设置内边距:
padding-left: ;
padding-top: ;
padding-right: ;
padding-bottom: ;
四值法:
单值:上下左右。
双值:上下 左右。
三值:上 左右 下
四值:上 右 下 左 顺时针方向。
假如有一个padding/border/margin 与其他的三条边不同,其他三条边一样,这个时候我们设置总体样式,再单独去设置它的样式。
border
内容的边框
border:1px solid blank;
margin
外边框与外围的边距
两个内容margin计算:
一正一负结果为两者之和
均为正数结果取最大的值而不是相加
均为负数取绝对值大的
有些标签会有默认样式,清除默认样式可以用*{padding:0;
margin:0;
}
溢出内容隐藏:
overflow:hidden;
外边距塌陷
垂直方向上相邻的两个盒子,如果都有外边距,则外边距相交的地方会出现外边距重合现象,也叫作外边距塌陷。
取值:margin相遇的部分,并不是两个margin值的和,而是为最大值。
如果两个margin值为负数,取值为绝对值最大的。
如果一正一负,结果为两者之和。
居中方法
文字居中:
水平居中:
text-align:center
垂直居中:
- 单行文本 line-height等于盒子的高。
盒子居中
水平居中:
margin: 0 auto;
垂直居中
给盒子添加一个上下一样的padding。
父子盒模型
真实的宽:内容的宽+左padding+左border+右padding+右border
真实的高:内容的高+上padding+下padding+上border+下border
子盒子的宽度若不设置默认为父盒子的内容的宽。
若设置了边框和内边距,父盒子的内容宽减去边框和内边距的大小,剩下的就是子盒子的宽度。