1、文本格式化
1、文本格式化
包括:
控制字体:大小,加粗,斜体,字体系列
文本格式:颜色,排列,缩进
2、控制字体
1、指定字体系列
font-family
取值:字体1,字体2,。。。
注意:字体值包含中文或特殊符号时,必需使用"","微软雅黑" Microsoft yahei
2、指定字体大小
font-size
取值:px或pt
3、字体加粗
font-weight
取值:
normal正常 400-900:整百倍数的数字
bold:加粗,b,strong,hn
4、字体斜体
font-style:
取值:normal正常,italic:斜体,i标记默认值
5、小型大写字母
作用将匹配元素中所有的小写英文字符全部转换为大写,但是大小与小写一样
属性:font-variant
取值:normal small-caps:小型大写字符
6、字体综合属性
将所有的字体属性声明在一个属性中
属性:font
取值:font-style font-variant font-weight font-size font-family
3、文本格式属性
1、文本颜色
属性:color
取值:合法颜色值
2、文本排列方式(水平对齐)
属性:text-align
取值:left,center,right
3、文字修饰(线条样式)
属性:text-decoration
取值:
none:无线条样式
underline:下划线
overline:上划线
line-through:删除线
4、行高
属性:line-height
取值:px为单位的数值
作用:控制匹配元素中 一行数据的高度,如果行高值 高于 文字大小的话,那么这行文本在行高的高度内,呈现垂直居中的显示方式。如果行高值等于元素的高度,那么这行文字垂直居中。
font:字体大小/行高 "微软雅黑";
5、文本阴影
属性:text-shadow
取值:h-shadow v-shadow blur color;
6、首行文本缩进
属性:text-indent
取值:以px为单位的距离值
2、表格
1.表格常用样式属性
1、尺寸属性
width,height
2、边框border
3、内边距padding
4、文本字体相关属性
font-*、text-*
5、vertical-align 单元格内容垂直对齐方式
取值:top、middle、bottom
2、表格特有样式属性
1、边框合并
属性:border-collapse
取值:separate :默认值,分离边框
collapse:合并边框
2、边框边距
相当于:table当中的cellspacing属性
属性:border-spacing
取值:指定一个值:垂直与水平距离相等
指定两个值:第一个值,表示的是水平间距,第二个值表示的是垂直间距,中间用空格隔开。
注意:仅在border-collapse:separate时有效。
3、显示规则
表格布局:浏览器以什么样的算法来显示表格
属性:table-layout
取值:
auto:自动,列宽度由单元格内容绝对,默认值,称为自动表格布局。
fixed:固定的,列宽由table以及td设置的属性来决定,不以内容为主。称为固定表格布局
自动表格布局
1、单元格大小会适应内容大小
2、表格复杂时,加载会比较慢
3、适用于不确定每列大小时使用
固定表格布局
1、单元格宽度有表格以及单元格设置的数据为主,与单元格内容无关。
2、加载比较快
3、缺点:不灵活
3、浮动(重点,难点)
1、定位
定位方式:
1、普通流定位(默认定位方式)
页面中特点:1、块级:从上到下依次排列,每个元素独占一行
2、行内从左到右显示,一行内允许显示多个
2、浮动定位(常用) --弹性布局(flex布局)
3、相对定位
4、绝对定位
5、固定定位
2、浮动定位
1、作用:让块级元素可以在一行内显示
2、什么是浮动定位
1、将元素排除在普通流之外,脱离文档流,浮动元素不再占据页面空间
2、浮动元素会停靠包含框的左边或右边,或者是其他已经浮动起来的元素的边缘
3、属性:
float 取值:none:默认值,无浮动
left:左浮动
right:右浮动
4、注意:
1、如果父元素中无法显示所有的已浮动元素,那么最后一个将换行显示
2、所有元素一旦浮动,将变成块级元素,可以加宽高
3、浮动元素对父元素高度的影响
父元素中,包含浮动元素的话,那么高度将会以未浮动元素高度为准。如果所有的子元素全部浮动,那么父元素的高度将变成0。
解决方案:
1、直接设置父元素的高度
2、为父元素增加overflow:hidden属性
弊端:如果有溢出的内容,会被隐藏
3、通过清除浮动的方式解决
4、:before :after来解决
5、清除浮动
1.什么是清除浮动
清除当前元素之前或之后的浮动元素对它带来的影响
2、属性
clear 取值:none默认值,无清除效果
both:清除左右两边的浮动元素对当前元素的影响
left:清除左边的浮动元素的影响
right:清除右边的元素带来的影响
4、显示
1、显示方式
1、什么是显示方式
决定页面上的元素到底是以什么方式进行显示(行内?行内快、块级)
2、如何修改元素默认的显示方式
属性:display
取值:none 让生成的元素没有框,不显示,会使元素脱离文档流,不占据页面空间
block:让当前元素 表现的和 块级元素一样。让当前元素变成块级元素
inline 行内元素(尽量不要将块级元素改为行内元素)
inline-block:行内块 :本身是行内元素,但是又具备块级元素的特征。即一行内可以显示多个元素,但是还可以修改宽和高
2、显示效果
1、visibility
取值:visible 默认值,可见的
hidden 隐藏,元素不可见。依然占据页面空间
collapse:用在表格上,在删除表格中的一行或一列是,表格整体布局不受变化
面试问题
display:none和visibility:hidden的区别
display:none 不显示生成的元素,并且脱离文档流
visibility:hidden 隐藏元素,但是没有脱离文档流,依然占据页面空间
2、opacity
透明度
取值:0-1之间的数
颜色取值 rgba(r,g,b,0-1)
3、vertical-align
1、设置td的垂直对齐方式
2、可以设置行内块(img)元素的垂直对齐方式
给img设置vertical-align,设置图片两端的文本相对于图片的垂直对齐方式
3、取值:top/middle/bottom/baseline(默认值,基线对齐)
3、光标
属性:cursor
取值:default
pointer 小手
text:I
wait:等待
help;帮助
crosshair :+