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:颜色 大小 样式;与边框设置是一致

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值