企业官网建设流程全解析

常用的长度单位

px（像素），em（相对于当前元素的font-size的倍数，即3em=3×当前元素font-size的值）,
rem(相对于根元素html的font-size的倍数，即3rem=3×根元素font-size的值)
%（相对父元素计算）
注：CSS中设置长度，必须加单位，否则样式无效

总结各元素的显示模式

（一）块元素
（1）主体结构标签<html>、<body>
（2）排版标签<h1>~<h6>、<hr>、<p>、<pre>、<div>
（3）列表标签<ul>、<ol>、<li>、<dl>、<dt>、<dd>
（4）表格相关标签<table>、<thead>、<tbody>、<tfoot>、<tr>、<caption>
（5）<form>与<option>
（二）行内元素
（1）文本标签<span>、<br>、<em>、<strong>、<sup>、<sub>、<del>、<ins>
（2）<a>与<label>
（三）行内块元素
（1）图片<img>
（2）单元格<td>、<th>
（3）表单控件<input>、<textarea>、<select>、<button>
（4）框架标签<iframe>

修改元素的显示模式
display: none/block/inline/inline-block
元素会 被隐藏（不显示） 或 作为块级元素/内联元素/行内块元素 显示

盒子模型 的组成：CSS会把所有的HTML元素都看成一个盒子，所有的样式也都是基于这个盒子

（1）margin外边距：盒子与外界的距离
（2）border边框：盒子都边框
（3）padding内边距：紧贴内容的补白区域
（4）content内容：元素中的文本或后代元素都是它的内容
注：
盒子的大小=content+左右padding+左右border
margin不影响盒子的大小，但影响盒子的位置

盒子的内容区content

min-width，max-width一般不和width一起使用
min-height，max-height一般不和height一起使用

div{ background-color: skyblue; height: 200px; min-width: 400px; max-width: 900px; }

默认宽度：总宽度 = 父的content - 自身的左右margin
内容区的宽度 = 父的content - 自身的左右margin - 自身的左右border - 自身的左右padding

盒子的内边距（padding）：

注：1、padding的值不能为负数
2、行内元素的左右内边距是没问题的，上下内边距不能完美的设置
3、块级元素、行内块元素，四个方向内边距都可以完美设置

margin塌陷问题

定义：第一个子元素的上margin会作用在父元素上，最后一个子元素的下margin会作用在父元素上
解决方案：
1.给父元素设置不为0的padding
2.给父元素设置宽度不为0的border
3.给父元素设置overflow: hidden(最优解)

margin合并问题

定义：上面的兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值而非相加

处理内容溢出

overflow: hidden(隐藏)/visible(默认值)/scroll(滚动条)/auto;
overflow-x和overflow-y同上，分别针对水平和数值方向

隐藏元素的两种方式

方式一：元素看不见，但还占有原来的位置（元素的大小依然保持）
visibility: show(默认)/hidden
方式二：彻底隐藏，不占用任何位置
display: none

样式的继承：能继承的都是和盒子模型没关系的

1.会继承的css属性
字体属性，文本属性（除了vertical-align），文字颜色等
2.不会继承的css属性
边框，背景，内边框，外边距，宽高，溢出方式等

元素的默认样式

1.<a>元素：下划线，字体颜色，鼠标小手
2.<h1>~<h6>元素：文字加粗，文字大小，上下外边距
3.<p>元素：上下外边距
4.<ul>、<ol>元素：左内边距
5.<body>元素：8px外边距（四个方向）
…
优先级：元素的默认样式>继承的样式
可以先使用cursor: default来清除默认方式，选择器一定要直接选择器到该元素

布局小技巧

1.行内元素、行内块元素，可以被父元素当作文本处理
（即可以像处理文本对齐一样，去处理行内、行内块在父元素中的对齐。text-align、line-height、text-indent等）
2.如何让子元素在父亲中水平居中：
（1）若子元素为块元素，给父元素加上：margin: 0 auto;
（2）若子元素为行内元素、行内块元素，给父元素加上：text-align: center
3.如何让子元素在父亲中垂直居中：
（1）若子元素为块元素，给子元素加上：margin-top，值为:(父元素content-子元素盒子总高)/2
（2）若子元素为行内元素、行内块元素：
让父元素的height=line-height，每个子元素都加上：vertical-align: middle;
补充：若想绝对垂直居中，父元素font-size设置为0

元素之间的空白问题

定义：行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符
解决方案：
方案一：去掉换行与空格（不推荐）
方案二：给父元素设置font-size: 0;，再给需要显示文字的元素，单独设置文字大小（推荐）

行内块元素的幽灵空白问题

定义：行内块元素与文本的基线对齐，而文本的基线与文本最低端之间是有一定距离的
解决方案：
方案一：给行内块设置vertical，值不为baseline即可，设置为middle，bottom，top均可
方案二：若父元素只有一张图片，设置图片为display: block;
方案三：给父元素设置font-size: 0，若该行内块内部还有文本，则需要单独设置font-size

浮动一开始是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一