基础介绍
CSS 基础介绍
CSS（层叠样式表） +
基础介绍
CSS 基础介绍
CSS（层叠样式表） 用来表现html，不仅可以静态的修饰网页，还可以适配各种脚本语言动态的对网页各元素进行格式化 在css中用户看到的大部分效果都是各种样式重叠之后形成的 核心是层叠，多重属性叠加共同作用 @@ -39,7 +39,7 @@ 页面头部优化: 页面头部指的是代码部分,具体的就是(Description)描述和(Keywords)关键字两部分 描述 -应该用近乎描述的语言写下一段介绍网页的文字,在其中,你应该适当的对你的网站的特色内容加以重复以求突出
<meta name="description" cntent="">告诉搜索引擎你的站点的主要内容
关键字
应该列出你认为合适的,能突出网站内容的关键字就可以了,关键字不要设置太多,可设置8-10个,搜索引擎智慧浏览靠前的几个关键字
<meta name="keywords" content="">向搜索引擎说明你网页的关键字
超链接优化
搜索引擎有个会自动爬行于互联网上的机器人程序,这个机器人顺着网站之间的链接游览世界
采用纯文本链接;
尽量不要用flash动画设置链接和图片链接,因为搜索引擎识别不了flash上为文字
按规范书写超链接,title:起到提示访客的作用,也可以让搜索引擎知道它要去哪
图片优化
图片优化是为每个图片添加alt属性
alt属性的作用是当图片无法显示时,以文字的形作为替代显示出来,而对于eso来说,他可以令搜索引擎有机会索引到你网站上的图片
对于一些没有什么意义的图片,最好也写alt,可以写作 alt=""
避免大体积的页面
有经验表明,搜索引擎不喜欢索引过大的页面,即一个页面代码部分的体积不要太大,控制在100kb内为佳
合理的代码结构
搜索引擎细化格式清晰,结构分明的页面,理论上XML是最合乎 搜索引,当然这太极端
如果采用XHTML+CSS技术将页面数据同表现分离,即避免大量嵌套表格和其他冗余的代码,还是能够完美实现这一要求的
CSS规范
命名方法
语义化命名
结构化命名
css命名
建议使用小写字母
以英文字母开头,后面可以连接数字,字母,下划线,连字符,建议尽量使用英文字母,适当使用下划线和连接线
词必达意,名称要反映用途和相关信息,同时也要简短
CSS reset
在html中有默认的样式,
例如:
p标签有上下边距
strong标签有字体加粗样式
em标签有字体倾斜样式
不同浏览器默认样式之间也会有差别
例如缩进的样式
在ie下是通过margin来实现的,
在firefox下时通过padding实现的
在切换页面的时候浏览器的默认样式通常会给我们带来麻烦,影响开发效率.
解决方法:
一开始就去掉浏览器额默认样式,准确的说是通过重新定义标签样式,覆盖浏览器的css默认属性,最简单的说法就是把浏览器提供的默认样式覆盖掉,这就是css reset
为什么用css reset:
因为浏览器的品种很多，每个浏览器的默认样式也是不同的，比如<button>标签，在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的，所以，通过重置button标签的CSS属性，然后再将它统一定义，就可以产生相同的显示效果。
BFC
块级格式化上下文,是利用布局块级盒子的一块渲染区域
触发机制:
根元素 html元素
float的值不为none
overflow的值不为visible
diasplay的值为inline-block,table-cell,tabel-caption
position的值为absolute或fixed
作用:
bfc是页面上的一个隔离的独立容器,容器里面的子元素不会影响外面元素,反之亦然
清除浮动带来的影响
解决maigin塌陷的问题
bfc与普通块级元素的差异
可以阻止元素被浮动元素覆盖
可以包含浮动元素
+应该用近乎描述的语言写下一段介绍网页的文字,在其中,你应该适当的对你的网站的特色内容加以重复以求突出
<meta name="description" cntent="">告诉搜索引擎你的站点的主要内容
关键字
应该列出你认为合适的,能突出网站内容的关键字就可以了,关键字不要设置太多,可设置8-10个,搜索引擎智慧浏览靠前的几个关键字
<meta name="keywords" content="">向搜索引擎说明你网页的关键字
超链接优化
搜索引擎有个会自动爬行于互联网上的机器人程序,这个机器人顺着网站之间的链接游览世界
采用纯文本链接;
尽量不要用flash动画设置链接和图片链接,因为搜索引擎识别不了flash上为文字
按规范书写超链接,title:起到提示访客的作用,也可以让搜索引擎知道它要去哪
图片优化
图片优化是为每个图片添加alt属性
alt属性的作用是当图片无法显示时,以文字的形作为替代显示出来,而对于eso来说,他可以令搜索引擎有机会索引到你网站上的图片
对于一些没有什么意义的图片,最好也写alt,可以写作 alt=""
避免大体积的页面
有经验表明,搜索引擎不喜欢索引过大的页面,即一个页面代码部分的体积不要太大,控制在100kb内为佳
合理的代码结构
搜索引擎细化格式清晰,结构分明的页面,理论上XML是最合乎 搜索引,当然这太极端
如果采用XHTML+CSS技术将页面数据同表现分离,即避免大量嵌套表格和其他冗余的代码,还是能够完美实现这一要求的
CSS规范
命名方法
语义化命名
结构化命名
css命名
建议使用小写字母
以英文字母开头,后面可以连接数字,字母,下划线,连字符,建议尽量使用英文字母,适当使用下划线和连接线
词必达意,名称要反映用途和相关信息,同时也要简短
CSS reset
在html中有默认的样式,
例如:
p标签有上下边距
strong标签有字体加粗样式
em标签有字体倾斜样式
不同浏览器默认样式之间也会有差别
例如缩进的样式
在ie下是通过margin来实现的,
在firefox下时通过padding实现的
在切换页面的时候浏览器的默认样式通常会给我们带来麻烦,影响开发效率.
解决方法:
一开始就去掉浏览器额默认样式,准确的说是通过重新定义标签样式,覆盖浏览器的css默认属性,最简单的说法就是把浏览器提供的默认样式覆盖掉,这就是css reset
为什么用css reset:
因为浏览器的品种很多，每个浏览器的默认样式也是不同的，比如<button>标签，在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的，所以，通过重置button标签的CSS属性，然后再将它统一定义，就可以产生相同的显示效果。
BFC
块级格式化上下文,是利用布局块级盒子的一块渲染区域
触发机制:
根元素 html元素
float的值不为none
overflow的值不为visible
diasplay的值为inline-block,table-cell,tabel-caption
position的值为absolute或fixed
作用:
bfc是页面上的一个隔离的独立容器,容器里面的子元素不会影响外面元素,反之亦然
清除浮动带来的影响
解决maigin塌陷的问题
bfc与普通块级元素的差异
可以阻止元素被浮动元素覆盖
可以包含浮动元素
@@ -188,7 +188,7 @@ 相对定位 绝对定位 固定定位 -粘性定位
普通流定位：又称“文档流定位”
特点：所有块级元素都是从父元素左上角开始排列
每个元素都有自己的控件，默认是不允许被重叠的
所有的块级元素从上向下排列
行内块元素&&行内元素都是从左向右排列，放不下换行
浮动定位：
浮动：如果将一个元素进行浮动，具有以下特性：
浮动 将元素排除在文档流之外（脱离文档流），不占据页面的空间，
其他元素上前占位
浮动元素会停靠在父元素左边或右边，或者其他已浮动元素的边缘上
语法：属性：float
取值：
none:默认值，及元素无任何浮动效果
left:左浮动，让元素停靠在父元素左边，或紧挨已有浮动元素右边
right:右浮动，让元素停靠在父元素右边，或紧挨已有浮动元素左边边
浮动的特性：
浮动的元素脱离标砖文档流
元素一旦脱离了文档流就不存在等级之分
浮动的元素产生的字围效果
浮动的元素当一行的宽度不够使用的时候会自动往前面的空隙挤
子元素浮动之后最好把同级的其他子元素都浮动
浮动带来的恶劣影响影响：
如果父元素没有设置高度，儿子元素全部都浮动了，那么父元素高度将变为0
前面的元素浮动之后会影响网页后面元素的布局
如何清除浮动带来的影响：
隔墙法：clear both
none:默认值，不做任何清除效果,允许两边出现浮动
left:清除前面元素左浮动带来的影响
right:清除前面与元素右浮动带来的影响
both:清除前面元素任何一种浮动带来的影响
清除浮动 最成熟的方法。可以直接写在预格式样式中
.clearfix {
*zoom: 1;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
给父元素设置一个具体的高度
overflow: hidden;
有效果是因为触发了BFC
相对定位：元素相对与它原来的位置发生偏移
属性：position
取值：relative
注意：相对定位元素原来位置会被保留，不能被其他元素占位
相对定位的元素如果一定，只不过是视觉上的位置移动，本身并没有进行移动
相对定位并没有多里标准文档流
好处：
通过相对定位可以让元素视觉上灵活的移动到指定的位置上去，并不会影响元素本身的布局
缺点：
相对定位的元素位移参考是相对于元素本身的位置，一旦原来本身的位置发生了改变，那么相对定位的元素的视觉位置也会影响。
元素形影分离，看到元素位移了，但原来的位置还占着。只是看起来位移了。
移动的影子可以重叠
看到的元素移动只是移动影子，实际本体还在原来的地方。
margin与position区别：
是否影响其他元素的位置
绝对定位：脱离文档流，即不占据页面空间
只会相对于离他最近的已定位的祖先元素发生位置的改变
绝对定位:position:absolute
一旦设置绝对定位,元素就脱离的标准文档流,不再手袋文档流中标签的等极限制
同时元素也会脱离的标准文本流,不会再形成类似于浮动的字围效果了.
绝对定位的位移问题
定位参考
绝对定位的元素位移,是以具有定位属性的祖先元素为参考.只要是长辈都行.
如果所有的祖先元素都没有定位,那么就会以body为参考
定位默认值
无论是相对定位,还是绝对定位,位移参数在没有设置的情况写,默认值不是0,而是auto
以body为参考时的特殊情况
top:
当一个绝对定位的元素以body为参考时,设置top为首屏,参考点为首屏左上角.
bottom:
当一个绝对定位的元素以body为参考时,设置bottom,参考点为首屏左下角
子绝父相
子元素绝对定位,父元素相对定位.如果多个绝对子元素,最外层父元素一定要相对元素.
如果祖先元素中具有定位属性,那么将会以祖先元素为参考
如果一个祖先元素的低端功能为属性值为static,那么将不能够作为子元素定位的参考
相对定位和绝对定位区别:
参照物不同:
绝对定位参照物是包含块(父级)
相对定位参照物是本身
所占空间:
绝对定位是将对象从文档流中脱离出来,因此不占据空间
相对定位不破坏正常的文档流顺序,无论是否进移动,元素仍然占据原来的空间
固定定位:position:fixed
固定定位参考,以网页浏览器为参考
粘性定位:position:sticky
定位基于用户滚动的位置
在页面中时,跟随用户滚动,开始超出可视框后,会固定在目标位置
层级关系
z-index:数字. 默认auto
数字大的层叠在上面,相对定位就可以在不影响,可以设置页面的情况下使用z-index值
只能被设置了定位的元素使用
层级排序
如果大家都不去设置z-index就会采用后来居上的原则
如果大家都设置了z-index那么谁大听谁的
如果父元素的z-index较大,另一个父元素的z-index值较小,那么较小的父元素的子元素永远无法压倒较大的父元素的子元素
(父亲怂了,儿子再NB也没用)
z-index:两个已经定位的元素发生重叠时，通过该属性确定重叠层次
显示：属性：display
取值：none 让生成的元素脱离文档流，从页面消失
block 让生成的元素跟块级元素一样
inline-block 让生成的元素跟行内块级元素一样
显示效果：
可见性：
属性：visibility
取值：visible 默认值，元素可见
hidden 隐藏，但未脱离文档流
定位元素的层级关系:
z-index:
auto:默认
number:无单位的整数值,可为负数,数值越大,层的顺序越靠上
Tip:此属性仅仅作用域position属性值relative或absolute,fixed的对象
子元素的层级关系会受到父元素的影响
包含块:
包含块是决定定位的基础,包含块就是为绝对定位元素提供坐标,偏移和显示范围的参照物,即确定绝对定位的偏移期待和百分比长度的参考;
默认状态下,body是一个大的包含块,所有绝对定位的偏移起点和百分比大小的显示的,如果我们定义了包含元素为包含元素块以后,对于被包含的绝对定位元素来说,就会根据最接近的具有定位功能的上级元素来定位自己显示位置
定义元素为包含块:
给绝对定位元素的父元素添加声明position:relative/absolute
置换元素/非置换元素 +粘性定位
普通流定位：又称“文档流定位”
特点：所有块级元素都是从父元素左上角开始排列
每个元素都有自己的控件，默认是不允许被重叠的
所有的块级元素从上向下排列
行内块元素&&行内元素都是从左向右排列，放不下换行
浮动定位：
浮动：如果将一个元素进行浮动，具有以下特性：
浮动 将元素排除在文档流之外（脱离文档流），不占据页面的空间，
其他元素上前占位
浮动元素会停靠在父元素左边或右边，或者其他已浮动元素的边缘上
语法：属性：float
取值：
none:默认值，及元素无任何浮动效果
left:左浮动，让元素停靠在父元素左边，或紧挨已有浮动元素右边
right:右浮动，让元素停靠在父元素右边，或紧挨已有浮动元素左边边
浮动的特性：
浮动的元素脱离标砖文档流
元素一旦脱离了文档流就不存在等级之分
浮动的元素产生的字围效果
浮动的元素当一行的宽度不够使用的时候会自动往前面的空隙挤
子元素浮动之后最好把同级的其他子元素都浮动
浮动带来的恶劣影响影响：
如果父元素没有设置高度，儿子元素全部都浮动了，那么父元素高度将变为0
前面的元素浮动之后会影响网页后面元素的布局
如何清除浮动带来的影响：
隔墙法：clear both
none:默认值，不做任何清除效果,允许两边出现浮动
left:清除前面元素左浮动带来的影响
right:清除前面与元素右浮动带来的影响
both:清除前面元素任何一种浮动带来的影响
清除浮动 最成熟的方法。可以直接写在预格式样式中
.clearfix {
*zoom: 1;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
给父元素设置一个具体的高度
overflow: hidden;
有效果是因为触发了BFC
相对定位：元素相对与它原来的位置发生偏移
属性：position
取值：relative
注意：相对定位元素原来位置会被保留，不能被其他元素占位
相对定位的元素如果一定，只不过是视觉上的位置移动，本身并没有进行移动
相对定位并没有多里标准文档流
好处：
通过相对定位可以让元素视觉上灵活的移动到指定的位置上去，并不会影响元素本身的布局
缺点：
相对定位的元素位移参考是相对于元素本身的位置，一旦原来本身的位置发生了改变，那么相对定位的元素的视觉位置也会影响。
元素形影分离，看到元素位移了，但原来的位置还占着。只是看起来位移了。
移动的影子可以重叠
看到的元素移动只是移动影子，实际本体还在原来的地方。
margin与position区别：
是否影响其他元素的位置
绝对定位：脱离文档流，即不占据页面空间
只会相对于离他最近的已定位的祖先元素发生位置的改变
绝对定位:position:absolute
一旦设置绝对定位,元素就脱离的标准文档流,不再手袋文档流中标签的等极限制
同时元素也会脱离的标准文本流,不会再形成类似于浮动的字围效果了.
绝对定位的位移问题
定位参考
绝对定位的元素位移,是以具有定位属性的祖先元素为参考.只要是长辈都行.
如果所有的祖先元素都没有定位,那么就会以body为参考
定位默认值
无论是相对定位,还是绝对定位,位移参数在没有设置的情况写,默认值不是0,而是auto
以body为参考时的特殊情况
top:
当一个绝对定位的元素以body为参考时,设置top为首屏,参考点为首屏左上角.
bottom:
当一个绝对定位的元素以body为参考时,设置bottom,参考点为首屏左下角
子绝父相
子元素绝对定位,父元素相对定位.如果多个绝对子元素,最外层父元素一定要相对元素.
如果祖先元素中具有定位属性,那么将会以祖先元素为参考
如果一个祖先元素的低端功能为属性值为static,那么将不能够作为子元素定位的参考
相对定位和绝对定位区别:
参照物不同:
绝对定位参照物是包含块(父级)
相对定位参照物是本身
所占空间:
绝对定位是将对象从文档流中脱离出来,因此不占据空间
相对定位不破坏正常的文档流顺序,无论是否进移动,元素仍然占据原来的空间
固定定位:position:fixed
固定定位参考,以网页浏览器为参考
粘性定位:position:sticky
定位基于用户滚动的位置
在页面中时,跟随用户滚动,开始超出可视框后,会固定在目标位置
层级关系
z-index:数字. 默认auto
数字大的层叠在上面,相对定位就可以在不影响,可以设置页面的情况下使用z-index值
只能被设置了定位的元素使用
层级排序
如果大家都不去设置z-index就会采用后来居上的原则
如果大家都设置了z-index那么谁大听谁的
如果父元素的z-index较大,另一个父元素的z-index值较小,那么较小的父元素的子元素永远无法压倒较大的父元素的子元素
(父亲怂了,儿子再NB也没用)
z-index:两个已经定位的元素发生重叠时，通过该属性确定重叠层次
显示：属性：display
取值：none 让生成的元素脱离文档流，从页面消失
block 让生成的元素跟块级元素一样
inline-block 让生成的元素跟行内块级元素一样
显示效果：
可见性：
属性：visibility
取值：visible 默认值，元素可见
hidden 隐藏，但未脱离文档流
定位元素的层级关系:
z-index:
auto:默认
number:无单位的整数值,可为负数,数值越大,层的顺序越靠上
Tip:此属性仅仅作用域position属性值relative或absolute,fixed的对象
子元素的层级关系会受到父元素的影响
包含块:
包含块是决定定位的基础,包含块就是为绝对定位元素提供坐标,偏移和显示范围的参照物,即确定绝对定位的偏移期待和百分比长度的参考;
默认状态下,body是一个大的包含块,所有绝对定位的偏移起点和百分比大小的显示的,如果我们定义了包含元素为包含元素块以后,对于被包含的绝对定位元素来说,就会根据最接近的具有定位功能的上级元素来定位自己显示位置
定义元素为包含块:
给绝对定位元素的父元素添加声明position:relative/absolute
置换元素/非置换元素
置换元素:
一个内容不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固定尺寸的元素,
这些元素网往往没有实际的内容,即是一个空元素.置换元素就是浏览器根据元素的属性和属性值,来决定元素的具体显示内容,被称之为置换元素
@@ -209,7 +209,7 @@
IE6常见CSS解析Bug及hack
图片间隙
在元素中直接插入图片时，图片下方会产生约3像素的间隙(该bug出现在IE6及更低版本中)
-hack1: 将转为块状元素，给
添加声明：display:block;
+hack1: 将
转为块状元素，给
添加声明：display:block;
hack2:hack2:将img设置vertical-align:top/middle/bottom;只要不为baseline
双倍浮向（双倍边距）
当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界加倍显示。
@@ -225,8 +225,8 @@
在给的子元素中使用了Float:left;父元素中没有设置浮动属性，li阶梯状效果。
hack:给父元素设置浮动便能解决此问题
当给LI里的A转成块元素，并设置了固定高度时，且给父元素写了浮动后在IE6及更低的版本浏览器里会出现垂直显示。
-hack:给a也设置左浮动便可解决。