CSS的基本内容

1.css是html的样式，一般位于head部分。

2.css引入方式

1> 行内样式表 <div style=‘color：red；display : block ;’> xxx </div>

2>内部样式表(位于head部分) <style> xxx </style>

3>外部样式表(位于head部分) <link rel='stylesheet' type='text/css' href = '#'>

3.选择器

1>基本选择器 * ==> 通配符

E ==> 元素选择器 （所有指定元素）

#idNAME ==> ID选择器

.classNAME ==> 类选择器

2>关系选择器 E F ==> 包含选择器 （E里面的所有F，如 子、孙）

E > F ==> 父子选择器 （只有E的所有子F元素）

E+F ==> 相邻选择器 （贴在E之后的F元素· ， 下一个元素）

E~F ==> 兄弟选择器 （E的所有之后的兄弟元素，下所有）

3>伪类选择器 a : hover

4>属性选择器 input[type] input[type="text"]

4.css选择器权重计算

1>选择器完全相同的情况下，后者覆盖前者。

2>权重 ！important (无穷大) > 行内样式 （1000）> ID选择器 （100）> 类选择器 （10）> 标签选择器 （1）> 通配符 * （0）

5.元素显示

块级元素(display:block) 如：div 、p、h1 ~h6 、ul... 特点：独占一行；宽高可自由设置，若宽没设置值，则为100% ；块级内可包含块级/行内元素；

行内元素(display:inline) 如：span 、a 、i... 特点：不独占一行，不可设置宽、高 ； 默认宽度就是内容撑开的宽度 ； 行内不能包含块级元素

行内块元素（display:inline-block） 如：img、input... 特点：和相邻的行内/行内块元素在一行，但有空白缝隙 ；默认宽高是自身宽高 ；可以设宽高

******************元素模式转换 ==> display : block /inline /inline-block

6.文字属性

font - size ==> 文字大小 单位 px

font - weight ==> 文字粗细 normal 、bold 、bolder 、lighter、100 ~900

color ==> 文字颜色

text - align ==> 文字对齐 center、left、right

line-height ==> 行间距 单位 px

text - indent ==> 文字缩进

letter - spacing ==> 字符间距 单位 px

text - decoration ==> 清除文字下划线 ：none 添加 上划线/下划线/删除线 ：overline/underline/line-through

文字溢出 单行 ===> overflow : hidden ;

white-space:nowrap ;

text -overflow ：ellipsis ；

多行 ====> -webkit-line-clamp : 7;

display:-webkit-box ;

-webkit - box- orient :vertical ;

overflow :hidden; ===> 值为scroll，出现滚动条

text - overflow: ellipsis;

************* 文字水平居中 ===> text-align = "center" ; line-height 与 height 相同即可

7.边框

border ：width style color ; ==> 这三个属性 没有顺序 ；可单独设置上右下左边框

border-radis : xxpx ; ==> 边框圆角 border-top-right-radis

8.背景

background-color :xx == > 背景颜色

background-image：url（‘xxx’） ==> 背景图片

************************img与background-image的区别：当图片上方还有内容时，选择background-image

background-repeat ：noreapt/reapt-x/reapt-y ==> 背景重复

background-position ：right top / center / x% y% / npx mpx ==> 背景图片位置

background-size ====> cover 图片超出部分会被裁剪

contain 图片大小会根据父级盒子缩放，有留白

100% 100% 图片占据整个父级盒子，会进行拉伸

复合 background ：bg-color bg-image bg-reapt bg-position/bg-size

9.盒模型

w3c标准 ==> 宽 =content 切换：box-sizing：content-box

ie标准 ==> 宽 = content + padding+border 切换：box-sizing：border-box

***********************padding （内边距）：百分比/数值/没有负值 百分比只和父元素的宽width计算

padding ：10（上） 20（左右） 30（下）；

margin （外边距）：百分比/数值 /有负值 百分比只和父元素的宽width计算

margin ：10（上） 20（左右） 30（下）；

行内元素的padding，margin 只生效左右，上下不生效；

auto 自动适应剩余空间，若不生效，则是没有剩余空间

10.尺寸及单位

尺寸 : width height ==> 默认值是 auto

绝对单位 == > 不会改变

相对单位 ==> 没有固定的度量值，由其它元素尺寸来决定的相对值

如：px（像素） 绝对单位

vm ： x%浏览器视口的宽度

vh ： y%浏览器视口的高度

% : 相对于父元素的宽度或字体大小

*******************%与auto的区别：auto会将元素撑开至整个父元素的宽，减去margin+padding+border

% 会强制将元素变成父元素一样的宽度，并且额外的空间（margin+padding+border）会加到width上 ；

% 与父元素有关系 ； auto与子元素有关系

问题 ：为什么子元素height：100%不生效？ 如果包含块的高度没有显示，并且该元素不是绝对定位，则计算值为auto，也就是说 子元素 100% * auto =NAN，所以结算无效。

11.BFC

格式化上下文 触发BFC：overflow：hidden ；（父级加）

功能：触发了BFC，让当前元素内的元素，不影响其它外部(其它)元素

解决问题：高度塌陷

12.浮动

float == > 值 ：left/right 作用： 实现文字环绕图片 特性：包裹（收缩、隔绝），破坏？

清除浮动 不用的方法 ：父级下多加一个空白盒子，只用来清除浮动 clear：both；

常用的方法 ：父级加伪类 div ：after ：content : ' ';

clear : both ;

display : block;

父级触发BFC overflow：hidden

13.定位

相对定位 position：relative 1>值 left（从左向右移动）、right、top（从上向下移动）、bottom                                                       值有正数、负数、%

****注意：left和right和top和bottom同时出现， left干掉right top干掉bottom

2>定位标准 ： 自身定位

3>保留自己原来空间（原来的空间还占有），没有脱离文档流

绝对定位 ： position:absolute 1> 如果子元素的所有上级元素没有relative，位置将依据浏览器左上角开始计算 如果父元素加入了relative,则从父元素的左上角开始计算

2>脱离文档流，独立对象存在，但是没有占位

3>left、top、right、bottom可以同时出现 如果同时出现了则是拉伸的效果

4>如果absolute   不配合 relative和top left right bottom去使用 单独使用，而配合margin使用 ==>无依赖 -----位置跟随--

固定定位 ： position : fixed

层级关系 : z-index ==>position z-index 数值越大，则在上面

14.元素居中

1>

    position:absolute;
    top:0;
    left:0
    right:0;
    bottom:0;
    margin:auto;

2>

     position:absolute;
     top:50%;
     left:50%;
     width:200px;
     height:200px;
     margin-left:-100px;
     margin-top:-100px;

15.透明度

opacity : 0.5;

16.光标变小手

cursor:pointer;