CSS学习1——基本布局以及盒子模型
2015-06-16 15:47
609 查看
1. CSS选择器优先级:
行内样式>ID选择器>类别选择器>标记选择器;
两个类别选择器优先级相同时,以前者为主;
2. CSS盒子的浮动:
默认盒子没有浮动,<div>按行排列,<span>横向排列;
如果有两个盒子,第一个设置float为left,则第二个与第一个在同一行,第二个的左边框与第一个的右边框重合,文字会围绕第一个盒子排列;
一个div的范围是由它里面的标准流内容决定的,与里面的浮动内容无关;
clear用于消除浮动对其影响,值有三个,left,right,both;
3. 搜索引擎根据网页内容的价值来确定网页的排名,不管CSS;
4. CSS的position:
static:默认值;
relative:根据left, top, right, bottom大小设置偏移像素或者百分比,父元素不发生改变;即不影响父元素及兄弟元素,相对于其本身原始位置发生偏移;仍在标准流中;
absolute:以它最近的一个“已经定位”的“祖先元素”为基准进行偏移,如果没有已经定位的祖先元素,那么以浏览器窗口为基准进行定位;脱离了标准流;上述“已经定位”指的是其position属性被设置为static之外的任何一种方式;如果只设置了absolute,而没有设置偏移值,那么当前的元素将脱离标准流,其所在位置不发生改变;
fixed:类似于absolute,其基准是浏览器窗口;
5. z-index空间位置:当块被设置了position属性之后,该值才有效,默认为0,当两个块的z-index值一样的时候,将保持原有的高低覆盖关系;
6. CSS的display:
inline指行内元素;
block指块元素,不在一行内;
none表示隐藏;
7.border的设置必须像素、颜色、样式三者都要设置,缺一不可,而且顺序不能改变;
8. 盒子的大小为margin+border+padding+content;
行内样式>ID选择器>类别选择器>标记选择器;
两个类别选择器优先级相同时,以前者为主;
2. CSS盒子的浮动:
默认盒子没有浮动,<div>按行排列,<span>横向排列;
如果有两个盒子,第一个设置float为left,则第二个与第一个在同一行,第二个的左边框与第一个的右边框重合,文字会围绕第一个盒子排列;
一个div的范围是由它里面的标准流内容决定的,与里面的浮动内容无关;
clear用于消除浮动对其影响,值有三个,left,right,both;
3. 搜索引擎根据网页内容的价值来确定网页的排名,不管CSS;
4. CSS的position:
static:默认值;
relative:根据left, top, right, bottom大小设置偏移像素或者百分比,父元素不发生改变;即不影响父元素及兄弟元素,相对于其本身原始位置发生偏移;仍在标准流中;
absolute:以它最近的一个“已经定位”的“祖先元素”为基准进行偏移,如果没有已经定位的祖先元素,那么以浏览器窗口为基准进行定位;脱离了标准流;上述“已经定位”指的是其position属性被设置为static之外的任何一种方式;如果只设置了absolute,而没有设置偏移值,那么当前的元素将脱离标准流,其所在位置不发生改变;
fixed:类似于absolute,其基准是浏览器窗口;
5. z-index空间位置:当块被设置了position属性之后,该值才有效,默认为0,当两个块的z-index值一样的时候,将保持原有的高低覆盖关系;
6. CSS的display:
inline指行内元素;
block指块元素,不在一行内;
none表示隐藏;
7.border的设置必须像素、颜色、样式三者都要设置,缺一不可,而且顺序不能改变;
8. 盒子的大小为margin+border+padding+content;
相关文章推荐
- CSS Bugs 解决方案
- CSS(9)-float下篇
- CSS(8)-float上篇
- CSS(7)-盒子模型
- CSS(6)-选择器的优先级
- CSS(5)-选择器
- Css-控制div斜转
- CSS(4)-解读浏览器默认样式
- 127使用 TableView 自带的单元格样式实现好友列表,另外在单元格中添加辅助按钮
- CSS(3)-样式来源与层叠规则
- 只要是从事IT,会些CSS,XHTML总归是有好处的
- CSS(1)-常见的一些问题解答
- CSS(2)-学习css的思路
- windows窗口样式
- 各种div+css居中方式调整(转载)
- 详解 CSS 属性 - 伪类和伪元素的区别
- CSS带箭头的DIV方框,自适应高度
- java poi生成excel并修改excel样式
- 背景、边框样式及变形处理
- css中min-width与max-width