Css 笔记

 

1. box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;

说明
h-shadow必需的。水平阴影的位置。允许负值
v-shadow必需的。垂直阴影的位置。允许负值
blur可选。模糊距离
spread可选。阴影的大小
color可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset可选。从外层的阴影(开始时)改变阴影内侧阴影

 

2. 引入外部样式

rel 属性规定当前文档与被链接文档之间的关系。在上面面的例子中,rel 属性指示被链接的文档是一个样式表

 

3. 一个页面模板

 

 

 

4. margin

属性定义及使用说明

margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。

实例:

5. white-space

white-space属性指定元素内的空白怎样处理。

属性值

描述
normal默认。空白会被浏览器忽略。
pre空白会被浏览器保留。其行为方式类似 HTML 中的
 标签。
nowrap文本不会换行,文本会在在同一行上继续,直到遇到
标签为止。
pre-wrap保留空白符序列,但是正常地进行换行。
pre-line合并空白符序列,但是保留换行符。
inherit规定应该从父元素继承 white-space 属性的值。

 

6. text-transform

text-transform 属性控制文本的大小写。

属性值

描述
none默认。定义带有小写字母和大写字母的标准的文本。
capitalize文本中的每个单词以大写字母开头。
uppercase定义仅有大写字母。
lowercase定义无大写字母,仅有小写字母。
inherit规定应该从父元素继承 text-transform 属性的值。

 

7. text-decoration

text-decoration 属性规定添加到文本的修饰,下划线、上划线、删除线等。

 

属性值

描述
none默认。定义标准的文本。
underline定义文本下的一条线。
overline定义文本上的一条线。
line-through定义穿过文本下的一条线。
blink定义闪烁的文本。
inherit规定应该从父元素继承 text-decoration 属性的值。

 

8. text-transform

 

 

9. :after 选择器

定义和用法

:after 选择器在被选元素的内容后面插入内容。

请使用 content 属性来指定要插入的内容。

 

10. 浮动

加了浮动之后的元素,会具有很多特性

  1. 浮动元素会脱离标准流

    • 脱离标准普通流的控制(浮)移动到指定位置(动),俗称脱标
    • 浮动的盒子不再保留原先的位置
  2. 浮动元素会一行内显示并且元素顶部对齐

  3. 浮动的元素会具有行内块元素的特性

    任何元素都可以浮动,不管原先是什么模式的元素,添加浮动之后具有行内块元素相似特性

    • 如果块级元素没有设置宽度,默认宽度和父级一样宽,但是添加浮动之后,他的大小根据内容来决定
    • 浮动的盒子中间是没有缝隙的,是紧挨着的
    • 行内元素同理

11. 定位

  1. 浮动可以让多个块级盒子一行没有缝隙显示,经常用于横向排列盒子

  2. 定位则是可以让盒子自由地在某个盒子内移动位置或者固定屏幕某个位置,并且可以压住其他盒子

  3. 相对定位(relative)是元素在移动位置的时候,是相对于它原来的位置来说的(自恋型)

    • 移动位置的时候参照点是自己原来的位置
    • 原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式来对待它。(不脱标)
  4. 绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的(拼爹型)

    • 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准(document文档)

让父级元素相对定位,就可以是让级元素不仅有定位还可以不脱离标准流。这样子元素使用绝对定位时就可以以父级元素为准而不是以浏览器为准

 

12. !importance

在非IE浏览器中 后面加上!important 的样式优先级更高,而ie浏览器不识别!important

 

 

13. white-space

规定段落中的文本不进行(xing)换行(hang)操作

 

14. visibility

定义和用法

visibility 属性规定元素是否可见。

提示:即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。

 

15. z-index

属性定义及使用说明

z-index 属性指定一个元素的堆叠顺序。

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

也就是说,z-index 的值大的会压在小的上面

注意: z-index 进行定位元素(position:absolute, position:relative, or position:fixed)

 

16. transition-timing-function 属性

属性定义及使用说明

transition-timing-function属性指定切换效果的速度。

此属性允许一个过渡效果,以改变其持续时间的速度。

 

语法

 

描述
linear规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

 

17. flex-wrap 属性

flex-wrap 属性规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。

注意:如果元素不是弹性盒对象的元素,则 flex-wrap 属性不起作用。

也就是必要的时候可以自动换行

 

###18. text-indent: 2em

首行缩进2字符

 

18. justify-content 属性

justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

提示:使用 align-content 属性对齐交叉轴上的各项(垂直)。

属性值

描述测试
flex-start默认值。项目位于容器的开头。测试 »
flex-end项目位于容器的结尾。测试 »
center项目位于容器的中心。测试 »
space-between项目位于各行之间留有空白的容器内。测试 »
space-around项目位于各行之前、之间、之后都留有空白的容器内。测试 »
initial设置该属性为它的默认值。请参阅 initial测试 »
inherit从父元素继承该属性。请参阅 inherit 

 

19. linear-gradient() 函数

定义与用法

linear-gradient() 函数用于创建一个线性渐变的 "图像"。

为了创建一个线性渐变,你需要设置一个起始点和一个方向(指定为一个角度)的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡,并且你必须指定至少两种,当然也会可以指定更多的颜色去创建更复杂的渐变效果。

css语法

默认方向从上到下

css做一个渐变图片背景