博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css定位relative,absolute
阅读量:4980 次
发布时间:2019-06-12

本文共 2584 字,大约阅读时间需要 8 分钟。

 

1.先解释一下文档流

  就是HTML的一种机制,块元素单独占一行(比如   div),内联元素不换行(a标签,img标签);

2.几种定位方式

  2.1   static

    HTML默认定位方法,服从文档流(flow),自适应的,不需要我们设置。

  2.2  relative

    相对定位,相对于自己原来的位置(参照物是自己),可以使用bottom,top,left,right等定位,但是服从文档流,仍然占据着自己原来的位置;

  2.3  absolute

    绝对定位,参照物是祖先有过position:relative或者position:absolute的元素,可以使用bottom,top,left,right等定位,但是absolute定位会从文档流中删除,就是原来自己占得位置会取消;祖先有过relative或者absolute标签,使用bottom top left right怎样都不会越过祖先的,需要使用margin才行。

  2.4  fixed

    absolute参照是上一个定位过的祖先(static不算),如果元素的参照物是文档,使用 position:fixed实现;

  2.5  float

    浮动标签,就是对象从文档中浮起来了,不在文档流中,值有left,right,none;但是float有时候会影响其他标签操作,一般我们在float的父元素后面添加   clear:both来清除;

  2.6 <link>标签最重要的两个属性rel,href;<link rel="stylesheet"  href="位置" >;rel指明该标签是css标签,href指明css文件所在位置;

  2.7  padding,margin都是干嘛用的?

    padding:元素的内边距就是元素的边框和元素内容之间的距离;比如 h1{padding:10px,15px},h1的内容离上下边框10px,离左右边框15px(内容是否是文本内容?);

    margin:元素的外边距就是元素的边框外面的距离,可以有负值; 

3. table标签

  对于table我们需要关心的一般有:行(tr),列(td,单元格),单元格内容分布方式()或者用padding填充,字体大小,字体颜色,高度,宽度,每个单元格都有border(为了美观要不要合并)

  行:tr;

  单元格:td;

  单元格填充:padding;

  字体大小,颜色;

  border:table的边框,要不要合并;

4.点击a标签,改变a标签的class

  

$(".trtitle td:has(a)").click(function() {        var a = $(this).find("a");        if(a.attr("class").indexOf("down") == 0) {            $(this).css("color", "#d34a22");            a.attr("class", "up");            $(this).siblings().css("color", "").find("a").each(function() {                $(this).attr("class", "down");            });        } else if(a.attr("class").indexOf("up") == 0) {            $(this).css("color", "#d34a22");            a.attr("class", "down");            $(this).siblings().css("color", "").find("a").each(function() {                $(this).attr("class", "down");            });        } else {            $(this).siblings().add(this).css("color", "").find("a").each(function() {                $(this).attr("class", "down");            });        }        query(a.attr("field"),a.attr("class").indexOf("up") == 0 ? "asc" : "desc");    });

 5.使用jquery动态生成html元素示例:

 
1 var tdElement = function (data) { 2         var tdNode = ' 3          return tdNode;   }

6.  text-align 块元素的文本排列方式,值有 left right center(非常有用);  vertical-align: 行元素的对齐方式(可能会往上一点或者往下一点),有text-bottom,text-top; line-height:行间距;  z-index:表示叠加顺序,值越大,优先级越高,越会放在前面;  font:定义字体,font-family(类型),font-size(大小),line-height(行间距);

 7.  图片背景在一行的方式有: 可以选择div装这两种元素, 1. 如果是背景图片,然后div设置成: background: url("img/show_pdt_tit.png") no-repeat left center;  2. 如果就是一个图片<img>,图片css样式加上 vertical-align:middle。  3. 图片和文字都用div修饰,那每个div都加上 display:inline-block。   

  

 

转载于:https://www.cnblogs.com/zhihuayun/p/7190764.html

你可能感兴趣的文章
多线程备忘
查看>>
水波形图片切换
查看>>
Javascript的console.log()用法
查看>>
【知识向】——计算机基础知识总结及相关
查看>>
【代码笔记】iOS-只让textField使用键盘通知
查看>>
过滤器
查看>>
trie-[HNOI2004]L语言
查看>>
实验三 网际协议IP 实验报告
查看>>
数据库1
查看>>
Lodop打印如何隐藏table某一列
查看>>
MongoDB下载安装
查看>>
python之上下文管理、redis的发布订阅、rabbitmq
查看>>
Mac Mini Server安装Centos6.5
查看>>
House of hello恶搞凯莉迷你包
查看>>
查看文件权限修改时间
查看>>
Math Date
查看>>
TCP/IP协议 计算机间的通讯,传输、socket 传输通道
查看>>
Android 将取代 Ubuntu,做为个人桌面操作系统
查看>>
【Java】生成图形验证码
查看>>
layui学习笔记
查看>>