Web技术开发(四)

发表于   |   分类于   |     |   阅读次数

29 Sep 2015 - Kumming

容器

  1. Div 分隔区域，块容器
  2. SPAN 行内容器

Editplus

随机生成一段单词

  1. lorem + tab
  2. lorem50 + tab

叠加样式

<div class="class1 class2 class3">content</div>

因此网络中有定义好一些基本样式供开发者直接使用，如著名的BootStrap

位置描述

不叠加

浮动float, left or right

可叠加

定位某一元素position:

  1. auto
  2. 绝对定位 img {position:absolute;}
  3. 相对定位

绝对定位

img {top:100px; left:100px; right:100px; bottom:100px}

案例1

.class1 {position:relative; top:100px; left:100px}  相对应该在的位置
.class2 {position:absolute; top:100px; left:100px}  相对屏幕边框

不管是绝对定位或者相对定位都不在正常流里

案例2

.class1 {}
.class2 {}
.class1.class2{}
<p class="class1 class2">content</p>//三者叠加
若.class .class{} 则是包含关系
<p class="class1 class2">
    <p class="class2>满足条件