HTML样式布局以及盒子定位

一、页面布局

 

1.div盒子

盒子模型，定义页面某一块区域范围

<div></div>,块级标签

 

与table表格布局：整齐，规则，需要行和列组成，布局死板

 

2.css内部样式

样式设置方式：

1)内联样式，行式样式

写在标签内，通过style来定义样式

<div style="width: 1000px;height: 500px;background: mediumturquoise;">
</div>

2)内部样式

写在<style></style>标签中，<style>标签定义样式

需要样式选择器 选择body中的标签

样式选择器类型：

A.通配符选择器：定义页面中的所有标签

*表示所有标签

*{ 样式属性：属性值.....}

Eg：/*通配符:一般清楚margin和padding的值*/

*{color: #FB00AB;margin: 0;padding: 0; font-family: 宋体;}

B.标签选择器：通过标签来定义所有此标签样式

标签：{属性:值}

ul{width: 600px; height: 100px;  background-color:snow;}
	li{font-family: 微软雅黑;}

C.类选择器：通过class定义类名，通过类名定义样式

<标签 class=”类名”></标签>

.类名{属性：值；}

前缀：.点

Eg：

<li class="c1">类选择器</li>

/*类*/
    .c1{color: #086FF9;}

Eg：

<li class="c1">类选择器</li>
<li class="c2">先定义类名，通过类名来定义样式</li>
<li class="c1 c2">类选择器组合使用</li>

/*标签中必须满足有两个类选择器，才有样式效果*/

D.id 选择器;通过id属性定义id名，通过id名定义样式

 

Id 前缀是#

<标签 id=”名字”>

#id 名字{属性，值}

Id选择器的名字是唯一的，不能重复

 

<li id="d1" class="c1 c2">
/*id*/
    #d1{color: #807e05;}

E.分组选择器：同时定义多个选择器

选择器1，选择器2，选择器

#id1,id2,.c1{样式}

.c2,#d1{border: #308003 dashed 1px;}

F.派生选择器：指派标签中，需要定义的标签的样式

父级标签 标签{属性：值}

Div li{属性：值}

div p{
    width: 100px;
    height: 100px; 
    border: #0e8020 1px solid;
}

G.伪类选择器：定义样式的效果

样式效果：hover 鼠标悬停 ,focus 点击获取焦点等...

选择器：效果{样式}

比如：hover

#d1:hover{ }--当鼠标悬停到#d1标签上，定义#d1的样式

 #d1:hover{
    font-size: 50px;
  }

3）优先级

样式重复，需要考虑优先级问题

注意：样式重复，优先级：通配符<标签<类<id<内联样式

派生选择器：

父级选择器 子级选择器{样式}

父级选择器 选择器{样式}

#d1 a{
    font-size: 30px;
}
/*使用派生选择器，优先级 要注意添加父级选择器，不然没有优先级效果*/
#d1 .ca{
    font-size: 50px;
}



<div id="d1">
    <a id="da" class="ca" href="javascript:;">超链接</a>
</div>

3.外部样式

 

写在css样式文件中，在html文件中通过link标签引入

 

1. 创建css文件
2. 通过link引入css

<link href="css02.css" rel="stylesheet" type="text/css">

Href：引入文件的路径

Type：引入文件的类型

Rel：引入文件与文件的关系

Stylesheet：级联样式表

text/css：文本样式类型

3.在css样式文件中通过选择器定义样式

<link href="../image.png" rel="icon">

Icon：关系是标题小图片

二、盒子模型设置距离

1.padding

在标签中，设置内容与标签边框的距离

距离边框的方向：top,bottom,left,right;

 

1. Padding-方向：距离；设置距离方向的距离
2. Padding:值1;内边距距离四个方向是值1的距离

   Padding:值1 值2；上下方向是值1，左右方向是值2

   Padding:值1 值2 值3；上方向是值1，左右方向是值2，下方向是值3

   Padding:值1 值2 值3 值4；四个方向分别对应：上右下左

注意：使用内边距padding，标签范围会变大，注意页面布局

 

2.margin

外边距的外边距离，本标签与其他标签的距离

可设置边框的方向：top,bottom,left,right;

三、定位

Position:标签的位置属性

属性值：static(默认),relative,absolute,fixed

1.static(默认)：默认定位，静态定位；系统自动生成

2.relative;相对定位:相对于标签的原位置的左上角(0,0)进行定位

与定位的方向:top,bottom,left,right 结合使用.

(1)相当于标签原位置的左上角进行定位

(2)保留标签原位置

3.absolute;绝对定位

(1)以页面body标签的左上角来定位

(2)当父标签的position不是static，以父标签进行定位

(3)不保留原位置

 4.fixed 固定定位，确定定位

 (1)以整个页面整体进行定位

 (2)不会随着滚动条滚动发生位置变化，固定在页面上

 (3)不保留位置

 

• 隐藏,溢出  属性

隐藏:display(不保留位置的隐藏) 和 visibility（保留位置的隐藏）display：none隐藏/block 显现

Visibility:hidden 隐藏/visible 显现

 

溢出:overflow；标签中的内容超出了标签范围默认是可见

overflow:

  Hidden溢出内容隐藏/visibility溢出内容显示/scroll滚动方式查看

层级：z-index

处理标签显示，覆盖优先级

z-index的值越大，层级越高

z-index:正整数

• 其他常用属性设置

1.边框

Border:颜色 大小 样式；

边框占用 px位置空间

Border:red 1px solid;

Solid:实线

Dashed:虚线

...

Boder-radius:大小值；设置标签中边框四个角的弧度，圆角

Border-top-left-radius:设置左上角的弧度

Border-bottom-right-radius:设置右下角的弧度

2.轮廓

 Outline:颜色 大小 样式；与边框设置是一致

 与边框是一致，区别:轮廓不占空间，边框占空间