本篇的内容是关于css语法的布局模型、代码的缩写和两个值的说明。
2017.3.27初稿 2017.3.31二改(两次)。
css布局模型:
1.布局模型->布局模板。
2.css包含3种基本的布局模型:Flow、Layer 和 Float。
在网页中,元素有三种布局模型:流动模型(Flow)、浮动模型 (Float)、层模型(Layer)。
3.流动模型:默认的网页布局模式。在默认状态下,块状元素的宽度都为100%,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布;内联元素都会在所处的包含元素内从左到右水平分布显示,而不是像块状元素一样独占一行。【块状元素与内联元素的介绍见上篇】
4.浮动模型:可以实现让两个块状元素并排显示。
如下代码可以实现两个 div 元素一行显示。
|
|
若要一左一右显示,则可以
|
|
5.层模型
(1)让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。有三种形式:绝对定位(position: absolute)、相对定位(position: relative)、固定定位(position: fixed)。
(2)绝对定位:设置 position:absolute;
,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
如下,可以实现div元素相对于浏览器窗口向右移动100px,向下移动50px。
|
|
(3)相对定位:设置 position:relative;
,过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。
如下可以实现相对于以前位置向下移动50px,向右移动100px;
|
|
显示效果如下:
(黑色方框为未定位之前,红框和文字均为相对定位之后)
虽然div元素相对于以前的位置产生了偏移,但是div元素以前的位置还是保留着,所以后面的span元素是显示在了div元素以前位置的后面。
(4)固定定位:设置 position:fixed;
,它的相对移动的坐标是视图(屏幕内的网页窗口)本身,固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会随浏览器窗口的滚动条滚动而变化,不会受文档流动影响。
以下代码可以实现相对于浏览器视图向右移动100px,向下移动50px。并且拖动滚动条时位置固定不变。
|
|
(5)相对某一元素进行定位(absolute与relative组合使用):父辈元素使用relative,子辈元素使用absolute。
如:
|
|
父辈元素box1:
|
|
子辈元素box2:
|
|
css代码缩写:
1.盒模型代码的缩写:
(外边距(margin)、内边距(padding)和边框(border)设置,上右下左)
(1)如果top、right、bottom、left的值相同,如下面代码:
|
|
可缩写为:
|
|
(2)如果top和bottom值相同、left和 right的值相同,如下面代码:
|
|
可缩写为:
|
|
(3)如果left和right的值相同,如下面代码:
|
|
可缩写为:
|
|
2.颜色值的缩写:设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。如
|
|
可以缩写为:
|
|
3.字体设置的缩写:
|
|
这么多行的代码可以缩写为一句:
|
|
【在缩写时 font-size 与 line-height 中间要加入“/”斜扛。】
单位和值:
1.颜色值:三种设置方式。
(1)英文命令,如 p{color:red;}
。
(2)RGB,如 p{color:rgb(133,45,200);}
,每一项的值可以是 0~255 之间的整数,也可以是 0%~100% 的百分数。如 p{color:rgb(20%,33%,25%);}
。
(3)十六进制,每一项的值由 0-255 变成了十六进制 00-ff。如 p{color:#00ffff;}
。
附:配色表
2.长度值
(1)像素,px。
(2)em:本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,那么 1em = 14px;如果 font-size 为 18px,那么 1em = 18px。如下:
|
|
上面代码就是可以实现段落首行缩进 24px(也就是两个字体大小的距离)。
(3)百分比:如 p{font-size:12px;line-height:130%}
设置行高(行间距)为字体的130%(12 * 1.3 = 15.6px)。
下篇会记到css样式设计的一些技巧。
这篇就到这啦~
2017.3.31改
在css样式设置中,最好先将样式初始化,通过 *{margin:0;padding:0;}
。
1.浮动布局
可以实现块级元素横向排版;
通过设置float属性实现,有三个值:left,right,none;
当元素没有设置宽度值,而设置了浮动属性时,元素的宽度随内容的变化而变化;
当元素设置了浮动属性后,会对相邻的元素(紧邻后面的元素)有影响;
2.清除浮动
对受到浮动影响的元素设置清除浮动的属性;
方法一:设置clear属性, clear:both
(或者 clear:left
,clear:right
);【对紧邻其后的元素清除浮动影响,而对父包含块产生的影响不起作用,即当父包含块缩成一条时】
方法二:设置 width:100%
和 overflow:hidden
;
3.横向两列布局
div块的高度一般不要设置;
设置两个块为 float:left;
和 float:right;
可以实现横向两列的布局。
2017.3.31二改
绝对定位布局
1.是通过设置position实现的布局;
2.position属性拥有三种定位形式:静态定位,相对定位,绝对定位;
position可以设置四种属性值:static(静态定位),relative(相对定位),absolute(绝对定位),fixed(固定定位);
3.绝对定位和固定定位都属于绝对定位,静态定位是默认的(标准文档流);
4.相对定位的特点:是相对于自身原有的位置进行偏移;仍处于标准文档流中;随即拥有偏移属性和z-index属性(层堆叠,可能会覆盖其他层);
5.绝对定位的特点:建立了以包含块为基准的定位;完全脱离了标准文档流(对其兄弟元素不造成影响);随即拥有偏移属性和z-index属性(层堆叠);
6.绝对定位的两种情况:未设置偏移量和设置了偏移量;
(1)未设置偏移量:无论是否存在已定位祖先元素,都保持在元素初始位置;脱离了标准文档流(宽度随内容的变化而变化);
(2)设置了偏移量:若没有已定位的祖先元素,则以 <html>
为偏移参照基准;若有已定位的祖先元素,则以离他最近的已定位的祖先元素为偏移参照基准;
7.使用绝对定位实现横向两列布局
(1)使用absolute实现横向两列布局,常用于一列固定宽度,另一列宽度自适应的情况;
(2)对于父元素使用相对定位relative,对于自适应宽度元素使用绝对定位absolute;
(3)固定宽度列的高度>自适应宽度的列(保证其不从父元素中溢出)。