学习笔记-CSS(1)

day1

CSS注释

/* 注释内容 */

字体样式属性

font-size 字号大小

px 像素

font-family 字体

分号包裹、逗号隔开

CSS Unicode字体

字体可以为汉字、英文，也可使用汉字的Unicode编码

font-weight 字体粗细

让加粗的不加粗

可选值	备注
normal	默认值
bold	加粗
bolder	更粗
lighter	细
100~900(100整数)	400等价normal，700等价bold

font-style 字体风格

让<em>的不倾斜

可选值	备注
normal	默认值
italic	斜体

font 简写

d{
    font:font-style font-weight font-size/line-height font-family;
}

必须按照顺序；必须保留font-size和font-family

选择器

• 标签选择器

  HTML标签名作为选择器

  htmlname{}
  

• 类选择器

  class属性作为选择器

  .classname{}
  

• 多类名选择器

  html引用多个class样式

• id选择器

  id属性作为选择器

  #idname{}
  

• 通配符选择器

  *{}
  

• 伪类选择器

  :name{}
  

  • 链接伪类选择器

    <a></a>
    

    • a:link 未访问

    • a:visited 访问过

    • a:hover 鼠标移动到链接上

    • a:active 选定的链接

      不能调换顺序

  • 结构伪类选择器

    • :first-child 首个子元素
    • :last-child 最后一个子元素
    • :nth-child(n) 第n个孩子
      • n 可以为数字
      • even偶数；odd奇数
      • n 全部(0-n)；2n(0 2 4 2n)；2n+1(1 3 2n+1)
    • :nth-last-child(n) 从最后一个孩子开始数

  • 目标伪类选择器

    • :target 选定状态

外观属性

color 文本颜色

1. 预定义的颜色
2. 十六进制
3. RGB代码

line-height 行高

段落中行和行之间的距离

一般设置比字体大7 8 像素

如果需要垂直居中，设置行高为盒子高度

text-align 水平对齐方式

left/center/right

text-indent 首行缩进

建议使用em做单位，1em为一个字的宽度

text-decoration 装饰

为 none 可以取消 a 的下划线

letter-spacing 字间距

字符间的距离

word-spacing 单词间距

对英文单词有效。中文无效。

颜色半透明 css3

color: rgba(r,g,b,a) /*a 0~1 透明度*/

文字阴影 css3

text-shadow:水平位置（必） 垂直位置（必） 模糊距离 阴影颜色;

day2

书写位置

• 内部样式表

• 行内样式

• 外部样式

标签显示模式（display）***

块级元素

独占一行或多行，可以设置宽度高度，用于布局

常见的块元素有

h1~h6
p
dib
ul
ol
li
...

特点：

• 总是从新行开始

• 可以设置高高度、行高和内外边距

• 默认宽度100%

• 可以容纳内联元素和其他块元素

行内元素

不占有独立的区域，仅仅靠自身字体大小和图像尺寸来支撑结构，一般不可以设置宽高对齐等属性

span

• 和相邻行内元素共享

• 无法设置宽高，水平padding和margin可以设置，垂直无效

• 默认宽度是它本省内容宽度

• 行内元素只能放文本和其他行内元素。（a特殊）

• 链接里不能再放链接

• 只有文字才能组成段落，文字类块级标签不能再放块元素

行内块元素

img input td 可以设置宽高和对齐属性。但是不独占一行

特点：

• 和相邻行内元素在一行上，但是会有空白间隙
• 默认宽度是它本身内容的宽度
• 高宽，边距都可以设置

模式转换

设置display

块>行：inline

行>块：block

块行>行内块：inline-block

CSS复合选择器

交集

第一个为标签，第二个为class选择器，无空格

并集

任意形式的选择器，逗号隔开

后代（可以选择所有后代）

外层选择器在前面，空格隔开

子元素（只会选择儿子）

大于号连接

属性选择器

a[属性] /*包含属性*/
a[属性=值] /*属性等于值*/
a[属性^=值] /*属性为值开头*/
a[属性$=值] /*属性为值结束*/
a[属性*=值] /*属性包含值*/

伪元素选择器 css3

插入一个行内元素元素，可指定样式。

: 伪类
:: 伪元素
p::first-letter 第一个字
P::first-line 第一行
p::selection 被选择

在盒子的内部前后插入一个伪元素
div::before{
    cotent: neirong
}
div::after{
    content: neirogn
}

背景

背景颜色

background-color

背景图片

background-image

图片显示在颜色上

平铺

background-repeat

背景位置

background-position

方位名词 \ 坐标 \ 混搭

背景附着

background-attachment: fixed/scroll

简写

background: 无顺序

背景透明 css3

backgound:rgba(r,g,b,a)

背景缩放 css3

backgound-size 设置背景图片尺寸

px/百分比

尽量只改一个值，防止图片扭曲

cover 自动缩放比例，溢出部分隐藏，图片保证宽高同时满足

contain 自动缩放，保证图片完整，宽高一个满足就不再缩放

多背景 css3

每组背景逗号隔开，前面的覆盖在后面的背景上

day3

css三大特性

层叠

1. 样式冲突，就近原则
2. 样式不冲突，不会层叠

继承

text-、font-、line-、color属性会被继承

优先性

选择器有权重（特殊性公式）

标签选择器 0,0,0,1

类选择器,伪类选择器 0,0,1,0

id选择器 0,1,0,0

行内选择器 1,0,0,0

!important 无穷大

权重叠加

复合选择器权重是叠加计算的

继承为0

子元素继承为0

盒子模型

边框

border:bordre-width||border-style||border-style

border-style: none\solid\dashed\dotted\double

表格的细线边框

设置td border-style:solid border会叠加

border-collapse: collapse 相邻合并

圆角边框 css3

border-redius 值复制（左上 右上 右下 左下）

内边距

padding

边框和内容的距离

值复制

外边距

margin 与内边距一致

实现居中对齐

块级有宽度元素设置左右外边距为auto 居中

img与背景图片的区别

img标签是行内块元素，可以设置宽高，使用内外边距改变距离 占位置

背景图片使用background-size和background-position设置 不占位置

清除默认内外边距

通配符 margin:0 padding 0

行内元素只能设置左右边距

外边距合并

垂直相邻块元素外边距合并以最大的为准

嵌套元素外边距合并：

• 解决方案： 定义父元素合并边框的边框和内边距
• 添加overflow:hidden

content宽度和高度 **

空间尺寸：width/height+border+padding +margin

盒子尺寸：width/height+padding+border

! padding不影响盒子尺寸的情况：如果盒子没给定宽度高度或者块级元素继承了父元素的宽高，padding不会影响 尺寸。

day4

盒子模型 布局稳定性

width>padding>margin

1. margin会有外边距合并
2. padding会影响盒子大小
3. width没有问题

CSS3盒模型

box-sizing用于指定盒模型

content-box: 以前的盒模型 w3c推荐 padding border会撑开盒子

border-box: padding border不撑开盒子

border-box 盒子宽度就是宽度

盒子阴影

文字阴影： text-shadow 水平 垂直 模糊距离 颜色

盒子阴影 box-shandow 水平 垂直 模糊距离 影子大小 颜色 内外（inset 内、 外不写）

浮动

普通流

块级元素自上问下，独占

行内元素前后排列

浮动

开始的时候，浮动用来做文字环绕效果。

浮动飘离标准流不占位置，会遮盖标准流。只有左右浮动。

！浮动首先需要添加标准流父级元素。浮动元素总是会找到离他最近的父级元素对齐，不会超出内边距。

一个父盒子里的子盒子，如果一个浮动，其他都需要浮动才能一行对齐。

添加浮动后，会有行内块的元素特性，可以设置大小对齐

行内块：内容撑开盒子

布局

版心 width通常为960px

一列固定宽度且居中

两列左窄右宽

通栏平均分布

清除浮动

清除浮动后造成的影响

考虑孩子高度会变，父级盒子可以不给高度，这时孩子浮动，父元素内部高度为0

属性：clear

方法：

1. 额外标签法

2. 父级添加overflow属性方法

   1. overflow:hidden 触发BFC

3. 使用after伪元素清除浮动

   1. .clearfix:after{
          content:'.';
          display:block;
          height: 0;
          visibility: hidden;
          clear: both;
      }
      

4. 使用before和after双伪元素清除浮动

   1. .clearfix:before,.clearfix:after{
          content:"";
          display:table;
      }
      .clearfix:after{
          clear:both;
      }
      .clearfix{
          *zoom:1;
      }
      

Photoshop

颜色填充：

alt+delete：前景色

ctrl+delete：背景色

套索工具：

魔法棒：

ctrl+shift+i 选区反选

ctrl+d 取消选区

钢笔：

alt+右键 取消曲线

ctrl+enter 确认选取

day5

定位

边偏移

top right left bottom

定位模式

position

• static
  • 静态定位
  • 无法通过边偏移改变位置
  • 一般用来清除定位
• relative
  • 相对定位
  • 相对原来的位置左上角（忽略padding）进行移动
  • 原来的位置继续占有（标准流，相对定位不脱标）
• absolute
  • 绝对定位
    • 如果父级没有定位，相对于文档左上角（忽略padding）定位，原来的位置不再占有
    • 父级有定位，根据父亲左上角（忽略padding）定位
  • 脱离标准流，不占有位置

​ 子绝父相

• fixed
  • 固定定位
  • 父亲定位没影响，只认浏览器
  • 完全脱标
• z-index
  • 调整层叠顺序
  • 默认为0
  • 只有相对定位，绝对定位，固定定位有该属性，标准流、浮动、静态定位都没有该属性

定位模式的转换

添加绝对定位和固定定位会自动转换为行内块元素

元素的显示与隐藏

display显示

display:none 隐藏元素，不保留位置。没有删除

display:block 转换为block，显示元素

visbility隐藏

visbility:hidden 隐藏元素保留位置

visbility:visable 显示元素

overflow 溢出

visible: 默认 超出显示

hidden: 超出隐藏

scroll: 一直显示滚动条

auto: 超出 显示滚动，不超 不显示

CSS用户界面样式

鼠标样式

cursor:default pinter move text

轮廓

outline 类似边框，显示在边框外

一般将outline设为0

防止拖拽文本域textarea

resize:none

vertical-align 垂直对齐

对块级元素无效。

给图片表单加上该属性，使文本和图片、表单 对齐

baseline基线对齐

top顶线对齐

middle中线对齐

bottom底线对齐

图片和文字默认基线对齐

行内块元素会使用底线与父盒子的基线对齐

解决方法：

1. img转换为block
2. 更改img垂直对齐

文字溢出

word-break 换行

normal 默认规则

break-all 允许单词拆开分行

keep-all 只有在半角空格( )或连字符(-)换行

针对英文

white-space

normal 默认

nowrap 强制一行显示

text-overflow 文字溢出

首先强制一行内显示，再使用该属性。

clip 裁剪 不显示省略号(…)

ellipsis 裁剪超出用 省略号(…)代替

CSS精灵（sprite）技术

网页背景图处理方式

将零星的小背景图片集中在一张大图里。

使用background-position移动

字体图标

滑动门技术

背景图根据内容拉长缩短

精灵+padding

http://weixin.qq.com 导航栏效果

div>a>span

过渡

transition: 为 状态a->状态b 补充动画 与hover配合使用

property 要过渡的属性

duration 花费时间必须写单位（s）

timming-funtion 运动曲线 默认ease

linear 线性 v恒定

ease 逐渐慢下来

ease-in 加速

ease-out 减速

ease-in-out 先加速后减速

delay 何时开始 默认0

transation放在div而不是div:hover中，否则回去无过渡

多阶段变化 ‘,’ 隔开，多属性一起变化，属性填 all

2D变形 tansform

结合transation实现动画。

• translate(x,y) 平移

  • translateX(x)
  • translateY(y)

  定位盒子居中完美解决方案：

  移动距离如果是%，那么以自己的宽高为准

  left: 50%;
  top: 50%;
  transform: translate(-50%,50%);
  

• 缩放scale(x,y)

  • scaleX
  • scaleY

  scale默认值为1 scale属于[0.01,0.99]缩小，否则变大

• 旋转rotate(deg)

  • deg为度，+值顺时针，-值逆时针
  • 设置旋转中心点
    • transform-origin(x,y)
      • top|bottom|center|num
      • left|right|center|num
    • 需要设置在变化之前

• 倾斜skew(deg,deg)

3D变形 tansform

• 旋转

  • rotateX(deg)沿x轴立体旋转
  • rotatey(deg)沿y轴立体旋转
  • rotatez(deg)沿z轴立体旋转
  • backface-visiblity:hidden 正面反转隐藏

• 3D移动

  • 透视(perspective)
  • tanslateZ(z)

  perspective是眼睛到屏幕的距离

  tranlateZ是物体到屏幕的距离 Z

  z只能是px

  • tranlate3d(x,y,z)

动画 animation

简写

animation:动画名称 时间 运动曲线 何时开始 播放次数 是否反方向;
animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction

infnite 无限循环

@keyframes 动画名称{
    from|0%{
        /* transform */
    }
    ?%{
        
    }
    to|100%{
        /* transform */
    }
}

伸缩布局

父元素指定display为flex

份额 flex

使用flex属性为子元素主轴指定份额。自动缩放。

为父元素设置min-width指定最小宽度，不会过度缩放

max-width指定最大宽度，不会过度拉伸

会对子元素有flex属性的子盒子配额分配固定宽度剩余的宽度

排列方向 flex-direction

设置主轴方向，默认 row 行向，column 列向

row|column - reverse 反转

主轴对齐方式 justify-content

flex-start 从主轴开头开始

flex-end 从主轴末端，盒子顺序不变

center 主轴居中

space-between 首末贴近盒子，中间平均分配空白

space-around 添加相同的主轴方向边距

侧轴对齐方向 align-items（一行）

stretch 默认 拉伸，

子元素没有高度时，子元素高度适应父盒子高度

否则相当于顶端对齐

flex-start 顶端对齐，上对齐

flex-end 底部对齐，下对齐

center 垂直居中

换行 flex-wrap

nowrap 默认 不换行，收缩强制一行显示，

wrap 必要时换行

wrap-reverse 必要时翻转换行，不常用

多行对齐 align-content

必须为 flex-direcion:row flex-wrap:wrap 才起作用

flex-flow:flex-direction flex-wrap;

order

排列顺序，数值越小越靠前，可以为负数，默认为0