常见的文字控制属性:
颜色 color
文字大小 font-size
文字字体 font-family
字体加粗样式 font-weight
字体风格 font-style
文字居中显示 text-align
文本行高 line-height
首行缩进 text-indent
文本装饰 text-decoration(下划、中划、上划、没有线)
font:是否倾斜 是否加粗 文字大小/ 行高 字体;
链接的伪类:
a:link 未访问的链接(访问前)
a:visited 已访问的链接(访问后)
a:hover 鼠标移动到连接上(鼠标经过)
a:active 选定的链接(按下鼠标的时候)
盒子的实体化三属性:
宽 width
高height
背景 background
三种显示模式之间的转换:
将元素转化为块级元素:display:block;
将元素转化为行内元素:display:inline;
将元素转化为行内块元素:display:inline-block;
单行文字文本垂直居中:
设置文字的行高line-height等于盒子的自身高度;
如果line-height:值小于盒子自身高度文字偏上
如果line-height:值大于盒子自身高度文字偏下
背景属性 :
背景颜色: background-color
背景图片: background-image
背景平铺: background-repeat
background-position:X坐标(水平方向) Y坐标(垂直方向);
background-attachment:fixed;
background:背景颜色 url(背景图片路径) 平铺方式 是否固定 X轴 Y轴;
盒子模型
内容:实体化宽高
边框:border (solid实线 dashed虚线 dotted点线)
内边距:padding 拉开内容到盒子边缘的距离;
外边距:margin 拉开盒子与盒子之间的距离;
设置细线表格(了解下)
01 首先要新建几行几列,设置table的属性默认border不写,单元格之间的距离cellspacing="0";
02 在css里可以设置table的宽度,设置border,同时设置td和th的border;
03 通过设置border-collapse:collapse;让相邻的边框合并在一起;
圆角属性
border-radius
box-shadow: 水平阴影 垂直阴影 模糊距离 阴影颜色;
浮动
float
属性值:none left right
float:left; 左浮动
float:right; 右浮动
定位
定位=定位模式+边偏移(left、right、top、bottom)
定位属性:position
定位的分类:
静态定位:position:static;(不用,自动忽略)
相对定位:position:relative;
绝对定位:position:absolute;
固定定位:position:fixed;
相对定位:
参照物:自己
特点
相对于自己为参照物进行位移,属于占位定位,盒子仍然在标准流里面;
注意:一般情况下不会单独使用会配合绝对定位进行使用;
绝对定位:
参照物:
01 如果父级没有定位默认的参照物就是浏览器
02 如果父级有定位参照物就是父级元素
注意:父级的定位可以是除静态定位以外任何一种定位形式;
子绝父相:
子级绝对,父级相对,父级盒子定位了,但是依然占位,不会影响其他盒子的布局;
固定定位:
参照物:电脑屏幕(可视窗口);
特点:
固定定位完全脱离了标准流,参照物是可视窗口为准,和父级没任何关系,IE6不支持固定定位,但是我们现在不用管它,直接使用就可以;
让有定位的盒子水平或者垂直居中(死记硬背)
定位元素z-index堆叠顺序:
取值不带单位,值取的越大就会显示在最上面;
z-index必须配合定位属性使用;
元素的显示和隐藏:
隐藏:display:none;
显示:display:block; 将隐藏的元素显示出来
溢出隐藏
overflow
常用技巧:
01 overflow:hideen;可以让超出固定范围的内容隐藏掉;
02 overflow:hideen;可以清除浮动,布局的时候我们做左右或者左中右布局,都是父级嵌套子级盒子,然后将子级盒子浮动,但是如果没有给父级添加固定的高度,子级浮动以后父级的高度为0,不占位,会影响后面的布局,就给父级添加overflow:hideen;来解决;
03 overflow:hideen; 嵌套的父子级盒子出现外边距塌陷问题,两个嵌套的盒子,都没有浮动或者定位,给子级盒子添加了margin-top就会出现父级跟着掉下来的塌陷问题,就给父级添加overflow:hideen;来解决; |
|