2015年7月9日 CSS第二课(浮动、盒子模型、绝对定位和相对定位)

list-style-type:none是指不显示项目符号

1、块级元素的特点:

      常用的块级元素有:body,ul li,ol li,h1-6,div,hr,p,table……等

  (1)块级元素里面的内容,或者背景图片,默认显示在块的左上角
  (2)块级元素,默认情况下,单独占满一行。

  常用的块级元素:div、p、h1-h6、hr、ul li、ol li、table、body...

2、浮动:float

  作用:通过漂浮,让块级元素实现并排

  float:left 或 right

  注意:如果div左边或者右边的块存在浮动,会对此div产生影响,此时需要清除左右方的浮动

  清除浮动:clear:left(清除左边div的浮动)或right(清除右边div的浮动)或both(同时清除两侧的浮动)

  简单说明:想排在一行就使用浮动(float:left) ,想提行就清除浮动(直接用 clear:both 即可,不用管左右)

3、盒子模型:

  (1)border:边框
    border-top:上边框
    border-left:左边框
    border-right:右边框
    border-bottom:下边框

  (2)padding:内边距(框内文字距离框线的间距)有3种写法

    第一种:上下左右 padding:10px;
    第二种:上下 左右 padding:10px 20px;
    第三种:上 右 下 左 padding:10px 20px 10px 15px;

  (3)margin:外边距(边框对边框外其他内容的间距)有3种写法

    第一种:上下左右 margin:10px;
    第二种:上下 左右 margin:10px 20px;
    第三种:上 右 下 左 margin:10px 20px 10px 15px;

  注意:在设定好宽度时,padding会把盒子撑开,此时可以通过减小width、height的值来保持盒子原大小

  *{ padding,margin:0px;}:默认网页里所有的标签都内外间距为0

4、行内元素的特点:

  (1)默认情况下,不受到height、width属性的影响

  (2)不会占满一行

  常用的行内元素:span(适用于一小节文字的样式设定)、a(链接)

  【备注】 display:block;  将 行内元素 转成 块级元素

5、绝对定位 & 相对定位:

  (1)绝对定位:position:absolute;

    当设置一个块级元素为绝对定位的时候,它就脱离了文档流,浮动就不会对它有影响

    此时对它设置top、left、right、bottom,就是针对窗体的距离

  (2)相对定位:position:relation;

    当设置一个块级元素为相对定位的时候,它没有脱离文档流,浮动对它是有影响的

    此时对它设置top、left、right、bottom,是针对上一级容器的距离

    【注意】当相对定位的前面有块级元素占据位置时,则实际距离=设置距离+占位块级元素宽或高

时间: 2024-12-20 14:59:16

2015年7月9日 CSS第二课(浮动、盒子模型、绝对定位和相对定位)的相关文章

2015年7月7日 HTML第二课

一.html表单(html控件或客户端控件) 表单的动作Action: Method:get或post      提交表单的发送方式 Target:_blank新窗口中打开:_parent父级窗口:_self当前窗口:_top顶级窗口. 二.表单元素及属性 1.按钮: <input type="button"> 2.文本框: <input type="text"> 3.密码: <input type="password&quo

第一章 部署虚拟环境linux系统 2019年7月15日星期一 第二课

第一章 部署虚拟环境linux系统 2019年7月15日星期一  第二课 1.1 准备的工具 VmawareWorkSation 12.0   虚拟机 RadHatEnterpriseLinux[RHEL]7.0   红帽操作系统 1.2 安装配置VM虚拟机 略…… 1.3 安装配置VM虚拟机 VM配置要开启BIOS里的inte-TV  虚拟化服务 1.4 配置root用户密码 红帽RHCSA考前辅导视频 1.5 Rpm红帽软件包 (1)源代码安装弊端:1.难度高,安装困难. 2.需要自己解决依

2015年10月22日CSS学习笔记

XHTML1.0对HTML4.0的改进 借鉴了XML的写法,语法更加严格. 把页面的内容和样式分离了,废弃了html4中的表示样式的标签和属性.推荐使用css来描述页面的样式. CSS样式的优先级 !important>内联样式>内部/外部样式>浏览器预定义样式 内部外部样式:#id>类选择器>元素选择器 内联样式要尽量少用:内部样式可以适量的使用,例如如果只有一个页面使用样式的情况下就没必要专门做一个外部样式:推荐使用外部样式,但是也不要太多,否则头重脚轻,显示页面的时候可

2015年9月22号css第二次课

常用的块级元素和行内元素 1.块级元素(p.hr.div.table.ul.ol.li.h1-h6) 2.行内元素(a.img.input.span) 块级元素和行内元素相互转换 1.display:inline; 块级转成行内元素 2.display:block; 行内元素转成块级元素 3.display:inline-block; 具有行内元素和块级元素特点: width.height会受到影响:不会单独占满一行 css盒子模型 内间距:padding padding:10px; 上下左右1

2015-09-22 第四节课 CSS块级元素 行内元素 浮动 盒子模型 绝对定位、相当定位和固定定位

常见的块级元素和行内元素 一.块级元素 1.块级元素的特点: (1).默认显示在父标签的左上角. (2).块级元素默认占满一行(沾满整个文档流). 2.常见的块级元素: <p>.<h1-h6>.<ulli>.<olli>.<div>.<tabl>.<hr> 二.行内元素(内联元素) 1.行内元素的特点: (1).大小受到文字区域的影响,不受到width和height的影响. (2).行内元素不会单独占满一行. 2.常见的行

2015年9月17日第一节课html1-1

1.完整的网站需要学习的内容: 前端:html css js 数据库:SQL Server 动态部分:.net\c#\vs等. 之间的关系: html:就是构成网页的内容基本语言. css:美化网页的外观 js:做网页特效,执行网页的动作. 客户端向服务器发送请求,iis(运行网站的程序)判断是否是静态网页,如果是直接在服务器找到相应的页面直接访问. 如果不是就让相应的后台程序运行起来(如:.NET),然后将结果返回给客户端. 简单说就是请求(request)与相应(response). 2.什

2015年9月21号css第一次课

一.border的用法 border的属性有:border-color:边框颜色: border-width: 边框的粗细:border-style:边框样式(solid实线.dashed虚线.dotted:点线) 常用一行写法:border:solid 1px red; 例子:HTML代码: <div id="d1"> 边框高度:200 边框宽度:200 边框颜色:红色 </div> CSS代码: #d1{ width:200px; height:200px;

2015年9月20日第一节课html2-2

1.相对路径和绝对路径, 相对路径主要就是同目录下的文件可以直接调用. 比如上图中:如果当前的ch7_2.htm想要调用sea.gif.分析: ch6和ch7为同级目录,那么ch7_2.htm要调用ch6中文件的办法:Dir3是ch7_2.htm的父级目录,ch7又是Dir3的父级目录,然后ch7可以直接调用ch6.那么就是ch7_2.htm的上上级的ch_6下面的文件,上上级的表示就是../../,所以调用方式就是:../../ch6/Dir2/sea.gif 绝对路径就是完整的路径,比如D盘

2015年9月17日第一节课html1-2

一.列表(导航.菜单) 1.有序列表 <ol type="A"> <li></li> <li></li> </ol> 显示效果:默认情况下就是数字,可以使用type进行设置. 2.无序列表结构,type是设置前面的图形的. <ul type="circle"> <li></li> <li></li> </ul> 显示效果:默