css 小笔记【一】

元素水平垂直都居中几种方式：

1 第一种定宽高元素，水平垂直居中于窗口：

position:fixed; 

left:50%;       

top:50%;

margin-left:-width/2;   

margin-top:-height/2;

2 第二种不定宽高元素，水平垂直居中于窗口：

position:fixed;

left:0;

top:0;

bottom:0;

right:0;

margin:auto;

3 不定宽高元素，子元素在父元素中：

父元素{

position:relative;

}

子元素{

position:absolute;

left:0;

top:0;

bottom:0;

right:0;

margin:auto;

}

4 不定宽元素水平居中

一、  子元素：display：inline-block；
父元素：text-align：center；


二、  父元素设置：display：table；
margin：0 auto；

5.不定宽高元素垂直水平居中，弹性盒

Display：flex；
Justify-content：center；
Align-items：center；

6.不定宽高元素在屏幕窗口水平垂直居中

Position：fixed；
Top：50%；
Left：50%；
Transform：translate（-50%，-50%）；

7.不定宽高子元素在父元素中水平垂直居中

父元素{
	position:relative;
}
子元素{
	position:absolute;
    Top：50%；
    Left：50%；
    Transform：translateX（-50%）translateY（-50%）；
}

href和src之间的区别：

href表示超文本应用，建立当前元素和文档之间的链接（页面跳转）link  a 等

src：指向的内容会嵌入到文档当前所在的位置（嵌入进页面）

 

元素隐藏方式总结：

 1.display:none;   位置不保留
 2.visibility:hidden;    位置保留
 3.opacity：0；
 4.元素属性：transparent；如background：transparent（背景不可见）

 

Link和@import引入外部的区别：

1、  link属于标签，可以引入其他文件，@import只可以引入css

2、  Link引入的和css和页面同时加载，@import先加载页面。

3、  Link支持js改变dom。

 

单行文本省略号的设置：

width：value；

white-space：nowrap；

overflow：hidden；

text-overflow：ellipsis；

清除图片默认空隙：

img {display：block；}

img {float：xx；}

相对定位和绝对定位的区别：

1 参照物不同

2 是否会脱离文档流

使用border实现三角形：

元素{

width：0；

height：0；

border：3px  solid  transparent；

border-top-color：yellow；

}

其他

★ input submit 按钮加边框不会显示在元素外，会向内缩进

★ 去掉表单元素点击时的外边框：input {outline：none；}

★宽度100%，父元素加上padding和border后出现滚动条，给父元素加：box-sizing：border-box；

★表单元素行高不一致（无法对齐）：

一、  给表单添加vertical-align：middle；

二、  给表单元素添加float；

★元素旋转以后，xyz轴也跟着旋转，旋转前的轴已经发生了变化

★移动端布局，如果不是圣杯布局，就不要给body设置弹性盒。否则高度会被挤压

★flex:1 是项目属性，加上之后，项目原本宽高失效，项目均分父元素宽高，没有距离

★固定定位元素溢出没有滚动条，绝对定位元素溢出有滚动条

★给父元素设置弹性盒后，内联元素虽可设置宽高，但并不是真正的块元素，使用块元素属性需要给内联元素转成块

★背景图background:url(../img/photo.jpg) no-repeat  center;的居中方式图片会居中

★文本添加下划线：

text-decoration：underline；

★首行缩进：

text-indent：32px；

★文本删除线：

text-decoration：line-through；

★垂直对齐方式：

vertical-align：middle；

★使用图片作为列表符号：

list-style-image：url（图片路径）；

★改变列表符号的位置：

list-style-position：outside（外面）

Inside（里面）

★边框样式：

border-style：solid；（实线）

dashed；（虚线）

dotted；（点线）

double；（双线）

★鼠标手指：

cursor：pointer；

★五大浏览器内核：

1 IE ：trident

2 火狐：gecko

3 Safari 谷歌：webkit

4 欧朋 presto

★点击文字选中单选/复选按钮：

<input type=”radio” id=”boy” name=”a”/>

<label for=”boy”>男</label>

★合并相邻单元格边框（给table加）

border-collapse：collapse；

合并列：colspan；

合并行：rowspan；

★单元格内容水平对齐方式：

align=”left/center/right”;

单元格内容垂直对齐方式：

valign=”top/middle/bottom”;

★H5新增标签：

1 header 网页头部

2 footer 网页底部

3 section 网页区域

4 nav 网页导航

5 aside 侧边栏

6 article 一篇文章

7 mark 带有记号的文本

8 progress 进度或进程

★音频：

<audio controls  autoplay  loop>

<source src=”1.pm3” type=”audio/mp3”/>

</audio>

支持格式：mp3  ogg  wav

★视频：

<video controls width=”数值” height=“数值”autoplay controls poster=“图片路径”>

<source src=”2.mp4” type=”video/mp4”/>

</video>

★H5新增type属性

1、  type=“email”；必须含有@符，@符前后不能为空

2、  type=“url”；必须含有http://，后内容不能为空

3、  type=“number”；

Eg：<input type=”number” min=”1” max=”100” value=”1” step=”2”/>

Value默认值 step设置每次递增递减的值；

4、type=“range”；滑动条的表单

Eg：<input type=”range” value=”1” min=”0” max=”100” />

★H5新增表单属性：

1、  required 必填项，限制用户输入不能为空；

<input type=”text” required/>

2、  placeholder=“默认提示信息内容”

<input type=”text” placeholder=“请输入用户名”/>

3、  autofocus 页面加载完成后自动聚焦到某个input框

<input type=”text” autofocus/>

4、  取消h5的表单验证：

<form novalidate></form>

★css3属性针对不同内核的兼容写法：

Safari、谷歌：-webkit-

火狐：-moz-

欧朋：-o-

IE：-ms-

★单独设置某一个方向的圆角：

border--top-left-radius：数值px；

★文本阴影：

text-shadow：水平  垂直 模糊 颜色；

1多组用逗号分隔

2 水平向右为正 向左为负 垂直向下为正 向上为负

★Flex项目属性

Flex-grow：0/数值；默认为0

存在剩余空间也不放大

★Flex-shrink：1；默认值

剩余空间不足时，等比例缩小

★CSS3基础变形：

transform：

rotate；旋转   单位deg

rotateX  rotateY  rotateZ  rotate(2D旋转 正顺逆负)

 

Scale；

缩放   无单位 取值大于1放大 小于1缩小

ScaleX ScaleY Scale(沿xy同时缩放)

 

Skew；

倾斜   单位deg

SkewX SkewY

 

Translate；

位移  取值px  位移的参照物是自身的宽高

XYZ

★改变变形元素中心点的位置：

transform-origin：left top center right bottom

★设置元素变形类型：

transform-style：preserve-3d；

★透视、井深：

perspective：1000px；

★过渡动画：

transition：过渡属性 过渡时间 过渡方式 延迟时间；

transition-property（过渡属性）：

all 所有发生变化的属性都添加过渡

transition-duration（过渡时间）

transition-delay（过渡延迟时间）

设置负值将会被截断

★transition-timing-function（过渡方式）

取值：ease 默认

linear 匀速

ease-in 加速

ease-out 减速

ease-in-out 慢-快-慢

 

★创建动画-添加动画：

创建：

@keyframes 动画名称{

0%{

属性值：属性；

}

50%{

属性值：属性；

}

...

100%{

属性值：属性；

}

}

 

★添加动画：

animation-name（动画名称）

eg：animation：fly 3s；

 

动画执行次数：数值/infinite 无限循环播放

动画状态：paused 动画暂停 一般划过时添加暂停，之前的动画效果要全部写上，然后暂停

过渡类型：linear 匀速

step（n，end）动画分几步完成

animation-fill-mode（动画执行完毕的状态）：forwards；保持动画结束时的状态；

简写：animation：动画名称 动画时间 延迟时间 播放次数 播放状态；

★transition和animation的区别：

1. transition动画不会自动执行，需要触发条件
2. transition动画触发一次只能执行一次，再次执行需要再触发
3. transition动画只有开始和结束两个状态，不能设置中间状态
4. animation动画页面加载完自动执行，可以无限循环播放，并且可以设置中间的关键帧

★背景、渐变：

设置背景在哪个区域可见：

background-clip：border-box 边框及以内可见

padding-box     padding区域可见

content-box   主体内容可见

★背景尺寸：

background-size：数值/100%/cover/contain

百分比：background-size：100% 100%；不会超出容器，但会发生变形

background-size：100%； 可能超出容器，但是不会变形

background-size：cover； 可能超出容器，但是不会变形