前端的那些事之css篇

摘要: 前端的那些事之css篇

css部分

元素的显示方式：

1、块级元素:

display(显示方式):block；

特点：独占一行； 可以设置宽高； 默认宽度一整行

所属标签：div,p,h1,ul,li,ol,dl

2、行内元素：

特点：可以多个标签放在同一行，无法设置宽高；大小有内容决定。

display(显示方式):inline;

所属标签：span,b,u,i,s,ins,del,strong,em

3、行内块级元素：

特点：可以多个标签放在同一行，并且可以标签设置宽高。

display(显示方式):inline-block;

所属元素：a，img

Css的三大特性

继承性

什么样的属性才可以继承呢？:凡是以line-,text-,font- 开头的属性都可以继承。

注意：a标签不继承color，text-decoration：none

h系列，不继承font-weight

优先级：！important>Id>类>标签>通配符>继承>浏览器默认

注意：！Important属性是不能继承的

基础样式

- 前景
- color/*文字颜色*/
- font-size/*文字尺寸*/
- font-weight/*文字重量normal bold bolder lights*/
- font-family/*文字字体*/
- font-style/*文字样式*/
- 背景
- background-color/*背景颜色*/
- background-image/*背景图片*/
- background-repeat/*背景图片平铺的方式默认repeat|no-repeat|repeat-x|repeat-y*/
- background-position/*背景图片从什么地方开始绘制xy轴像素、相对于画布的百分比,常量*/
- background-size/*背景图片尺寸（以当前画布的大小为参考点）*/

显示方式

height/高度/

width/宽度/

text-align/文本水平对齐方式，left|center|right/

line-height/文本垂直对齐方式，单行文本把它设置为height一样的值/

cursor/光标样式pointer|ew-resize/;

display/显示的方式block|inline|inline-block|none/

盒子模型

content：width和height设置

padding：内边距

border：边框

margin：外边距

盒子的大小不是取决于width和height这两个属性，这两个属性只是设置盒子内容的宽高

盒子的总大小取决于内容的宽高+内边距（padding）+边框（border）

定位

- static 静态的 default :static默认值，盒子不能移动
- relative 相对的
- relative相对定位是相对于static的时候的定点来移动
- 通过top和left属性来设置
- position:absolute//绝对定位
-  1.0如果这个元素没有父元素，那么将来trbl是相对于body来定位的
-  2.0如果绝对定位的元素有父元素，但是父元素没有定位，那么这个时候trbl还是相对于body来定位。
-  3.0如果绝对定位的元素有父元素，而且父元素有定位（非static），那么这个绝对定位的元素偏移是以自己的父元素为基础。
-  4.0绝对定位之后的元素在页面不会占据位置（绝对定位以后的元素会脱离标准流）。
- 子元素使用绝对定位，父元素使用相对定位。

fixed：固定:position:fixed。
- 特点：1.不管页面有多大，trbl永远是相对于浏览器的边框来的。
- 2 固定定位的元素也脱离了标准流（不在页面上占据位置）

漂浮着的position盒子都能够使用top、left、bottom、right

z-index可以设置漂
3ff0
浮的position盒子的层级，默认值是0，值越大越在上面

:hover 悬停伪类 当鼠标悬停在上面的时候就触发

text-indent属性设置文本首行缩进

list-style属性用来设置列表的前缀（none就没有了）

溢出：

overflow 当盒子里面的内容溢出当前盒子的时候，如何显示

visible|scroll|auto|hidden

visible，当内容溢出的时候，显示溢出的内容

hidden，当内容溢出的时候，隐藏溢出的内容

white-space: nowrap;/里面的文本内容不换行/

vertical-align: middle;/设置右边低盒子相对于旁边高盒子的水平对齐方式/

opacity:0;/盒子的透明度/