1.盒子模型
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距(margin),边框(border),填充(padding),和实际内容(content)。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
宽=margin-left+margin-right+border-left+border-right+padding-left+padding-right+content width
宽=margin+border+padding+width
高=margin+border+padding+height
如果给一个div定义width,指的是仅文本内容的宽度。
根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。
2.页面布局
标准流:标准流中,块级元素独占一行,垂直放置。行级元素在水平方向上一个接一个的排列。
如何在一行显示多个div元素?显然标准流已经无法满足需求,这就要用到浮动。
浮动流 :浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次。 float:left;
清除浮动:clear:both/left/right;
元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。 clear 属性指定元素两侧不能出现浮动元素。
详情可查看:CSS浮动讲解
3.块级元素和行内元素
块级元素:会独占一行,其宽度自动填满其父元素宽度。 如div,p,ul,li,ol,dl,dt,dd,form,hr,table 等。
行内元素(内联元素):不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的内容而变化。如span,strong,em,i,b,a,br,img 等。
- 块级元素居中:margin:0,auto;
- 行内元素居中:父元素 text-align:center;
区别:
(1)行内元素不会独占一行,而块级元素会独占一行。
(2)块级元素可以设置 width, height属性,行内元素设置width, height无效。 【注意:块级元素即使设置了宽度,仍然是独占一行的】
(3)块级元素可以设置margin 和 padding.
行内元素的水平方向的padding-left,padding-right,margin-left,margin-right
都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效)把行内元素变成块级元素:
display:block; display:inline-block; /*行内块,变成块级元素并且在一行*/
WebStorm注释:ctrl+shift+/
html注释:<!--注释文本-->
css注释:/*注释文本*/
背景透明:png
一般色彩丰富的banner图:jpg(压缩损失小)
按钮,比较小的动图:gif(损失大)
利用浮动清空掉图片间的缝隙。
<a></a>
内元素属性需要单独定义,其不会继承父元素的属性。
border-radius:10px;/*圆角效果*/
border-radius:50%;/*在宽高相等时,变为圆*/
vertical-align:top;/*垂直对齐方式top/bottom/middle*/
outline:none;/*文本框获取焦点时去边框*/
cursor: pointer;/*鼠标变成手状*/
<p>版权信息:©软件技术系所有</p>/*圈c的输入方法*/
4.定位
<style>
div{
position:relative;/*相对定位*/
position:absolute;/*绝对定位*/
position:fixed;/*固定定位*/
position:static;/*默认*/
}
</style>
position和top,bottom,left,right在一起使用;
相对定位是以原来默认位置相对发生位移(在原来地方还占空间),绝对定位是以它的父元素为参考点发生偏移,父元素没有相对定位或没有父元素的话,就是以浏览器为参考点。(不占空间);
当浮动时加定位,浮动就不起作用了(两个不能一起用);
使用absolute要定义父元素为relative ,父元素给相对定位和宽高即可,不用给top和right,定义绝对定位要定义元素的水平、垂直位置;
固定定位:页面侧边栏,即元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动;
static定位:HTML元素的默认值,即没有定位,元素出现在正常的流中。 静态定位的元素不会受到 top, bottom, left,right影响。没有定位的话必须加行内块,否则元素的宽高不起作用。
- 空格:后代选择器,父元素下的子元素和后代元素都是一个样式;
大于:父子选择器,不继承,仅仅父元素下的子元素是此样式。
行高、字体大小、颜色等属性,除了不会继承,其他元素会继承父元素的属性。
5.
上下层叠样式:
z-index:-1px;
元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素,z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面),一个元素可以有正数或负数的堆叠顺序。
隐藏元素:
display:none; 默认隐藏,相当于没写, 不占地方,还可以放其他东西.
visibility:hidden; 可以隐藏某个元素,该元素虽然被隐藏了,但仍然会影响布局。
二级菜单一般用 display:none;雪碧图:不容易丢失图片。
- 有下拉菜单的超链接用ul>li做好。
- 小三角的定义:
<div style="">
border-top:10px solid #FFFFff;
border-left:10px solid #FF3300;
border-bottom:10px solid #FFFFff;
</div>
<p> </p>
<div style="">
width:0px;
border-left:10px solid #FFFFff;
border-bottom:10px solid #FF3300;
border-right:10px solid #FFFFff;
</div>
效果图:
Google: F12 检查代码 ,* 代表通配符。
- CSS定义通用样式: 新建commen.css
*{
margin:0;
padding:0;/*清零*/
}
body{
font:14px Arial,"微软雅黑";
}
.fl{
float:left;/*左浮动*/
}
.fr{
float:right;/*右浮动*/
}
a{
text-decoration:none;/*去掉超链接的下划线*/
}
ul,li{
list-style:none;/*去掉列表前的点*/
}
.clear{
clear:both;/*清空浮动*/
}