CSS/CSS3语法新特性笔记

CSS层叠样式表

三大特性

层叠性：相同的样式会覆盖

继承性：属性可向下继承

优先级：范围越小权重越高

选择器

基础选择器

标签选择器

1 body {2	 color:#fff;3 }

类选择器

1 .people‐first {2 	color:green;3 }

id选择器

1 #laowang {	2 color:yello;3 }

通配符选择器

* {2	 margin: 0 ;3	 padding: 0 ;4 }

高级选择器

后代选择器

1 ul li {2	 list‐style;none;3 }

子选择器

1 h3>a {2 	line‐height:36px;3 }

并集选择器

1 div,2 p {3 	font‐size:14px;4 }

伪类选择器

1 a::hover {2 	background‐color:springgreen;3 }a::linka::visiteda::hovera::activeinput::focus

相邻兄弟选择器

h1 + p {    margin-top:50px}

font属性

1 font‐style:italic;2 font‐weight: 400 ;3 font‐size:16px;4 font‐family:"Microsoft Yahei";5 font:italic 400 16px "Microsoft Yahei";

字体图标的下载与使用

text属性

1 color:pink;2 text‐align:center;3 text‐decoration:none;4 text‐indent:2em;5 line‐height:26px;

块元素

例如h p div ul li

• 独占一行
• 宽 高 内外边距 可控
• 宽度默认继承
• 主要作为容器

行内元素

例如 a strong b em

• 一行可以是多个
• 宽高无法设定
• 默认宽度为自身宽度
• 很内元素只能容纳文本或其他行内元素

注：连接标签里不能放链接
注：链接里可放块级元素，但最好把a转换成块级元素安全

行内块元素

例如 img input td

• 可以一行多个（有缝隙）
• 可以设置宽高
• 宽度为默认
• 元素显示模式转换

1 display:block;2 display:inline;3 display:inline‐block;

background背景

1 background‐color:transparent;2 background‐img:url(./xx);3 background‐repeat:repeat | no‐repeat | repeat‐x | repeat‐y;4 background‐position:center center;5 background‐attachment:scroll | fixed;6 background:pink url(./) no‐repeat fixed center top;

1 background‐size:500px 200px;//cover等比完全覆盖，contain等比宽高覆盖

精灵图的具体操作与使用

盒子模型

border or margin

1 border‐width:5px;2 border‐style:solid; // dashed(虚线) dotted(点线)3 border‐color:black;45 border:5px solid black;

1 margin:0 auto;//可使盒子水平居中2 margin‐left:‐1px;//用于消除紧挨着的边框

border-collapseborder-collapse: collapse;border collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的

HTML 中那样分开显示。

圆角边框

1 border‐radius:10px;2 border‐radius:1px 2px 3px 4px;//右上角开始3 border‐top‐left‐radius:...;

盒子阴影

1 box‐shadow: 10px 10px 5px ‐5px rgba(0,0,0,.3);

2 水平阴影 垂直阴影 [模糊 尺寸 颜色 外部或内部]

文字阴影

1 text‐shadow:10px 10px 5px rgba(0,0,0,.3);

float浮动

1 float:left;

浮动特性：

• 脱离标准流

• 一行显示，顶部对齐

• 具备行内块的特性

清除浮动

1 . 额外标签法

1 <div>2 <div>盒子</div>3 <div ></div>4 </div>

1 .clearfix {2     clear: both;3 }

2 . 父级添加overflow

1 <div >2 <div>盒子</div>3 </div>

1 .clearfix {2     overflow:hidden;3 }

3 . :after伪元素

1 <div >2 <div>盒子</div>3 </div>

1 .clearfix::after {2     content: "";3     display: block;4     height:  0 ;5     clear: both;6     visibility: hidden;7 }89 .clearfix {10     *zoom:  1 ;11 }

4 . 双伪元素清楚浮动

1 <div >2 <div>盒子</div>3 </div>

1 .clearfix:before,2 .clearfix::after {3     content: "";4     display: table;5 }67 .clearfix::after {8     clear: both;9 }1011 .clearfix {12     *zoom:  1 ;13 }

定位

静态定位（了解）

1 position:static;

相对定位

1 position:relative;

绝对定位

1 position:absolute;

固定定位

1 position:fixed;

粘性定位（了解）

1 position:stycky;

边偏移

top

bottom

left

right

优先级

1 z‐index:2;

元素显示与隐藏

显示模式

1 display:block | inline | none ;2 块级 行内 无

可视能力

1 visibility:inherit | visible | hidden;2 继承 可视 隐藏

溢出部分

1 overflow:visible | hidden | scroll | auto;2 不剪切,不加滚动条 隐藏 滚动条 自动

用户界面样式

鼠标样式

1 cursor:default;

1 cursor:pointer;

1 cursor:move;

1 cursor:text;

1 cursor:not‐allowed;

表单样式

1 input {2 	outline:none;3 }

文本域样式

1 textarea {2 	resize:none;3 }

对齐方式

1 vertical‐align:baseline | top | bottom | middle;2 				  基线对齐 顶线 底线 中线

图片采用基线对齐后，底部有白色缝隙

文字省略

单行文本溢出显示省略号必须满足三个条件

1 white‐space:nowrap;2 overflow:hidden;3 text‐overflow:ellipis;

CSS3新增特性

选择器

属性选择器

选择具有value的input

1 input[value]{}

选择value="text"的input

1 input[value="text"]{}

选择icon开头的div

1 div[class^=icon]{}

选择data结尾的div

1 div[class$=data]{}

选择含有iii的div

1 div[class*="iii"]{}

结构伪类选择器

1 :first‐child{}2 :last‐child{}3 :nth‐child(n){}//n可为数字 1 ， 2 ， 3  关键字even 偶数，odd奇数

1 :first‐of‐type2 :last‐of‐type3 :nth‐of‐type(on)

伪元素选择器

1 div::before{2 content="";3 }4 div::after{5 content="";6 }

C3盒子模型

1 box‐sizing:conten‐box;//传统盒子模型2 box‐sizing:border‐box;//边框不占用大小，而是挤压内容

滤镜

1 filter:blur(5px);//进行布尔模糊

其他

1 width:calc(100%‐800px);

过渡

1 transition:all 1s;//所选属性 花费时间 运动曲线 何时开始

转换

1 transform:translate(100px,‐50px);//纯移动，保留源2 transform:rotate(45deg);//顺时针旋转45°3 transform:scale(2,2);//长和宽变为原来的 2 倍45 transform:translate() rotate() scale();//简写

3D转换

1 transform‐style:flat | preserve;//开启3D空间（默认不开启）2 prespective:500px;//开启透视 设置透视高度34 transform:translate3d(x,y,x);//3d移动

动画

1 animation‐name:动画名称;2 animation‐duration:3s;//动画时间3 animation‐timing‐function:ease;//运动曲线4 animation‐delay:5s;//五秒之后开始5 animation‐iteration‐count:ifinite;//重复次数 无限6 animation‐direction:alternate;//逆向7 animation‐fill‐mode:forwards;//保持89 animation:动画名称 动画时间 [速度曲线 何时开始 播放次数 是否反向 结束状态];

标准viewport视口设置

1 <meta name="viewport"2         content="width=device‐width,

3 initial‐scale=1.0,4 user‐scalable=no,5 maximum‐scale=1.0,6 minimum‐scale=1.0">

流式布局（百分）

宽度为百分比

flex布局

1 display:flex;

设置主轴方向

1 flex‐direction: row;2 row‐reverse//右到左3 column//上到下4 column‐reverse//下到上

设置主轴的子元素排列方式

1 justify‐content:flex‐start;// 左对齐（默认）2 flex‐end 右对齐3 center 居中4 space‐around 平均分配5 space‐between 先两侧贴边然后平均分

设置子元素是否换行

1 flex‐wrap:nowrap;//不换行（默认）2 wrap;//换行

设置侧轴上的子元素排列方式（单行）

1 align‐items:flex‐start;// 左对齐2 flex‐end 右对齐3 center 居中4 stretch 拉伸（默认值）

设置侧轴上的子元素排列方式（多行）

1 align‐content:flex‐start;// 左对齐2 flex‐end 右对齐3 center 居中

4 space‐around 平均分配5 space‐between 先两侧贴边然后平均分6 stretch 拉伸（默认值）

flex子属性

1 flex:50%;2 align‐self:flex‐start;子项在侧轴的排列方式（了解）

rem适配布局

em 父级字体大小

rem HTML字体大小

媒体查询

1 @media screen and (min‐width:500px){ //如果屏幕大于等于500px2 html{3 font‐size:14px;4 }5 }

less

1 @color1: skyblue;2 @font14: 14px;3 body{4 background‐color:@color1;5 font‐size:@font14;6 a{7 text‐decration:none;8 &:hover{9 background‐color:@color1;10 font‐size:14px+16;11 }12 }13 }14 @import"common"//多个less合并在一起共同生成一份css文件

响应式布局

Bootstrap框架