CSS基础知识

一、使用心得

ul>li

1. 使用li时，用list-style：none去掉左边的无序小圆点
2. 在设置li同一行显示时，转换为行内块inline-block会有显示问题（未找到原因），使用浮动会正确显示。

textarea

textarea文本输入框在写入时，若开始标签和结束标签不在同一行，则文本框输入的起使位置会有一小段距离，推荐写在同一行

行内元素

常见行内元素只有<a> , <img> ,<em>, <input>, <span>,<textarea>

二、定位

定义

定位：将盒子定在某一个位置，其实质也是在摆放盒子，按照定位的方式移动盒子

定位 = 定位模式 + 边偏移

1. 定位模式： 决定元素的定位方式，通过CSS的position属性来设置其值可以分为四个：

   值	语义
   static	静态定位
   relative	相对定位
   absolute	绝对定位
   fixed	固定定位

2. 边偏移：决定盒子最终移动到的位置，有top，bottom，left和right四个属性。

   边偏移属性	示例	描述
   top	top：80px	顶端偏移量，定义元素相对于其父元素上边线的距离
   bottom	bottom：80px	底部偏移量，定义元素相对于其父元素下边线的距离
   left	left：80px	左侧偏移量，定义元素相对于其父元素左边线的距离
   right	right：80px	右侧偏移量，定义元素相对于其父元素右边线的距离

静态定位：

静态定位是元素的默认定位方式，无定位的意思，基本不使用

语法：

选择器{ position： static}

• 静态定位按照标准流特性拜访位置，没有边偏移

相对定位：

相对定位时元素在移动位置的时候，是相对于他原来的位置来说的（自恋型）

语法：

选择器{ position： relative}

• 他是相对于自身原来的位置来移动的
• 原来在标准流的位置继续占有，后面的盒子不会跑上来（不脱标，保留原来位置)
• 典型应用是来给绝对应用当爹的

绝对定位：

绝对定位是元素在移动的时候，是相对与他的祖先元素来说的（拼爹型）

语法：

选择器{ position： absolute}

• 如果没有祖先元素或者祖先元素没有定位，则以浏览器为定位标准（Document文档）

• 如果祖先元素有定位（相对，绝对，固定），则以最近一级的祖先元素为定位标准。

• 绝对定位不再占有原先的位置。（脱标）

$子绝父相$：子级使用绝对定位，父级使用相对定位。

1. 子级盒子绝对定位，不会占有位置，可以放到父盒子里的任何一个地方，不会影响其他兄弟盒子
2. 父盒子需要加定位限制子盒子
3. 父盒子布局时，需要占有位置，因此父盒子只能是相对定位。
4. 如果一个盒子既有left属性，又有right属性，会默认执行left（同理执行top属性）。

固定定位:

固定定位是元素固定于浏览器可视区的位置，主要使用场景：可以在浏览器页面滚动时元素的位置不变。

语法：

选择器 { position: fixed}

• 以浏览器的可视窗口为参照点移动元素位置。

• 跟父元素没有任何关系

• 不随滚动条滚动

• 固定定位不占有原先的位置（脱标），其实固定定位也可以看作是特殊的绝对定位。

$固定定位小技巧：固定在版心右侧位置：$

小算法：

1. 让固定定位的盒子left：50%，走到可视区域（也是版心区域）的一半位置。

2. 让固定定位的盒子margin-left：版心宽度的一半距离，走到版心的右侧。

粘性定位（了解）

粘性定位可以被认为时相对定位和固定定位的呼玛河，

语法：

选择器 { position： sticky; top:10px}

粘性定位的特点：

1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）
2. 粘性定位占有原先的位置（相对定位特点）
3. 必须添加top，left，bottom，right中的一个才有效
4. 通常跟页面滚动搭配使用，兼容性较差，IE不支持

总结：

定位模式	是否脱标	移动位置	是否常用
static	否	不能使用边偏移	很少
relative	否（占有位置）	相对于自身原先位置移动	常用
absolute	是（脱标）	相对于带有定位的祖先盒子	常用
fixed	是（脱标）	相对于浏览器可视区	常用
sticky	否（占有位置）	相对于浏览器可视区	当前阶段少（兼容差）

定位叠放次序 z-index:

使用定位布局时，可能会出现盒子重叠的情况，此时可以使用z-index来控制盒子的次序（z是z轴）

语法：

选择器 { z-index： 1}

• 数值可以是正整数，负数或0，数值越大，盒子越靠上；
• 默认auto，如果数值相同，按照书写顺序排序；
• 数值不能加单位，只有定位的盒子才有z-index属性；

拓展

1. 绝对定位的盒子居中：

加了绝对定位的盒子不能通过margin：0 auto水平居中，但是可以通过以下计算方式实现水平和垂直居中。

$小算法：$

left：50%走父容器的百分之五十，

margin-left：自身宽度的一半的$负值$，向左移动自身宽度的一半。

垂直居中同理

2. 定位特殊性：

1.行内元素加绝对或固定定位，可以直接设置高度和宽度（加浮动和转换块元素也可以）

2.块级元素添加绝对或固定定位，如果不给宽度和高度，默认大小是内容大小；

3.脱标的盒子不会触发外边距塌陷：浮动元素，绝对、固定定位元素的都不会触发外边距合并的问题。

3. 绝对定位（固定定位）会完全压住下面的盒子

   浮动的元素只会压住下面标准流的盒子，但不会压住盒子里的文字图片等，

   但是绝对定位（固定定位）会压住下面标准流的所有内容

   （浮动最初产生的目的是让文字环绕图片）

三、元素的显示与隐藏

类似网站广告，点击关闭后不见了，刷新后又重新出现，或者导航栏，鼠标覆盖上时出现，移开后隐藏；

本质：让一个元素在页面中隐藏或者显示出来

1. display 显示隐藏
2. visibility 显示隐藏
3. overflow 溢出显示隐藏

display属性

display属性用于设置一个元素如何显示：

• display：none； 隐藏对象（只是隐藏，不会删除，但不再占有位置）
• display：block； 除了转换块级元素之外，还有显示元素的意思

$display隐藏元素后，其位置不再保留，后面的盒子会上升$

应用及其广泛，搭配javascript可以做出很多网页特效。

visibility属性

用于指定一个元素可见还是隐藏

语法：

选择器 { visibility： inherit / visible / hidden / collapse}

inhert：继承上一个父对象的可见性；

visible：可见

hidden：隐藏

collapse：主要用来隐藏表格的行或列，隐藏（不是删除）后的行或列也可以被其他内容使用，对于表格外的其 他对象，其作用等同于hidden。

$visibility隐藏元素后，继续占有原来的位置$

如果隐藏元素后想要原来的位置，使用visibility：hidden

如果隐藏元素后不想要原来的位置了，使用display：none（用处更多）

overflow溢出

overflow属性指定了溢出的内容是否可见

语法：

选择器 { overflow： visible / hidden / auto / scroll}

visible： 超出尺寸的部分仍然显示

hidden： 超出尺寸的部分隐藏

auto： 根据是否超出添加滚动条

scroll： 给盒子添加横向和竖向两个滚动条（无论是否有超出部分）

$如果有定位的盒子，慎用overflow：hidden，因为他会隐藏多余的部分$

四、精灵图

减少服务器频繁的接收与发送请求

原理：用一张大的图片装很多小图片，通常装背景图

核心:

1. 主要针对背景图片使用，就是把多个小背景图整合到一张大图片当中
2. 移动背景图片位置，可以使用background-position；
3. 移动的距离就是这个目标图片的x和y坐标；
4. 一般情况下都是往上和往左移动，因此数值通常为负数；
5. 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置

五、字体图标（iconfont）

主要用于显示网页中通用，常用的一些小图标，展示的是图标，本质是文字

• 遇到结构和样式比较简单的小图标，可以用字体图标来做
• 如果遇到稍微复杂的背景图，选择精灵图

使用方法：

1. 去icomoon下载需要的图标并解压
2. 将fonts文件复制到运行文件目录下
3. CSS中导入icomoon字体样式（去style.css文件中复制）
4. 打开demo.html网页，复制小图标
5. 修改html中的文字样式（font-family：‘icomoon’）

六、CSS制作三角形

原理：

对空盒子设置宽高都为0；边框设置为实心，四边均为三角形，设置另外三边边框为不可见（transparent）

七、CSS用户界面样式

7.1鼠标样式cursor

li {cursor:pointer;}

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标样式；

属性值	描述
default	默认指针
pointer	小手指，通常适用链接
move	移动，十字形状
text	文本
not-allowed	禁止，红色禁止符号

7.2轮廓线 outline

给表单添加outline：0； 或者outline： none；样式之后，可以去掉默认的蓝色轮廓线。

input {outline: 0;}或者input {outline: none;}

7.3防止拖拽文本域 resize

实际开发中，文本域右下角拖拽会影响其他盒子排布，因此要写死，防止拖拽。

textarea {resize: none;}

7.4 vertical-align 属性应用

CSS的vertical-align属性使用场景: 经常用于设置==图片或者表单（行内块元素）==和文字垂直对齐。

官方解释： 用于设置一个元素的垂直对齐方式，但是他只针对于行内元素或者行内块元素有效（块级元素无效）。

语法：

vertical-align: baseline|top|middle|bottom;

图片，表单都属于行内块元素，默认的vertical-align是基线对齐（baseline）。

解决图片底部默认空白缝隙问题：

bug： 图片底测有空白缝隙，原因是行内块元素会和文字基线对齐

主要解决方法有两种：

1. 给图片添加vertical-align：middle|top|bottom等（推荐做法）

2. 把图片转换成块级元素display：block（块级元素无法应用vertical-align属性，因此基线对齐不起作用）

7.5 溢出的文字省略号显示

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

/*1. 先强制一行内显示文本 * /

 white-space： nowrap； （默认normal 自动换行）

/*2. 超出的部分隐藏  */

overflow： hidden；

/*3. 文字用省略号代替超出的部分 */

text-overflow： ellipsis；

多行文本溢出显示省略号满足条件：

多行文本溢出显示省略号有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webKit内核）

overflow:hidden;
text-overflow:ellipsis;

/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */ 
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */ 
-webkit-box-orient:vertical;

$推荐后台人员实现这个效果，可以控制字数，操作更简单$

7.6 常见布局技巧

1. margin负值的运用
2. 文字围绕浮动元素
3. 行内块的巧妙运用
4. css三角强化

1.margin负值运用：

1. 给每个盒子设置margin-left：-1px ，浮动后的盒子会正好压住相邻盒子边框
2. 鼠标经过某个盒子的时候，给盒子加一个相对定位（如果没有定位的话），或者给盒子加z-index属性提高层级。

2.文字围绕浮动元素

在一个父盒子内，给一个盒子或图片设置浮动后，文字会避开浮动后的区域

3. 行内块的巧妙运用

如：页面跳转栏

行内块自带很小外边距，又能在同一行显示，还能设置宽高等属性，十分适合制作栏目等要素；

给父盒子设置text-align:center后，里面所有行内块都会居中显示，易于处理

4.三角强化

给宽高都为0的盒子设置边框后，形成四个三角形组成的正方形，给其中三个三角形设置transparent可以得到一个三角形，当我们需要形状不同的三角形时，可以给其中的一条边设置不同宽度（border-width）

语法：

        .box {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 100px 50px 0 0;
            border-color: transparent red transparent transparent;
            margin: 300px auto;
        }

结合定位，可以加在一个父盒子中，做成斜线效果：

4. CSS初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS进行初始化。（每个网页都必须首先进行CSS初始化）

/* 清除网页里的内外边距*/
* {
    margin: 0;
    padding: 0;
}
/* em和i里面的文字不倾斜*/
em,
i {
    font-style:normal;
}
/* 去掉li前面的小圆点*/
li {
    list-style: none;
}
img {
    /* border: 0; 照顾低版本浏览器，如果给图片添加了链接外面有边框的问题*/
    border: 0;
    /* 取消图片底测有空白缝隙的问题*/
    vertical-align: middle;
}
buttom {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手样式*/
    cursor：pointer;
}
a {
    color:#666;
    /* 取消链接的下划线*/
    text-decoration:none;
}
a:hover {
    /* 鼠标经过链接时，文字变为红色*/
    color:red;
}
/* 清除浮动*/
.clearfix {
    visibility:hidden;
    clear:both;
    display:block;
    content:".";
    height:0;
}
button,
input {
    font-family:Microsoft Yahei, Heiti SC, tahoma, arial, Hiragino Sans GB,"\5B8B\4F53",sans-serif;
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰*/
    -webkit-font-smoothing:antialiased;
    background-color:#fff;
    /* 设置12px字体大小，1.5倍行距，宋体*/
    font:12px/1.5 Mircosoft YaHei, Heiti SC,tahoma,arial, Hiragino Sans GB,"\5B8B\4F53",sans-serif;
    color:#666;
}

八、HTML5和CSS3新增特性

###8.1HTML5新增的语义化标签

在IE9中需要转换为块级元素，移动端更喜欢使用

• header：头部标签
• nav： 导航标签
• artical： 内容标签
• section： 定义文档某个区域
• aside： 侧边栏标签
• footer： 尾部标签

8.2 HTML5新增的多媒体标签

1. 音频： < audio >

2. 视频：< video >

使用他们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他插件

8.2.1. 视频< video >

当前< video >元素支持三种视频格式：MP4, WebM， Ogg（尽量使用MP4格式）

语法：

<video src='文件地址' controls='controls'></video>

兼容版本：

<video controls='controls' width='300'>
	<source src='move.ogg' type='video/ogg'>
    <source src='move.mp4' type='video/mp4'>
    <!-- 若两种格式都不支持，则输出以下语句 -->
    您的浏览器暂不支持<video>标签播放视频
</video>

常见属性：

属性	值	描述
autoplay	autoplay	视频加载完毕后自动播放（chrome需要添加muted来解决自动播放问题）
controls	controls	向用户显示播放控件
width	pixels（像素）	设置播放器宽度
height	pixels（像素）	设置播放器高度
loop	loop	是否循环播放
preload	auto（预加载）none（不加载）	规定视频是否启用预加载（如果有autoplay就忽略本属性）
src	url	视频文件地址
poster	imgurl	等待加载的画面图片
muted	muted	静音播放

8.2.2. 音频< audio >

当前< audio >元素支持三种音频格式： MP3，Wav，Ogg（推荐使用mp3）

语法：

<audio src='文件地址' controls='controls'></audio>

兼容性写法：

<audio controls='controls'>
	<source src='happy.mp3' type='audio/mpeg'>
    <source src='happy.ogg' type='audio/ogg'>
    <!-- 若两种格式都不支持，则输出下面语句 -->
    您的浏览器暂不支持<audio>标签
</audio>

常见属性：

属性	值	描述
autoplay	autoplay	加载完毕后自动播放
controls	controls	是否显示控件
loop	loop	是否循环播放
src	url	音频文件路径

• chrome把音频和视频自动播放都禁止了（视频标签可以通过添加muted属性来静音播放视频，音频只能通过JavaScript解决）；

• 音频标签和视频标签使用方式基本一致（推荐使用mp3和mp4格式）；

• 视频标签时重点，经常设置自动播放（loop），循环和设置大小属性，不使用controls控件；

8.2.3.input类型

新增表单：

属性值	说明
type=‘email’	限制用户输入必须为Email类型
type=‘url’	限制用户输入必须为URL（网址）类型
type=‘date’	限制用户输入必须为日期类型
type=‘time’	时间类型
type=‘month’	月份类型
type=‘week’	周类型
type=‘number’	数字类型
type=‘tel’	手机号码
type=‘search’	搜索框
type=‘color’	生成一个颜色选择表单

$验证的时候必须添加form表单域$

新增表单属性：

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空
placeholder	提示文本	表单色提示信息，输入任意字符后消失
autofocus	autofocus	自动聚焦属性，页面加载后光标自动聚焦到该表单
autocomplete	off/on	当用户在字段中开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项 默认已经打开，需要放在表单内，同时加上name属性才能生效，autocomplete=‘on’,关闭autocomplete=‘off’，同时成功提交 （是否记录已经提交过的内容）
multiple	multiple	可以多选文件提交

可以通过以下设置方式修改placeholder里面的字体样式：

input::placeholder {
    color: pink;
    size: 12px;
}

8.3 CSS3的新特性

CSS3 新增选择器

C3给我们新增了选择器，可以更加便捷，更加自由的选择目标元素

1. 属性选择器
2. 结构伪类选择器
3. 伪元素选择器

属性选择器：

属性选择器可以根据元素特定的属性，来设置不同样式（不用借助类选择器或者id选择器）

选择符	简介
E[att]	选择具有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元素

$类选择器、属性选择器、伪类选择器权重都为10$

在使用时CSS样式表里值不加 ’ ’ ，注意权重叠加问题。如E[att=‘val’],其中E是标签选择器，att='val’是属性选择器,叠加后权重是11。

结构伪类选择器：

• E:first-child:选择父元素下的第一个子元素

• E:last-child:选择父元素下的最后一个子元素

• E:nth-child（n）：里面可填数字，关键字，公式

1. 如果是数字，就是选择第n个子元素，从1开始
2. 关键字： even偶数，odd奇数
3. 公式： 常见公式如n，2n，2n+1，5n，n+5，，-n+5等（必须是n，不能是其他字母，且计算时从0开始算）

• E:first-of-type:指定类型E的第一个
• E：last-of-type：指定类型E的最后一个
• E：nth-of-type（n）：指定类型的第n个

区别：

1. E：nth-child（n）在进行渲染时先对父元素里面的所有元素进行排序，然乎找到第n个，再去匹配前面的类型E是否相同，相同才执行后面的样式语句
2. E：nth-of-type（n) 在进行渲染时 先找到父元素里的所有E类型子元素，然后对E类型的子元素进行排序，找到第n个E后执行后面的渲染语句。
3. $权重都为10$

伪元素选择器：

使用CSS创建HTML标签元素（不需要在html里声明），简化HTML结构

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

• before和after创建的元素属于行内元素
• 这种方式创建的元素标签在文档树中找不到，因此称为为元素
• before和after必须有content属性
• $权重为1$

语法：

element::before {}

伪元素清除浮动：

.clearfix:after {
    content:''; //伪元素必须写content，可以为空
    display：block; //插入的元素必须是块级
    height：0; //元素不可见
    visibility：hidden; //元素不可见
    clear:both; //核心代码清除浮动
}

升级版：

.clearfix::before,
.clearfix::after {
    content:'';
    display:table; //转换为块级元素且在同一行显示
}
.clearfix::after {
    clear:both;
}

CSS3盒子模型

CSS3中可以通过box-sizing来指定盒模型，有两个值：content-box,border-box

1. box-sizing:content-box 盒子大小为width+border+padding（默认）

2. box-sizing:border-box 盒子大小为width

设置box-sizing：border-box后，padding和border就不会撑大盒子（前提padding和border比width宽度小）

可以在样式表开头写好通配符样式:

* {
padding:0;
margin:0;
box-sizing:border-box;
}

CSS3其他特性

滤镜filter：

filter属性将模糊或颜色偏移等图形效果应用于元素。

filter：函数(); 例如： filter：blur（5px）； //blur模糊处理，数值越大越模糊

calc（）函数

calc（）可以在声明CSS属性时执行一些计算（+ - * /）,例如：

width:calc(100%-80px);

CSS3过度

语法：

transition: 变化的属性 变化时间 变化曲线 开始时间;  /* 变化曲线和开始时间可以省略*/
/* 变化时间必须加单位*/

$谁做过度给谁加transition$

eg：鼠标放上去时盒子宽高变大

<div></div>

div {
    width:200px;
    height:100px;
    background-color:hotpink;
    /* 只设置宽度*/
    /* transition:width 0.5s ease 0s; */
    /* 同时设置宽高，用逗号进行分割*/
    /* transition:width 0.5s,height 0.5s; */
    /* 也可以使用all对全部属性进行变化 */
    transition: all 0.5s;
}
div:hover {
    width: 400px;
    height: 200px;
}

九、网站TDK三大标签SEO优化

1、 title网站标题

title具有不可替代性，是内页第一个重要标签，是搜索引擎了解网页入口和对网页主题归属的最佳判断点。

建议：$网站名（产品名）-网站的介绍$（尽量不超过30个汉字）

例如：

• 京东（JD.COM）-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
• 小米商城-小米5s，红米Note4、小米MIX、小米笔记本官方网站

2、 description网站说明

$简要说明我们网站是做什么的$

语法：

<meta name='description' content='京东JD.COM-专业的综合网上购物商城，销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供预约的网上购物体验！'/>

3、 keywords关键字

$keywords是页面关键字，是搜索引擎关注点之一$

keywords最好限制为6~8个关键词，关键词之间用英文逗号隔开，采用关键词1，关键词2的形式

例如：

<meta name='keywods' content='网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DC,相机,数码,配件,手表,存储卡,京东'/>

4、 LOGO SEO 优化

1. logo里面放一个h1，目的是提权，告诉搜索引擎这个地方很重要
2. h1里面放一个链接，可以返回首页，把logo的背景图片给链接即可
3. 为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不显示出来
   • 方法1： text-indent（文字缩进）以到盒子外面（text-indent： -9999px;），然后overflow：hidden，淘宝的做法。
   • 方法2： 直接给font-size：0；就看不到文字了，京东的做法
4. 最后给链接一个title属性，这样鼠标放到logo上就可以看到提示文字。

十、常用命名

名称	说明
快捷导航栏	shortcut
头部	header
标志	logo
购物车	shopcar
搜索	search
热点词	hotwords
导航	nav
导航左侧	dropdown包含 .dd .dt
导航右侧	navitems
页面底部	footer
页面底部服务模块	mod_service
页面底部帮助模块	mod_help
页面底部版权模块	mod_copyright