css盒子模型

发布时间:2016-12-11 0:53:27 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"css盒子模型",主要涉及到css盒子模型方面的内容,对于css盒子模型感兴趣的同学可以参考一下。

1,CSS选择器,大家写css选择器的时候,能共用的选择器尽量提取出来 2,选择器的继承和CSS样式优先级,有类似之处 关联的选择器 > id选择器 > 类选择器 > 元素选择器 越精确的优先级越高   3,CSS常用的属性、值 字体属性: Font-size:字体大小 Color:字体颜色 Font-style:字体样式  italic是斜体 Font-weight:字体加粗 Font-family:字体族谱  宋体 、黑体...   控制文本的属性 Letter-spacing:字母间隔 Word-spacing:文字间隔   背景属性 Background-color:背景颜色 Background-image:url() 背景图片 Background-repeat:背景平铺: Background-attachment:背景附件: Background-position:背景位置   DIV和CSS的概念 现在在网站设计的标准中,已经不再使用表格定位技术,而是使用div+css 实现各种定位。简单来说,就是通过div来搭建网站结构(框架),css用 来美化网站样式 例如:数据页面、报表之类的页面还是HTML表格比较方便   DIV+CSS来布局网站 21世纪初,2000年左右,网站 搜索引擎,开始反思了:如何判断一个网是好是坏? 结果:看内容,看搜索引擎抓取内容的速度 Div+css-----div只写内容,然后css控制他的样式 (1)由于之前的table,布局网站,层层嵌套,导致搜索引擎抓取的障碍增大,所以被淘汰,div 抓取内容比较顺利 (2)Table----显示的时候,等整个table框架加载完毕一块显示,div---加载一部分显示一部分,如果页面太长的话,导致后面可能会出现空白   但是,网站布局也并不是绝对的,现在 数据报表,后台管理方面 table比较方便的   DIV+CSS布局网站的优点: 1,内容、显示相分离; 2,提高工作效率 3,利于改版和维护 4,利于搜索引擎优化 5,代码简洁,提高访问速度     盒子模型:  任何一个html的标签我们都可以看成是一个容器(盒子),既然有盒子肯定有 宽(width)、高(height),边框(border),内容和边框之间有一个空隙(padding),如果有多个盒子,会存在盒子与盒子之间存在边距,margin   需求1: 需求2:盒子这两个字 和包含他的盒子的 间距稍微大一点 需求3:盒子两个字 居中显示     谷歌浏览器下,margin-top 不起作用解决之道:增加 float 浮动,即可   Margin、padding  值复制 margin:25px;  如果只有一个值,其他都会复制这一个值 而且,margin、padding 顺序,上右下左 1,如果是一个值,其他三个方向都复制这一个值 2,如果是两个值,上下对应一个值,左右对应一个值 3,如果是3个值,也就是缺左边的,于是复制右边的     定位分为 absolute(绝对),relative(相对),static(静态),或者fixed(固定)   绝对定位: 文档流:浏览器加载页面的时候,从上往下解析的 但是,如果把一段代码,设置为绝对定位(absolute),这段代码就会脱离文档流 飘起来了 Position:absolute;   相对定位: Relative ,相对于文档流,代码在哪里写的,就在那里显示   Z-index 值高的 会覆盖值低的     区块浮动:   Float属性: eft 元素向左浮动。 right 元素向右浮动。 none 默认值。元素不浮动   Clear属性: left 在左侧不允许浮动元素。 right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧。 右浮动 float:right   向右浮动,脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边 左浮动: float:left   向左浮动,脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘   区块浮动:如果包含框太窄,浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:  

上一篇:变形记
下一篇:关于SMI、MSI、SCI、INTx各种中断小结

相关文章

关键词: css盒子模型

相关评论