企业官网建设流程全解析

选择器优先级

每个选择器都可计算权重，格式为（a，b，c）

a ID选择器的个数

b 类，伪类，属性 选择器的个数

c 元素，伪元素选择器的个数

比较规则：从左到右依次比较大小

行内样式权重大于所有选择器

！important的权重，大于行内样式，大于所有选择器，权重最高

CSS三大特性

层叠性

如果发生样式冲突，根据选择器优先级进行层叠（覆盖）

冲突：元素的同一个样式名被设置了不同的值

继承性

概念：元素自动拥有其父元素或祖先元素上所设置的某些样式

规则：优先继承离的近的

常见可继承属性：text font line color

优先级

！important > 行内样式 >ID选择器>类选择器>元素选择器>*>继承

并集选择器是分开算

颜色

十六进制颜色

其组成部分是：＃RRGGBB，其中 RR（红色），GG（绿色）和 BB（蓝色）。所有值必须介于 0 和 FF 之间。

p { background-color:#ff0000; }

rgb颜色

颜色值指定：RGB（红，绿，蓝）。每个参数（红色，绿色和蓝色）定义颜色的亮度，可在 0 和 255 之间，或一个百分比值（从0％到100％）之间的整数。

p { background-color:rgb(255,0,0); }

rgba颜色

颜色值指定：RGBA（红，绿，蓝，alpha）。 Alpha 参数是一个介于 0.0（完全透明）和 1.0（完全不透明）之间的参数。

p { background-color:rgba(255,0,0,0.5); }

hsl颜色

颜色值指定：HSL（色调，饱和度，明度）

p { background-color:hsl(120,65%,75%); }

hsla颜色

指定HSLA颜色值：HSLA（色调，饱和度，亮度，α），α是Alpha参数定义的不透明度。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。

p { background-color:hsla(120,65%,75%,0.3); }

常用字体属性

字体大小

属性名：font-size

通常给 body 设置 font-size 属性

字体族

属性：font-family

如果字体包含空格，必须用引号包裹

通常在最后写上serif和sans-serif

字体风格

属性名：font-style

常用值：

1.normal 正常

2.italic 斜体（更推荐）

3.oblique 斜体

字体粗细

属性名：font-weight

常用值：

一、关键词

1.lighter

2.normal

3.bold

4.bolder

二、数值

100~1000 无单位

100~300=lighter 400~500=normal 600及以上=bold

字体复合属性

属性名：font

1.字体大小、字体族必须写上

2.字体族必须是最后一位

3.字体大小必须是倒数第二位

4.属性之间用空格隔开

常用文本属性

文本颜色

属性名：color

可选值：

1.颜色名

2.rgb / rgba（常用）

3.HEX / HEXA（常用）

4.HSL / HSLA

文本间距

字母间距：letter-spacing

单词间距：word-spacing

属性值为像素（px）

文本修饰

属性名：text-decoration

可选值：

overline

underline

line-through

none

可搭配下面值使用：

dotted ：虚线

wavy ：波浪线

也可指定颜色

文本缩进

属性名：text-indent

属性值：CSS中的长度单位。eg：px

文本对齐

水平

属性名：text-align

属性值：left center right

垂直

顶部：默认就是顶部对齐

居中：height=line-height

底部：line-height=（height x 2）-font-size - x

(x是根据具体字体族)

行高

属性名：line-heught

可选值：

1.normal

2.px

3.数字

4.百分比

vertical-align

注意：不能控制块元素

属性名:vertical-align

作用：用于指定同一行元素之间，或表格单元格内的文字的垂直对齐方式

常用值：

1.baseline（默认值）

2.top

3.middle

4.bottom

列表相关属性

可以用在 ul ol li 元素上

表格相关属性

表格独有属性（仅在table标签内可以使用）

边框相关属性

不止表格能用，其他元素都能用

背景相关属性

鼠标相关属性

属性名：cursor

属性值：pointer （小手） move（移动图标） text（文字选择器）等

自定义图标：url（" "）.pointer

常用长度单位

CSS中设置长度必须有单位

元素的显示模式

块元素（block）

又称：块级元素

特点：

1. 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。

2. 默认宽度：撑满父元素。

3. 默认高度：由内容撑开。

4.可以通过 CSS 设置宽高。

修改元素显示模式

属性名：display

盒子模型

组成部分

盒子的内容区（content）

所谓的默认宽度，就是不设置width属性时，元素所呈现出来的宽度。

总宽度= 父的 content — 自身的左右 margin 。

内容区的宽度= 父的 content — 自身的左右 margin — 自身的左右 border — 自身的左右

padding 。

盒子的内边距（padding）

盒子的边框（border)

边框相关属性有20个

盒子的外边距（margin）

margin 注意事项

1. 子元素的 margin ，是参考父元素的 content 计算的。（因为是父亲的 content 中承装着

子元素）

2. 上 margin 、左 margin ：影响自己的位置；下 margin 、右 margin ：影响后面兄弟元素

的位置。

3. 块级元素、行内块元素，均可以完美地设置四个方向的 margin ；但行内元素，左右

margin 可以完美设置，上下 margin 设置无效。

4. margin 的值也可以是 auto ，如果给一个块级元素设置左右 margin 都为 auto ，该块级

元素会在父元素中水平居中。

5. margin 的值可以是负值。

margin塌陷问题

什么是margin塌陷？

第一个子元素的上margin 会作用在父元素上，最后一个子元素的下margin 会作用在父元素上。

如何解决margin塌陷？

方案一： 给父元素设置不为 0 的 padding 。

方案二： 给父元素设置宽度不为 0 的 border 。

方案三：给父元素设置 css 样式 overflow:hidden

margin合并问题

什么是 margin 合并？

上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。

如何解决 margin 塌陷？

无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。

处理内容溢出

属性名：overflow

属性值：

1.visible ：显示，默认值

2.hidden ：隐藏

3.scroll ：显示滚动条，不论内容是否溢出

4.auto ：自动显示滚动条，内容不溢出不显示

隐藏元素的两种方式

方式一：visibility 属性

visibility 属性默认值是 show ，如果设置为 hidden ，元素会隐藏。元素看不见了，还占有原来的位置（元素的大小依然保持）。

方式二： display 属性

设置 display:none ，就可以让元素隐藏。

彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高。

样式的继承

会继承的 css 属性：字体属性、文本属性（除了vertical-align）、文字颜色 等。

不会继承的 css 属性：边框、背景、内边距、外边距、宽高、溢出方式 等。

一个规律：能继承的属性，都是不影响布局的，简单说：都是和盒子模型没关系的。

元素的默认样式

元素一般都些默认的样式，例如：

1. <a> 元素：下划线、字体颜色、鼠标小手。

2. <h1> ~ <h6> 元素： 文字加粗、文字大小、上下外边距。

3. <p> 元素：上下外边距

4. <ul> 、 ol 元素：左内边距

5. body 元素： 8px 外边距（4个方向）

优先级：元素的默认样式 > 继承的样式

布局技巧

如何让子元素，在父亲中 水平居中：

1.若子元素为块元素，给父元素加上： margin:0 auto; 。

2.若子元素为行内元素、行内块元素，给父元素加上： text-align:center 。

如何让子元素，在父亲中 垂直居中：

1.若子元素为块元素，给子元素加上： margin-top ，值为：(父元素 content －子元素盒子

总高) / 2。

2.若子元素为行内元素、行内块元素：让父元素的 height = line-height ，每个子元素都加上：

vertical-align:middle;

补充：若想绝对垂直居中，父元素 font-size 设置为 0 。

元素之间的空白问题

行内块的幽灵空白问题

方案一：给行行内块设置vertical，值不为baseline即可，设置为middel /bottom /top

方案二：若父元素中只有一张图片，设置图片为display:block。

方案三：给父元素设置font-size: 0。如果该行内块内部还有文本，则需单独设置font-size

浮动

浮动简介

属性名：float

元素浮动后特点

1.脱离文档流。

2.不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽

高。

3.不会独占一行，可以与其他元素共用一行。

4.不会margin合并，也不会margin塌陷，能够完美的设置四个方向的margin和padding。

5.不会像行内块一样被当做文本处理（没有行内块的空白问题）。

浮动后的影响

对兄弟元素的影响： 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响

对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。

解决方法