CSS

迷你二鹏
271 阅读5分钟

cascading stylesheet

一、CSS2

选择器

  • 基本选择器
    • 通配符选择器
    • 标签选择器
    • 类选择器
    • id选择器
  • 高级选择器
    • 后代选择器 div p{}
    • 交集选择器 div.box{}
    • 并集选择器 div,p{}

继承性

color font-* text-*

层叠行

权重比较

常见属性

字体

  • 颜色 color
  • 字体 font-family
  • 字号 font-size
  • 行高 line-height
  • 粗体 font-weight
  • font-style
    • normal
    • italic 假如英文字体本身有斜体，则显示斜体样式 如果没有，会替换成有斜体的字体
    • oblique 本身是字体倾斜 与文体本身无关
  • 合并 font：加粗 倾斜 字号/行高 字体

文本

  • 对齐 text-align
  • 修饰 text-decoration
    • none
    • underline
    • line-though
    • overline
  • 缩进 text-indent

盒模型

  • 宽高 width height
  • 内边距 padding
  • 边框 border
    • 三角形
    p{
	width: 0;
	height: 0;
	border: 20px solid #fff;
	border-top-color: #f00;
	border-bottom-width: 0;
 }
  • 外边距 margin

清除默认样式

<style>
		/*清空默认样式，设置初始样式*/
		*{
			margin: 0;
			padding: 0;
		}/*
		body,ul,li,p{
			margin: 0;
			padding: 0;
		}*/
		ul,ol{
			list-style: none;
		}
		body{
			color: #333;
			font-size: 14px;
			font-family: "Arial","Microsoft Yahei","SimSun";
		}
		a{
			color: #333;
			text-decoration: none;
		}

	</style>

溢出隐藏

  • overflow
    • visible 默认
    • hidden 多余隐藏
    • scroll 多余的内容会出现滚动条

上下盒子的margin塌陷 取大值

父子盒子的margin塌陷 取大值 解决：

  • 用padding取代margin
  • float

文本居中 text-align：center

块级盒子居中 margin：0 auto

浮动

  • 特性
    • 脱离标准流 不占位置 会影响标准流
    • 子盒子浮动 不会压住父盒子的padding和margin
    • 设置浮动后 元素具有行内块特性
  • 清除浮动
    • 父盒子定高
    • 最后一个浮动子盒子 clear：both
    • 父盒子 overflow：hidden，*zoom：1
    • 万能清浮动 
      clearfix:after{
content:"";
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix{*zoom:1}

a标签伪类

  • ：link
  • ：visited
  • ：hover
  • ：actived

background

  • background-color
  • background-image
  • background-repeat 平铺
  • background-position 背景图定位 水平 垂直
    • 单词表示 left/top/right/bottom
    • 像素表示法 精灵图
    • 百分比表示 盒子的宽减去图片的宽为100%
  • 综合写法 image repeat position color
  • background-attachment
    • fixed 背景图固定

定位

  • 相对定位 relative 相对于原来位置
  • 绝对定位 absolute 脱离文档流 相对于最近带有定位（相对、决定、固定任一）的父元素
  • 固定定位 fixed 相对于浏览器窗口
  • 粘性定位 sticky 相对和固定结合，例如滚动一定距离，元素固定
  • z-index 调整层级顺序，只对定位元素有效

二、CSS3

浏览器的私有前缀：

Gecko内核     CSS前缀为"-moz-"      如火狐浏览器
WebKit内核    CSS前缀为"-webkit-"   如Chrome、Safari
Presto内核    CSS前缀为"-o-"        如 Opera(欧朋)
Trident内核   CSS前缀为"-ms-"       如IE

选择器

  • 属性选择器 
    旧：
E[attr]
E[attr="val"]
新增的属性选择器
E[attr^="val"]  选择拥有attr属性且属性值为val开头的E元素
E[attr$="val"]  选择拥有attr属性且属性值以val结束的E元素
E[attr*="val"]  选择拥有attr属性且属性值中包含val的E元素
  • 结构伪类选择器 
    强调结构：
E:first-child{}  选择父元素中的第一个子元素E
E:last-child{}  选择父元素中的最后一个子元素E
E:nth-child(n){} 选择父元素中的第n个子元素E，n的取值：
    数字
    表达式  2n  2n+1  3n
    关键词  even（偶数）  odd(奇数)
E:nth-last-child(n){} 选择父元素中倒数第n个子元素E

先强调类型：
E:nth-of-type(n){} 选择父元素中类型为E的【正数第n个】子元素
    数字
    表达式  2n  2n+1  3n
    关键词  even（偶数）  odd(奇数)
E:nth-last-of-type(n){} 选择父元素中【倒数第n个】子元素E
  • 状态伪类选择器 
        input[type=text]:enabled{
        color: #f00;
    }
    input[type=text]:disabled{
        color: #ff0;
    }
    input[type=radio]:checked{
        background: #f0f;
    }

边框选择器

  • border-radius 左上 右上 右下 左下
  • box-shadow:
    • x轴偏移 y轴偏移 模糊值 增强值 颜色 inset(内阴影)
    • 正值：向右 向下

背景属性

  • background-size 规定背景图片的尺寸
    • length
    • percentage
    • cover
    • contain
  • background-origin 规定背景图片的定位区域
    • content-box 背景图片的摆放以content区域为参考
    • padding-box 背景图片的摆放以padding区域为参考
    • border-box 背景图片的摆放以border区域为参考
  • background-clip 背景图裁剪：规定背景的绘制区域
    • border-box 背景延伸至边框外沿（但是在边框下层）。
    • padding-box 背景延伸至内边距（padding）外沿。不会绘制到边框处。
    • content-box 背景被裁剪至内容区（content box）外沿。
    • text 背景被裁剪成文字的前景色。

渐变

  • background：linear-gradient
  • background：radial-gradient

用户界面

  • resize
    • both 水平垂直都可以
    • horizontal 水平可以
    • vertical 垂直可以
  • box-sizing
    • content-box 标准盒模型 默认
    • border-box 怪异盒模型 盒子的width值包括左右padding+左右border+内容

多列布局

  • column-width
  • column-rule
  • column-gap
  • column-count

弹性盒

display:flex/inline-flex
主轴方向 flex-direction:row/row-reverse/column/column-reverse
主轴对齐方式 justify-cotent:flex-start/flex-end/center/space-around/space-between
侧轴方向对齐方式 align-items:stretch拉伸/baseline基线对齐
换行 flex-wrap
项目排列次序 order 默认0
flex-grow 默认宽度之和小于容器时生效，放大比例，剩余空间占比
flex-shrink 默认宽度之和大于容器时生效，缩小比例，剩余空间占比

transition

transition-property 过渡属性
transition-duration 过渡持续时间
transiton-delay 过渡延迟时间
transition-timing-function 时间函数
    linear匀速 ease缓动 ease-in加速 ease-out减速 ease-in-out 先加速后减速
    多组值用逗号隔开

transform-2d

translate 位移
rotate 旋转
scale 放大
skew 倾斜
transform-origin 变形原点

transform-3d

transform-style
    flat 2d
    preserve-3d 3d
perspective 视距 通常500px～800px

animation

@keyframe 定义帧动画
animation-name @keyframe定义的动画名字
animation-duration 动画持续时间
animation-timing-function 时间函数
animation-delay 动画延迟时间
animation-iteration-count 执行次数 infinite
animation-direction 是否反向播放
animation-fill-mode 在执行之前和之后如何将样式应用于其目标
avatar
文章
阅读
粉丝