jsp(17)(div+css）

1.盒子模型：

• element : 元素。
• padding : 内边距，也有资料将其翻译为填充。
• border : 边框。
• margin : 外边距，也有资料将其翻译为空白或空白边。

2.padding,内边距属性

简写例子：属性接受任何长度单位，可以是像素、英寸、毫米或 em。

h1 {
padding: 10px 0.25em 2ex 20%;
}

上下两个是等同的效果：百分数值是相对于其父元素的 width（即父元素内容的宽度） 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。

h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%; 
}

2.1.pading设置内边距4个值是顺时针上，右，下，左

padding:10px 5px 15px 20px;//上内边距是10px 右内边距是5px 下内边距是15px 左内边距是20px

2.2pading设置内边距3个值是顺时针上，右|左，下

padding:10px 5px 15px;//上内边距是10px 右内边距和左内边距是5px 下内边距是 15px

2.3.pading设置内边距2个值是顺时针上|下，右|左

padding:10px 5px;//上内边距和下内边距是10px 右内边距和左内边距是5px

2.4.pading设置内边距1个值是四边距相同

padding:10px;//所有4个内边距都是10px

 

3.border,边框，同样可以用不同属性表示不同范围，用值的个数来简写

3.1.border设置 4 个边框的宽度，样式，颜色：

p { border:5px solid red; }//border-width border-style border-color

border-width可以使用的值：

例子：同样值的个数（1-4）代表不同的边框（上右下左）

border-width:thin medium thick 10px;

border-style可以使用的值：

例子：同样值的个数（1-4）代表不同的边框（上右下左）

border-style:dotted solid double dashed;

 border-color可以使用的值：

例子：同样值的个数（1-4）代表不同的边框（上右下左）

border-color:red green blue pink;

3.2.border-bottom下边框（单个边框）的边距，样式，样式

border-bottom:thick dotted #ff0000;

3.3.分别设置下边框的颜色，样式，边距

border-bottom-color:#ff0000;
border-bottom-style:dotted;
border-bottom-width:15px;

 

4.margin，外边距，

这个属性接受任何长度单位、百分数值甚至负值。
属性接受任何长度单位，可以是像素、英寸、毫米或 em。
margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距。

浏览器一般默认body是有外边距的一般会先将body外边距设置成0.

外边框设置属性：

下面的例子，同样值的个数（1-4）代表不同外边距（上右下左）：

h1 {margin : 10px 0px 15px 5px;}

百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。

margin可能的值：

 

5.两个元素外边距会自动合并

5.1.上下元素，合并时会使用较大的外边距：

5.2.两个元素包含，并且父元素没有内边距和边框，那么子元素上下外边距和父元素的上下外边距进行合并：

5.3.空元素如果没有内边距和边框，那么上下外边距也会合并。

5.4.合并后的元素，将作为一个元素的外边距，和别的元素可以继续发生外边距合并：

（这样应该用来填充数据发生收缩的效果）

 

6.position/float关于定位：

6.1.首先一些概念；块元素，行元素

块元素：至少占一行，两个块元素之间会自动换行显示（<div>/<h1>/<p>）
行元素：行元素之间不会自动换行，会在同一行显示（<a>/<strong>/<span>）

但是行级元素可以变成块级元素通过display属性：

通过将 display 属性设置为 block/inline，可以让行/块元素（比如 <a> /<div>）表现得像块/行级元素一样。还可以通过把 display 设置为 none，让元素不显示，不占用文档中的空间

display常用值:

6.2.position属性可以的取值：

static：

元素框正常生成。块级元素生成一个矩形框，行元素则会创建一个或多个行，置于其父元素中。

relative：

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute：

元素框从文档流完全删除，并相对于其包含块（父元素）定位。

fixed：

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗（浏览器）本身。

 6.2.1.相对定位，值为relative，相对原来所在的位置定位，原来位置还被占用

#box_relative {
  position: relative;
  left: 30px;//也可以是百分比，父元素的百分比
  top: 20px;//也可以是百分比，父元素的百分比

}

相对定位元素仍然占据原来的空间。移动元素会导致它覆盖其它框。

 6.2.2.绝对定位，值为absolute，相对浏览器/父元素的位置定位。

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

绝对定位的元素的位置相对于浏览器。但如果父元素有相对定位标志（position:relative)，那么绝对定位是相对父元素。

图中相对父元素写错了

（1。相对浏览器：（s5是浏览器默认显示，body距离浏览是有外边距的）

#s{position:absolute;left:0;}
<div id="s5">eeeeeeeeee</div>
<div id="f">
<div id="s">sssss</div>
</div>

（2.相对父元素定位：父元素必有relative相对标记。

#f{position:relative;}
#s{position:absolute;left:0px;}
<div id="s5">eeeeeeeeee</div>
<div id="f">
<div id="s">sssss</div>
</div>

一个典型案例做图片上签名：

 

 

6.3.浮动float，尽可能向某边上靠，并将其他元素挤开（呈现环绕效果）。

img{float:right; }

可以设置的值：

6.3.1.例子1：默认div是块级元素自动换行，如果都设置成float可以都显示在同一行上

6.3.2.例子2：部分元素不设置浮动，会被浮动的元素影响：

 

s4,s5都受到影响，浮动元素可以看成是后加入的元素将已有元素挤开。

6.4.清除浮动clear：清除别的元素浮动对其造成的影响（一般是直接换行)

img
  {
  float:left;
  clear:both;
  }

可以使用的值：

例子：解决6.3.2中浮动影响：清除某一边浮动影响，之后的元素也会被清除

效果：

7. overflow，属性是否增加滚动条：

div{
  width:150px;
  height:150px;
  overflow:scroll;
  }

属性值的可以取值：

 

8.text-align 属性规定元素中的文本的水平对齐方式。

h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}

常用取值：

如果在将父元素设置文本居中，那么其中的子元素都将当作文本做居中显示。

9.text-decoration，文本修饰：

h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}

常用取值：

 

利用displsy显示/隐藏，下拉效果：

点击隐藏效果：

js:

<script type="text/javascript">
function ff(){
var e=document.getElementById("hi");
var v=e.style.display;
e.style.display=v=="none"?"block":"none";
}
</script>

html:

<div id="cli">
<a href="#" onclick="javascript:ff()"> 隐藏下面 </a>
</div>
<div id="hi">
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
</div>