下载文档原格式
css样式是什么
CSS（Cascading Style Sheets）即层叠样式表，是一种用来设计网页样式的语言。
CSS 可以控制HTML 元素的颜色、尺寸、位置、字体等方面的表现形式，从而让网页拥有更好的视觉效果和交互性。
通过CSS，网页设计师可以将设计与内容分离，使得网页结构和样式可以独立更新和移植。
CSS 样式包括选择器和属性两个部分。
选择器指定了要设置样式的HTML 元素，而属性则表示需要设置的样式的特征，如字号、字体、背景颜色等。
在HTML 中，可以通过页面头部的`<head>` 标签中的`<style>` 标签或者外部的`link` 标签引入CSS 文件。
通过这些方式，可以定义各种选择器和属性，来达到设计独特、精美的网页的目的。
css bem写法BEM（Block Element Modifier）是一种CSS命名规范，用于描述网页上元素的层级关系。
BEM由三个部分组成：块（Block）、元素（Element）和修饰符（Modifier）。
在BEM中，块是最高级别的组件，表示一个独立的、可复用的组件。
元素是块中的子组件，修饰符是用来描述块或元素的特定状态或行为。
以下是BEM的书写规范：1. 块：使用单个单词表示，首字母大写，后面使用双下划线。
例如：`block__element`。
2. 元素：使用`block__element`的形式表示，其中`block`是父组件的名称，`element`是子组件的名称。
例如：`.block__element`。
3. 修饰符：使用单个单词表示，后面使用双下划线。
例如：`.block__element--modifier`。
以下是一个示例：```css/ 块 /.block {/ 块的内容 /}/ 元素 /.block__element {/ 元素的内容 /}/ 修饰符 /.block--modifier {/ 修饰符的内容 /}```在HTML中，可以使用相同的类名来应用样式。
例如：```html<div class="block"><div class="block__element">元素</div> </div><div class="block--modifier">修饰符</div> ```。
CSS布局基础——BFCwhat's BFC?第⼀次看到这个名词，我是拒绝的，css什么时候还有这个东西？于是迫不及待的google了⼀下，才发现原来它⽆时⽆刻不在我们的css当中，只不过它并不是⼀个属性，不需要我们平常使⽤⼿写罢了。
但是它的重要性确是杠杠的，可以这么说，没有它就就没有什么css布局。
BFC,全称 Block Formatting Context，翻译成块级格式化上下⽂，它就是⼀个环境，HTML元素在这个环境中按照⼀定规则进⾏布局。
⼀个环境中的元素不会影响到其它环境中的布局。
看⼀⼤堆⽂字可能有点抽象，现在拿个js函数来⽐喻说明⼀下吧，我们现在有⼀个叫做bfc的函数，⽽⼀个函数就是⼀个块级作⽤域，这⾥⾯所有的变量申明、运⾏都在这个块级作⽤域内进⾏。
理所当然，⼀个环境中的变量不会影响到其它环境变量。
var box =1;function bfc(){var box = "2";console.log(box);}bfc();//2console.log(box)//1所以，我们是不是可以这样理解：所谓的BFC就是css属性的执⾏域？BFC的⽣成既然js可以通过函数等⽅法来实现块级作⽤域，我想那css肯定也是可以通过⼀些⼿段来实现BFC的。
这⾥BFC的官⽅⽂档写到：Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are notblock boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.从这段描述可以清楚知道，以下⽅法可以创建⼀个新的块级执⾏上下⽂（BFC）：1. 浮动元素、2. 绝对定位元素，3. 块级元素以及块级容器(⽐如inline-block、table-cell、table-capation)4. overflow值不为visible的块级盒⼦当然，root元素会⾃动⽣成⼀个BFC，这个应该很好理解,毕竟需要⼀个根BFC来布局执⾏规则既然存在了执⾏环境，那肯定会存在执⾏规则。
深⼊理解CSS中的line-height的使⽤什么是line-height(⾏⾼)？line-height是指两⾏⽂字基线之间的距离。
什么是基线？基线、底线、顶线、中线注意：基线（base line）并不是汉字⽂字的下端沿，⽽是英⽂字母“x”的下端沿。
不同字体的基线不尽相同。
⾏距、⾏⾼line-height 与⾏内框盒⼦模型所有内联元素的样式表现都与⾏内框盒⼦模型有关。
例如浮动的图⽂环绕效果... and so on什么是⾏内框盒⼦模型我们通过下⾯这段代码进⾏讲解<p>这是⼀⾏普通的⽂字，这⾥有个<em>em</em>标签</p>在这段代码中包含了4中盒⼦：content area内容区是指底线和顶线包裹的区域（⾏内元素display：inline可以通过background-color属性显⽰出来），实际中不⼀定看得到，但确实存在。
内容区的⼤⼩依据font-size的值和字数进⾏变化。
inline boxes。
内联盒⼦不会让内容成块排列，⽽是排成⼀⾏。
如果外部inline⽔平的标签( span、a、em等)则属于内联盒⼦ ,如果是光秃秃的⽂字则属于匿名内联盒⼦。
line boxes。
每⼀⾏就是⼀个⾏框盒⼦。
每个⾏框盒⼦⼜是由⼀个个内联盒⼦组成。
containing box包含盒⼦。
包含盒⼦是由⼀⾏⼀⾏的⾏框盒⼦组成。
<p>标签就代表了⼀个包含盒⼦。
(即上图中的绿⾊部分) line-height 的⾼度机理深⼊理解内联元素的⾼度表现在讲解原理之前，我们先看以下代码:<p>这是⼀⾏普通的⽂字，这⾥有个<em>em</em>标签</p>console.log(document.querySelector('p').clientHeight); // 输出36px现在我们思考这样⼏个问题:元素的⾼度从何⽽来？是由⾥⾯的⽂字撑开的？the answer is：元素的⾼度是由line-height决定的：line-height明明是两基线之间的距离，单⾏⽂字哪来⾏⾼，还控制了⾼度？⾏⾼由于其继承性，影响⽆处不在，即使单⾏⽂本也不例外。
css之bfc原理及应⽤1.css的布局技术有哪些？正常布局流display属性弹性盒⼦⽹格浮动定位CSS 表格布局多列布局本⽂重点涉及到三种布局正常布局流（normal flow）正常布局流(normal flow)是指在不对页⾯进⾏任何布局控制时，浏览器默认的HTML布局⽅式。
块盒独占⼀⾏，⾏盒⽔平依次排列浮动（float）把⼀个元素“浮动”(float)起来，会改变该元素本⾝和在正常布局流（normal flow）中跟随它的其他元素的⾏为。
这⼀元素会浮动到左侧或右侧，并且从正常布局流(normal flow)中移除，这时候其他的周围内容就会在这个被设置浮动的元素周围环绕。
绝对定位（absolute positioning）将元素完全从页⾯的正常布局流(normal layout flow)中移出，类似将它单独放在⼀个图层中，因此绝对定位元素不会对其兄弟元素造成影响，⽽元素具体的位置由绝对定位的坐标决定。
2.块级格式化上下⽂（BFC）简介全称Block Formatting Context，简称BFC。
它是⼀个独⽴的渲染区域，它规定了在该区域中，常规流块盒的布局。
什么叫常规流块盒？什么叫独⽴的渲染区域？常规流块盒常规流块盒在⽔平⽅向上，必须撑满包含块常规流块盒在包含块的垂直⽅向上依次摆放常规流块盒若外边距⽆缝相邻，则进⾏外边距合并常规流块盒的⾃动⾼度和摆放位置，⽆视浮动元素和定位元素包含块：每个盒⼦都有它的包含块，包含块决定了盒⼦的排列区域，绝⼤部分的情况下：盒⼦的包含块，为其⽗元素的内容区域（content部分）独⽴渲染区域BFC渲染区域：这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：根元素（html元素创建BFC区域，覆盖了⽹页中所有的元素）浮动和绝对定位元素overflow不等于visible的块盒何为独⽴？独⽴的渲染区域，就是在不同的BFC的区域，它们进⾏渲染时相互不⼲扰。
css中line-height的理解_介绍line-height实际应⽤⼀、line-height的定义css中line-height⾏⾼是指⽂本⾏基线之间的距离，不同字体，基线位置不同。
line-height只影响⾏内元素和其他⾏内内容，⽽不会直接影响块级元素，如果块级元素设置了line-height，这个值只会应⽤到块级元素⾥⾯的内联内容时才会有影响。
在块级元素上声明line-height会为该块级元素的内容设置⼀个最⼩⾏框⾼度。
⼆、line-height与⾏内框盒⼦模型<p>hello world<em>this is em</em></p>这样⼀⾏普通的代码，包含了4种盒⼦，如下：1.“内容区域”（content area）围绕⽂字看不见的盒⼦，内容区域的⾼度⼤⼩只与font-size的⼤⼩和font-family有关，在simsun宋体字体下，内容区域⾼度等于⽂字⼤⼩。
2.“内联盒⼦”（inline boxes）内联盒⼦（inline boxes），不会让内容成块显⽰，⽽是排成⼀⾏。
如果外部含inline⽔平标签，则属于内联盒⼦；如果是个光秃秃的⽂字，则属于”匿名内联盒⼦“。
3.⾏框盒⼦（line boxes）每⼀⾏就是⼀个⾏框盒⼦，每⼀个⾏框盒⼦⼜是由⼀个个内联盒⼦组成。
4.包含盒⼦（containing box）由⼀⾏⾏⾏框盒⼦组成。
三、line-height与内联元素的⾼度机理关于内容区域⾼度：①内容区域⾼度只与字体以及字号有关，与line-height没有任何关系；②在simsun字体下，内容区域⾼度等于⽂字⼤⼩值。
⾏的⾼度不是由于⾏⾼造成的。
因为：①⾏⾼由于其继承性，影响⽆处不在，即使单⾏⽂本也不例外；②⾏⾼这是幕后⿊⼿，⾼度表现不是⾏⾼，⽽是内容区域和⾏间距。
只不过：⾏间距 = line-height - font-size⾏间距⼀般是上下均分的。
divcss布局及Web标准对网站优化和SEO方面的益处现在采用CSS+DIV建网站的朋友越来越多,我们今天就谈谈divcss布局及Web标准对网站优化和SEO方面的益处:一、用css+div,就要放弃以前表格排版的一些习惯,包括页面格式的一些习惯:1.以前用表格排版,一般都是用不规则的背景图片,跨单元格来做一些不规则的效果.css+div的特点就是格式和样式分开.2.css+div还是用块的行使排版比较好,页面简单,直观,不那么花哨.源码的结构也简单,页面执行效率高.3.尽量少使用div的嵌套,减少换行等冗余代码,提升网页的加载速度.二、Div+css的网站结构对seo网站优化起到的作用越来越明显.研究现在排名靠前的一些热门关键词网站,基本都是用div+css了,那么为什么DIV+CSS会对排名或者说是seo更加有利呢?1. 采用这种结构后HTML页面里基本只有文字或图片信息,而样式则放在CSS里面,这样搜索爬虫就不会管CSS,只要采集HTML里的内容就可以了,大大提高爬虫的效率.2.采用这种结构往往关键词更集中,密度更高.3.DIV+CSS相对于table来说比较精简,而且基本不存在网上一直在说的"表格嵌套"的问题.4.符合W3C标准的网页在seo优化方面本身就有优势,更得搜索引擎蜘蛛的喜爱.IE6绝对定位的bug及其解决办法IE6绝对定位的bug及其解决办法。
position:absolute定位在IE6下存在left和bottom的定位错误问题：Example Source Code []<!–IE6下的left定位错误–><div style=”position:relative;border:1px solid ora nge;text-align:center;”><a href=””>/</a><div style=”position:absolute;top:0;left:0;background:#CCC;”>52CSS</div></div><!–IE6下的left定位错误–><hr /><div style=”position:relative;border:1px solid orange;text-alig n:right;”><a href=””>/</a><div style=”position:absolute;top:0;left:0;background:#CCC;”>52CSS</div></div>上面这段代码在IE6中定位错误。
1、关于内容、结构和表现说法正确的是（ABD ）A、内容是页面传达信息的基础B、表现使得内容的传达变得更加明晰和方便C、结构就是对内容的交互及操作效果D、内容就是网页实际要传达的信息，包括文本、图片、音乐、视频、数据、文档等。
2、关于XHTML基本语法说法正确的是（ABC ）A、在文档开始要定义文档类型B、在根元素中应声明命名空间C、所有标签需闭合的，空标签要加“ /”来关闭D、注释语句为：/**/3、关于CSS基本语法说法正确的是（ AC ）A、属性必须要包含在{}号之中B、属性和属性值之间用等号链接C、当有多个属性时，用“；”进行区分D、如果一个属性有几个值，则每个属性值之间用分号分隔开4、以下声明可将文本大小设为12px的有：（ABC）A、font-size:12px;B、font-size:9pt;C、font-size:0.75em;D、font-size:0.75;5、关于样式表的优先级说法正确的是：（ABC ）A、直接定义在标记上的css样式级别最高B、内部样式表次之C、外部样式表级别最低D、当样式中属性重复时，先设的属性起作用6、关于浏览器默认样式说法错误的是：（ABCD ）A、IE默认页边距为10px，通过body的margin属性设置。
B、FF默认页边距为8px,通过body的padding属性设置。
C、IE默认列表左缩进为40px，通过ul、ol的margin属性设置。
D、FF默认列表左缩进为40px，通过ul、ol的padding属性设置。
7、关于CSS为什么会出现Bug说法正确的是：（ABC）A、CSS作为表现标准语言，需要在不同浏览器中实现表现层统一B、各大主流浏览器由于不同厂家开发，所有的核心构架和代码也很难重和C、各大厂商处于自身利益而设种种技术壁垒D、网页设计师定义的命名空间不一样8、CSS样式文件的类型有（ ABC ）A、内部样式表B、内联样式表C、外部样式表D、包含样式表9、以下哪些Bug在FF中不会出现（ ABCD ）A、双补浮向BugB、图片间隙 BugC、项目符号隐藏 BugD、多余字符Bug10、DIV/CSS布局模型包括（ ABC ）A、Flow Model（流动模型）B、Float Model（浮动模型）C、Layer Model （层模型）D、box Model (盒模型)11、关于CSS基本语法说法正确的是（ AC ）A、属性必须要包含在{}号之中B、属性和属性值之间用等于号链接C、当有多个属性时，用“；”进行区分D、如果一个属性有几个值，则每个属性值之间用分号分隔开12、以下声明可将文本大小设为12px的有：（ABCD）A、font-size:12px;B、font-size:9pt;C、font-size:0.75em;D、font-size:0.75;13、关于样式表的优先级说法正确的是：（ABC）A、直接定义在标记上的css样式级别最高B、内部样式表次之C、外部样式表级别最低D、当样式中属性重复时，先设的属性起作用14、关于Hack说法正确的是：（ ABC ）A、Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法B、它们都属于个人对CSS代码的非官方的修改C、也有人称之为patch(补丁)D、以上说法都不对15. 关于横导航链接为什么要用UL+LI，以下说法正确的是（ ABC ）A．导航从其本意上说，不是一个段落P，更不是一些个标题Hx，也不是一个DIV，DIV 只是部分与分区。
CSS核心：包含块（Containing Block）
2010年07月16日
包含块（Containing Block）是视觉格式化模型的一个重要概念，它与框模型类似，也可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。
在阅读本文前，请先理解一下：
文档结构
元素类型
CSS的direction属性
1视口（viewport）
浏览器的窗口一般由3个部分组成，如图5所示。
图5 浏览器的视口
连续媒介的用户端（例如电脑的浏览器）通常提供给用户一个视口（屏幕上的一个窗口或浏览区域），用户通过它来浏览文档。
当视口尺寸改变时（例如调整浏览器的窗口大小），用户端可能会改变文档的布局。
如果视口比文档设定的大小要小，用户端往往会提供滚动机制（例如浏览器的滚动条）。
对于一个渲染区域而言，最多只能有一个视口，不过用户端可以对多个渲染区域加以渲染（即对同一文档提供不同的视口）。
2 包含块
在浏览器生成显示的页面的时候，每一个框都有一个定位，这个定位受其包含块的影响，不过它不被包含块所限制，而且可能会溢出到包含块之外。
CSS手册中，对于一个元素的包含块的定义如下：
1根元素存在的包含块称为初始包含块。
在(X)HTML中，根元素是html元素（尽管有的浏览器会不正确地使用body元素）。
而初始包含块的direction属性与根元素相同。
(direction属性指定了块的基本书写方向，它还规定了表格列布局的方向、水平溢出的方向等。
)
初始包含块的宽度可以由根元素的width属性指定。
如果该属性取值为“auto”，用户端提供初始宽度（如，视口的当前宽度）。
初始包含块的高度可以由根元素的height属性指定。
如果该属性取值为“auto”，包含块的高度将调整以适应文档内容（即由其内容决定其高度）。
初始包含块不可以被定位或浮动（即，用户端忽略根元素的position和float属性）。
2对于其它元素：如果该元素的定位（position）为“relative（相对）”或者“static （静态）”，它的包含块由它最近的块级、单元格（table cell）或者行内块（inline-block）祖先元素的内容框创建。
3如果元素设定了“固定定位（position: fixed）”，包含块由视口创建。
4如果元素设定了“绝对定位（position: absolute）”，包含块由最近的position 属性为“absolute”、“relative”或者“fixed”的祖先元素创建，方法如下：4如果祖先元素是行内元素，包含块取决于祖先元素的direction属性：
如果direction为“ltr”，包含块的顶、左边是该祖先元素创建的第一个框的顶、左补白边，它的底、右边是该祖先元素创建的最后一个框的底、右补白边。
如果direction为“rtl”，包含块的顶、右边是该祖先元素创建的第一个框的顶、右补白边，
它的底、左边是该祖先元素创建的最后一个框的底、左补白边。
4否则，祖先的补白边形成包含块。
4如果不存在这样的祖先元素，则元素的包含块为初始包含块。
上面的定义太抽象，所以我整理了一个流程图来说明一下，如图6所示。
图5 浏览器的视口
提示：此时特别需要注意的是，祖先元素是行内元素时，浏览器会出现不一致的解释方式，大家可以在不同的浏览器内测试一下。
例如下面的XHTML文档，其文档结构及在浏览器内的显示如图7所示。
当元素
都没有定位的时候，包含块的创建如表1所示。
<!DOCTYPE HTML>
<html xmlns="/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>2 包含块:: 框模型:: 豆豆猫的窝</title>
</head>
<body id="body">
<div id="div1">【div1】的文字。
<p id="p1">这里是【p1】。
</p>
<p id="p2">这里是【p2】<em id="em1">【em1】<strong id="strong1">【strong1】</strong></em>。
</p>
</div>
</body>
</html>
图7 文档结构图
表1 无定位元素的包含块
为框创建包含块的元素
的创建产生框的元素
body 初始包含块（与用户端相关）
div1 body
p1 div1
p2 div1
em1 p2
strong1 p2
此时，如果对层“div1”设定定位：
#div1 {position:absolute; top:30px; left:20px; background:#0C6;}
则“div1”层的包含块不再是“body”，而是初始包含块（因为没有其它定位祖先框）。
如果再增加对“em1”的定位：
#em1 {position:absolute; top: 60px; left:50px; background:#FC3;}
则包含块的创建如表2所示。
表2 元素设定了定位的包
为框创建包含块的元素
含块的创建产生框的元素
body 初始包含块
div1 初始包含块
p1 div1
p2 div1
em1 div1
strong1 em1
“em1”定位后，它的包含块变为由它最靠近的祖先定位框“div1”创建的那个框，如图8所示。
图8 改变元素定位属性对包含块的影响
因此对元素的左（left）和上（top）的位置的计算，如图9所示。
（查看实例文件）
图9 定位元素位置的计算
提示：包含块的概念对于理解CSS“定位”的概念非常重要。
