关于Head First HTML 与 Css的这本书学习时候遇到的一些不清晰的内容
标签:
div
用于标记逻辑区 </div
是他的结束标签
一般在使用的时候要加入id 或者 加入class 来给他定义一个唯一的名字
方便在css中为他设置样式。
id
的引用例子
<div id="elixirs">
</div>
-----------css: #elixirs{ border-width: thin}
text-align 属性 会对块元素中的所有内联内容对齐。它 只能在块元素上设置,如果直接在内联元素上使用,则不起作用,
选择子孙的方法
div(这是父元素)+ 空格 + h2(这是他的子孙){ ... }
这个规则指出要选择作为一个 div子孙的所有h2
使用id,能更特定的指定我们想要的子孙元素:
#elixirs h2{…} 这个规则指出要 选择id为elixirs 的<div 的所有子孙 h2
记得简写边距后面的排列规律 ------------- 外边距,内边距: 上右下左
其他的简写则不需要规律排放
span
span元素则是对内联元素的逻辑分组,和div类似
宽度的像素,就是把所有的----左右内外边距以及内容区的宽度加起来
float
属性值有 left right 分别是让内容左右浮动,浮动就是让他漂浮在所有元素的上面,可是内联元素有回围绕着 float的这个元素的内容。
然后,当布局使用的是float来布局的时候,页脚能使用clear来让他不让浮动元素遮挡
clear
他提出请求,当元素流入页面时,这个元素的左,右 或 两边都不允许有浮动的内容
关于布局
流体布局(liquid layout):无论浏览器调整到多大布局会扩展填满整个浏览器
冻结布局:布局锁定,当用户调整屏幕大小的时候布局仍会保持原样
<body>
<div id="allcontent">
<div id="header">
.......rest of the Html........
</div>
</div>
</body>
----------css---------
#allcontent{
width:800px; /*外围的allcontent <div>宽度总是800,即使浏览器大小调整了这个宽度也不变,这样就实现了冻结*/
padding-top:5px;
padding-bottom:5px;
background-color:#675c47;
}
流体和冻结之间的布局---------凝胶布局!!
凝胶布局:会锁定页面中内容区的宽度,并且会把它在浏览器中居中。
#allcontent{
width:800px;
padding-top: 5px;
padding-bottom: 5px;
background-color:#675c47;
*margin-lef: auto;
margin-right:auto;*
/*allcontent 上没有固定的左右外边距,用auto,浏览器会确定正确的外边距是多少,另外还会确保左和右的外边距相同
}
定位
绝对定位:和浮动不同,绝对定位会从流中被删除,所以流中的元素不会将其内联的内容围绕在一个绝对定位的元素周围。z-index的大小可以决定睡在上面 (绝对定位不能用clear,因为,他已经被从流中删除了)
#sidebar{
position: absolute:
top:100px;
right:200px;
width:280px;
}
用Css表格显示
利用css表格显示,可以用div划分逻辑区,然后放入表格内。
<div id="tableContainer">
<div id="tableRow">
<div id="main">
..
</div>
<div id="sidebar">
...
</div>
</div>
</div>
------
–css-----------
1.首先为表格增加一个<div id为tablecontainer ,这个div包含行和列
div#tablecontainer{
display:table;
}
2
.接下来为行增加一个div,id为tableRow,一行就一个div,多行就多个div
div#tableRow{
display:table-row;
}
3
.最后,使用现有的main和sidebar作为单元格,对应行中的各列
#main{
display:table-cell;
...
}
#sidebar{
display:table-cell;
}
固定定位:和绝对定位类似,一样要为元素指定你希望的位置,不过这个位置是距浏览器窗口边界的一个偏移量,而不是距页面边界的距离,而且固定之后他就一直在哪里,不论你怎么上下滚动页面
#coupon{
position: fixed;
top:300px;
}