css - hzx's blog

通配符选择器

* {
    margin:0;
    padding:0;
}

字体属性

font-family:字体系列
font-size:字体大小默认16px
font-weight:字体粗细 normal|bold|bolder|lighter|number(默认400)
font-style:字体样式 normal|italic
font: font-style font-weight font-size/line-height font-family;
font-size:14px/1.5 1.5倍行高

文本属性

color:文本颜色
text-align:对齐方式 left|center|right
text-decoration:添加/删除一条线none|underline|overline|line-through
text-index:首行缩进 em为1个文字的大小
line-height:行间距要比font-size大
text-shadow:h-shadow v-shadow blur color

复合选择器

div a 后代选择器
div>a 子元素选择器
div,span 并集选择器
a:link|a:visited|a:hover|a:active 链接伪类选择器（LoVe HaTe顺序编写）
input:focus focus伪类选择器
E:first-child
E:last-child
E:nth-child(n|even|odd|5n|n+3|-n+5)
E:first-of-type
E:last-of-type
E:nth-of-type(n|even|odd|5n|n+3|-n+5)

显示模式

块元素
- 自己独占一行
- 高度、宽度、外边距、内边距都可以控制
- 默认宽度是父级宽度的100%
- （除了文字类块元素）里面可以放行内或块级元素
行内元素
- 相邻行内元素在一行上
- 设置宽高无效
- 默认宽度为内容宽度
- 行内元素只能容纳文本或者行内元素
行内块元素：<img/><input/><td/>
- 相邻行内块元素在一行上
- 默认宽度为内容宽度
- 高度、宽度、外边距、内边距都可以控制
显示模式切换： display:none|block|inline

设置居中

类别	居中方法
块级元素	margin-left:auto;margin-right auto;
行内元素	父级元素添加text-align:center;
行内块元素	父级元素添加text-align:center;
所有元素的垂直居中	line-height:height
行内块（图片）和文字居中对齐	vertical-align:middle

background

background-image:url()
background-repeat:repeat|no-repeat|repeat-x|repeat-y
background-attachment:scroll|fixed
background-position: x y|left center right|top center down
background-size:x y|x|cover|contain cover可能显示不全，contain可能无法完全覆盖而显示空白
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-attachment;

默认值为 transparent none 0% 0%/auto repeat padding-box scroll;

选择器优先级

选择器	选择器权重
继承或者*	0，0，0，0
元素选择器，伪元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式	1，0，0，0
!important	∞

边框

border-width:5px
border-style:none|solid|dashed|dotted
border-color:
border-top|down|left|down:
border-collapse:separate|collapse 控制边框合并
border-radius:圆角边框
border:border-width||border-style||border-color

盒子模型

由内至外(均会影响盒子大小)：

padding
border
margin：设置左右边距为auto居中盒子

盒子阴影

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

嵌套块元素的塌陷问题

对于两个父子关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷比较大的外边距值

解决方案：

为父元素定义上边框
为父元素定义内边距
为父元素添加overflow:hidden

传统网页布局方式

标准流
浮动：多个块级元素横向排列
定位

float:none|left|right

浮动特性

脱离标准流浮动到指定位置，不再保留原先位置
如果多个盒子设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
浮动元素具有行内块元素特性

流程：

先用标准流的父元素排列上下位置，之后内部元素采取浮动排列左右位置
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

清除浮动

父元素未指定高度，子元素全部浮动，导致父元素高度为0的问题，解决方法：

额外标签法

最后一个元素后添加块级元素清除浮动<div style="clear:both"></div>
父元素添加overflow:hidden|auto|scroll;

缺点：无法显示溢出部分

:after伪元素法

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

父元素添加类名clearfix

双伪元素法

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

定位

定位=定位模式+边偏移

定位模式 position:static|relative|absolute|fixed|sticky
边偏移 top|bottom|left|right

静态定位

默认方式，没有边偏移。

相对定位

相对原来位置，原来的位置继续保留。

绝对定位

相对最近一级祖先元素位置，若祖先元素无定位（静态定位）或无祖先元素，则相对浏览器。若要固定与祖先元素的某个位置，祖先元素应添加相对定位。原来的位置不保留。

固定定位

固定于浏览器可视区的位置，不随滚动条滚动，原来的位置不保留，特殊的绝对定位。

粘性定位

相对定位+固定定位

以浏览器窗口为参照点移动元素，占有原来位置。

定位叠放次序

z-index:取值越大越靠上

定位的其他特性

绝对定位和固定定位也和浮动类似。

行内元素添加绝对或者固定定位，可以直接设置宽度和高度。
块级元素添加绝对或者固定定位，不给宽度和高度，默认大小为内容的大小。
浮动、定位的盒子不会引起外边距合并的问题。
浮动的元素不会压住下面标准流的文字（可以用来做文字环绕），而绝对定位和固定定位会。

元素的显示与隐藏

display:none|block 不保留位置
visibility:hidden|visible 保留位置
overflow:visible|auto|hidden|scroll （内容溢出元素框时，会发生什么。有定位的盒子慎用）

精灵图

将小背景图片整合到一张大图中，减少服务器接收和发送请求的次数，提高页面加载速度

background-position: -x -y;

字体图标

文件小
放大缩小不失真
灵活，可以改变颜色、产生阴影、透明效果、旋转等
iconfont-阿里巴巴矢量图标库

三角形

.box{
    width:0;
    height:0;
    border:50px solid transparent;
    border-left-color:pink;//朝右的三角形
}

鼠标样式&表单轮廓线&f防止拖拽文本域

cursor:default|pointer|move|text|no-allowed

outline:none

textarea{

resize:none;

}

行内块和文字垂直居中对齐

image{

vertical-align:top|bottom|middle 可以解决图片底部默认空白的问题

}

文字省略号显示

div {
    white-space:norap;
    text-overflow:ellipsis;
}

视频/音频播放器

1 2	<video src="" autoplay="autoplay" muted="muted" controls="controls" loop="loop" poster=""></video> <audio src="" autoplay="autoplay" controls="controls" loop="loop"></audio>

属性选择器

选择符	简介
E[att=”val”]	选择具有att属性的E元素
E[att=”val”]]	选择具有att属性且属性值等于val的E元素
E[att^=”val”]]	选择具有att属性且值以val开头的E元素
E[att$=”val”]]	选择具有att属性且值以val结尾的E元素
E[att*=”val”]]	选择具有att属性且值中含有val的E元素

伪元素选择器

before和after创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
语法： element::before{}
before和after必须有content属性
before在父元素内容前面创建元素，after在父元素内容后面插入元素
伪元素选择器与标签选择器权重一样

切换盒子模型

box-sizing:content-box 盒子大小为width+padding+border
box-sizing:border-box 盒子大小为width

CSS3过度

鼠标悬浮时触发

transition:要过度的属性花费时间(2s) 运动曲线(ease|liner) 何时开始(1s),要过度的属性花费时间(2s) 运动曲线(ease) 何时开始(1s)；

全部变化，填all

2D转换

tranform:translate(x,y);
tranform:translateX(x);
tranform:translateY(y);
transform:rotate(45deg);
transform:scale(x,y)
transform-origin: x y; 设置中心点

3D转换

transform:translate3d(x,y,z);
tranform:translateX(x);
tranform:translateY(y);
transform:translateZ(z);
perspective: px; //透视写在观察元素的父元素上
transform-style:preserve-3d; //子元素开启立体空间

动画

定义动画

@keyframes move {
    0%(from) {
        transform: translate(0px);
    }
    100%(to) {
        transform: translate(100px);
    }
}

调用动画

1	animation: name duration timing-function delay iteration-count(1\|infinite) direction(normal\|alternate) fill-mode(backwords\|forwords);

移动端常见布局

单独制作移动端页面
- 流式布局(百分比布局)
- flex弹性布局
- less+rem+媒体查询布局
- 混合布局
响应式页面兼容移动端
- 媒体查询
- bootstrap

流式布局

max-width: px;//页面拉抻最大宽度
min-width: px;//页面拉抻最小宽度
width:x%

flex布局

与浮动效果相似,但默认不换行，装不下时自动缩小子元素宽度

给父元素添加 display:flex;

给子元素设置宽高或分配比例 flex:1;

父元素属性

flex-direction:row|row-reverse|column|column-reverse 设置主轴
justify-content:flex-start|flex-end|center|space-around|space-between 设置主轴子元素排列方式
flex-wrap:nowrap|wrap 是否换行
align-items:flex-start|flex-end|center|stretch 设置侧轴子元素排列方式(单行)
align-content:flex-start|flex-end|center|space-around|space-between|stretch 设置侧轴子元素排列方式(多行)
flex-flow: flex-direction flex-wrap;

子元素属性

flex: 分配比例，可实现拉伸效果
align-self: 控制自己在侧轴的排列方式
order: 控制项目的排列顺序，越小越靠前，默认为0

rem适配方案

通过修改html里面的文字大小来改变页面中元素的大小

媒体查询

//从小到大写，后面覆盖前面
    <link rel="stylesheet" href="style320.css" media="screen and (max-width:320px)">
    <link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">
    <link rel="stylesheet" href="style960.css" media="screen and (min-width:960px)">

//或
@media screen and (max-width:539px) {
    html{
        
    }
}

@media screen and (min-width:540px) {
    html {
        
    }
}

@media screen and (min-width:970px) {
    html {
        
    }
}

less

vscode插件：easy less，cssrem

基本语法

@变量名:变量值
后代——嵌套
伪类/伪元素选择器 &: &::
运算符+-*/ 空格隔开
除法运算要加 ()
单位不同则取第一个值的单位
@import “” 导入less文件

元素大小取值方法

页面元素的rem值=页面元素值（px)/font-size字体大小