CSS全面汇总速查

a标签去下划线 text-decoration:none; ul中去除li前面的小黑点 list-style:none;
text-align:center(水平居中) ; line-hight:样式里的高度(垂直居中); 结合使用(若要图片居中,给父元素设置水平居中,则其中元素居中 切记不可设置垂直居中,不然影响下面文本布局都会存在行高的问题)
outline:0; border:0;list-style:none;写进通配符里去,设全部样式
border-radius:50% ;(前提设宽高) 轮播图下小圆点应用

css reset 样式重置 和 normalize

不同浏览器对元素默认的样式有很大差异 , 为了各个浏览器样式的统一 , css reset把元素的特有样式都清空导致这些元素失去了本来意义, 不管你是不是需要html的原始样式,都清掉 , 我们可以自已编写css reset,也可以使用第三方别人写好的 , 先把所有样式都清除,让元素基本都没有 , 但是需要基本的样式的时候 , 还得手动添加,浪费资源 *{margin: 0;padding: 0;}属于最基本的css reset
normalize.css 是一种非常流行的css reset的解决方案 , 保留了很多元素的语义特征,重写样式比较柔和 , 保存了很多默认样式,提升了css的兼容性,修复了很多不同浏览器的bug , BootStrap使用的是normalize
css reset 和 normalize区别,css reset是全部样式放一起清空 , normalize是一个个慢慢清

超链接
href=“http://www.tmooc.cn/” 链接的路径
target="" 指定链接的打开方式
_self 默认缺省值,在当前页面打开
_blank 在新页面打开链接

a标签的其它表现形式
下载 下载
发送邮件 发送邮件
调用js

调用js

回到页面顶部 返回顶部

1.什么是锚点
锚点,就是页面中的一个记号
可以通过超链接,跳转回这个记号的位置处
2.使用锚点----定义锚点
①h4的方式
②h5的方式
any:任意元素
3.使用锚点----跳转锚点

****

<a href="#down">点击下来a>


  ...
  
<a id="down" href="#">点击上去a>

文本样式标记

加粗   
斜体    
删除线   
下划线
h5推荐使用有语义的标签
 下标
 上标 

CSS样式的特征
①继承性
大部分的css效果,是可以直接被后代元素继承的
②层叠性
可以为一个元素设置多个样式规则
规则中,属性不冲突时,都可以作用到当前元素上
③优先级
如果样式声明时属性冲突,按照样式规则的优先级取应用样式
默认优先级: 最高 内联样式
内部,外部 就近原则(link的编写位置,决定距离远近)
最低 浏览器默认样式
④调整优先级
!important 规则
放在属性值与分号之间,与值之间有空格
如果一个样式属性和值带有!important 不会被其它样式覆盖
内联都不能替代他,
内联样式不能添加!important
通用选择器
*{样式声明} ,匹配所有元素
但是由于及其低下.*在项目中使用非常少
*{margin:0;padding:0} 所有元素的内外边距清空
ps:为了让代码可以适应各个浏览器,我们一般在开发前,把默认样式一次性清空或者统一,不让不同浏览器出现偏差,这个行为,叫做css reset
元素选择器,标签选择器
设置页面中所有这个元素的公用样式
ex:div{样式声明} span{样式声明}

ID选择器(专属定制)

#id值{样式声明}
匹配页面中,对应id的这个元素的样式
一般id选择器在项目中不单独使用
而是作为后代选择器或者子代选择器的开头部分
#content div>span a:hover{}
类选择器
定义类选择器 .类名{样式声明}
使用类选择器
注意:类名的规范:1.声明的时候,必须写点,不能省略
2.class调用的时候不能有点
3.类名不能以数字开头
4.类名中只能有两种符号 - _
类选择器的其它使用方式
1.多类选择器

"类名1 类名2 类型3......">

2.分类选择器
元素选择器.类名{样式声明}
匹配具体某一个元素,同时这个元素引用这个类名
3.分类选择器
.类名1.类名2{样式声明}
同一个标签,引用了类名1和类名2,就可以应用这个样式
分类选择器作用:
1.更精确的找到目标元素
2.提升选择器的权值
群组选择器
将多个选择器使用,连接,统一定义公共的样式
legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
后代选择器
通过元素的后代关系匹配元素
后代:一级或者多于一级的嵌套
div p span{color:red;}
子代选择器
通过元素的子代关系匹配元素
子代:一级的嵌套
div>p>span{background-color:yellow}

伪类选择器
匹配元素不同状态的选择器
:link 匹配元素未访问时的状态
:visited 匹配元素访问后的状态
:active 匹配元素激活的状态
:hover 匹配鼠标悬停到元素上时的状态
:focus 匹配元素获取焦点时的状态
选择器的权值
权值:标识当前选择器的重要程度,权值越大,优先级越高
!important >1000
内联 1000
id选择器 100
类选择器 10
伪类 10
元素选择器 1
*通用选择器 0
继承的样式 无
权值的特点
1.当一个选择器含有多个选择器时,需要把所有的选择器的权值相加,然后比较,权值大的优先显示
2.权值相同,就近原则
3.群组选择器,不相加,各算个的权值
4.内联样式中不能添加!important
5.选择器权值的计算,最终的结果不会超过本身的最大数量级
尺寸属性
设置元素的宽度和高度
width 宽度 px为单位的数字,%父元素宽度百分比
height 高度 px为单位的数字,%父元素宽度百分比
(父元素没定义高度,%失效)
max-width 最大宽度
min-width 最小宽度
max-height 最大高度
min-height 最小高度
em相对于父元素定义的数值的整倍数
rem相对于html元素定义的数值的整倍数
% 相对于父元素数值的百分比
max-width:100% 代码元素可以缩放,但是最大宽度不能超过原始尺寸
块级元素

• 设置宽度有效
• 没设置宽默认是父元素100%
• 没设置高默认高靠内容撑开没内容没高不显示
• 4个方向外边距都有效

行内元素

• 设置宽高无效,自带宽高属性的设置有效
• 实际内容是靠内容撑开,没内容就没宽高
• 只有左右外边距有效,上下无效

行内块元素

• 设置宽高有效
• 默认自带宽高(不同浏览器对input的默认样式设置差别比较大)
• 4个方向外边距都有效,但是如果因为上下外边距改变了行内块的位置,那么同一行的其他行内元素和行内块元素的位置跟着一起改变

总结:1.所有块级元素都可以设置宽高 2.所有行内块默认自带宽高,也可以设置宽高覆盖默认宽高 3.多数行内元素设置宽高无效(img除外) 4.属性带有宽高的标签,都可以设置样式的宽高(img,table)

溢出的处理

overflow属性写到父元素里
当内容较大元素区域较小的时候,会发生溢出,默认是纵向溢出
overflow:visible;溢出部分显示
overflow:hidden;溢出部分影藏
overflow:scroll;溢出部分显示纵向滚动条(不管是否溢出都添加滚动条的槽)
overflow-x:scroll overflow-y:scroll 单独设置x轴y轴的滚动条
overflow:auto;溢出部分显示纵向滚动条(溢出添加滚动条的槽,不溢出就没有槽)
如何改成横向溢出
在宽度比较小的容器内部,添加一个宽度较大的子元素,overflow:scroll给他增加横向滚动条
边框的简写方式
border:width style color;
width:边框的粗细,px为单位的数字
style:边框的样式 solid 实线 dotted点虚线 dashed断线虚线 double双实线
color:边框的颜色 transparent 等同于rgba(0,0,0,0)
border-bottom-color:transparent; 透明
最简方式:border:style; border:0;取消边框(css中只有数值0可以省略单位 margin:0;)
单边定义
只设置某一条边的单边属性
border-top:width style color;
border-right:width style color;
border-bottom:width style color;
border-left:width style color;
border-方向:width style color; 方向top/right/bottom/left
单属性的定义
border- style:solid ;
border- width :2px;
border- color :red;
border-top- color :red;
border-bottom- style :solid;
border-方法-属性:
圆角 border-radius:以px为单位的数字 50%圆
border-top-left-radius:左上角 border-radius:0;取消圆角

边框阴影

box-shadow:h-shadow v-shadow blur spread color
h-shadow: 水平方向的阴影偏移
v-shadow:垂直方向的阴影偏移
blur:阴影模糊距离
spread:阴影大小
color:阴影颜色
最简方式box-shadow:h-shadow v-shadow;

轮廓 边框的边框,绘制于边框外面的线条,不占用元素空间
outline:width style color;一般情况下,我们会把轮廓清除 outline:0;
border:0;边框清除

框模型-----盒子模型
元素在页面上实际占地空间的计算方式
默认实际占地宽度:
左外边距+左边框+左内边距+内容区域宽度+ 右内边距+右边框+右外边距
外边距margin 改变外边距,元素有位移效果 外边距,由于元素位置的微调,精确地关注上外边距和左外边距(从元素的左上开始渲染(画页面上)) magin-top/left/right/bottom取值:距离哪个距离有多远, px为单位 top +↓ ,-↑ left+→,-←
% 上右下左,都是父元素宽度的百分比,跟高度没有关系
auto 上下外边距auto无效,只对设置了宽度的元素有效,让元素在父元素内水平居中
margin:auto; 水平居中
margin:v1;设置四个方向的外边距
margin:v1 v2 v1:上下 v2:左右 margin:0 auto;上下为0左右居中水平居中
margin:v1 v2 v3 v1:上 v2:左右 v3:下
margin:v1 v2 v3 v4 上右下左
padding的写法一样
外边距的特殊效果:1 外边距合并,两个垂直外边距相遇时,会合并成一个 ,值以最大的为准,解决方案:直接写一个垂直外边距,一下把数值写满
行内元素上下外边距无效
默认自带外边距的元素body 8px h1~h6 p ol dl pre
ul上下16px 左内边距40

外边距的溢出

在特殊情况下,为子元素添加上外边距,会作用到父元素上(改变子元素上外边距,父元素跟着子元素一起动)
特殊情况:1.父元素没有上边框 2.子元素内容区域的上沿与父元素的上沿重合
解决方案:
1.给父元素添加上边框,弊端:增加了父元素实际占地高度
2.设置父元素的内边距 ,弊端:增加了父元素实际占地高度
3 .给父元素添加overflow:auto/hidden; 弊端:如果父元素就不能溢出显示
4. 给父元素添加第一个子元素 ,

table为空

外边距的颜色和使用时机
外边距是无色透明的 元素位置微调 一组元素之间需要有空隙的时候 可以选择使用外边距

padding内边距
边框到内容区域的距离,改变内边距,效果是元素变大,实际宽高没有改变,元素实际占地空间变大,内边距的颜色是元素的背景色,可以改变占地面积,不能改变内容的实际宽高
取值:px为单位的数字
%是父元素宽度的百分比
padding没有auto

什么时候使用内边距

1.把元素撑开,让边框与内容区域的距离变大
box-sizing: 改变盒子模型的计算方式 给设置百分比的子元素
取值:
1.默认值content-box(设置的width就是content的宽度)默认盒子模型的计算方式:左右外边距+左右边框+左右内边距+width
2.border-box(设置的width就是边框以内的宽度)设置的width包含padding+border+内容区域,实际占地宽度的公式 : 左右外边距+width(width=左右内边距+左右边框+内容区域)

box-sizing:border-box;

用于用百分比设置宽度 将左右内边距 左右边框 内容区域全放到已设置的百分比里面去,从而解决父元素挤不下的问题

背景图平铺 background-repeat : repeat 默认不平铺 no-repeat不平铺 repeat-x x轴平铺 repeat-y y轴平铺
背景图片的定位 background-position: x y;单位px, % (只取一个值的情况下默认是控制x轴,y轴默认居中)
关键字 x:left/center/right y:top/center/bottom
background-position:left top; background-position:center center;

背景图片的尺寸

background-size:
取值:1.一个以px/%为单位的数字,同时设置宽高 2.两个以px/%为单位的数字,分别设置宽高
background-size:cover 要求元素被背景图完整的充满 ,如果图片显示不全,没关系(撑满元素,元素小了则显示不全)
background-size:contain要求元素内的背景图片是完整的,如果元素有空白区域,没关系(显示完整图片)

背景图片的固定

background-attachment:scroll; 默认值 背景图片随着页面滚动条滚动
fixed 背景固定在可视区域内,不随着滚动条滚动,但是,只会在自己的元素中显示
如果取值fixed,那么background-position:就是相对于body定位,不是相对于原来的元素

背景的简写方式 background:color img repeat attachment position; 简写方式当中没有background-size
最简方式:background:color /url;
重写样式的时候不要使用简写,不然会把其他值覆盖,要单写一个属性

渐变 gradient

多种颜色平缓变化的一种显示效果,属性是background-image
控制渐变的主要因素:色标 (一种颜色及其出现的位置) 一个渐变最少两个色标
渐变的分类 :
线性渐变(以直线的方式来填充渐变色) , background-image:linear-gradient( 方向 , 色标1 , 色标2, … ); (×gradient和括号有空格会导致样式出不来)
方向:1.关键字,写终点 to top , to right , to bottom , to left
角度: 0deg↑ , 90deg→, 180deg↓ , 270deg←,
色标: 1.颜色+位置% , 2.颜色 平均分配位置 , 3.颜色+px

径向渐变(以圆形的方式来填充渐变色) , background-image:radial-gradient(半径 at 圆心 x 圆心 y ,色标…);
注意:色标使用%表示位置,半径才有效
圆心取值:
1.关键字 x:left/center/right y:top/center/bottom
2.以px为单位的数字
3.%

重复渐变(将线性渐变和径向渐变相结合)
background-image : repeating-linear-gradient ( )
background-image : repeating-radial-gradient ( )

浏览器兼容问题
编写兼容ie8.0以下版本浏览器的行为,叫作编写 css hack
浏览器内核 -webkit- chrome/safari , -moz- firefox , -ms- IE ,-o- opera

注意:带内核写线性渐变,方向写起点不能写终点,不能加 to
background:-webkit-linear-gradient( bottom, #27b0f6,#0aa1ed);
background:-moz-linear-gradient( bottom, #27b0f6,#0aa1ed);
background:-ms-linear-gradient( bottom, #27b0f6,#0aa1ed);
background:-o-linear-gradient( bottom, #27b0f6,#0aa1ed);

文本格式化

1.字体属性
①字号大小
font-size: 以px/pt/rem/em为单位的数字
②字体的类型
font-family:
取值:pc中字体库里有的字体,如果字体有空格,建议使用""括起来
多个字体系列,使用,分隔
font-family:幼圆,黑体,“mv boli”;
③字体加粗
font-weight:normal bold lighter bolder
无单位的数字,必须是100的整倍数,不能超过1000
400—normal
700—bold
300—lighter
④字体样式
font-style:normal/italic
⑤小型大写字母
font-variant:small-caps;
⑥简写方式
font:style variant weight size family;
最简方式font:size family;

文本对齐 text-align:center / justify

text-align:left/center/right/ justify(左右都对齐);
注意 :
块级居中 margin:0 auto 让块级元素自己水平居中 写进本身
行内和行内块居中 text-align:center 让元素内部的子元素(非块级)水平居中写进父元素

行高:定义一行文本的高度 . line-height: ; . 特点: 当行高大于文本字号时,文本将在行高的垂直中间显示
用于文本与容器垂直居中,行高与容器高度值相等,把行高设置为容器高度,来实现文本相对于容器垂直居中
取值:1.以px为单位的数字 2.无单位的(整数小数都可以)数字(写n意味着行高是字数的n倍) bug:折行溢出 所以在文本有多行的情况下不建议使用行高控制垂直居中

文本线条的修饰 text-decoration:underline(下划线)/overline(上划线)/line-through(删除线)/none(去除所有线条);

首行缩进 text-indent: ; 取值以px为单位的数字

文本阴影

text-shadow:h-shadow v-shadow blur color
h-shadow: 水平方向的阴影偏移
v-shadow:垂直方向的阴影偏移
blur:阴影模糊距离
color:阴影颜色

表格的相关样式
table设置边框,只有最外一圈的边框,里面没有,要设置里的border
th/td尺寸,边框,字体,文本,内边距,外边距失效

垂直对齐方式
vertical-align: top/middle/bottom;

表格特殊表现方式
td中的数据长度少:
table设置的尺寸值大,td设置的尺寸值小,显示以table设置的为准
table设置的尺寸值小,td设置的尺寸值大,table宽度以table设置为准
table高度,以td设置为准
td中的数据长度多:
table尺寸,以数据的长度为准

边框合并

border-collapse:collapse;边框合并, 默认值separate分离
边框边距 border-spacing:; 前提需要边框是分离状态border-collapse:separate;
取值, px为单位的数字
一个值,水平和垂直距离同时设置
两个值,第一个值水平,第二个是垂直

标题位置
caption-side:top/bottom;

设置表格显示布局
table-layout:auto;表格自动布局 列的尺寸由内容决定,内容比尺寸大,按内容显示,内容比尺寸小,按尺寸显示,表格数据预先读取在内存,再一次性渲染到页面,慢,效率低 优点表格灵活 用于不确定每列大小不复杂的表格
table-layout:fixed;表格固定布局 列的尺寸就以设置的尺寸为准

1.什么是定位
设置页面中元素的位置
2.分类
1.普通流定位
2.浮动定位
3.相对定位
4.绝对定位
5.固定定位

3.普通流定位(默认文档流定位)
1.每个元素在页面中都占自己的空间
2.每个元素都是从父元素的左上角开始显示
3.块级元素单独成行,从上往下逐个排列
4.行内元素和行内块,与其他行内元素和行内块共用一行
从左往右往右逐个显示,一行放不下自动换行

浮动

4.浮动定位
让块级元素横向显示
float:
取值 1.left 左浮动,让元素浮动后,
停靠父元素的左边,或者挨着其它已浮动元素
2.right 右浮动,让元素浮动后,
停靠父元素的右边,或者挨着其它已浮动元素
3.none 默认缺省值,不做任何浮动,就是默认文档流
浮动的特点
1.元素一旦浮动,脱离文档流(不占页面空间,后面元素上前补位)
脱离文档流

• 元素不占据页面空间,后面元素上前补位
• 元素一旦脱离文档流,元素就变为块级元素
• 元素脱离文档流,元素没有设置宽度,元素的宽度靠内容撑开

2.浮动元素停靠父元素的左边或者右边,或者是其它已浮动元素的边缘
3.父元素横向显示不下所有浮动的子元素时,显示不下的元素会自动换行
4.浮动元素主要解决,多个块级元素在同一行显示的问题
5.浮动引发特殊情况
①元素一旦浮动,如果元素没有定义宽度,那么元素浮动之后的宽度将以内容为准
②元素一旦浮动,就会变成块级元素(允许设置尺寸,垂直外边距有效)
③浮动元素存在占位问题
浮动元素会在浮动的方向上占位,导致被挤下去的元素不能占用之前浮动元素浮动方向上位置
④天生不被浮动元素压着
行内元素,行内块,文本,不会被浮动元素压在下面
而是环绕着浮动元素显示
脱离文档,意味着什么
1.元素不在文档流占位置
2.后续元素上前补位
3.如果没有设置宽,宽度以内容为准
4.元素就会变成块级(设置宽高有效,上下外边距有效)

清除浮动

清除浮动(清除之前浮动元素带来的影响(不被浮动元素压着))
clear: left / right / both

高度坍塌

由于父元素没有定义高度,内部所有子元素都脱离文档流,导致父元素认为在文档流中没有子元素的高度了,所以父元素就失去了高度
解决方案:1.给父元素设置高度.弊端:很多时候,不能确定父元素高度
2.父元素也浮动.弊端:父元素浮动会影响父元素的同级元素
3.overflow:hidden/auto
4. 在父元素中,追加一个空的块级元素,设置clear:both;为了给父元素一个高度

写样式的思路
1.找元素 从外往里 从左往右 从上往下
2.写样式
①宽高,大体位置
②边框,背景
③文本所有样式
④微调

显示方式

display:none 让元素脱离文档流隐藏 / block 块级 / inline 行内 / inline-block 行内块 / table 表格(把任意元素转化为table显示方式(内容大尺寸小按内容大小))

显示效果

visibility: 默认值 visible 可见的 hidden 隐藏的

visibility:hidden和display:none的区别

※面试题:visibility:hidden和display:none的区别
CSS Display(显示) Visibility（可见性）
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
display:none脱离文档流,不占位置隐藏
visibility:hidden不脱离文档流,占着位置隐藏

透明度

opacity:0~1 0 是全透明 1 是不透明

opacity和rgba的区别

※面试题:opacity和rgba的区别
opacity 元素内部所有颜色都会跟着变透明,后代元素受影响
rgba 只改变当前的透明度 √

vertical-align 垂直对齐方式

vertical-align : top / middle / bottom ;
①用在table/th/td中使用,控制table中的内容的垂直对齐方式
vertical-align : top / middle / bottom ;
②img中使用,给图片设置垂直对齐,图片本身不动,影响的是图片前后的文本位置(行内,行内块)
vertical-align : top / middle / bottom / baseline基线(第三条线)(默认值)
项目中,经常为图片设置vertical-align,让文本不以基线对齐(图片旁边有文字时使用)

光标的设置

cursor:default 箭头
pointer 小手
crosshair +
help 帮助(问号)
text 文本
wait 等待

列表的样式

①设置列表标识项
list-style-type:disc/circle/square/none;
②标识项设置为图片
list-style-image:url(true.png);
③列表项的位置
list-style-position:inside/outside(默认值)
④简写方式
list-style:type/url position:
项目中,使用最频繁的方式 list-style:none;
⑤无序列表在项目中地位和使用方式
ul多用于布局

定位

定位—相对定位,绝对定位,固定定位
position: static 静态,默认值,文档流
relative 相对定位
absolute 绝对定位
fixed 固定定位
注意:
1.一个元素被position修饰,并且取值为relative/ absolute/ fixed
此元素被称为已定位元素
2.一个元素变成已定位元素之后,
解锁4个偏移属性
top: 离顶部多远 + ↓ - ↑
right:
bottom:
left: 离左边多远 + → - ←
①相对定位
position:relative;
相对定位不脱离文档流,对周围元素的位置没有任何影响
如果相对定位不写偏移属性或者偏移量为0,效果与没写定位一样
相对自已原来位置做偏移原来的位子不会被占着(不脱离文档流)
使用场合
①类似于margin(margin挤开,相对定位覆盖其他元素),做自身位置的微调
②作为绝对定位的祖先级已定位属性(子绝父相,此处多不写偏移属性)
偏移属性的特点: 上下冲突,以top为准 ; 左右冲突,以left为准
②绝对定位
position:absolute;
绝对定位脱离文档流
1.没有已定位的祖先级元素,相对body左上角偏移
2.相对于,离自己最近的,已定位的,祖先级元素的左上角做偏移
注意:最适合把祖先级变成已定位元素的样式,relative
③固定定位
position:fixed;
将元素固定在页面上某个位置,不会随着滚动条滚动,变化位置
一直固定在可视区域
顶部定位影响下面元素顶部不可见问题解决:下面元素设置magin-top值

堆叠顺序

z-index:无单位正整数
注意:
1.定位的堆叠和浮动的脱离文档流,不是一个体系(都压着浮动,不管是否设置z-index或设置多少,定位永远比浮动高)
2.默认,后声明的定位元素,堆叠顺序高,但是不会超过1(默认的所有小于1后写大点,随便设置堆叠顺序都比默认的高)
3.z-index只对已定位元素生效
4.堆叠顺序对父子级元素无效,子元素永远在父元素的上面