css知识点回顾(一)

(1)css:层叠样式表   css层叠体现在权重和继承  语法规则:选择符{属性:属性值}(属性:属性值也可称为声明);

(2)css的引入方式:内部、外部、内联;

(3)link和@import的区别

  1、从本质上讲,link是HTML的一种形式,而@import是css的引入方式;

  2、从兼容上讲:link没兼容,@import低版本不兼容(IE5以下);

  3、加载顺序上:link随着页面结构一起加载,@import是等页面结构加载完以后再加载;

(4)关于权重

  内联样式的权重是1000;

  元素选择器的权重是0001;

       继承样式的权重是0;

  class选择器的权重是0010;

  包含选择器的权重是所有选择器权重之和;

  id选择器的权重是0100;

  通配符的权重是0;

  important的权重为1000;

  伪类选择器的权重是0010;

(5)伪类选择器

  a:link{属性:属性值}超链接的初始状态;

  a:visited{属性:属性值}超链接被访问后的状态;

  a:hover{属性:属性值}鼠标滑过链接时的状态;

  a:active{属性:属性值}超链接被激活时的状态,即鼠标按下时超链接的状态;

四个都需要写的时候必须按顺序写,;hover可以给div,p,strong,b。。。。加,但link、visited、active只能给a加

(6)浮动  float:none/left/right

浮动的目的:让竖着的东西横着

  1、如果是文本和盒子的话,盒子浮动,文字环绕盒子显示;

  2、如果是两个竖着排的盒子

    a、第一个盒子float:left,后面的盒子没有浮动,那么后面的盒子会顶上去;

    b、第一个盒子float:right,后面的盒子没有浮动,那么该盒子靠右显示,后面的盒子会顶上去;

    c、第一个盒子float:left;第二个盒子float:left,第二个盒子跟在第一个盒子后面,从左往右排列;

    d、第一个盒子float:left,第二个盒子float:right,两个盒子一左一右显示;

  3、浮动会导致高度塌陷:子元素浮动了,父元素没有高度的时候,父元素会高度塌陷;

(7)css文本相关属性

  1、文本大小(font-size)

    a、属性值为数值时,必须给属性值加单位,0除外;

    b、单位可以是pt,em,9pt=12px,1em=16px 0.75em=12px;

    c、16px为默认字体大小;

    d、使用绝对大小关键字 xx-small=9px,x-small=10px,small=13px,medium=16px,large=18px,x-large=24px,xx-large=32px;

  2、文本颜色(color:颜色值)color:red    color:#fff   color:rgb(0,0,0)

  3、文本字体(font-family)是中文字体的时候需要加引号,有空格的时候也要加;

  4、文本加粗(font-weight)font-weight:bold(加粗)/normal(常规)/bolder(更粗);

  5、文本倾斜(font-style)font-style:italic/oblique/noraml;

  6、水平对齐方式(text-align)text-align:center/left/right/justify(两端对齐);

  7、行高(line-height)  单行文本如果line-height=height的话,文字是垂直居中的;

  8、文字font属性简写  font:font-style  font-weight  font-size/line-height font-family    必须按顺序写;

  9、文本修饰(text-decoration)text-decoration:none/underline(下划线)/overline(上划线)/line-through(删除线);

  10、首行缩进(text-indent)text-indent:value     value可以取负值  text-indent属性只对第一行起作用;

  11、字间距(letter-spacing)letter-spacing:value    控制文字与文字之间的间距

(8)css列表相关属性

  1、定义列表符号样式   list-style-type:disc/circle/square/none

  list-style-type:none=list-style:none

  2、使用图片作为列表符号 list-style-image:url(路径);

  3、定义列表符号的位置  list-style-position:outside/inside;

(9)css背景相关属性

  1、背景颜色(background-color:颜色值);

  2、背景图片的设置(background-image:url(背景图片路径));

  3、背景图片的平铺属性(background-repeat)background-repeat:no-repeat/repeat/repeat-x(横向平铺)/repeat-y(纵向平铺);

  4、背景图片的定位(background-position)background-position:left/center/right/数值    top/bottom/center/数值;第一个值表示水平方向上的位置,第二个值表示垂直方向上的位置;

  5、background的简写(background)如background:url(路径)   no-repaet  center  top    #fff;

  6、背景固定(background-attachment)background-attachment:fixed     只是固定在盒子范围内

  7、背景图大小(background-size)background-size:100% 100%/cover/contain   cover:背景图全部显示在容器内,并保证图片不失真,但是有可能背景图的有一小部分看不到

  8、空余空间(white-space单行文本溢出)white-space:normal/nowrap/pre/pre-wrap/pre-line/inherit

  overflow:hidden;(超出隐藏) text-overflow:ellipsis(显示省略号)三个属性加起来可以做单行文本溢出;

(10)元素类型转换

  display:block/inline/inline-block/none/list-item/table-header-group/table-footer-group

    1、block:块状显示,就是让元素竖着显示

    2、inline:行内显示,就是让元素横着显示

    3、当元素设置了float属性后,就相当于有了块元素的特征

    4、inline-block:行内块元素显示(vertical-align(只对行内块元素适用,用的时候父元素需要设置行高,图片不能加display):top/bottom/middle/baseline/text-top/text-bottom)

(10)position:absolute/relative/fixed

  1、position;absolute;绝对定位

    a、会飘起来,脱离文档流

    b、偏移位置相对于浏览器窗口来说(前提是没有父元素或者父元素没有定位),如果存在父元素并且有定位,子元素的偏移位置是相对于父元素来说;

    c、多个并列的元素同时有定位的时候,后面的元素会盖在前面元素上;

    d、z-index改变定位元素的层叠顺序,z-index不带单位;

  2、position;relative;相对定位

    a、不会脱离文档流

    b、偏移位置是相对于元素本身的位置

    c、包含块:该元素是父元素,有相对定位

  3、position:fixed;固定定位    ie6不支持 会脱离文档流

(11)透明度写法

  1、IE浏览器写法:filter:alpha(opacity=value)value的取值范围是0-100

  2、其他:opacity:0.value;value的取值范围是0-1;

(12)改变指针样式:cursor:pointer/help/move/wait

(13)最小高度兼容写法

  1、min-height:value;_height:value;

  2、min-height:value;height:auto !important;height:value;(使用这种方法顺序不能变)

   

原文地址:https://www.cnblogs.com/niuxiaoxian/p/8428431.html