整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
CSS的介绍
CSS，Cascading Style Sheets层叠样式表。
一个网页由三个部分：结构、表现、行为，对应的标准是：XHTML、CSS、JavaScript。
这三个标准语言，是浏览器直接可以识别的，并且能直接进行解释(翻译)的。
CSS的格式
一个CSS样式表(<style></style>)由多个CSS规则构成；
一个CSS规则由“选择器”和{}构成；
选择器就是给哪一个HTML元素定义；
CSS选择器
第一：基本选择器（单一）
通用选择器(*)：将匹配所有的HTML元素；
标签选择器：对应所有的HTML标记，名称与标记名称一样。
类选择器：可以通过给一类HTML元素，定义同一个class属性来增加样式。类样式定义以“.”开头定义。CSS的CLASS属性一般给层叠样式用表。比如：
.news表示class=news的元素增加样式
news表示class=news的<div>元素增加样式
.news title表示class=news下的class=title的<div>元素
ID选择器：给标记特定ID属性的HTML元素来增加样式。\
Id选择器的定义，以“#”号开头
网页不能出现同一个ID的值，ID像身份证号，具有唯一性；
HTML元素的ID属性，一般给JavaScript使用
第二：组合选择器
多元素选择器：也就是同时给多个HTML元素定义。
body,p,a,ul,li,p{margin:0px;padding:0px;}
每一个HTML元素都具有默认样式。
后代元素选择器：用空格来分隔各个选择器。
.news .title p{background-color:#FF0000;}
子元素选择器：用>号来分隔父子选择器，不存在第三层级的问题。
第三：伪类选择器
伪类选择器一般是给超链接<a>标记来增加样式。
超链接具有四个状态：
正常状态 a:link{ }
放上状态 a:hover{ }
激活状态a:active{ }
访问过状态 a:visited{ }
全局链接
a:link,a:visited{color:#333;text-decoration:none;}
a:hover{color:#FF0000,text-decoration:underline;}
给链接增加类样式 (class=“a2”)
a.a2:link,a.a2:visited{ }
a.a2:hover{ }
CSS的继承性
CSS内部元素将继承外部元素的样式，多个外层元素的样式就叠加到内层元素上。<body>元素是网页中最大的标记，它中的样式将被其它子元素继承。
哪些CSS属性能被继承：color、font-size、font-weight、font-style、line-height、text-indent、letter-spacing、word-spacing、text-align等
引入CSS的方式
（1）内嵌式
通过<style></style>来书写CSS代码。
只能应用于当前网页，不能被其它网页共享。
注意：<style>标记可以放在网页的任何地方，但一般放在<head>。
（2）外联式
通过<link>标记来引入外部的CSS文件(.css)。
可以被其它网页共享。public.css index.css news.css about.css
格式：<link href=“CSS的URL” rel=“stylesheet” type=“text/css” />
注意：<link>标记只能放在<head>中
（3）行内样式
通过style的属性来书写CSS代码。
每一个HTML元素，都有 style、class、id、name、title 属性。
举例：<p style=“font-size:24px;”></p>
CSS的字体/文本属性
Font-size：文字大小
Font-weight：加粗
Font-style：斜体
Color：颜色
Line-height：行高
Text-indent：首行缩进
Text-align：水平对齐
Letter-spacing：字符间距
CSS列表
List-style-type：列表类型，取值：none、circle、 square
List-style-position：符号位置，取值：inside、outside
List-style-image：图片路径，举例：list-style-image:url(images/li01.gif);
Background-color：背景颜色
Background-image：背景图片，举例：background-image:url(images/bg.gif);
Background-repeat：背景平铺，取值：no-repeat(不平铺)、repeat(平铺)、repeat-x(x方向)、repeat-y(y方向)
Background-position：背景定位，取值：固定值或百分比
格式：background-position:水平方向 垂直方向;
用固定值定位：background-position:100px 0px; //距离左边100px，距离上边0px
用百分比定位：background-position:50% 50%; //水平方向居中 垂直方向居中
用单词来定位：background-postion:left|center|right top|center|bottom; 三个值取其中一个
Background-attachment：附加信息，取值：scroll(滚动)、fixed(固定)
简写形式：background:url(images/bg.gif) repeat-x 100px 0px; //多个属性值间用“空格”隔开
Float：元素浮动，取值：left或right。
Clear：清除浮动，取值：left或right或both
CSS浮动元素将向左向右浮动；
浮动可以叫“飘”起来；
浮动的元素，直到碰到父元素的边框或前一个浮动元素的边框为止；
浮动元素是一个块元素框，不管它原来是什么元素(行内元素)；
浮动元素不再占用空间，脱离了普通文档流，层级比普通元素的级别高；
清除浮动
清除浮动特性后，清除元素之后的其它元素将恢复默认排版；
清除浮动特性后，包围元素从视觉上看起来，像包围住了浮动元素；
Border：同时设置四个边框的属性
Border-left：设置左边框的属性
Border-right：设置右边框的属性
Border-top：设置顶边框的属性
Border-bottom：设置底边框的属性
格式：border-bottom：粗细 线型 线颜色;
举例：border-bottom：2px solid #FF0000; //元素的下边线为2px粗的实线，颜色为红色
线型取值：none(无边线)、solid(实线)、dashed(虚线)、dotted(点状线)、double(双线)
每一个HTML元素可以看成一个“盒子”。
一个“盒子”具有：宽度、边框、内填充、外边距
宽度(width)和高度(height)：是指内容的宽度和高度，不含边框、外边距、内填充。
内填充(padding)：是指内容到边框线间的距离，含四个方向：上、右、下、左
外边距(margin)：是指边框线以外的距离。
计算一个“盒子”的总空度
假设：总宽度为100px，边框为1px，内填充为10px，求内容的宽度
Width = 100px – 1px*2 -10px*2 = 78px
假设：总宽度为100px，内容的宽50px，求左右内填充分别是多少？
Padding-left = (100px – 50px )/2 = 25px
Padding-left：左边线到内容间的距离
Padding-right：右边线到内容间的距离
Padding-top：顶边线到内容间的距离
Padding-bottom：底边线到内容间的距离
Padding：同时设置四个边的内填充距离
padding:10px; //表示：上下左右四个内填充都是10px
padding:5px 10px; //表示：上下为5px，左右为10px
padding:5px 10px 15px; //表示：上为5px，左右为10px，下为15px
padding:5px 10px 15px 20px; //表示：上右下左分别设置不同的内填充，顺序不可乱
Margin-left：左边线以外的距离
Margin-right：右边线以外的距离
Margin-top：顶边线以外的距离
Margin-bottom：底边线以外的距离
Margin:10px; //表示：四个外边距都是10px
Margin:10px 15px; //表示：上下外边为10px，左右外边距为15px
Margin:5px 10px 15px //表示：上外边距为5px，左右外边距为10px，下外边距为15px
Margin:5px 10px 15px 20px; //分别设置四外外边距，顺序为“上右下左”
一、首先要确定的事情
主页的宽度：973px
主页的背景色、背景图片
网页的结构：网页头部、网页尾部、网页主要内容（左右两列）
二、网页结构图
喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！
志同道合的小伙伴跟我一起学习交流哦！
1 文档流介绍
浮动（ float）
普通流（ normal flow）也叫标准流、文档流
前面我们说过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？
CSS的定位机制有3种：普通流（标准流）、浮动和定位
htmi语言当中另外一个相当重要的概念——标准流！或者普通流，或者文档流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。
2 浮动是用来做文字环绕效果的
浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕图片的效果。
后来，我们发现浮动有个很有意思的事情：就是让任何盒子可以一行排列因此我们就慢慢的偏离主题，用浮动的特性来布局了。（CSS3已经是我们真正意义上的网页布局，具体CSS3我们会详细解释）
3 体会浮动
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
在CSS中，通过float属性来定义浮动，其基本语法格式如下：
选择器{ float：属性值；}
4 浮动就是漂浮的意思
浮动脱离标准流，不占位置，会影响标准流。可以盖住标准流。浮动只有左右浮动。
5 浮动首先需要添加标准流父级
浮动首先创建包含块的概念（包裹）。就是说，浮动的元素总是找离它最近的父级元素对齐。但是不会超出内边距的范围。
6 浮动特性对齐父盒子
7 浮动特性盒子排列
浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。
一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。
8 浮动影响盒子显示模式
元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少。
浮动根据元素书写的位置来显示相应的浮动。
9 浮动总结
浮动的目的就是为了让多个块级元素同一行上显示。
float浮漏特（形象的表示）
浮：加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。
漏：加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏给了标准流的盒子。
特：特别注意，首先浮动的盒子需要和标准流的父级搭配使用，其次特别的注意浮动可以使元素显示模式体现为行内块特性。
10 版心和布局流程
阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。
“版心”是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960pX、980px、1000px、1200px等。
布局流程
为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：
1、确定页面的版心（可视区）。
2、分析页面中的行模块，以及每个行模块中的列模块。
3、制作HTML页面，CSS文件。
4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
11 一列固定宽度且居中
12 两列左套右宽型
快捷生成框架：
按tab键即可生成如下框架：
13 通栏平均分布型
看不懂的小伙伴不要气馁，后续的分享中将持续解释，只要你跟着我分享的课程从头到尾去学习，每篇文章看三遍，一个月后，回过头来看之前的文章就会感觉简单极了。
本章已结束，下篇文章将分享《12 清除浮动》小伙伴们不要错过哟！
、什么是 CSS 盒模型，它是如何工作的？
CSS 盒模型定义了元素在网页上的呈现方式。它由内容、内边距、边框和边距组成。内容代表实际的元素内容，而填充则在内容和边框之间添加空间。边框提供可见的边界，边距在元素周围创建空间。
这是一个例子：
.box { width: 200px; padding: 20px; border: 1px solid black; margin: 10px;}2、解释 CSS 特异性的概念以及它如何影响样式应用。
CSS 特异性决定了当多个规则针对某个元素时，将哪些样式应用于该元素。特异性是根据选择器的组合计算的，例如，元素类型、类、ID 和内联样式。特异性越高，规则的优先级越高。
这是一个例子：
/* ID selector - high specificity */#myElement { color: red;}
/* Class selector - medium specificity */.myClass { color: blue;}/* Element selector - low specificity */div { color: green;}3、使元素水平和垂直居中的不同方法有哪些？
有多种方法可以使元素水平和垂直居中。以下是三种流行的技术：
1).弹性盒方法：
.container { display: flex; justify-content: center; align-items: center;}2).CSS网格方法：
.container { display: grid; place-items: center;}3).变换方法：
.container { position: relative;}
.centered-element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}4、如何创建在滚动时保持固定的粘性标题？
您可以通过使用position:sticky;来实现粘性标题。此属性允许元素在滚动时在其容器或视口中保持固定。
这是一个例子：
.header { position: sticky; top: 0; background-color: #ffffff;}5、什么是CSS浮动属性，它是如何工作的？
CSS float 属性用于在其容器内定位元素。浮动元素向左或向右移动，允许其他元素环绕它们。此属性通常用于创建多列布局或定位图像。
*请认真填写需求信息，我们会在24小时内与您取得联系。
