CSS学习笔记

TIPS

CSS学习笔记

一个很好的学习CSS网站：CSS参考手册 (opens new window)

CSS样式

1. 内部样式表

   <style type="text/css">
   /* 最好写在head之间 */
   </style>
   

2. 内联样式

   <!-- <标签 style="属性: 属性值;属性: 属性值;"></标签> -->
   <div style="color: red;border: 1px dashed black" >内联样式表</div>
   

3. 外部样式表

   <!-- 写在head之间 -->
   <link rel="stylesheet" type="text/css" href="文件路径" />
   
   <!-- 或者使用 @import 可以写在 stylel, js, scss, less 里面-->
   <style>
     @import url("style.css");
   </style>
   

TIPS

优先级与权重

内联样式表的优先级最高，内部样式表和外部样式表的优先级与书写顺序有关（后写或后引入的优先级高，即离得最近的优先级高）

选择器	权重
!important	Infinity
行内样式	1000
id	100
class, 属性选择器, 伪类	10
标签选择器, 伪元素	1
通配符 *	0

选择符

/* 群组选择符 */
选择符1,
选择符2,
选择符3 {
  属性: 属性值;
}

/* 包含选择符 */
选择符1 选择符2 {
  属性: 属性值;
}

/* 伪类选择符 */
/* a标签 */
/* a:hover 必须位于 a:link 和 a:visited 之后, a:active 必须位于 a:hover 之后 */
/* 访问前 */
a:link {}
/* 已访问 */
a:visited {}
/* 鼠标悬停 */
a:hover {}
/* 当前被点击 */
a:active {}

选择符	名称	描述
*	通配选择符	所有元素对象
E	类型选择符	以文档语言对象类型作为选择符
E#myid	id选择符	唯一标识符id属性等于myid的E对象
E.myclass	class选择符	class属性包含myclass的E对象
E F	包含选择符	选择所有被E元素包含的F元素
E>F	子选择符	选择所有作为E元素的子元素F
E+F	相邻选择符	选择紧贴在E元素之后F元素
E~F	兄弟选择符	选择E元素所有兄弟元素F，CSS3新增

文本属性

/* 字体, 中文和带空格的英文时需要加双引号, 单词不需要 */
{ font-family: 字体1;字体2;字体3; }
/* 文字大小, 1em为当前值大小 */
{ font-size: 数值; }
/* 颜色 */
{ color: 颜色值 }
/* 字体加粗 */
{ font-weight: bolder/bold/normal/100~900; }
/* 字体倾斜 */
{ font-style: italic/oblique/normal; }
/* 水平对齐 */
{ text-align: left/right/center/justify(两端对齐); }
/* 行高, 高度等于行高垂直居中对齐 */
{ line-height: normal/数值; }
/* 文本修饰 */
{ text-decoration: none/underline/overline/line-through; }
/* 首行缩进, 只对第一行起作用 */
{ text-indent:数值; }

列表属性

{
  /* 定义列表符号样式 */
  list-style-type: disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号);
  /* 使用图片作为列表符号 */
  list-style-image: url(图片的路径);
  /* 定义列表符号的位置 */
  list-style-position: outside(外边)inside(里边);
  /* 去掉列表样式 */
  list-style: none;
}

背景属性

{
  /* 背景图片的设置 */
  background-image: url(图片的路径);
  /* 背景颜色 */
  background-color: 颜色值;
  /* 背景图片的平铺属性 */
  background-repeat: no-repeat/repeat/repeat-x/repeat-y;
  /* 背景图片的位置属性
  值1:水平方向上的对齐方式(left/center/right)或值
  值2:垂直方向上的对齐方式(top/center/bottom)或值
  当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置 */
  background-position: 值1 值2;
  /* 背景属性的缩写
  background: 属性值1 属性值2 属性值3; */
  background: #背景色 url(图片的路径) no-repeat center top;
}

浮动属性

{
  float: left/right/none;
  clear: none/both/left/right;
}

/* 解决高度塌陷 */
{
  overflow: hidden;
}
/* 或者 */
{
  clear: both;
  height: 0;
  overflow: hidden(或font-size:0;)
}

盒模型与文本溢出

CSS盒子组成：content(内容)，padding(填充)，border(边框)，margin(边界)

W3C盒子模型(标准盒子模型)：box-sizing: content-box

padding和border不被包含在定义的width和height之内，对象的实际宽度等于设置的width值和border，padding之和，即:

Element width = width + border + padding

IE盒子模型(怪异盒子模型)：box-sizing: border-box

padding和border被包含在定义的width和height之内，对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即:

Element width = width

---

border

border: 边框宽度 边框风格 边框颜色

例如：
{
  border: 5px solid #f00;
}
/*
边框宽度: border-width;
边框颜色: border-color;
边框样式: border-style: solid(实线)/dashed(虚线)/otted(点划线)/double(双线);
可单独设置一方向边框, 如:
底边框: border-bottom: 边框宽度 边框风格 边框颜色(none);
左边框: border-left;
右边框: border-right;
上边框: border-top;
*/

---

padding

{
  padding: 10px 20px 30px 40px;
}
/*
四个值: 上 右 下 左;
三个值: 上 左右 下;
二个值: 上下  左右;
一个值: 四个方向;
可单独设置一方向填充, 如:
*/
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

TIPS

padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减去添加后的padding属性

前提是 标准盒模型

---

margin

{
  margin: 10px 20px 30px 40px;
}
/*
四个值: 上右下左;
三个值: 上 左右 下;
二个值: 上下 左右;
一个值: 四个方向;
*/
/* 在浏览器中横向居中*/
{
  margin: 0 auto;
}
/* 可单独设置一方向边界, 如: */
margin-top: 10px;

TIPS

相邻兄弟元素在垂直方向上的margin值会出现融合的情况，融合后会取两个元素里较大的值作为融合后的值

当父级子级元素都设置了margin时，子级的margin值会传递到父级

margin传递解决办法：给父级使用overflow: hidden属性

---

overflow

定义溢出元素内容区的内容会如何处理

{
  overflow: visible/hidden/scroll/auto/inherit;
}
/*
visible: 默认值, 内容不会被修剪, 会出现在元素框之外;
hidden: 内容会被修剪, 并且其余内容是不可见的;
scroll: 内容会被修剪, 但是浏览器会显示滚动条, 以便查看其余的内容;
auto: 如果内容被修剪, 则浏览器会显示滚动条, 以便查看其他的内容;
inherit: 规定应该从父元素继承oveflow属性的值
*/

white-space

设置如何处理元素内的空白

{
  white-space:normal/pre/nowrap/pre-wrap/pre-line/inherit;
}
/*
normal: 默认值, 空白会被浏览器忽略;
pre: 空白会被浏览器保留;
nowrap: 文本不会换行, 文本会在在同一行上继续, 直到遇到 <br> 标签为止;
pre-wrap: 保留空白符序列, 但是正常地进行换行;
pre-line: 合并空白符序列, 但是保留换行符;
inherit: 规定应该从父元素继承white-space属性的值
*/

text-overflow

规定当文本溢出包含元素时发生的事情

{
  text-overflow: clip/ellipsis;
}
/*
clip: 不显示省略号, 而是简单的裁切;
ellipsis: 当对象内文本溢出时, 显示省略标记;
*/
/*
说明: 要实现溢出时产生省略号的效果还需定义:
1.容器宽度: width: value;(px, %, 都可以)
2.强制文本在一行内显示: white-space: nowrap,
3.溢出内容为隐藏: overflow: hidden,
4.溢出文本显示省略号: text-overflow: ellipsis;
*/

---

• 块状元素：在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，常用的块状元素包括

  div，dl，dt，dd，ol，ul，fieldset，h1-h6，p，form，hr，iframe，colgroup，col，table，tr，td等

• 内联元素(行内元素 inline element)：常见的内联元素如：a，span，i，em，strong，b等

• 可变元素：需要根据上下文关系确定该元素是块元素或者内联元素

  • applet - java applet
  • button - 按钮
  • del - 删除文本
  • iframe - inline frame
  • ins - 插入的文本
  • map - 图片区块(map)
  • object - object对象
  • script - 客户端脚本

display

元素类型的转换，用于定义建立布局时元素生成的显示框类型

属性值：none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-colume-group|table-column|table-cell|table-caption|inherit

• block
  • 类似在元素后面添加换行符，也就是说其他元素不能在其后面并列显示
  • 不设置宽度时，宽度撑满一行，独占一行，支持宽高
  • 当元素设置了float属性后，就相当于给该元素加了disp]ay: block;属性
• inline
  • 在元素后面删除换行符，多个元素可以在一行内并列显示
  • 内容撑开宽度，非独占一行，不支持宽高，代码换行被解析成空格
• inline-block
  • 元素的内容以块状显示，行内的其他元素显示在同一行
  • 不设置宽度时，内容撑开宽度，非独占一行，支持宽高，代码换行被解析成空格
• none：此元素不会被显示，隐藏元素并脱离文档流
• list-item：将元素转换成列表li的默认类型
  • 不设置宽度时，宽度撑满一行，独占一行，支持宽高

TIPS

大部分元素display属性值默认为block，其中列表的默认值为list-item

大部分内联元素的display属性值默认为inline，其中img，input，默认为inline-block

定位与锚点

position

定义建立元素布局所用的定位机制

{
  position: static/absolute/relative/fixed;
}
/*
static: 默认值, 没有定位, 元素出现在正常的流中(忽略top, bottom, left, right 或者 z-index 声明)
absolute: 生成绝对定位的元素, 相对于static定位以外的第一个父元素进行定位,
元素的位置通过 left, top, right 以及 bottom 属性进行规定
relative: 生成相对定位的元素, 相对于其正常位置进行定位
fixed: 生成绝对定位的元素, 相对于浏览器窗口进行定位, 位置通过当 left, top, right 以及 bottom 属性进行规定
*/

z-index

检索或设置对象的层叠顺序

{
  z-index: auto/number;
}
/*
auto: 默认值, 遵从其父对象
number: 无单位的整数值, 可为负数;较大number值的对象会覆盖在较小number值的对象之上,
如两个绝对定位对象的此属性具有同样的number值, 那么将依据它们在HTML文档中声明的顺序层叠
此属性仅仅作用于 position 属性值为 relative 或 absolute 的对象
*/

设置锚点链接

1. 给元素定义命名锚记名<标记 id="命名锚记名"></标记>
2. 命名锚记连接<a href="#命名锚记名"></a>

宽度自适应

元素宽度设置为100%(块元素宽度默认为100%)

元素具备最小高度的自适应：min-height属性：最小高度

说明：IE6浏览器不识别该属性，_height属性在IE6里就类似min-height作用

• hackl:min-height:value;_height:value;

• hack2:min-height:value;height:auto!important;height:value

• min-height(最小高度)

• max-height(最大高度)

• min-width(最小宽度)

• max-width(最大宽度)

自适应元素高度

父元素：height: value;

需要自适应父元素高度的子元素：height: 100%;

height: auto，是指根据块内内容自动调节高度

height: 100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度

---

IE6常见CSS解析Bug及hack

1. 图片间隙

   • div中的图片间隙（该bug出现在IE6及更低版本中）
   • 描述：在div中插入图片时，图片会将div下方撑大三像素
   • hack1：将</div>与<img>写在一行上;（失效了）
   • hack2：将<img>转为块状元素，给<img>添加声明：display: block;

2. 双倍浮向（双倍边距）

   • 描述：当IE6及更低版本浏览器在解析浮动元素时，会错误地把浮向边界加倍显示
   • hack：给浮动元素添加声明：display: inline;

3. 默认高度（IE6）

   • 描述：在IE6及以下版本中，部分块元素拥有默认高度（低于18px高度）
   • hackl：给元素添加声明：font-size: 0;
   • hack2：给元素添加声明：overflow: hidden;

4. 表单元素行高不一致（IE，MOZ，C，O，S）

   • 描述：表单元素行高对齐方式不一致
   • hack：给表单元素添加声明：float: left;

5. 按钮元素默认大小不一

   • 描述：各浏览器中按钮元素大小不一致
   • hack1：统一大小/（用a标记模拟）
   • hack2：在input上写按钮的样式，一定要把input的边框去掉
   • hack3：如果这个按钮是一个图片，直接把图片作为按钮的背景图即可

6. 鼠标指针bug

   • 描述：cursor属性的hand属性值只有IE浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明
   • hack：如统一某元素鼠标指针形状为手型，应添加声明：cursor: pointer;

7. 透明属性

   • IE浏览器写法：filter: alpha(opacity=value);取值范围1-100
   • 兼容其他浏览器写法：opacity: value;(value的取值范围0-1，0.1，0.2，0.3-0.9)

8. 下划线属性过滤器

   • 当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，但是在IE6及更低版本浏览器中会继续解析这个规则
   • 语法：选择符{_属性: 属性值;}

9. !important关键字过滤器

   • 它表示所附加的声明具有最高优先级的意思，但由于IE6及更低版本不能识别它，我们可以利用IE6的这个Bug作为过滤器来兼容IE6和其它标准浏览器
   • 语法: 选择符{属性: 属性值!important;}

10. *属性过滤器

    • 当在一个属性前面增加了*后，该属性只能被IE7浏览器识别，其它浏览器忽略该属性的作用
    • 语法: 选择符{*属性: 属性值;}

主流浏览器及内核

IE	Firefox	Chrome	Safari	Opera
Trident	Gecko	Webkit/blink	Webkit	Presto

CSS3

浏览器兼容

浏览器	前缀
chrome/Safari	-webkit-
IE	-ms-
Opera	-o-
Firefox	-moz-

自动补齐css3兼容

1. 后处理器

   • post-processor
   • autoprefixer插件

2. 预处理器

   • pre-processor
   • less/sass
   • cssNext插件

选择器

1. 关系选择器：见上选择符

2. 属性选择器

   选择符	描述
   E[attr ~="val"]	选择具有独立属性val的dom
   E[attr |="val"]	选择以属性以val开头或val-的dom
   E[attr ^="val"]	选择以 val开头的
   E[attr $="val"]	选择以 val结尾的
   E[attr *="val"]	选择存在val的

3. 伪元素选择器

   选择符	描述
   E::placeholder	控制表单输入的样式
   E::selection	改变被选中的文字样式(color, background-color, text-shadow)

4. 伪类选择器 (都要先把要选择的元素先选出来)

   • E:not(s) 不是什么的元素
   • :root 根标签选择
   • E:target 改变被锚点选中的

   考虑除E元素以外的影响:

   • E:first-chiId
   • E:last-child
   • E:only-child 只有一个子元素的
   • E:nth-child(n) 第n个子元素
   • E:nth-last-child(n) 倒着查第n个

   不考虑E以外的影响 (只查E类型的):

   • E:first-of-type
   • E:last-of-type
   • E:only-of-type
   • E:nth-of-type(n)
   • E:nth-of-last-type(n)
   • E:empty 没有节点的除注释外
   • E:checked操作复选框选中后的样式
   • E:enabled能用的input
   • E:disabled不能用的input
   • E:read-only只读的
   • E:read-write只写的

居中

{
  position: absolute;
  left: calc(50% - width/2);
  top: calc(50% - height/2);
}

border-radius

被一个带有水平和垂直半径的圆切割

• 四个：左上，右上，右下，左下
• 两个值：左上右下，右上左下
• 三个值：左上，右上左下，右下

box-shadow

• 默认是外阴影outset
• 五个属性值：水平偏移 垂直偏移 高斯模糊(基于边框向两侧同时模糊) 增加阴影大小(四个方向增加同样大小) 颜色
• 内阴影box-shadow: inset
• 多个阴影先设置的在上面
• 阴影在文字的下面，在背景颜色的上面

border-image

• border-image: source slice repeat
• border-image-source，边框图片的地址，支持渐变色
• border-image-slice，可添上下左右四个值和fill（把内容区也填充）
• border-image-width，设置border里面可以显示图片的大小，默认值1倍
• border-image-outset，往外延伸
• border-image-repeat （也可添两个参数表示水平和垂直方向），（默认stretch拉伸，round自动平铺多个拉伸平铺压缩，repeat平铺，space使用空格拉伸填充平铺）

按照上右下左的顺序切割相应的大小，除9之外放入边框

background-image

• background-image：多url，一个容器里放多张背景图片
• background-origin 设置背景图片从哪里开始渲染（border-box，padding-box（默认值），content-box）（background-position会相对于origin定位）
• background-clip 设置背景图片在哪里结束渲染（border-box（默认值），padding-box，content-box，text用文字来截取背景图片，只有webkit内核能用，配合text-fill-color使用）
• background-attachment（scroll相对于容器定位，拉滚动条不会影响，local相对于内容区定位，滚动条会影响，fixed相对于可视区容器定位）
• background-size（cover一张图片不改变原始比例填充满一个容器，一条边等于容器，另一条大于等于容器，contain在不改变原有图片的比例下，让容器包含一张完整的图片，一条边等于容器，另一条小于等于容器）
• background-repeat 平铺，css3新值：round压缩平铺拉伸，space用空格填充平铺

linear-gradient

linear-gradient(to right, red 20px, green 60px)，表示向右从20到60是红到绿的渐变

radial-gradient

放射性渐变，从圆心点向外扩散

radial-gradient(ellipse farthest-corner at 50px 50px, red, green)，表示起点在50px 50px以椭圆的形式扩散到最远的角

farthest-corner最远或最近的角或边，farthest-side，closest-corner，closest-side

currentColor中转颜色，在没有设置border-color的情况下等于color的颜色

{
  text-shadow: x y blur(模糊值) color
  /* 描边 */
  -webkit-text-stroke: 1px red;
}

引入外部字体包

@font-face{
  font-family: 'abc';
  src:url();
}

操作换行：write-space，word-break

多列

• column-width 每列宽度
• column-count 设置多少列
• column-grap 每列中间的间隙
• column-rule 列与列之间的边框
• column-span 贯穿这个文档，会上下截断

溢出处理: overflow (-x/-y如果某一个设置为了非visible的值，另一个变成auto): visible不处理 | hidden | scroll | auto按需出滚动条 | clip

resize拖拽拉伸: both | horizontal | vertical (必须有overflow: hidden)

弹性布局flex

设置在父级上的: display: flex/inline-flex

• 设置主轴 flex-direction: row → | row-reverse ← | column ↓ | column-reverse ↑
• 换行 flex-wrap: nowrap | wrap | wrap-reverse倒着换行
• 基于主轴对齐方式 justify-content: flex-start | flex-end | center | space-between 平均散开| space-around 平均散开, 与边界也有距离, 大小为两个元素间距离的一半
• 基于交叉轴对齐方式 align-items: flex-start | flex-end | center | baseline基于里面的文字对齐 | stretch如果没设置高度, 自动撑开到容器的高度
• 基于交叉轴对齐方式 (只能作用于多行)align-content : flex-start | flex-end | center | space-between | space-around | stretch

设置在子级上的:

• order: 默认值0, 谁小排在前面
• align-self: 设置自己在交叉轴方向上的排列方式, 优先级高于align-items, 低于align-content, auto (看父级的align-items, 没有就为stretch) | flex-start | flex-end | center | baseline | stretch

flex

• 伸: flex-grow: 如果容器主轴方向还剩余空间, 就会按照设置的比例来分配并填满空间, 默认是0, 保持原有大小

• 缩: flex-shrink: 首先算一个加权值 (加权值求的是每个内容区的宽度), 每个子级内容区宽度乘以比例值, 然后以子级内容区宽度和比例值的乘积在加权值中所占比例来缩小 (默认值1, 默认压缩)如果是不换行的英文撑开了容器, 则不参与压缩

• flex-basis: 默认值auto, 如果没有width值或者大于width值, flex-basis的值就是元素的最小宽度, 内容会撑开, 如果width比basis值大, 会覆盖width值, flex-basis是元素宽度的最小值, 而width是最大值

transition 动画过渡

• transition-property: 需要过渡的属性, 一般填al
• transition-duration: 过渡动画的时间, 例如1s
• transition-timing-function: 过渡状态 (默认平滑过渡ease, 也可以是三次贝塞尔曲线cubic-bezier (0,0,1,1)
• transition-delay: 延迟过渡 例如 transition: width 1s linear 2s

animation连续动画

关键帧容器: @keyframes name{ 0%{} 25%{} ...}

调用: animation: name time cubic-bezier (作用到每一变化阶段) infinite重复运动 alternate往复运动

• steps (1, end)跳转过渡
• end保留当前帧状态, 直到动画结束
• start保留下一帧状态, 直到动画结束
• animation-iteration-count: 执行多少次
• animation-direction: 关键帧方向
• animation-play-state: 控制暂停
• animation-fill-mode: forwards设置状态为结束时的状态, backwards设置等待时为开始时的状态, both设置开始时为第一帧的状态, 结束时保留最后一帧状态

变换: transform

transform-origin: center center 变换中心 (可以以是3d的, 三个参数)

rotate旋转的时候坐标轴也跟着旋转

rotate3d (x,y,z,angle)以 (x,y,z)坐标与原点构成向量作为旋转的轴, 旋转angle的角度

伸缩scale (x, y)伸缩的是该元素所在坐标轴的刻度, 可叠加操作, 伸缩轴也会随着旋转改变, scale会保留已经伸缩的影响

scalez ()

倾斜skew (x, y)只能加角度, 坐标轴也倾斜并且拉伸

平移: translate (x, y)

translateX (), translateY (), translateZ (), translate3d()

景深: perspective, 距离眼睛的距离, 设置在父级上 (translatez如果没有, 无论远近都是一样大, 如果为正, 越近越大越远越小, 如果为负, 越近越小越远越大)

• perspective-origin: center center
• transform-style: flat/preserve-3d 指定元素内的子元素是2d还是3d
• backface-visibility: visible | hidden 是否让元素背面显示

matrix矩阵是transform选中的计算规则

matrix (1, 0, 0, 1, e, f) === translate (x, y)

$$\begin{bmatrix} 1(a) & 0(c) & e \\ 0(b) & 1(d) & f \\ 0 & 0 & 1 \end{bmatrix} * \begin{bmatrix} x \\ y \\ 1 \end{bmatrix} = \begin{bmatrix} x + e \\ y + f \\ 1 \end{bmatrix}$$

x, y相当于原始坐标, e, f相当于改变的坐标

matrix (a,0,0,d,0,0)=== scale(x,y)

响应式布局

inline-block的元素之间默认含有 font-size 的大小, 可以设置 font-size = 0 来消除

<meta name="viewport" content="width=device-width, initial-scale=1.0">

将页面大小 根据分辨率不同进行相应调节 以展示给用户大小感觉上差不多 (视口宽度等于设备宽度)

device-width电脑手机宽度, 不是浏览器宽度

width使用的是documentElement.clientWidth即viewport宽度

user-scaleable=no 用户不能缩放

媒体查询: 向不同设备提供不一样且都适合的方式

media: 类型 + 特性, 特性用括号包住

media: not .. 除了什么

引入方式:

<link rel="stylesheet" media="screen and (max-width:375px)" href="" />
<!-- 或者 内联引入不占有权重-->
<style>    @meida  (max-width:375px){...}    </style>

TIPS

max和min只是作为分界线, max表示效果起作用的范围最大到这个值, min表示效果器作用的范围的最小值是这个值

大小

• em相对于本身的font-size值 (没有就继承上面的)
• rem相对根标签HTML元素的font-size
• vw和vh: 相对于视口而言 (device-width), 分为100份, 用于移动端
• vmax和vmin: 取视口宽高中大的或小的那一边分成100份