我们做网页布局时,一般都是用div标签来做页面划分,这时就要考虑到块级元素,内联元素(span)。块级元素在浏览器显示时,通常会以新行来开始(和结束)
本章内容:

1.div的margin和padding
2.float属性
3.默认自带margin或padding的标签
4.a标签的链接样式
5.table标签的补充
6.HTML文本格式化标签
7.transform旋转属性

1.div的margin和padding

      margin属性是对div兄弟节点使用的。若div中还有子div节点,使用margin属性后,两个都会同时变化,起不到调整div间距的作用。针对父子div节点,应该使用padding来调整父子div节点的间距(亲测会改变父div尺寸,不建议使用)

      在页面重构中,利用margin进行定位非常常见,然而margin-top这个属性经常会给我们带来一定的困扰,有时候不起作用,还把父层“拉”了下来,如图所示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test2</title>
<style>
.header { width:300px; height:100px; background: green; }
.outer { width:300px; height:300px; background: yellow; }
.inner { margin-top:100px; width:100px; height:100px; background: red;}
</style>
</head>
<body>
<div class="header"></div>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>

解决方案:

  1. 都用float来定位(有条件要求,适用范围较广)
  2. 为父元素添加overflow不为visible 的属性 (适用范围极广,推荐使用)
  3. 为元素添加border(一般不用)
  4. 使用绝对定位(适用范围较窄)
  5. 父元素增加padding属性(亲测会改变父div尺寸,不建议使用

float解决方案:要浮动都要浮动;然后就都可以各自使用margin,padding属性;父节点相对于整个文档微调,子节点相对于父节点微调

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    <style>
.box1{
width: 120px;
height: 120px;
background-color: #48b685;
float: left;
margin-top: 10px; /*父节点的外边距10px*/
}
.box2{
margin-top: 20px; /*子节点相对于父节点的外边距20px*/
width: 60px;
height: 60px;
background-color: #00b0e8;
float: left;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>

overflow解决方案:为父元素添加overflow不为visible 的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    <style>
.box1{
width: 120px;
height: 120px;
background-color: #48b685;
overflow: hidden; /*父元素添加overflow*/
}
.box2{
margin-top: 20px;
width: 60px;
height: 60px;
background-color: #00b0e8;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>

小结:

  1. 使用 margin:0 auto;的盒子,必须要有width,有明确的width;
  2. 只有标准流中的盒子,才能使用 margin:0 auto; 居中,即当一个盒子浮动了,绝对定位了,固定定位了,都不能使用 margin:0 auto;
  3. margin:0 auto;是在居中盒子,不是居中文本,文本的居中,用 text-align:center;
  4. margin的属性本质上描述的是兄弟标签之间的距离,最好不要用这个属性描述父子之间的距离,描述父子之间距离时要善于使用父亲的padding;
  5. IE6兼容性问题解决方案:使浮动方向与margin方向相反;

2.float属性

关于浮动的使用一定要注意三个事情:
①. 要浮动,所有的兄弟都要浮动
两个盒子并排,则两个盒子必须都要设置浮动。不能老大浮动,老二不浮动;老二不浮动,老大也不浮动

②. 一定要把浮动的元素放在一个div中
你看,因为box1与box2要并排,所以它们必须要放到一个div中

1
2
3
4
5
<div class="up">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="down"></div>

③. 父盒子要有足够的空间,否则会掉下来

3.默认自带margin或padding的标签

1
2
3
4
5
/* 内外边距通常让各个浏览器样式的表现位置不同(推荐这种写法) */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
margin:0;
padding:0;
}

css如果写作*{margin:0;padding:0}作用也是一样的,但是这种写法会使查询速度变慢,现在一般的大公司都使用第一种方法

4.a标签的链接样式

链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。特别的链接,可以有不同的样式,这取决于他们是什么状态

  • a:link - 正常,未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻

拓:ul标签,ol标签去掉前面的编码:list-style-type: none;

a标签的最重要功能是实现超链接和锚点。而且,大多数人认为a标签最重要的作用是实现超链接,今天我刚好碰到a标签的一种写法<a href=”javascript:;”>,所以就来整理下a标签中href的几种用法:

  1. <a href=”javascript:void(0);” οnclick=”js_method()”>

    这种方法是很多网站最常用的方法,也是最周全的方法,onclick方法负责执行js函数,而void是一个操作符,void(0)返回undefined,地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。

  2. <a href=”javascript:;” οnclick=”js_method()”>

    这种方法跟方法一类似,区别只是执行了一条空的js代码。

  3. <a href=”#” οnclick=”js_method()”>

    这种方法也是网上很常见的代码,#是标签内置的一个方法,代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。

a标签的target属性:_black,_self,_top,_parent

5.table标签补充

HTML表格由table标签以及一个或多个tr、th或td标签组成

table标签用来定义表格,整个表格包含在<table>和</table>标签中;

tr标签用来定义表格中一个行,它是单元格的容器,每行可以包含有多个单元格,由<tr>和</tr>标签表示;

td标签和th标签用来定义单元格,所有单元格都在tr标签内,每个单元格由一对<td>和</td>标签或一对<th>和</th>标签表示,具体的表格内容放置在这一对td标签或th标签之中,其中th标签中的内容默认以粗体、居中的方式显示,以为它代表表格标题。

  • rowspan属性来实现单元格的跨行操作,所有的浏览器均可支持
  • colspan属性规定单元格可横跨的列数,所有的浏览器均可支持
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table border="1">
<tr>
<th colspan="3">物资详情说明</th>
</tr>
<tr>
<td colspan="2" align="center">数量(支)</td>
<td rowspan="2">重量(吨)</td>
</tr>
<tr>
<td>实发数</td>
<td>实收数</td>
</tr>
<tr>
<td>12</td>
<td>10</td>
<td>100.00</td>
</tr>
</table>

经过渲染后的colspan,rowspan属性展示如下:

物资详情说明
数量(支) 重量(吨)
实发数 实收数
12 10 100.00

6.HTML文本格式化标签

  • <b>:加粗
  • <br>:换行
  • <ins>:插入字
  • <i>:斜体
  • <del>:删除字
  • <em>:着重字
  • <small>:小写字
  • <code>:计算机代码
  • <kbd>:键盘码
  • <kbd>:预格式文本,显示内容与预设的文本格式一致

7.transform旋转属性

默认为顺时针旋转

1
2
3
4
5
6
7
div{
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
-o-transform:rotate(90deg); /* Opera */
}

参考文献


 评论

联系我 | Contact with me

Copyright © 2019-2020 谁知你知我,我知你知深。此恨经年深,比情度日久

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议