css之文本格式化、表格、浮动

css之文本格式化、表格、浮动

1、文本格式化(重要)
1、字体属性
1、指定字体(非重要)
font-family:value1,value2,value3....;
font-family:"微软雅黑","宋体","Arial";
2、字体大小(重要)
font-size:
取值 : px 或 pt 作为单位的值
3、字体加粗(非重要)
相当于 : <b></b>
font-weight:normal/bold/无单位数字;

无单位数字:400 - normal
900 - bold
4、字体样式(非重要)
相当于 :<i></i>
功能:斜体 显示文字
font-style : normal / italic;
5、小型大写字母(非重要)
font-variant:normal/small-caps;

6、字体属性
font:font-style font-variant font-weight font-size font-family;

常用设置方式:
font:12px "微软雅黑","Arial";
font:12px/24px "microsoft yahei";

font:font-size/line-height "微软雅黑";
行高
2、文本属性
1、文本颜色 (重要)
color:value;
2、文本水平排列方式(重要)
相当于:html 属性中的 align
text-align:left / right / center

功能:能够控制 当前元素内 所有的文本、行内元素、行内块、水平对齐方式。
3、文字线条修饰
属性:text-decoration
取值:
none 无线条(重要)
underline 下划线(重要)

overline 上划线(非重点)
line-through 删除线(非重点) --> <s></s>
4、行高(重要)
一行文本所占据的高度是多少
如果 行高 大于 文本大小的话,那么这行文字将呈现出垂直居中的显示方式
属性:line-height
取值:以 px 为单位的值
5、首行文本缩进(非重要)
属性:text-indent
取值:以 px 为单位的值
6、文本阴影(非重要)
text-shadow:h-shadow v-shadow blur color;
h-shadow:水平投射距离
v-shadow:垂直投射距离
blur:模糊距离
color:颜色
******************************************************
1、表格 属性
1、表格常用属性(重点)
1、内边距 : padding
2、尺寸属性 :width,height
3、文本属性 : font-* , text-*
4、背景属性 : background-*
5、边框 : border
6、vertical-align
功能:控制单元格内容的垂直对齐方式
取值:top / middle / bottom
2、表格特有属性
注意:该组属性只能在 table 中使用
1、边框合并(重要)
属性:border-collapse
功能:合并两个相邻的边框
取值:
separate : 默认值,分离边框
collapse : 合并
2、边框边距(非重点)
两个边框间的 上下 和 左右的距离
注意:只有在 border-collapse:separate;时才有效
属性:border-spacing
取值:
取一个值:每两个单元格之间的垂直和水平间距是一致的。
取两个值:第一个值,指定的是水平间距,第二个值,指定的是垂直间距。两个值用 空格 隔开
3、显示规则(非重点)
属性:table-layout
取值:
auto : 列宽度由内容来决定,默认值。自动表格布局
fixed: 列宽度由设置的值来决定。固定表格布局
自动表格布局:
单元格的大小会适应内容的大小
加载时较慢
适用于不确定每列大小时使用
固定表格布局:
列宽度取决于设置好的相关属性值,与内容无关
会加速显示表格,每次加载表格时不用计算

固定表格布局虽然速度较快,但是不够灵活,不能体现出表格的特点。
自动表格布局,虽然算法较慢,但是是传统表格的体现
2、浮动定位
1、定位
元素框 相对于其正常位置 应该出现的 位置在哪

分类:
1、普通流定位
流:排列元素的一种方式
又称为 文档流定位 ,是页面默认排列元素的一种方式。
页面中的块级元素:元素是从上到下的方式排列
页面中的行内元素:元素是从左到右的方式排列

弊端:块级元素 无法 一行内显示多个,布局不好做。
2、浮动定位
解决问题:让多个块级元素能够在一行内显示

3、相对定位
4、绝对定位
5、固定定位
2、浮动定位
解决问题:让多个块级元素能够在一行内显示
1、什么是浮动定位
1、将元素排除在文档流之外,即元素脱离文档流。不受 默认排列方式(从上到下 或 从左到右)的控制
2、元素将不再占用页面的空间
有可能会压住其他的元素
3、元素 会停靠在包含框的左边 或 右边,或者停靠在已经浮动的元素的左边 或 右边
4、元素无论怎么浮动,最终还是在包含框之内
2、浮动属性
属性:float
取值:none / left / right;

注意:
1、块级元素浮动后 ,宽度会变成自适应
2、行内元素 浮动起来后,除具备以上特点外,它将变成块级元素
3、清除浮动
功能:清除当前元素的左边(上边) 或 右边 已浮动元素对它所带来的影响
属性:clear
取值:left / right / both / none
4、float 与 overflow
原因:浮动元素 会对 父元素的高度带来影响,父元素的高度,最终以没有浮动元素的高度为准。

解决方案:
1、手动设置元素的高度
弊端:自适应高度时无法使用
2、通过 overflow 属性改变
overflow:hidden;放在 包含浮动元素的父元素中,它会撑起当前元素的高度,变得自适应
弊端:能够隐藏超出范围的元素
3、在父元素内最后位置处,追加一个子元素 div,增加 clear:both;属性即可

李东辉

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: