前端知识点
2016-11-07 18:47:13 0 举报AI智能生成
CSS（层叠样式表）是一种用于描述网页外观和格式的标记语言。它通过选择器和属性来定义网页元素的样式，如颜色、字体、大小、布局等。CSS可以将样式与内容分离，使网页更易于维护和更新。通过使用CSS，可以实现网页的动态效果，如动画、过渡等。CSS还支持响应式设计，使网页能够适应不同设备和屏幕尺寸。总之，CSS是构建现代网页的重要工具，它提供了丰富的功能和灵活性，使设计师能够创造出吸引人的视觉效果。
作者其他创作
大纲/内容
前端知识点
css规范
visual formatting model
视觉格式化模型：用户代理user agent如何在视觉媒体visual Media 下处理文档树Document tree
在文档树种每一个元素根据盒模型box model 产生零个或多个盒
内容控制方法
盒的尺寸和类型
定位体系positioning scheme，常规流、浮动和绝对定位
文档树种元素之间的关系
外部信息（如视口大小、图片的固定尺寸）
CSS
引用
方法
直接标记的style属性
标记本身定义的style优先于其他所有的样式定义
放在style的任何其他样式规则前面
定义内部样式表
嵌入外部样式表
style @import
链接外部样式表
link
外部样式表优先级低于内部样式表
span style=\
div style=\
<style type=\"text/css\">@import url(\"style.css\");</style>
初始化样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异
初始化样式会对seo有一定的影响，力求影响最小的情况下初始化
属性
盒子模型
display
inline
行内元素会在一条直线上排列，都是同一行，不会换行
block
块级元素各占据一行，垂直方向排序，块级元素可以包含行内元素和块级元素，行内元素不能包含块级元素属性不同，主要在盒模型上 行内 width、height无效，margin上下无效、padding上下无效
inline-block
display：block转化块级
flex
none
隐藏对应的元素，在文档布局中不在给他分配空间，它各边的元素会合拢，当不存在
visibility：hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间
postion
table class=\"dataintable\" style=\
absolute和fixed的区别
CSS sprites
将网页中的一些背景图片整合到一张图片文件中利用css：background-image，background-repeat，background-position组合进行背景定位
这样可以减少很多图片请求的开销，因为请求耗时比较长请求虽然可以并发，但是有限制
float
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留1、使用空标签清除浮动。在所有浮动标签后面添加一个空标签，定义css clear:both 弊端就是添加了无意义的标签span style=\
浮动元素引起的问题和解决办法
父元素的高度无法被撑开，影响与父元素同级的元素与浮动元素同级的非浮动元素会跟随其后若非第一个元素浮动，该元素之前的元素也需要浮动，否则会影响页面显示的结构
解决办法：使用css中的clear：both；属性来清除元素的浮动，可以解决2、3问题对于问题1：code class=\"css plain\" style=\
使用after伪元素1、使用额外标签法，<div style=\"clear:both;\"></div>2、使用after伪元素span style=\
子主题
绘制
动画
css选择器
分类
新增的伪类
优先级
继承
排版
居中浮动元素
设置宽度，margin：0 auto
position：relative；width，height，top，right，margin-lift，margin-top
pre style=\
0 条评论
回复 删除
下一页
