您的位置：首页 > Web前端 > CSS

前端学习笔记 CSS基础布局样式书写规范

2020-06-12 00:07 120 查看

#CSS-网页的美容师

CSS主要用来美化网页，布局页面
CSS是层叠样式表的简称有时也称为CSS样式表或级联样式表
CSS也是一种标记语言，主要用于设置HTML页面中的文本内容（字体，大小，对齐方式等），图片的外形（宽高，边框样式，边距等）以及版面的布局及外观显示样式。
CSS可以美化HTML，让页面布局更简单
HTML只关注内容的语义。HTML不关注样式，只能做简单的样式。
CSS的最大价值：由HTML专注做结构呈现，样式交给CSS，即结构与样式分离。

##CSS语法规范
CSS规则由两个主要的部分构成：选择器以及一条或多条声明

选择器 {
属性：值;
属性：值;
}

一般写在

<head>

下的

<style>

标签中
选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式

##CSS代码风格

样式格式书写
紧凑格式

h1{color: red;font-size: 20px;}

展开格式（建议）

h1 {
color: red;
font-size: 20px;
}

样式大小写风格

小写（建议）

h1 {
color: red;
font-size: 20px;
}

大写

H1 {
COLOR: RED;
FONT-SIZE: 20PX;
}

样式空格风格

选择器和大括号中间保留一个空格

##CSS基础选择器
###选择器的作用
选择器就是根据不同需求把不同的标签选出来；
示例：

<div> DIV </div>
<div> DIV </div>
<p> DUANLUO </p>
<ul>
<li> UL-LI </li>
</ul>
<ol>
<li> OL-LI </li>
</ol>

div里面的文字改为红色

div {
color: red;
}

第一个div的文字改为红色
ul里li的文字改为红色

###选择器的分类
选择器分为基础选择器和复合选择器两个大类

基础选择器
基础选择器是由单个选择器组成的
基础选择器又包括：标签选择器，类选择器，id选择器和通配符选择器 标签选择器：把某一类的标签全部选出来，但不能差异化设置
选择器名称为标签名：

p {
color: green;
}

类选择器：差异化，单独选一个或某几个（常用）

.class_green {
color: green;
}

结构需要用class属性来调用class类（类名不能与标签名重合，不要使用纯数字，中文）

<div class="class_green"> 绿色 </div>

可以给一个标签指定多个类名，这些类名都可以选出这个标签（多个类名中间用空格分开）（公共样式更改方便）；

<div class="class_green class_squer"> 绿色 </div>

id选择器
HTML元素以id属性来设置id选择器，CSS中id选择器以#定义

#green {
color: green;
}

<div id="green"> 绿色 </div>

id属性只能在每个HTML文档中出现一次
id选择器和class选择器的区别：class可以多个使用，id只有一次，类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常搭配JavaScript；

通配符选择器
使用*定义，表示选取页面中所有元素（标签）。

* {
color: green;
}

特殊情况下才使用，例（清除所有元素标签的内外边距）

* {
margin: 0;
padding: 0;
}

复合选择器

复合选择器可以更准确，更高效的选择目标元素（标签）；
负荷选择器是由两个或多个基础选择器通过不同方式组合而成的；
常用的复合选择器包括：后代选择器，子选择器，并集选择器，伪类选择器等等

后代选择器（重要）
后代选择器又称为包含选择器，可以选择父元素里面子元素，写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代。

基础选择器1 基础选择器2 ... {
样式： 属性；
}
ol li ...{
color: brown;
}

后代（可以是多重嵌套，可以将父标签里的儿子孙子等都选择出来）如：

ol li a {
color: brown;
}

基础选择器可以是任意选择器

子元素选择器
必须是亲儿子！只能选择子元素，孙子无关

div>a {
color: brown;
}

并集选择器
可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明；任何选择器都可以作为并集选择器的一部分

.pig li,
div,
a {
color: brown;
}

伪类选择器
用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素；
前面用冒号表示：

:hover

伪类选择器有很多，比如链接伪类，结构伪类，表单伪类等；
1. 链接伪类选择器

CSS 		a:link：/*选择所有未被访问的链接*/ 		a:visited：/*选择所有已被访问的链接*/ 		a:hover：/*选择鼠标指针位于其上的链接*/ 		a:active：/*选择活动链接（鼠标按下未弹起的链接）*/

+ 为了确保生效，要按照link,visited,hover,active的顺序定义链接伪类选择器；love hate
+ 因为a链接在浏览器中具有默认样式，所以实际工作中都需要给链接单独指定样式
实际开发中链接伪类的写法：

CSS 			a { 				color: red; 			} 			a:hover { 				color: green; 			}

2. :focus伪类选择器
用于选取获得焦点的表单元素
一般情况

<input>

类表单元素才能获取，因此这个选择器也主要针对于表单元素来说；

CSS 		input:focus { 			background-color: yellow; 		}

###CSS字体属性
字体属性用于定义字体系列，大小，粗细和文字样式（斜体粗体之类）

字体系列（可以多个字体,字体之间用英文隔开，字体中有空格的加引号，尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示）

p {
font-family: "Microsoft Yahei",Arial;
}

当有多个字体时，浏览器先查看逐个查看电脑上有没有该字体，如果有就以这个字体显示，都找不到就默认。
一般在body标签里定义字体
2. 字体大小

p {
font-size: 16px;
}

字体粗细

p {
font-weight: nomal(400)/blod(700)/bloder/lighter/number;
font-weight: 700;（加粗，实际开发中更常用数字）
}

文字样式

p {
font-style: nomal/italic;
}

字体复合属性（节约代码）

p {
font: font-style font_weight font_size/line-height font-family;
}

不需要设置的属性可以省略（默认值），但必须保留font-size和font-family属性，否则font属性不起作用；

###文本属性
定义文本的外观，比如文本的颜色，对齐文本，装饰文本，文本缩进，行间距等

文本颜色
color：预定颜色值、十六进制（#FF0000）、RGB代码（rgb(225,0,0)/rgb(100%,0%,0%)）

p {
color: green;
}

文本对齐
本质是让盒子里的文字对齐

p {
text-align: left/center/right;
}

文本装饰

p {
text-decoration: none(最常用)/underline/overline/line-though;
}

文本缩进
通常指首行缩进
em是相对单位，当前元素1个文字的大小

p {
text-indent: 10px/2em;
}

行间距
行间距=上间距+文字高度+下间距

p {
line-height: 26px;
}

###CSS的引入方式
按照CSS样式书写的位置不用，CSS样式表分为三大类

行内样式表（行内式）
- 只有一两个；
- 内部直接style属性；
- ```
<div style="color: red; font-size: 12px">你好</div>
```
  ；
- 不推荐大量使用；
内部样式表（嵌入式）
- ```
<style>
```
  标签理论上可以放在HTML文档的任何地方，但一般会放在文档的
```
<head>
```
  标签中；
- 此种样式可以方便控制当前整个页面中的元素样式设置；
- 代码结构清晰，但是并没有完全分离；
外部样式表（链接式）
- 引入外部样式表分为两步：新建一个后缀名为.css的样式文件，把所有CSS代码放在里面；
- 在HTML页面中，使用
```
<link>
```
  标签引入这个文件；
```
<link rel="stylesheet" href="cssURL">
```

###Emmet语法
Emmet语法的前身是Zencoding，它使用缩写来提高html/css的编写速度，Vscode内部已经集成该语法；

快速生成HTML结构生成标签：标签名按tab
生成多个相同标签：加上*，如
```
div*3
```
有父子级关系的标签：用>，如
```
ul>li
```
有兄弟关系的标签：用+，如
```
div+p
```
生成的div类名有顺序，可以用自增符号，如‘p.demo，如`p.demo，如‘p.demo*5`
生成的标签内部写内容可以用{},如
```
div{你好}*5
```

快速生成CSS样式语法

lh26 快速生成line-height: 26px;

快速格式化代码

###CSS的元素显示模式
了解元素的显示模式可以更好的布局页面

元素显示模式
网页的标签非常多，在不同的地方会用到不同类型的标签，了解他们的特点可以更好地布局页面；
元素显示模式就是元素以什么方式进行显示，比如
```
<div>
```
单独占一行，比如一行可以放多个
```
<span>
```
HTML元素一般分为块元素和行内元素
块元素
常见的块元素有
```
<h1>-<h6>
```
，
```
<p>
```
，
```
<div>
```
，
```
<ul>
```
，
```
<ol>
```
，
```
<il>
```
等，其中
```
<div>
```
是最典型的块元素；
块元素的特点：
- 高度，宽度，外边距，内边距都可以控制
- 宽度默认是容器（父级宽度的100%）
- 是一个容器及盒子，里面可以放行内或者块级元素
- 文字类元素内不能用块级元素，如
```
<p>
```
  ，
```
<h1>-<h6>
```
行内元素
常见的行内元素有
```
<a>
```
，
```
<strong>
```
，
```
<b>
```
，
```
<em>
```
，
```
<i>
```
，
```
<del>
```
，
```
<s>
```
，
```
<ins>
```
，
```
<u>
```
，
```
<span>
```
等，其中
```
<span>
```
是最典型的块内元素，也叫内联元素；
行内元素的特点：
- 高宽直接设置会无效
- 默认宽度是它本身的宽度
- 行内元素只能容纳文本以及其他行内元素
- 链接里面不能放链接
- 特殊情况下
```
<a>
```
  内可以放块级元素，但是给
```
<a>
```
  转化一下块级模式最安全
行内块元素
在行内元素中有几个特殊的标签
```
<img />
```
，
```
<input />
```
，
```
<td>
```
，他们同时具有块元素和行内元素的特点；
- 默认宽度是他本身内容的宽度（行内元素特点）
- 高度，行高，外边距，内边距可以控制（块级元素特点）
元素显示模式转换
特殊情况下，我们需要元素模式的转换：一个模式的元素需要另一种模式的特性（比如想要增加链接
```
<a>
```
的触发范围）
- 转换行内元素：display: inline;
- 转换行内块元素：display: inline-block;
小技巧
文本垂直居中：行高等于容器高度

###CSS的背景
给页面元素添加背景样式；
背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等；

背景颜色
```
background-color: transparent|color;
```
背景图片
```
background-image: none|url(URL地址);
```
不用image，非常容易控制位置，实际开发中常见于logo或者一些装饰性的小图片或者是超大的背景图片；

背景平铺

background-repeat: repeat|no-repeat|repeat-x|repeat-y;

背景位置
```
background-position: x y;
```
参数是方位名词：两个值前后顺序无关，left top=top left
只指定一个方位名词，则第二个默认居中
参数是精确单位，第一个是x坐标，第二个是y坐标
第一个为精确单位，剩下的y居中
混合使用时第一个x，第二个y

背景附着

background-attachment: scroll|fixed;

后期可以制作视差滚动的效果

背景复合写法

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

参数无顺序

背景色半透明

background: rgba(0,0,0,0.3);

只是背景色半透明，盒子里的内容不受影响

##CSS的三大特性
CSS有三个非常重要的特性：层叠性，继承性，优先级；
###层叠性
相同选择器给设置相同的样式，此时一个样式会覆盖另一个冲突的样式，层叠性主要解决样式冲突问题

层叠性原则：
样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突不会重叠

###继承性
子标签会继承父标签的某些样式，比如文本颜色和字号
子元素可以继承父元素的样式（text-，font-，line-，以及color）

行高的继承
行高可以跟单位，也可以不跟,不跟时继承行高的倍数
```
font: 12px/1.5
```

###优先级
选择器相同时层叠性
选择器不同时看选择器权重（越往下越大）
+ 继承或者*：0.0.0.0
+ 标签选择器：0.0.0.1
+ 类选择器，伪类选择器：0.0.1.0
+ ID选择器：0.1.0.0
+ 行内样式

style=""

：1.0.0.0
+ !important：无穷大

div {
color: red!important;
}

权重由4个数字组成，永远不进位
继承权重为0
浏览器会给
```
<a>
```
一个默认样式，比继承权重大；
权重比较从第一位开始比
权重叠加：复合选择器叠加优先级
- ```
.nav li
```
  ：0.0.1.0+0.0.0.1=0.0.1.1

##盒子模型
页面布局有三大核心：盒子模型，浮动和定位。

###网页布局的本质
网页布局的核心本质就是利用CSS摆放盒子
网页布局过程：

先准备好相关的网页元素，网页元素基本都是盒子box；
利用CSS设置好盒子样式，然后摆放到相应位置；
往盒子里面装内容；

###盒子模型（Box Model）的组成
所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS盒子模型的本质上是一个盒子，封装周围的HTML元素，他包括：边框，外边框，内边距，外边距和实际内容；

border：边框
border可以设置元素的边框。边框由三部分组成：边框宽度，边框样式，边框颜色；
```
border: border-width|border-style|border-color
```
边框简写：
```
border: 1px soid red;（没有顺序）
```
表格的细线边框时，要将相邻边框合并：
```
border-collapse: collapse;
```
边框会影响盒子的实际大小；
外边框会将盒子增大；
content：内容
默认内容与盒子紧贴；
padding：内边距

padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;

padding复合书写：

padding: 上下左右;
padding: 上下 左右;
padding: 上 左右 下;
padding: 上 右 下 左;

内边距也会影响盒子实际大小；
盒子已经有宽高时，加上内边距会将盒子变大；
盒子没有指定大小时，padding不会撑开盒子大小。实际开发时用padding可以用来巧妙的改变盒子大小；
4. margin：外边距

margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

简写与padding一致；

1. 使用margin定义块元素的垂直外边距时，可能会出现外边距的合并；
1. 相邻块元素垂直外边距的合并（取较大值，尽量只给一个盒子加外边距）；
2. 嵌套块元素垂直外边距的塌陷（父元素会选择较大外边距塌陷，给父元素添加边框会解决，或者直接定义内边距，或为父元素添加`overflow: hidden;`）；
2.	行内元素和行内块元素水平居中给其父元素添加`text-align :center`即可；
3. 外边距可以让块盒子水平居中，但是必须满足两个条件：
1. 盒子必须指定宽度
2. 左右边距设置成auto
```CSS
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;（多）
```

清除内外边距
开发中，不同浏览器，标签有不同的默认内外边距，为了更好的布局，所以要清除所有内外边距；

* {
margin: 0;
padding: 0;
}

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以了；
6. 圆角边框

border-radius: length（圆的半径）;

参数可以是精确值可以是百分比
参数：1-4个

border-radius: 四角;
border-radius: 左上右下 右上左下;
border-radius: 左上 右上左下 右下;
border-radius: 左上 右上 右下 左下;

分开写：

border-top-left-radius:
border-top-right-radius:
border-bottom-left-radius:
border-bottom-right-radius:

盒子阴影
盒子阴影不占空间
```
box-shadow: h-shadow v-shadow blur spread color inset;
```
- v-shadow：必须，竖直阴影位置，可以负值；
- blur：可选，模糊距离；
- spread：可选，阴影尺寸；
- color：可选，阴影颜色；
- inset：可选，将外部阴影（outset）改为内部阴影；

文字阴影

text-shadow: h-shadow v-shadow blur color;

###浮动

传统网页布局的三种方式普通流（标准流/文档流）
块级元素独占一行，从上到下顺序排列；行内元素按照顺序，从左到右顺序排列，碰到父元素边缘自动换行；
浮动
定位
这三种方式都是用来摆放盒子的，盒子摆放到合适的位置，布局就完成了，实际开发中，一个页面基本都包含了这三种布局方式（移动端有新的）；

为什么需要浮动

两个盒子的左右对齐难以实现；
浮动可以改变元素的默认排列方式；（最典型的就是将块级元素在一行显示）
** 网页布局第一准则：多个块级元素纵向排列标准流，多个块级元素横向排列找浮动。**

什么是浮动

float

属性用于创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含块或另一个浮动框的边缘；

选择器 {float: none||left||right; }

元素不浮动 || 元素向左浮动 || 元素向右浮动

浮动特性

浮动元素会脱离标准流（脱标），脱离标准普通流的控制移动到指定位置，浮动的盒子不再保留原先的位置；

浮动的元素会一行内显示并且元素顶部对齐，一行装不下时会自动换行；
浮动的元素会具有行内块元素的特性，如果行内元素有了浮动，不需要转换行内块/块级元素就可以直接给宽度和高度；
块级盒子没有设置宽度时，默认宽度和父级一样，但是添加浮动后，大小根据内容决定；
浮动的盒子中间没有缝隙，是紧挨着的
行内元素同理

浮动元素经常和标准流父级搭配
为了约束浮动元素位置，网页布局一般先用标准流的父级排列上下位置，之后内部子元素采取浮动排列左右位置，复合网页布局第一准则；
网页布局第二准则：先设置盒子的大小，之后设置盒子的位置。

###常见的网页布局

注意点：

浮动和标准流的父级盒子搭配；
一个元素浮动了，理论上其他的兄弟元素也要浮动，浮动的盒子指挥影响浮动盒子后面的饿标准流，不会影响前面的标准流；
父盒子不一定有高度，有些需要让子盒子撑开父盒子，有多少浮动元素，父盒子就有多高；

###清除浮动

为什么要清除浮动
很多情况下，父盒子不便给出一定的高度，理想状态下，父盒子不一定要有高度，有些需要让子盒子撑开父盒子，有多少浮动元素，父盒子就有多高。但是子盒子浮动不占用位置，父盒子高度会变成0，会影响到下面的标准流盒子；所以需要清除浮动；
清除浮动的本质
清除浮动产生造成的影响，如果父盒子本身有高度，则不需要清除浮动。清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响到下面的标准流了；
```
选择器 { clear: left||right||both; }
```
开发过程中几乎只用both
清除浮动的策略是：闭合浮动；
清除浮动的方法额外标签法（隔墙法），W3C推荐；
在浮动元素的末尾添加一个空的标签。比如
```
<div style="clear: both"><div>
```
，或者其他标签（如
```
<br />
```
等）。通俗易懂，书写方便但是会添加许多无意义的标签，结构化较差，不常用。新添加的空标签必须是块级元素；
父级添加overflow属性；
父级添加
```
overflow: hidden;
```
，之前防止外边距合并；代码简洁，但是无法显示溢出的部分；
父级添加:after伪元素；
```
:after
```
方式是额外标签法的升级版，也是给父元素添加，相当于给父盒子用CSS添加了一个块级元素：

.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /*IE6、7专有*/
*zoom: 1;
}

不会增加新的额外标签，结构简单，但是需要照顾低版本的浏览器兼容问题；百度，淘宝，网易都在用；

父级添加双伪元素；

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

代码更简洁，还是要照顾低版本浏览器；小米，腾讯在用；

###定位

为什么需要定位
想要某元素可以自由的在一个盒子内移动位置，并且压住其他盒子；
固定到屏幕某个位置的盒子；
定位可以做到；

定位组成
定位：将盒子定在某一个位置，定位也是在摆放盒子，按照定位的方式移动盒子；
定位 = 定位模式 + 边偏移
定位模式：用于指定一个元素在文档的定位方式；
边偏移：决定该元素的最终位置；

static: 静态定位
relative: 相对定位
absolute: 绝对定位
fixed: 固定定位

边偏移
边偏移将定位的盒子移动到最终位置，参数
```
top
```
，
```
bottom
```
，
```
left
```
，
```
right
```
；
定义元素相对于父元素的距离；
静态定位（默认无定位，不常用）
```
选择器 { position: static; }
```
静态定位按照标准流特性摆放位置，没有边偏移；
相对定位
```
选择器 { position: relative; }
```
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的；
[ol] 它是相对于自己原来的位置移动；
虽然盒子移动了，但是它在标准流的位置会保留，并且不影响其他盒子（压住，不脱标）；
相对定位最典型的应用是给绝对定位当爹；

绝对定位

选择器 { position: absolute; }

绝对定位是在元素移动位置的时候，是相对于它祖先元素来说的；

没有祖先元素

祖先元素没有定位

如果祖先元素有定位（相对，绝对，固定），则以最近一级有定位的祖先元素为参考点移动位置；
绝对定位不占有原先的位置（脱标）；

子绝父相
子绝父相：子级使用绝对定位，父级需要相对定位；

子绝

父盒子需要加定位限制子盒子在父盒子内显示，但是加绝对定位会影响父盒子之后的盒子，相对定位不脱标，最适合做绝对定位的父级（父相）；
子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会用到；

固定定位

选择器 { position: fixed; }

固定定位是元素固定于浏览器可视区的位置，可以在浏览器页面滚动时元素的位置不改变；

固定定位不占有原先的位置（脱标）。
可以看做特殊的绝对定位；
固定定位小技巧：固定在版心右侧位置（小算法）；

left: 50%;
margin-left: 版心宽度/2;

粘性定位

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

粘性定位可以被认为是相对定位和固定定位的混合；

粘性定位占有原先的位置（不脱标，相对定位特点）；
必须添加
```
top
```
，
```
bottom
```
，
```
left
```
，
```
right
```
之中的一个才有效果；
跟页面滚动搭配使用，兼容性较差，IE不支持（一般这种效果使用JavaScript制作）；

[/ol]

定位叠放次序z-index

选择器 { z-index: 1;}

数值可以是正整数，负整数或0，默认auto，数值越大，盒子越靠上；
数值相同时，书写顺序，后来居上；
数字后面不能加单位；
只有定位的盒子有z-index属性；

绝对定位的盒子居中
不能用标准流的

margin: 0 auto;

;
水平居中：

left: 50%; margin-left: -50;（盒子宽度的一半）

；
竖直居中：

top: 50%; margin-top: -50;（盒子高度的一半）

；

定位的特殊特性

块级元素不设置宽高，默认与内容大小相同；
浮动元素，绝对定位（固定定位）元素不会触发外边距合并的问题；

拓展
绝对定位（固定定位）会完全压住盒子（浮动元素不同，它只会压住下面标准流的盒子，但是不会压住下面标准流盒子里面的文字，图片）；
浮动之所以不会压住文字，因为浮动产生的目的就是为了做文字环绕效果的，文字会围绕浮动元素；
如果过一个定位盒子既有left属性又有right属性，先左后右，同理，先上后下；
###PS
前端经常使用PhotoShop来进行编辑素材，.psd格式图层

###CSS属性书写顺序
例子：

.jde{
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;"
color: #333;
background: rgba(0,0,0,.3);
border-radius: 10px;
}

顺序：

布局定位属性

disply(模式建议第一个写)/position/float/clear/visibility/overflow

自身属性

width/height/margin/padding/border/background

文本属性

color/font/text-decoration/text-align/vertical-align/white-space/break-word

其他属性（CSS3新增）

content/cursor/border-radius/box-shadow/text-shadow/background-gradient...

##页面布局整体思路
为了提高网页制作的效率，布局时通常有以下的整体思路：

必须确定页面的版心（可视区），测量得知；
分析页面中的行模块，以及每个行模块中的列模块：页面布局第一准则；
一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则；
制作HTML结构，遵循先有结构，后有样式的原则，结构永远最重要；
先理清楚布局结构，再写代码；

###元素的显示与隐藏
网站广告这种点击关闭会将广告隐藏起来，下次刷新页面时还会出来；

display显示隐藏
display属性用于设置一个元素如何显示；
```
display: none;
```
：隐藏对象，隐藏后元素位置不保留（用处更多）；
```
display: block;
```
：除了转换为块级元素以外，还有显示元素的意思；
这两对属性应用极为广泛，搭配JS可以做出很多网页特效；
visibility显示隐藏
```
visibility: inherit;
```
：继承上一个父对象的可见性；
```
visibility: visible;
```
：对象可视；
```
visibility: hidden;
```
：对象隐藏，隐藏后继续占有原来的位置；
overflow溢出显示隐藏
指定如果内容溢出一个元素的框时（超过其指定高度和宽度），会发生什么；
```
overflow: visible;
```
：不切内容及不添加滚动条，直接显示；
```
overflow: hidden;
```
：溢出部分不显示；
```
overflow: auto;
```
：溢出时添加滚动条；
```
overflow: scroll;
```
：总是显示滚动条；
溢出的内容会影响布局；
但是，有定位的盒子，慎用
```
overflow: hidden;
```
因为他会隐藏多余的部分（故意超出盒子的部分）；

####土豆网鼠标经过显示遮罩
核心原理：原来有一个黑色半透明遮罩看不见，鼠标经过大盒子就显示出来；因为遮罩的盒子不占有位置，所以需要绝对定位和display来使用；

background: rgba(0,0,0,.4) url(xxx.jpg) no-repeat center;

##CSS高级技巧
###精灵图

为什么需要精灵图
一个网页中往往会应用很多小的背景图像作为修饰，党网页中图像过多时，服务器就会频繁的接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度；
因此，为了有效减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称为CSS Sprites、CSS 雪碧）；
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要请求一次就可以了；
精灵图的使用
使用精灵核心：
精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中。；
这个大图片也称为精灵图（Sprites图）；
移动背景图片位置，此时可以使用background-position；
移动的距离就是这个目标图片的x和y坐标；
精准测量图片，一般精灵图都是负值；

字体图标
主要用于显示网页中通用，常用的一些小图标。
字体图标（iconfont）**展示的是图标，本质是字体；**有着轻量，灵活，兼容的优点；

精灵图虽然优点很多，但是缺点也很明显：

图片的缩放会导致失真；
图片制作完成以后想要更换会很麻烦；

使用字体图标

http://icomoon.io

http://www.iconfont.cn

字体图标的引入将fonts文件夹放在页面根目录下；
不同浏览器支持字体格式不同，字体图标之所以兼容，就是因为白喊了主流浏览器支持的字体文件（.ttf/.woff/.eot/.svg）；
在CSS样式中全局声明字体：简单理解为把这些字体文件通过CSS引入到页面中。一定要注意字体文件路径的问题。

@font-face
font-family: '[icomoon]/[iconfont]';
src: url(' ');
src: url(' ') format(' '),
url(' ') format(' '),
url(' ') format(' '),
url(' ') format(' ');
font-weight: normal;
font-style: normal;
}

下载后的文件中会有style.css文件复制；
使用时打开文件中的html文件复制相应字符；
在使用特殊符号的容器中声明字体；

字体图标的追加
把压缩包里面的selection.json重新上传，然后选中自己想要的新的图标，重新下载压缩包，替换原来文件即可；

###CSS三角
网页中经常出现三角形，不用图标，可以直接用CSS画出来；
当盒子没有大小（w0，h0），只定边框，每一个边框都是三角形，大小由边框粗细决定，剩余为透明；

div {
width: 0;
height: 0;
line-height: 0;/*为了兼容浏览器
font-size: 0;  */
border: 50px solid transparent;
boder-bottom-color: pink;
}

###CSS用户界面样式

什么是界面样式
更改一些用户操作样式，以便提高更好的用户体验；

更改鼠标样式

li {cursor: defalt（默认）/pointer（小手）/move（移动）/text（光标）/not-allowed（禁止）;}

表单轮廓 outline
```
outline: none;
```
防止表单域拖拽
```
resize: none;
```

###vertical-align属性应用
CSS中经常用于设置图片或者表单（行内块元素）和文字垂直对齐。
用于设置元素垂直对齐的方式，但是它只针对于行内元素或者行内块元素有效；

vertical-align: baseline（基线，英语的线，默认）/top（顶线）/middle（中线）/bottom（底线）;

解决图片底部的空白空隙问题（默认基线对齐的bug）：1.更改对齐方式，2.将图片转为块级元素；

溢出文字省略号显示

单行文字溢出
必须满足三个条件：

/*1. 强制一行内显示文本（默认normal会自动换行）*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号代替超出部分*/
text-overflow: ellipsis;

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

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

此做法虽然指定行数会显示省略号，但是下一行依然显示文字，只能调整盒子高度；
ie不兼容；
一般后台人员做这个，后台人员可以控制显示多少字；

###常见布局技巧

margin负值运用
浮动元素像素边框叠加时margin负值边框宽度；
但是伪元素选择器鼠标经过时设置边框下一个盒子会压住上一个盒子（解决方法：hover选择器样式添加相对定位（定位压住所有盒子但是保留位置不脱标），如果已经有了定位，则加上z-index属性压住所有盒子）；
文字围绕浮动元素技巧
浮动元素不会压住文字
行内块巧妙运用
页码盒子
梯形盒子（CSS三角强化）
border-bottom
border-left
去掉；
调整盒子大小；
之后绝对定位覆盖；
CSS初始化
不同浏览器对有些标签的默认值不同，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，所以需要初始化；
每个网页都必须先进性CSS初始化

* {/*去除内外边距*/
margin: 0;
padding: 0;
}

em,
i {/*字体不倾斜*/
font-size: none;
}

li {/*去除小圆点*/
list-style: none;
}

img {/*去除低版本浏览器下链接图片的边框*/
border: 0;
/*取消图片底部空白空隙*/
vertical-align: middle
}

button {/*鼠标经过时，鼠标样式变化*/
cursor: pointer;
}

a {
color: #666;
text-decoration: none;
}

a:hover {
color: #c81623;
}

botton,
input {
font-family:          ;
}

body {
/*抗锯齿*/
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5     ；
color: #666;
}

.hide,
.none {
display: none;
}

/*清除浮动*/
.clearfix:after {
visibility:hidden;
clear: both;
display: block;
content: ".";
height: 0;
}

.clearfix {
*zoom: 1;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

前端学习笔记 CSS基础布局 样式 书写规范

溢出文字省略号显示

前端学习笔记 CSS基础布局样式书写规范