css知识复盘

其他 2020-04-19 14:25:01 阅读次数: 0

文章目录

盒模型

盒模型就是width、 height、padding 、border、margin外边距这几个属性。

标准盒子模型

在这里插入图片描述

width: 内容的宽度 height:内容的高度。 padding：内边距 border: 边框 margin: 外边距(盒子与盒子之间的距离)

IE盒子模型

在这里插入图片描述

padding(内边距)

padding: 内容和边框内侧之间的距离 。padding顺序(顺时针) 上右下左

padding:10px 20px 30px 40px;  //上右下左
padding:10px 20px 30px; //上10 右20 下30 左20  (左右一致)
padding: 10px 20px;  //上下10  左右20
padding: 10px;    //上下左右都是10
//小技巧
//设置  上40 右40 下20 左40
padding:40px;
padding-bottom:20px;

备注：先测量宽度 ，设计图的左右padding是一致的,测量的左padding为准。测量盒子的高度的时候，先要测量字号大小和行高。再测量盒子的height和padding. 再搞一个行高的高度大小的切片，比对出padding大小。 text-indent:2em 表示缩进2个字号。

简单去除默认样式的方法

*{
    margin:0;
    padding:0;
}

border边框

边框有三要素： 粗细 、线型、颜色

border:1px solid #ccc

工作中常用的线型：solid(实线) ,dashed(点线); 其他的线型有兼容性问题。

border:10px solid red;
//等价于
border-top-width:10px;
border-top-style:solid;
border-top-color:red;
//边框要求上下黑 左右红 ，都是10px 小技巧
border:10px solid yellow;
border-color:black red;
//下边框不想要
border-bottom:none;

小案例：用边框制作小三角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用边框制作小三角</title>
    <style>
    div{
        width:0px;
        height:0px;
        border:10px solid white;
        border-top-color:blue;
        border-bottom:none;
        transition:all 1s ease 0s;
    }
    div:hover{
        transform:rotate(180deg);
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

margin 外边距

某个盒子的边框外侧，到其他盒子边框外侧的距离。

上下两个盒子同时设置margin,上盒子设置margin-bottom,下盒子设置margin-top，此时margin小的会陷入margin大的值，以打的为准(margin的塌陷现象)

父子盒模型

不要写height,width用内容撑开宽度。

有标题的设计图，先要测量内容的字号行高，再测量标题的行高和padding。最后在进行微调。.

案例 腾讯盒子练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>腾讯盒子1</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    .box{
        width:332px;
        border-bottom:1px dotted #b00700;
        padding-bottom:10px;
        margin-left:9px;
    }
    .box .title{
        font:21px/40px "微软雅黑";
        font-weight: bold;
        padding-bottom:4px;
        color:#b00700;
    }
    .box ul{
        padding-left:15px;
        
    }
    .box ul li{
        list-style:none;
        font:16px/30px "微软雅黑";
    }
    .box ul li a{
        text-decoration: none;
        color:#333333;
    }
    </style>
</head>
<body>
    <div class="box">
        <p class="title">北京行政副中心北部路网将重构</p>
        <ul>
            <li><a href="">踏青扫墓高峰到来139条公交增运力</a></li>
            <li><a href="">副中心污水全处理重点河道将基本还清</a></li>
            <li><a href="">北京开展房地产经纪机构专项执法检查</a></li>
            <li><a href="">从国务院批复看中国各个城市的真实排名</a></li>
            <li><a href="">北京市气象局举行气象科普馆开馆仪式</a></li>
        </ul>
    </div>
</body>
</html>

在这里插入图片描述

居中策略

文字水平居中

如果想让盒子中的文字水平居中，那么要给盒子设置 text-align:center; 这个属性继承。 这个方法，只能居中文本流的东西(文字、图片、表单元素)，一定要设置给盒子，不能设置给这些文字，图片，表单元素。

盒子水平居中

盒子设置：margin: 0 auto; 这个属性不继承。每个盒子都需要单独设置。

单行文本的垂直居中

盒子高度=====行高 line-height:盒子的高度。这个方法只适用单行文本。

标准文本流

标准文本流介绍

网页都是从左往右，从上往下呈现的。

标准文档流的性质

空白折叠现象

标签内的文字，不管有多少个空格，换行、tab,都会缩减为一个空格。

高矮不齐 底边对齐

文字大小字号可以不同，但是底边的基线一致。图片也一致。

块级元素和行内级元素

块级元素

块级元素：div、h、系列、p ul li dl dt dd 等等元素。

块级元素性质
  • 能够设置宽度、高度
  • 不能并排，独占一行
  • 不设置宽度，那么宽度将默认变为父元素的width。
行内级元素

行内级元素： span a b u i em strong等 元素

行内级元素性质
  • 不能设置宽度，高度，（但是可以设置行高）
  • 可以并排

行内元素和块级元素的互相转换

给一个元素设置：display:block; 它将转为块级元素，拥有块级元素的所有性质。(有用)

给一个元素设置：display:inline; 它将转为行内元素，拥有行内元素的所有性质。(无用)

脱离标准文本流的方法

脱离标准流的三种方法: 浮动、 绝对定位、相对定位。

浮动

浮动初步

浮动是用来做并排元素的。 float:left; 左浮动 float:right; 右浮动

浮动的元素回去贴父元素盒子的边，贴边的过程中，如果被兄弟元素挡住，就会贴在兄弟元素边上。

浮动的元素脱离标准流

浮动的元素不能撑开父元素的高度。

深入了解浮动的性质

浮动的元素脱离标准流，就没有标准流的行块之分了。即没有inline ,block之分了。

浮动的元素可以直接设置宽度、高度

浮动的元素是元素内容撑开宽度。

浮动的元素都是依次贴边的。(有用) 类似下图的效果(携程官网)

在这里插入图片描述

备注：设计图先找共性，再找特性。

案例：京东

在这里插入图片描述

竖直方向上的margin塌陷现象消失。margin塌陷是标准流的性质，因为浮动脱离标准流，所以塌陷现象消失了。

浮动的元素不占用文档的标准流。

清除浮动

父元素不能被浮动的子元素撑开高度。 父元素只能被标准流的元素撑开高度。

overflow:hidden; 溢出隐藏

有高度的父元素盒子，能够关住自己的内部的浮动子元素，不会影响其他元素的浮动子元素。

清除浮动的方法

  1. 给父元素加overflow:hidden;
  2. 如果两个盒子内部都有浮动子元素，且两个盒子都没有设置高度，要给后一个盒子添加样式：clear:both; ，这样可以清除第一个盒子对后一个盒子的浮动影响。(缺点是盒子还是没有高度，且margin:失效)
  3. ''隔墙法" 隔开网页中比较大的两个部分。关住两个部分中的浮动的子元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
        /**墙**/
		.cl{
			clear: both;
			background-color: pink;
		}
		.h6{
			height: 6px;
		}
		.h18{
			height: 18px;
		}
		.h20{
			height: 20px;
		}
		.h22{
			height: 22px;
		}
		.box1{
			width: 800px;
			border: 10px solid gray;
		}
		.box2{
			width: 800px;
			border: 10px solid gray;
		}
		p{
			float: left;
			width: 100px;
			height: 60px;
			background-color: greenyellow;
			margin-right: 10px;
		}
		
	</style>
</head>
<body>
	<div class="box1">
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<p>4</p>
	</div>
    <!-- 墙-->
	<div class="cl h20"></div>
	<div class="box2">
		<p>1</p>
		<p>2</p>
		<p>3</p>
	</div>
</body>
</html>
  1. “内墙法” 父盒子也能有高度，margin也能用。(工作不用)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		/* 内墙样式 */
		.cl{
			/* 重要 */
			clear: both;
			/* background-color: pink; */
		}
		.box1{
			width: 800px;
			border: 10px solid gray;
			margin-bottom: 20px;
		}
		.box2{
			width: 800px;
			border: 10px solid gray;
		}
		p{
			float: left;
			width: 100px;
			height: 60px;
			background-color: greenyellow;
			margin-right: 10px;
		}
		
	</style>
</head>
<body>
	<div class="box1">
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<p>4</p>
		<!-- 内墙 -->
		<div class="cl"></div>
	</div>
	
	<div class="box2">
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<!-- 内墙 -->
		<div class="cl"></div>
	</div>
</body>
</html>
  1. overflow:hideen; 清除浮动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box1{
			width: 800px;
			border: 10px solid gray;
			/* overflow */
			overflow: hidden;
			margin-bottom: 20px;
		}
		.box2{
			width: 800px;
			border: 10px solid gray;
			/* overflow */
			overflow: hidden;
		}
		p{
			float: left;
			width: 100px;
			height: 60px;
			background-color: greenyellow;
			margin-right: 10px;
		}
		
	</style>
</head>
<body>
	<div class="box1">
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<p>4</p>
	</div>
	
	<div class="box2">
		<p>1</p>
		<p>2</p>
		<p>3</p>
	</div>
</body>
</html>

备注：工作中，给内部有浮动子元素的父元素盒子加上: overflow:hidden; 在两个大部分盒子中间使用隔"外墙",以此来替代margin.

超级链接美化

伪类

超级链接根据用户的点击情况：有4种情况：

  • a:link 没有访问过的超级链接
  • a:visited 已经访问的超级链接
  • a:hover 鼠标悬停的时候
  • a:active 鼠标按下的时候

爱恨准则

css 有规定： 四个伪类的顺序必须是： link visited hover active (love hate)

常见写法

一般的，我们会把a:link 、a:visited 写在一起

a:link,a:visited{
    text-decoration:underline;
    color:#333;
}
a:hover{
    color:red;
}

如果a要转成块，设置宽高，那么我们一般习惯把盒模型的属性写在a这选择器里,把关于文字的属性，写在伪类中。text-decoration 一定要写在伪类里面，或者a标签里面，绝对不能从父元素继承。(伪类的权重和类一样)

.nav ul li a{
    display:block;
    width:120px;
    height:40px;
}
.nav ul li a:link, .na ul li a:visited{
  text-decoration：none;
    color:white;
}
.nav ul li a:hover{
    background-color:gold;
}

background系列属性

background-color

背景颜色: 除了border以内的地方都有颜色。

background-image

背景图片属性： background-image:url(); url是uniform resource locator 统一资源定位器。背景图片会默认横向和纵向的平铺。background-image:url(../pic/1.png)

background-repeat

有三个属性值：

  • background-repeat:no-repeat; 表示背景图不重复
  • background-repeat: repeat-x; x轴横向平铺
  • background-repeat: repeat-y; y轴纵向平铺

案例：repeat-x 妙用制作导航条

background-position

背景定位 background-position: 10px 20px 背景图距离x轴方向右边10px 距离y轴方向下方20px; 如果需要背景图向左，向上移动，需要将x轴坐标和y轴坐标置为负值。例如: background-position:-10px -20px;

background-position: 最常见的用处就是"css精灵" css-sprite(css雪碧技术)， 就是指把多个小杂碎图片，合成一张图片，然后用background-position定位只显示其中某一部分。 这样能够显著降低HTTP请求数。

小技巧，在ps中使用切片工具蒙住图标，查看图标所占的大小，再看切片的“属性”面板观察 x轴坐标和y轴坐标，这两个坐标即为该图标距离坐标(0,0)的的距离，记住将“属性面板”中的坐标置为负值即可。

backgound-position不仅仅可以用两个数字定位，还可以用单词来定位。

在左右层面，我们用left、center、right来表示左，中，右。在上下层面，我们用top center bottom 来表示 上，中 ，下 。顺序是先左右，后上下。

可以使用百分比来表示：background-position:50% 0; 等价于 background-position:center top;

应用：1） 大背景 —>案例大背景 2)通栏banner ----->案例

background-attachment

background-attachment:fixed 背景固定 。

复合属性

background:url(../pic/1.png) no-repeat yellow 100px 130px;

背景图的应用

图换文字(logo图的处理方式)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图换文字</title>
    <style>
    .header h1{
        /* 将h1的大小设置为背景图的大小 */
        width:221px;
        height:68px;
        background:url(./pic/logo.png);
        /* 将文字脱离可视页面 ，这样保持有文字，可以让搜索引擎检索 */
        /* 第一种方法 text-indent:-9999em */
        /* 第二种方法  行高 */
        line-height: 1140px;
        overflow: hidden;
    }
    </style>
</head>
<body>
    <div class="header">
        <h1>前端，前端！</h1>
    </div>
</body>
</html>

先导符号放在padding中去

在这里插入图片描述

在这里插入图片描述

<!--示例代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>先导符号放在padding里面</title>
    <style>
    h3{
        border:1px solid red;
        /* 重点代码 */
        padding-left:25px;
        /* 先导符号居中 */
        background:url(images/s.png) no-repeat left center;
        line-height: 30px;

    }
    </style>
</head>
<body>
    <div class="header">
        <h3>教育</h3>
    </div>
</body>
</html>

补充：又有背景色和背景图的a标签，例如“京东购物车”

在这里插入图片描述

/* 重点代码 */
a{
    display:block;
    width:150px;
    height:50px;
    text-align:center;
    line-height:50px;
    border:1px solid #333;
    background:#eee url(./pic/logo.png) no-repeat 4px 15px;
}

补充：下图中可以用padding-top 来存放背景图

在这里插入图片描述

补充：通栏banner+内容块居中 ，大盒子套小盒子 ，小盒子居中

在这里插入图片描述

<style>
    .box{
        height:390px;
        background:#eee;
    }
    .box .inner{
        width:960px;
        height:390px;
        /*小盒子居中*/
        margin:0 auto;
    }
</style>
<body>
    <div class="box">
        <div class="inner">
            
        </div>
    </div>
</body>

精灵图的摆放

先导符号单独放在右侧，避免干扰。

定位

相对定位

position:relative;
top:100px;  /*距离右边100px 正方向向下*/
left:50px;  /*距离左边50px  正方向向右*/
/* top: 正数向下移动*/
/* bottom: 正数向上移动*/
/* left: 正数向右移动*/
/* right: 正数向左移动*/

相对定位就是相对自己原来的位置，进行位置移动。移动的需要使用定位值 top left right bottom

相对定位不脱离标准流，原来的位置依然被占用(老家留坑)。

用途：1）微调元素(距离) 2）子元素绝对定位，父元素相对定位(常用)

案例：导航条一像素的hover效果效果

在这里插入图片描述

.nav ul li a{
    display:block;
    width:120px;
    height:91px;
    text-align:center;
    line-height:91px;
    
}
.nav ul li a:hover{
    border-top:3px solid orange;
    position:relative;
    top:-3px;
    left:0px;
}

绝对定位

position:absolute; 绝对定位的元素，脱离文档标准流

div{
    position:abloulute;
    top:100px;  /*距离上方100px,向下为正方向*/
    left:50px;  /*距离左边50px,向左为正方向*/
}
定位参考点

注意的是：(top left 和top right)的绝对定位点是相对于页面 左上角(右上角)进行绝对定位。(不是浏览器窗口左上角)。

(bottom left 和bottom right)的绝对定位点是相对于浏览器第一屏的左下角(右下角)进行绝对定位.

祖先盒子当参考点
<div>     /** div相对定位*/
	<p></p>  /**  p绝对定位*/
</div>

此时 这个p就是以div的边框内侧为参考点进行定位。

一个盒子的定位参考点：距离自己最近的已经定位的祖先元素盒子 ，定位参考点无视父盒子的padding.(以border内侧为参考点)。

绝对定位元素的居中
div{
    width:600px;
    height:200px;
    background:red;
    position:absolute;
    left:50%;
    top:0;
    /*左右居中*/
   /*margin-left的值是负的盒子宽度的一半*/
    margin-left:-300px;
}
应用
  1. 压盖效果(绝对定位)

补充: 绝对定位盒子已经不属于标准文档流，所以不能使用margin:0 auto;居中。只要一个元素脱离文档标准流，就没有行块之分，所以例如span元素绝对定位之后，就可以设置宽度和高度。脱离标准流的块级元素，没有自动撑满一行的性质，所以要写width:100%

span.right_btn{
    position:absolute;
    background:url(images/icon_v9.png) no-repeat 0 -44px;
    width:30px;
    height:35px;
    top:50%;
    right:10px;
    /*上下居中*/
    margin-top:-17px; /*盒子高度的一半*/
    cursor:size;
}
.carousel p{
    position:absolute;
    bottom:0;
    left:0;
    color:white;
    /*由于p元素绝对定位，脱离文档标准流，所以不能撑满这个性质了，所以要写width:100%;*/
    width:100%;
    height:40px;
    line-height:40px;
    background:black;
}

固定定位

position:fixed; 固定定位脱离文档标准流，参考点是浏览器窗口。

脱离文档标准流的三种方法

三种方法： 浮动。绝对定位，固定定位。 父元素盒子通过overflow:hidden; 可以识别浮动子元素的高度。但是子元素如果绝对定位或者固定定位，则其相应的父元素无法识别子元素的高度.

z-index属性

设置压盖顺序的。默认的压盖顺序：

1> 定位了的能压住没有定位的。

2> 如果定位了。那么HTML顺序后面的能够压住前面的。

z-index 没有单位，数字大的能够压住数字小的。 z-index：5 。只有定位的元素才能写z-index值，标准流的元素不能写z-index值。浮动的元素不能写z-index。

z-index属性比较，一般从父元素开始，那个子元素的父元素的z-index值比较大，那个子元素就比较大。

透明

盒子的透明

div{
    opacity:0.4;  /*标准浏览器的透明度写法 属性值为0-1*/
    filter:alpha(opacity=60);  /*IE6-8的写法*/
    
}

注意点：文字会跟着盒子一起变透明。解决方法如下：

<style>
    .box{
        width:310px;
        height:220px;
        border:1px solid black;
        position:relative;
    }
    img{
        width:310px;
        hiehgt:220px;
    }
    div title{
       position:absolute;
       bottom:0;
       left:0;
       width:100%;
       height:60px;
       background:black;
		opacity:0.4;
    	filter:alpha(opacity=40);
	}
	span{
        position:absolute;
        bottom:0;
        left:0;
        color:white;
        line-height:60px;
    }
</style>
<body>
    <div class="box">
        <img src="images/1.jpg" alt=""/>
        <div class="title">
            
        </div>
        <span>文字文字未能在</span>
    </div>
</body>

可以完成如下效果：

在这里插入图片描述

图片的透明

网页中的图片格式:

  • jpg/jpeg:压缩格式，是颜色失真的。为了保存尺寸小，所以有压缩算法，所以颜色是失真的。网页中的照片、新闻图片、banner、焦点图都要用jpg的格式，因为这样保存的尺寸就小。
  • png: 不可压缩，颜色不失真，是firework这个软件的默认保存格式，可以有图层。在传到服务器上面的时候，所有的png图片，一定要记住去掉所有图层，去掉图层的的方法就是文件导出，在“优化”面板中选择“png32”，然后导出。网页上的杂碎图标(logo)，都要存为png,尺寸更小。png支持透明和半透明。
  • gif: gif支持固定数量的颜色，可以是256种，可以是128种，可以是64种。所以是严重颜色失真，支持动画。gif也支持透明。工作中，如果要做一个透明的元素，可以用gif，而不用png，因为png IE6不兼容。
  • bmp: 是windows画图的保存格式，不压缩的，不失真的，不能动，不能有透明，不能有半透明。
IE6下解决png的透明和半透明的方法

(1)在IE6中用gif替代png

div{
    background:url(images/icon_v9.png) no-repeat 0 0;
    _background-image:url(images/icon_v9.gif);  /*IE6的hack写法*/
    opacity:0.6;
    filter:alpha(opacity=60);/*兼容半透明*/
}

(2) 运用png.js解决问题

//png.js
var DD_belatedPNG={ns:"DD_belatedPNG",imgSize:{},delay:10,nodesFixed:0,createVmlNameSpace:function(){if(document.namespaces&&!document.namespaces[this.ns]){document.namespaces.add(this.ns,"urn:schemas-microsoft-com:vml")}},createVmlStyleSheet:function(){var b,a;b=document.createElement("style");b.setAttribute("media","screen");document.documentElement.firstChild.insertBefore(b,document.documentElement.firstChild.firstChild);if(b.styleSheet){b=b.styleSheet;b.addRule(this.ns+"\\:*","{behavior:url(#default#VML)}");b.addRule(this.ns+"\\:shape","position:absolute;");b.addRule("img."+this.ns+"_sizeFinder","behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visibility:hidden;");this.screenStyleSheet=b;a=document.createElement("style");a.setAttribute("media","print");document.documentElement.firstChild.insertBefore(a,document.documentElement.firstChild.firstChild);a=a.styleSheet;a.addRule(this.ns+"\\:*","{display: none !important;}");a.addRule("img."+this.ns+"_sizeFinder","{display: none !important;}")}},readPropertyChange:function(){var b,c,a;b=event.srcElement;if(!b.vmlInitiated){return}if(event.propertyName.search("background")!=-1||event.propertyName.search("border")!=-1){DD_belatedPNG.applyVML(b)}if(event.propertyName=="style.display"){c=(b.currentStyle.display=="none")?"none":"block";for(a in b.vml){if(b.vml.hasOwnProperty(a)){b.vml[a].shape.style.display=c}}}if(event.propertyName.search("filter")!=-1){DD_belatedPNG.vmlOpacity(b)}},vmlOpacity:function(b){if(b.currentStyle.filter.search("lpha")!=-1){var a=b.currentStyle.filter;a=parseInt(a.substring(a.lastIndexOf("=")+1,a.lastIndexOf(")")),10)/100;b.vml.color.shape.style.filter=b.currentStyle.filter;b.vml.image.fill.opacity=a}},handlePseudoHover:function(a){setTimeout(function(){DD_belatedPNG.applyVML(a)},1)},fix:function(a){if(this.screenStyleSheet){var c,b;c=a.split(",");for(b=0;b<c.length;b++){this.screenStyleSheet.addRule(c[b],"behavior:expression(DD_belatedPNG.fixPng(this))")}}},applyVML:function(a){a.runtimeStyle.cssText="";this.vmlFill(a);this.vmlOffsets(a);this.vmlOpacity(a);if(a.isImg){this.copyImageBorders(a)}},attachHandlers:function(i){var d,c,g,e,b,f;d=this;c={resize:"vmlOffsets",move:"vmlOffsets"};if(i.nodeName=="A"){e={mouseleave:"handlePseudoHover",mouseenter:"handlePseudoHover",focus:"handlePseudoHover",blur:"handlePseudoHover"};for(b in e){if(e.hasOwnProperty(b)){c[b]=e[b]}}}for(f in c){if(c.hasOwnProperty(f)){g=function(){d[c[f]](i)};i.attachEvent("on"+f,g)}}i.attachEvent("onpropertychange",this.readPropertyChange)},giveLayout:function(a){a.style.zoom=1;if(a.currentStyle.position=="static"){a.style.position="relative"}},copyImageBorders:function(b){var c,a;c={borderStyle:true,borderWidth:true,borderColor:true};for(a in c){if(c.hasOwnProperty(a)){b.vml.color.shape.style[a]=b.currentStyle[a]}}},vmlFill:function(e){if(!e.currentStyle){return}else{var d,f,g,b,a,c;d=e.currentStyle}for(b in e.vml){if(e.vml.hasOwnProperty(b)){e.vml[b].shape.style.zIndex=d.zIndex}}e.runtimeStyle.backgroundColor="";e.runtimeStyle.backgroundImage="";f=true;if(d.backgroundImage!="none"||e.isImg){if(!e.isImg){e.vmlBg=d.backgroundImage;e.vmlBg=e.vmlBg.substr(5,e.vmlBg.lastIndexOf('")')-5)}else{e.vmlBg=e.src}g=this;if(!g.imgSize[e.vmlBg]){a=document.createElement("img");g.imgSize[e.vmlBg]=a;a.className=g.ns+"_sizeFinder";a.runtimeStyle.cssText="behavior:none; position:absolute; left:-10000px; top:-10000px; border:none; margin:0; padding:0;";c=function(){this.width=this.offsetWidth;this.height=this.offsetHeight;g.vmlOffsets(e)};a.attachEvent("onload",c);a.src=e.vmlBg;a.removeAttribute("width");a.removeAttribute("height");document.body.insertBefore(a,document.body.firstChild)}e.vml.image.fill.src=e.vmlBg;f=false}e.vml.image.fill.on=!f;e.vml.image.fill.color="none";e.vml.color.shape.style.backgroundColor=d.backgroundColor;e.runtimeStyle.backgroundImage="none";e.runtimeStyle.backgroundColor="transparent"},vmlOffsets:function(d){var h,n,a,e,g,m,f,l,j,i,k;h=d.currentStyle;n={W:d.clientWidth+1,H:d.clientHeight+1,w:this.imgSize[d.vmlBg].width,h:this.imgSize[d.vmlBg].height,L:d.offsetLeft,T:d.offsetTop,bLW:d.clientLeft,bTW:d.clientTop};a=(n.L+n.bLW==1)?1:0;e=function(b,p,q,c,s,u){b.coordsize=c+","+s;b.coordorigin=u+","+u;b.path="m0,0l"+c+",0l"+c+","+s+"l0,"+s+" xe";b.style.width=c+"px";b.style.height=s+"px";b.style.left=p+"px";b.style.top=q+"px"};e(d.vml.color.shape,(n.L+(d.isImg?0:n.bLW)),(n.T+(d.isImg?0:n.bTW)),(n.W-1),(n.H-1),0);e(d.vml.image.shape,(n.L+n.bLW),(n.T+n.bTW),(n.W),(n.H),1);g={X:0,Y:0};if(d.isImg){g.X=parseInt(h.paddingLeft,10)+1;g.Y=parseInt(h.paddingTop,10)+1}else{for(j in g){if(g.hasOwnProperty(j)){this.figurePercentage(g,n,j,h["backgroundPosition"+j])}}}d.vml.image.fill.position=(g.X/n.W)+","+(g.Y/n.H);m=h.backgroundRepeat;f={T:1,R:n.W+a,B:n.H,L:1+a};l={X:{b1:"L",b2:"R",d:"W"},Y:{b1:"T",b2:"B",d:"H"}};if(m!="repeat"||d.isImg){i={T:(g.Y),R:(g.X+n.w),B:(g.Y+n.h),L:(g.X)};if(m.search("repeat-")!=-1){k=m.split("repeat-")[1].toUpperCase();i[l[k].b1]=1;i[l[k].b2]=n[l[k].d]}if(i.B>n.H){i.B=n.H}d.vml.image.shape.style.clip="rect("+i.T+"px "+(i.R+a)+"px "+i.B+"px "+(i.L+a)+"px)"}else{d.vml.image.shape.style.clip="rect("+f.T+"px "+f.R+"px "+f.B+"px "+f.L+"px)"}},figurePercentage:function(d,c,f,a){var b,e;e=true;b=(f=="X");switch(a){case"left":case"top":d[f]=0;break;case"center":d[f]=0.5;break;case"right":case"bottom":d[f]=1;break;default:if(a.search("%")!=-1){d[f]=parseInt(a,10)/100}else{e=false}}d[f]=Math.ceil(e?((c[b?"W":"H"]*d[f])-(c[b?"w":"h"]*d[f])):parseInt(a,10));if(d[f]%2===0){d[f]++}return d[f]},fixPng:function(c){c.style.behavior="none";var g,b,f,a,d;if(c.nodeName=="BODY"||c.nodeName=="TD"||c.nodeName=="TR"){return}c.isImg=false;if(c.nodeName=="IMG"){if(c.src.toLowerCase().search(/\.png$/)!=-1){c.isImg=true;c.style.visibility="hidden"}else{return}}else{if(c.currentStyle.backgroundImage.toLowerCase().search(".png")==-1){return}}g=DD_belatedPNG;c.vml={color:{},image:{}};b={shape:{},fill:{}};for(a in c.vml){if(c.vml.hasOwnProperty(a)){for(d in b){if(b.hasOwnProperty(d)){f=g.ns+":"+d;c.vml[a][d]=document.createElement(f)}}c.vml[a].shape.stroked=false;c.vml[a].shape.appendChild(c.vml[a].fill);c.parentNode.insertBefore(c.vml[a].shape,c)}}c.vml.image.shape.fillcolor="none";c.vml.image.fill.type="tile";c.vml.color.fill.on=false;g.attachHandlers(c);g.giveLayout(c);g.giveLayout(c.offsetParent);c.vmlInitiated=true;g.applyVML(c)}};try{document.execCommand("BackgroundImageCache",false,true)}catch(r){}DD_belatedPNG.createVmlNameSpace();DD_belatedPNG.createVmlStyleSheet();

<html>
    <head>
    <!--[if IE6]>
        /**引用js*/
	<script src="png.js"></script>
       /*()里面写的选择器 修复多个png用逗号隔开  ，也可以应用于背景图片中*/ 
     <script> DD_belatedPNG.fix(".pic1,.pic2")</script>
	<![endif]-->
    </head>
    <body>
        <img class="pic1" src="1.png">
        <img class="pic2" src="2.png">
    </body>
</html>

样式表的组织

外联样式表

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

  1. 外联的css中，如果要用到背景图片，那么路径是从css文件触发，而不是从html出发。

  2. 外联样式表不影响权重，同样是比选择器权重，就近原则。

行内样式

​ 给一个元素加一个样式，可以直接在元素的html标签内加上style属性就行了。

<div style="color:red;border:1px solid red;">
    文字
</div>

行内的样式的权重，是最大的。行内的权重比权重比id大，没有!important大。

站点的css组织

css文件是分层次的

  • page.css 每个页面自己的样式 比如index.css 和 game.css

  • common.css 页面与页面的公共部分。

  • base.css

    /*原子类，可以参考下面 要注意权重*/
/*文字排版*/
.f12{font-size:12px}
.f13{font-size:13px}
.f14{font-size:14px}
.f16{font-size:16px}
.f20{font-size:20px}
.fb{font-weight:bold}
.fn{font-weight:normal}
.t2{text-indent:2em}
.lh150{line-height:150%}
.lh180{line-height:180%}
.lh200{line-height:200%}
.unl{text-decoration:underline;}
.no_unl{text-decoration:none;}
.nomargin{margin:0 !important;}
/*定位*/
.tl{text-align:left}
.tc{text-align:center}
.tr{text-align:right}
.bc{margin-left:auto;margin-right:auto;}
.fl{float:left;display:inline}
.fr{float:right;display:inline}
.cb{clear:both}
.cl{clear:left}
.cr{clear:right}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}* html .clearfix{height:1%}.clearfix{display:block}
.vm{vertical-align:middle}
.pr{position:relative}
.pa{position:absolute}
.abs-right{position:absolute;right:0}
.zoom{zoom:1}
.hidden{visibility:hidden}
.none{display:none}
/*长度高度*/
.w10{width:10px}
.w20{width:20px}
.w30{width:30px}
.w40{width:40px}
.w50{width:50px}
.w60{width:60px}
.w70{width:70px}
.w80{width:80px}
.w90{width:90px}
.w100{width:100px}
.w200{width:200px}
.w250{width:250px}
.w300{width:300px}
.w400{width:400px}
.w500{width:500px}
.w600{width:600px}
.w700{width:700px}
.w800{width:800px}
.w{width:100%}
.h50{height:50px}
.h80{height:80px}
.h100{height:100px}
.h200{height:200px}
.h{height:100%}
/*边距*/
.m10{margin:10px}
.m15{margin:15px}
.m30{margin:30px}
.mt5{margin-top:5px}
.mt10{margin-top:10px}
.mt15{margin-top:15px}
.mt20{margin-top:20px}
.mt30{margin-top:30px}
.mt50{margin-top:50px}
.mt100{margin-top:100px}
.mb10{margin-bottom:10px}
.mb15{margin-bottom:15px}
.mb20{margin-bottom:20px}
.mb30{margin-bottom:30px}
.mb50{margin-bottom:50px}
.mb100{margin-bottom:100px}
.ml5{margin-left:5px}
.ml10{margin-left:10px}
.ml15{margin-left:15px}
.ml20{margin-left:20px}
.ml30{margin-left:30px}
.ml50{margin-left:50px}
.ml100{margin-left:100px}
.mr5{margin-right:5px}
.mr10{margin-right:10px}
.mr15{margin-right:15px}
.mr20{margin-right:20px}
.mr30{margin-right:30px}
.mr50{margin-right:50px}
.mr100{margin-right:100px}
.p10{padding:10px;}
.p15{padding:15px;}
.p30{padding:30px;}
.pt5{padding-top:5px}
.pt10{padding-top:10px}
.pt15{padding-top:15px}
.pt20{padding-top:20px}
.pt30{padding-top:30px}
.pt50{padding-top:50px}
.pb5{padding-bottom:5px}
.pb10{padding-bottom:10px}
.pb15{padding-bottom:15px}
.pb20{padding-bottom:20px}
.pb30{padding-bottom:30px}
.pb50{padding-bottom:50px}
.pb100{padding-bottom:100px}
.pl5{padding-left:5px}
.pl10{padding-left:10px}
.pl15{padding-left:15px}
.pl20{padding-left:20px}
.pl30{padding-left:30px}
.pl50{padding-left:50px}
.pl100{padding-left:100px}
.pr5{padding-right:5px}
.pr10{padding-right:10px}
.pr15{padding-right:15px}
.pr20{padding-right:20px}
.pr30{padding-right:30px}
.pr50{padding-right:50px}
.pr100{padding-right:100px}

  • reset.css:清除所有的元素都有默认的样式。

    /*
YUI 3.18.1 (build f7e7bcb) reset.css
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html{color:#000;background:#FFF}
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{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}
legend{color:#000}
#yui3-css-stamp.cssreset{display:none}

行内块

display:inline-block 让元素同时具有行和块的性质，但是有空白(空格折叠现象) ，能设置宽高,元素能并排。

inline-block解决兼容性问题

情况：浮动的父元素不写宽度，会自动收缩为子元素的宽度；子元素转块没写宽度，要撑满父元素。

  • 高级浏览器. IE6 IE7 IE8 ,会优先考虑父元素的收缩，
  • IE6: 会优先满足子元素

解决办法：给子元素加_display:inline-block; hack写法兼容IE6

字体图标

图标库：https://icomoon.io/ https://icomoon.io/app/#/select

https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.3 阿里巴巴矢量图标库

字体图标的特点： 1) 不用下载图片，节约http请求 2) 只能是单色，不能是多个颜色。3) 调整图标就是调整字体大小

汇而不置
发布了49 篇原创文章 · 获赞 3 · 访问量 5125
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_43487066/article/details/89685895
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
laravle中orm简单的增删改查
文本分类 特征选取之CHI开方检验
Spark核心编程-WordCount
大数据开发实战系列之电信客服(1)
读书笔记 - 把时间当作朋友 by 李笑来
python 笔记--if else
SpringBoot/Mybatis/Druid, 多数据源MultiDataSource配置思路
排序三个整数
redis集群搭建【2】-Windows中Redis集群搭建
STM32F030驱动TM1650点亮4联数码管
每日归档
更多
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022