公告

css内容

css 介绍

css全称为Cascading Style Sheets 翻译过来叫层叠样式表

作用：设置网页的文字（大小，颜色，字体风格，对齐方式等）图片和排版等，简单点说就是给网页化妆

语法

1.构建css的运行环境：在头部加入style标签

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		
	</style>
</head>
<body>
<div>这是一个盒子</div>
</body>
</html>

2.选择对应的目标元素，使用大括号

<style type="text/css">
		div{}
	</style>

3.语法：属性：值; 键值对

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		div{color:red;}
	</style>
</head>
<body>
<div>这是一个盒子</div>
</body>

css字体、文本属性

1.字体属性

font-size 设置字体的大小
取值方式：数字 + 像素单位px（像素就是一个长度单位）
多学一招:
1. 取值用偶数
2. 默认是16px大小（3）
3. 字体有多大，看字体的高度
font-weight 设置字体的粗细
取值：normal 正常的（400）、bold加粗（700）、bolder(900) 、 100 - 900（字体的粗细没有那么精细，所以很少使用数字）
在实际工作中用的最多的就是normal （不加粗）和bold（加粗）
font-style 设置字体的风格
取值：normal 默认显示标准的字体样式 italic 字体倾斜
font-family 设置不同的字体
取值：宋体、微软雅黑、黑体、。。。等等
多学一招：
1. 不推荐使用一些冷门字体，因为一些冷门字体很多电脑里面默认没有安装，这个时候就会显示不出来。所以实际工作中，默认都是一些主流字体如宋体微软雅黑等。。。
2. 字体可以写多组，中间用逗号隔开，显示不了第一个，就找第二个显示
3. 字体名称中如果有空格 # $ 这种特殊字符的时候需要添加上引号中文字体也需要添加引号

<style type="text/css">
    span{
        font-family:"微软雅黑"; /* 字体 */
        font-size:20px; /* 大小 */
        font-weight:bold; /* 粗细 */
        font-style:italic; /* 样式 */
        }
</style>

2.文本属性

文本修饰
语法：text-decoration:值
取值：
1. underline 下划线
2. overline 上划线
3. line-through 删除线
4. none 没有修饰-----------一般用在a标签上
文本转换
语法：text-transform:值
取值：
1. uppercas e转换成大写
2. lowercase 转换成小写
3. capitaliz e首字母大写
文本对齐方式
语法：text-align:值
取值：
1. left 左对齐---------------------默认
2. center 居中对齐
3. right 右对齐
首行缩进
语法：text-indent:值
取值：可以是像素，但是当文字大小发生改变后，也需要重新改变，可以使用em代替，代表字符，会随着文字大小的改变而自动调整
多学一招：默认的文字大小是16px

3.字体颜色

语法：color:"颜色值"

<style>
    a{color:red}
    a{color:#666}
</style>

css注释

语法：/*注释的内容*/

css基本选择器

1.标签选择器

通过标签来选择元素，标签{css样式}

2.id选择器

通过id属性来选择元素，#id名{css样式}
注意：id选择要保证页面中的唯一性，这是语义

3.class类选择器

通过class属性选择元素，.类名{css样式}
多学一招：一个元素可以有多个类名

<style>
    a{color:red}
    #part{color:green}
    .first{font-size:30px}
</style>
<body>
    <a  > 点击</a> 
    <span class="first" > 锄禾日当午</span> 
    <span id="part" > 汗滴禾下土</span> 
</body>

4.复合选择器

标签选择器和类选择器一起使用
用多个类名选择一个元素
给多个元素设置同一种样式，每个元素中间用 ， 隔开:元素1，元素2

<style>
    p.box{color:green;} /* 标签选择器和类选择器一起使用 */
    .red.fz-50{color:red;font-size:50px;} /* 用多个类名选择一个元素 */
    div,p{color:blue;} /* 给多个元素设置同一种样式 */
</style>
<body>
    <p class="box">一个段落 </p>
    <div class="red fz-50">一个盒子 </div>
</body>

常用选择器

1.通配选择器（了解）

给所有标签添加样式，*{css样式}

<style>
	*{}
</style>

将页面中所有标签都选中
使用场景：通常设置*{padding:0;margin:0;}

2.后代选择器（掌握）

选择元素里面的元素，外层元素和内层元素中间用空格隔开：外层内层{css样式}

3.子元素选择器（掌握）

选择元素的直接子元素，父和子之间用 > 隔开：父元素>子元素{css样式}

4.相邻元素选择器（了解）

选择相邻的元素，两个元素中间用 + 隔开：元素1 + 元素2{css样式}

 哥哥+弟弟{}  /*通过哥哥选择到弟弟 */

总结：

1.哥哥和弟弟中间用的符号：+

2.修饰的是弟弟标签

3.不能通过弟弟选哥哥

5.伪类

元素:link 正常连接时候的状态
元素:visited 点击以后的状态
元素:hover 当鼠标移动上去的状态-------重点、常用
元素:active 当鼠标按下去时候的状态

注意：不是所有元素都支持这4种写法，超链接支持4种，工作中用的hover比较多，别的可以做个了解

伪类是选择器，不是css的属性，不能写在{}中
visited和link不能适用于普通标签，只有a标签才有
hover和active是任何标签都可以有的

伪类选择器和类选择器一起使用

<style>
    a.one:hove{color:red;}
</style>
<body>
    <a class="one">百度</a>
</body>

伪对象选择器（了解）

first-letter：选择第一个字符

语法：元素:first-letter

first-line：选择第一行

语法：元素:first-line

所谓的元素，可以是标签名，还可以是类名.class名:first-letter/line{}

属性选择器

1.[属性名]

选择具有该属性的元素

[属性名]{}

2.[属性=值]（重点）

选择具有该属性且等于该值的元素

[属性名=属性值]{}

3.[属性~=值]（了解）

选择具有该属性，且值中包含该值的元素
多学一招：元素属性的值可以有多个
注意：这种场景适用于一个属性名对应多个属性的值

[属性名~=属性值]{}

4.[属性|=字符]（了解）

选择由连字符连接多个单词组成的属性值中的第一个单词
注意：这种场景适用于一个属性的值由连字符连接多个单词组成，且选择的是第一个

[属性名|=属性值]{}

5.[属性*=值]（了解）

选择属性的值中包含当前的值的元素

[属性名*=属性值]{}

<style>
    input[value]{color:red;}  /* 选择具有该属性的元素 */
    input[name="username"]{color:red;}  /* 选择具有该属性且等于该值的元素  username */
    p[name~="song"]{color:red;}  /* 属性有多个值 ，且值中包含该值的元素  second song */
    [name|="zhang"]{color:blue}  /* 属性中有连字符链接多个单词 zhang-san-feng */
    [name*="o"]{color:green}    /* 选择属性的值中包含当前的值的元素 name中标包含字母o的 元素   */
</style>
<body>
    <input type="text" name="username">
    <input type="text" name="password">
    <input type="button" value="普通按钮">
    <hr/>
    <p name="first song">锄禾日当午</p>
    <p name="second song">汗滴禾下锄</p>
    <p name="song">谁知盘中餐</p>
    <p name="last song">粒粒皆辛苦</p>
    <hr/>
    <input name="zhang san">
    <input name="li-xiao-san" value="张小三">
    <input name="zhang-san-feng">
    <input name="li xiao si" value="李小四">
    <input name="wanger xiao" value="王二小">
</body>

css尺寸、行高属性

1.尺寸属性

宽度
语法：width:值
取值：数字 + px/百分比/em -------------------------px代表像素，百分比代表浏览器宽度的百分比，em代表字符数
注意：1.div设置宽度为100%，其实和没设一样2.span标签设置宽度无效
高度
语法：height:值
用法和宽度一样
注意：div不设高度，默认是0

2.行高

行高控制的是文字与文字之间的上下距离（行距）

语法：line-height:值

多学一招：如果将标签的高度和行高设置成一样，那么这个标签里面的文字可以在这个标签里面垂直居中，两者结合使用可以让单行文字在标签内部水平垂直居中，工作中经常用于让文字垂直居中（将行高设为盒子的高度）

line-height:数字px;

代表的一行的高度，放在段落中，可以理解为是行距

总结：

1.文字在行高中是垂直居中的

2.行高通常用于让文字在盒子中垂直居中

font简写

font: font-style font-weight font-size/line-height font-family
不建议修改顺序并且不需要设置的属性可以不写但是font-size和font-family必须指定，否则将不起作用

<style type="text/css">
		div{
			height:100px;
			border:1px solid #000;
			font:italic bolder 30px/100px "微软雅黑";
		}
	</style>
</head>
<body>
	<div>今天明天和后天</div>
</body>

背景属性

1.背景颜色

语法：background-color:颜色值

2.背景图片

语法：background-image:url(图片路径)
Alt text

3. 设置背景图片是否平铺

语法：background-repeat:值

取值：no-repeat不平铺，repeat-x横向平铺，repeat-y纵向平铺，repeat横向纵向都平铺------默认

Alt text

4.设置背景图片位置

语法：background-position:水平位置，垂直位置

位置的取值可以为像素（相对左上角定点的位置），也可以为关键字：top left bottom right center

多学一招：

1.还可以使用百分比，不太常用：位置的固定规则为盒子自身的宽高百分比减去图片的宽高百分比，如下图：

Alt text

2.在使用位置关键字的时候，关键字的前后顺序对结果不产生影响

3.可以只有一个值，代表水平方向和垂直方向都是这个值 ----此规则适用于关键字center,和百分比以及具体的像素

4.当只有一个值，且值为上下左右关键字时，上下左右只能代表x轴或y轴之一，另一个方向默认为center

5.设置背景图片大小

语法：background-size:宽度高度

宽高取值可以是像素也可以是百分比

Alt text

6.综合使用

语法：background:颜色 url(图片路径) 平铺类型位置/大小
多学一招：属性中的每个值顺序可以调整，且background可以为单独其中之一设置
Alt text

7. 设置背景是否受滚动条的影响

语法：background-attachment:值

取值：

（1）scroll会受滚动条的影响，当内容滚动到下方，图片会消失----默认

（2）fixed不会受滚动条影响，一直保持在视线范围内
Alt text

背景可以设置为透明

background:rgba();  /* a代表透明度，取值为0-1 */

背景和图片标签都可以让页面中显示图片，那有什么区别？

img和背景图片的区别：
img不需要专门写宽高就能够显示在页面上
而背景图片默认是撑不开容器的需要专门写宽高
一般产品插入图都推荐使用img 而一些小的icon 或者很少更新的图片再或者超大的图片推荐使用背景图
而且背景图可以让内部的文字盖在上面，但是img不行（除非后期用定位）

8. 背景颜色渐变 (不常用)

①线性渐变

语法：

<linear-gradient>：linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+);
<point>：[ left | right ]? [ top | bottom ]? || <angle>?
<color-stop>：<color> [ <length> | <percentage> ]?

取值：

<point>
    left： 设置左边为渐变起点的横坐标值。 
    right： 设置右边为渐变起点的横坐标值。 
    top： 设置顶部为渐变起点的纵坐标值。 
    bottom： 设置底部为渐变起点的纵坐标值。 
	<angle>： 用角度值指定渐变的方向（或角度）,单位deg。 
<color-stop>： 指定渐变的起止颜色。 <color-stop>
    <color>： 指定颜色。请参阅颜色值 
    <length>： 用长度值指定起止色位置。不允许负值 
    <percentage>： 用百分比指定起止色位置。

写法一：

代码：

<div></div>
<style type="text/css">
    div{
        width:300px;
        height:200px;
        background:linear-gradient(red,black); 
        /* 表示颜色从上往下，从红色到绿色转换，各占50%(默认) */
    }
</style>

效果图

写法二：

代码

<div></div>
<style type="text/css">
    div{
        width:300px;
        height:200px;
        background:linear-gradient(to right,red,black); 
        /* 表示颜色的渐变方向(也是九宫格) */
    }
</style>

效果图

写法三：

代码

<div></div>
<style type="text/css">
    div{
        width:300px;
        height:200px;
        background:linear-gradient(45deg,red,black); 
        /* 表示中间的水平线顺时针旋转10度开始渐变 */
    }
</style>

效果图

角度示意图

写法四：

代码

<style type="text/css">
	div{
		width:300px;
		height:200px;
		background:linear-gradient(red 20%,black 50%,pink); 
		/* 表示颜色渐变所占的百分比 */
	}
</style>

效果图

写法五：

代码

<style type="text/css">
	div{
		width:300px;
		height:200px;
		background:linear-gradient(to top right,red 20%,black 30%,pink); 
		/* 复合写法，表示颜色从左下角往右上角，从红色开始渐变到20%，再由黑色从20%渐变到30%，剩下的都是粉色 */
	}
</style>

效果图

颜色渐变方向有：to bottom、to top、to left、to right、to top right、to top left、to bottom left、to bottom right【其实就是一个四边形的四条边与四个角】

②径向渐变

语法：

<radial-gradient>：radial-gradient([ <position>,]? [ [ <shape> || <size> ] | <shape-size>{2},]? <color-stop>[, <color-stop>]+);
<position>：[ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?
<shape>：circle | ellipse
<size>：closest-side | closest-corner | farthest-side | farthest-corner | contain | cover
<shape-size>：<length> | <percentage> 
<color-stop>：<color> [ <length> | <percentage> ]?

取值：

<position>
	<percentage>①： 用百分比指定径向渐变圆心的横坐标值。可以为负值。 
	<length>①： 用长度值指定径向渐变圆心的横坐标值。可以为负值。 
    left： 设置左边为径向渐变圆心的横坐标值。 
    center①： 设置中间为径向渐变圆心的横坐标值。 
    right： 设置右边为径向渐变圆心的横坐标值。 
    <percentage>②： 用百分比指定径向渐变圆心的纵坐标值。可以为负值。 
    <length>②： 用长度值指定径向渐变圆心的纵坐标值。可以为负值。 
    top： 设置顶部为径向渐变圆心的纵坐标值。 
    center②： 设置中间为径向渐变圆心的纵坐标值。 
    bottom： 设置底部为径向渐变圆心的纵坐标值。 
<color-stop>： 指定渐变的起止颜色。 
<shape>
    circle： 指定圆形的径向渐变 
    ellipse： 指定椭圆形的径向渐变。写本文档时Chrome,Safari尚不支持该参数值 <size>
    closest-side： 指定径向渐变的半径长度为从圆心到离圆心最近的边 
    closest-corner： 指定径向渐变的半径长度为从圆心到离圆心最近的角 
    farthest-side： 指定径向渐变的半径长度为从圆心到离圆心最远的边 
    farthest-corner： 指定径向渐变的半径长度为从圆心到离圆心最远的角 
    contain： 包含，指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-side 
    cover： 覆盖，指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-corner <shape-size>
    写本文档时Firefox尚不支持<shape-size> <percentage>： 用百分比指定径向渐变的横向或纵向直径长度，并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。 
    <length>： 用长度值指定径向渐变的横向或纵向直径长度，并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。 <color-stop>
    <color>： 指定颜色。请参阅颜色值 
    <length>： 用长度值指定起止色位置。不允许负值 
    <percentage>： 用百分比指定起止色位置。

写法一：

代码

<div></div>
<style type="text/css">
	div{
		width:300px;
		height:200px;
		background:radial-gradient(orange,black);
		/* 从中心点向四周扩散渐变 */
	}
</style>

效果图

多学一招：div如果是正方形，扩散的形状会是圆形

<div></div>
<style type="text/css">
	div{
		width:200px;
		height:200px;
		background:radial-gradient(orange,black);
	}
</style>

效果图

写法二：

代码

<div></div>
<style type="text/css">
	div{
		width:200px;
		height:200px;
		background:radial-gradient(orange 20%,black 30%,red 70%);
        /* 代表颜色扩散到哪个位置停止渐变 */
	}
</style>

效果图

多学一招：除了使用百分比还可以使用具体像素设置停止渐变的位置

<div></div>
<style type="text/css">
	div{
		width:200px;
		height:200px;
		background:radial-gradient(orange 50px,black 30%,red 70%);
		/* 橘色区域半径50px */
	}
</style>

效果图

因为50像素已经超过30%，所以橘色部分没有渐变（试试橘色和黑色都是30%）

写法三：

代码：

<div></div>
<style type="text/css">
	div{
		width:300px;
		height:200px;
		background:radial-gradient(circle,orange 10%,black 50%);
		/* 指定渐变的形状 */
	}
</style>

效果图

注意：指定形状的时候可以是circle圆形，也可以是ellipse椭圆

写法四：

代码：

<div></div>
<style type="text/css">
	div{
		width:300px;
		height:200px;
		background:radial-gradient(circle 100px,orange 10%,black 50%);
		/* 指定渐变的区域大小，因为是圆形，所以代表宽100px高也是100px */
	}
</style>

效果图

注意：如果指定的形状是圆形，那么指定区域大小的时候只需要一个值就好，可要是椭圆形的时候需要两个值，因为椭圆的宽和高不一样，否则直接不能显示页面

<style type="text/css">
	div{
		width:300px;
		height:200px;
		background:radial-gradient(ellipse 200px 100px,orange 10%,black 50%);
		/* 指定椭圆形的区域大小需要两个值一个宽一个高 */
	}
</style>

效果图

写法五：

代码：

<div></div>
<style type="text/css">
	div{
		width:300px;
		height:200px;
		background:radial-gradient(ellipse 200px 100px at right bottom,orange 10%,black 50%);
		/* 指定径向渐变的圆心 */
	}
</style>

效果图

多学一招：圆心默认在中心，或者使用关键字center

③重复线性渐变

语法：

repeating-linear-gradient(方向,颜色 结束百分比,...);

例：

<div></div>
<style type="text/css">
	div{
		width:300px;
		height:200px;
		background:repeating-linear-gradient(to right bottom,red 10%,green 20%);
		/* 渐变方向为右下角，指定每种颜色的结束位置，重复渐变 */
	}
</style>

效果图

④重复径向渐变

语法：

repeating-radial-gradient(形状 方向,颜色 结束百分比,...;

例：

<div></div>
<style type="text/css">
	div{
		width:300px;
		height:200px;
		background:repeating-radial-gradient(ellipse at center,red 10%,green 20%);
		/* 渐变形状为椭圆，渐变中心为中心，指定每种颜色的结束位置，重复渐变 */
	}
</style>

效果图

注意：未指定颜色值的结束位置时，颜色是平均分配的

列表属性

1.list-style-type

设置列表前缀样式，通常设置为none，去掉前缀

语法：list-style-type:none

示意图

2.list-style-image

将列表前缀设置为自定义图片

语法：list-style-image:url(图片路径)

示意图

应用场景：通常在网页中，使用的列表都是要去除前面的符号，并且去除左边和上边的空间，所以，样式如下：

ul{
    list-style:none;
    padding:0;
    margin:0;
}

内容溢出

语法：overflow:值

取值：auto当内容溢出时，生成滚动条------默认，hidden内容溢出时超出部分隐藏

示意图

总结：

overflow取值：

auto----自动生成滚动条（右边）

hidden----超出部分隐藏

scroll----右边和下边都有滚动条

设置水平方向溢出可以使用overflow-x，纵向溢出使用overflow-y，取值和overflow一样

重点：overflow:hidden;超出部分隐藏

css样式的分类

1.内部样式----内联样式

使用的是style标签

<style type="text/css">
/* 样式 */
</style>

多学一招：把页面的公共样式（不多的情况下）写在style标签中

2.行内样式

直接写在标签上的style属性中

<div style="color:red;">
    我是盒子
</div>

多学一招：通常是后台程序员进行修改页面的时候使用

3.外部样式

新建一个css文件，然后和html页面关联起来

a) 使用标签关联

<!-- 在html的head标签中 -->
<link rel="stylesheet" type="text/css" href="css文件路径">

b) 使用指令关联

<style type="text/css">
/* 在style标签中 */
    @import url("css文件路径")
</style>

多学一招：做项目最常用的是外部样式，link标签

三种样式表总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点（多）

样式的继承和覆盖（重点）

当父标签设置了样式，子标签都会具有父标签的样式

示意图

总结：

1.能继承的css属性：font系列，text系列，color，line-height

2.div可以继承父亲的宽度，高度不能继承

当子标签和父标签设置了同样属性的css，子标签会覆盖父标签的设置

示意图

总结：

继承：父元素设置了样式，子元素也具有了

覆盖：父元素和子元素有同样的样式，生效的是子元素，子元素覆盖了父元素的样式

样式的优先级（了解）

1.强制优先级（important）

语法：样式属性:值 !important;

示意图

注意：只针对当前这一条css属性

2.选择器优先级

伪对象选择器>!important>行内样式>id选择器>class选择器>标签选择器>通配选择器>继承

示意图

3.伪对象选择器的优先级（了解）

首字符>首行

示意图

4.样式分类优先级

行内样式>内部样式/外部样式

示意图1

示意图2

总结：

1.样式分类中：行内样式>内部/外部，内部样式和外部样式没有权重之分，关键是看他们的加载顺序，后面的会覆盖前面的

2.伪类首字>伪类首行>!important>id名>类名/属性>标签名>通配

3.容易被覆盖的选择器，应该写在前面，以便于后面的选择器覆盖它

5.样式叠加（权重）

!important(无穷大) 行内样式(1000) id(100) class(10) 标签(1)

示意图

总结：掌握一个点：人多力量大 .class<.class标签

继承来的样式不计算权重，也就是说关键看是不是直接修饰的目标标签

权重累计到10，不会往前进一位

选择器	权重
继承或者* 的贡献值	0,0,0,0
每个元素（标签）贡献值为	0,0,0,1
每个类，伪类贡献值为	0,0,1,0
每个ID贡献值为	0,1,0,0
每个行内样式贡献值	1,0,0,0
每个!important贡献值	无穷大

总结：

1.比较权重的前提是准确选择到元素，而不是继承来的样式

2.每一级满10也不会往前进1，等级是非常森严的

标签的显示模式（重点）

div和span标签

1.样式完全相同，标签不同，显示的结果完全不同

2.每个div会独占一行，多个span会并列一排

1.块元素

特点：宽度默认是100%，高度默认是0，可以设置宽度和高度，会继承父级的宽度，换行显示---div ul li p h1

示意图

总结：块元素可以添加宽高的属性，独占一行

2.行元素

特点：宽高默认都是0，不能设置宽和高，一行显示----span b i u a

示意图

总结：对宽高不敏感，不能独占一行

3.行内的块元素

特点：只能设置宽和高，不能换行显示---img input

示意图

多学一招：从大的方面来说，其实行内的块元素也属于行内元素，对行内元素的某些操作，同样可以操作行内的块元素，例：text-align:center;line-height:1000px;

4.模式转换

语法：display:值

取值：block转成块元素，inline转成行元素，inline-block转成行内的块元素，none隐藏元素

多学一招：使用该属性隐藏元素后，在页面中将不占据空间

小案例：简易导航的制作

案例示意图

代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		a{
            display:inline-block;
            width:100px;
            height:50px;
            background:#f00;
            text-align:center;
            text-decoration:none;
            color:#fff;
            line-height:50px;
        }
		body{text-align:center;}
	</style>
</head>
<body>

<a href="">导航</a>
<a href="">导航</a>
<a href="">导航</a>
<a href="">导航</a>
<a href="">导航</a>
<a href="">导航</a>

</body>
</html>

盒子模型

我们说div就是一个块，它就是一个盒子。其实我们做网页的过程就是摆放盒子的过程

盒子模型特性

4个组成部分：宽高、内间距、边框、外间距

1.内边距padding

示意图

注意：

添加了padding属性的元素，会加大盒子的宽或高，需要减去padding的大小
如果这个块级盒子没有width属性（从父级继承宽度）的时候，添加padding和border不会撑大盒子（盒子内容部分会自动压缩）

2.外边距margin

示意图

多学一招：margin:0 auto;可以让盒子在其父元素中居中

margin:0 auto;和text-align:center;的区别

	margin:0 auto；	text-align:center;
针对的对象	盒子---块元素(标签本身)	标签内部的行元素
居中的范围	在父盒子中居中	自己内部

3.边框属性

边框有3要素：边框类型、边框颜色、边框厚度

边框类型

语法：border-style:值

取值：

（1）solid实线

（2）dashed虚线

（3）dotted点线

（4）double双线

示意图
边框颜色

语法：border-color:颜色值

示意图
边框厚度

语法：border-width:尺寸值

示意图
一次性写好

语法：border:类型颜色宽度

示意图
单独方向的边框设置

语法：

（1）上边框：border-top:三要素

（2）左边框：border-left:三要素

（3）下边框：border-bottom:三要素

（4）有边框：border-right：三要素

示意图

多学一招：可以设置none

示意图
边框圆角

语法：border-radius:值

取值：可以是像素，也可以是百分比

示意图

多学一招：当盒子是正方形，圆角的值是边的一半或者百分比是50%的时候，是圆（ie8以下不支持），圆角和边框没关系

总结：元素加边框后，元素会变大

4.盒子模型的bug：

盒子上下摆放，上盒子有下外边距，下盒子有上外边距，两个边距会重合，以大的边距为准

bug1图示

bug1效果图

解决：避免或将这个间距都给到一个元素上面
两个盒子嵌套关系，两个盒子对于上外边距会重合，以大的边距为准

bug2图示

bug2效果图

解决：

a) 给外部盒子加上边框或者上padding-top

b) 给外部盒子添加oveflow:hidden

元素的可见性

语法：visibility:值

取值：hidden隐藏，visible可见的

示意图

多学一招：使用该属性隐藏的元素，在页面中还占用空间

语法：display:none

元素隐藏后在页面中不占用空间

示意图

伪对象

概念：就是给元素追加一个虚拟标签，由css加载，可以节省html的资源开销，必须有content属性，默认是行元素，可以进行转换。

::after:在指定的标签后面添加一个对象

::before:在指定的标签前面添加一个对象

content：元素里面的内容（内容中不能写标签）

语法：

元素::after{
    content:"";
}

注意：伪对象样式中，必须有content属性，否则伪对象无效

多学一招：官方推荐使用双冒号，但是通常为了兼容性更好，我们使用单冒号

上面两个伪对象选择器需要结合属性content一起使用

<style type="text/css">
		.box{width:200px;background:#f00;height:300px;}
		.box::before{
			content:'开头的内容';height:100px;
			line-height:100px;color:#fff;background:#00f;
		}
		.box::after{
			content:'这是一个段落';
			background-color:green;
			display:block;height:50px;
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>

效果图

总结：

什么是伪对象？不是实际标签，使用css样式模拟一个标签
元素::after{}/元素::before{}
在伪元素样式中，必须有content属性
伪元素是行元素

布局的三种方式：

标准流：按照标签默认的特性摆放盒子
浮动流：利用浮动摆放盒子
定位流：利用定位摆放盒子

浮动（重点）

浮动的语法：

float:left/right   /none

取值：left向左浮动，right向右浮动，none取消浮动

现在的浮动，用的最多是让块元素在同一行显示：就是给一行的所有块元素都加上浮动

浮动的最大价值：让元素排列成一行，或者一左一右

浮动的使用口诀：

要浮动，兄弟元素也一起浮动
浮动方向保持一致（尽量都是用左浮动）

总结：

可以做图文绕排
主要让块元素排一行，多个元素一起浮动
注意加了浮动以后元素的顺序，标签顺序，浮动方向
浮动的元素脱离标准流

1.行元素浮动

行元素浮动，会优先于普通元素占据设置方向的位置，不会重叠

行元素浮动图示

2.块元素浮动

块元素浮动，会脱离页面原本的文本流（不占据原本的空间），会覆盖其他元素

块元素浮动图示

多学一招：

脱离文本流的元素具有行内的块元素的特性（不换行，能设置宽高），无论原来是行元素还是块元素--例：图文绕排。
设置了浮动的元素，居中对元素不起作用
浮动元素不会覆盖文字
大盒子放不下了，浮动元素会掉下去，掉下去的元素位置根据上一个元素的高度：（1）上一个元素高度比较小，在上一个元素的正下方（2）上一个元素高度比较大，高度的起始位置，在上一个元素的下方

总结：

所有元素浮动后都变成了行内块
浮动元素不能覆盖文字

浮动引起的问题：

<style>
		
		/* 浮动的盒子撑不开父容器 
			
			解决办法：强制追加一个高度（不推荐，因为很多时候盒子的高度是会变化的）
		*/

		.box {
			width: 500px;
			border: 1px solid #000;
		}
		.info {
			width: 100px;
			height: 100px;
			background-color: green;
			float: left;
		}
		.gebilaowang {
			width: 500px;
			height: 300px;
			background-color: lime;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="info">1</div>
		<div class="info">2</div>
		<div class="info">3</div>
		<div class="info">4</div>
	</div>
	<div class="gebilaowang"></div>

效果图

3.清除浮动

就是清除浮动带来的影响，普通元素不受浮动元素影响

给父元素设置高度（不推荐，因为在项目中很多盒子是不固定高度的）
在父元素后设定空标签进行清除浮动

语法：clear:both

示意图
设定父元素的overflow

示意图

overflow的原理：overflow可以创建一个BFC（块级格式化上下文 (Block Fromatting Context)），按照块元素布局，BFC是一个独立的布局环境，其中的元素布局是不受外界的影响。说白了就是将盒子内部的元素和外部的元素进行隔离，互不影响。
使用伪对象代替空标签

示意图

阴影

1.文本阴影

语法：text-shadow:横向偏移纵向偏移模糊距离颜色

示意图

2.边框的阴影

语法：box-shadow: 水平偏移垂直偏移模糊距离阴影尺寸颜色;

示意图

注意：边框阴影和边框没有关系

细线表格

语法：border-collapse:collapse;

示意图

注意：一定要加在table标签上，且表格和单元格都加边框属性

网站图标和字体图标

1.网站图标

作用：一个好的ico图标可以加深用户对于网站的记忆。降低用户记忆成本，就好像现在说道熊爪大家都能够想到度娘，更多的属于用户体验。有利于识别当前窗口是在哪个网站。

制作流程：

（1）一张图

（2）在网上将图片做成ico图标（网址：http://www.bitbug.net/）

（3）在html中引入<link rel="shortcut icon" href="favicon.ico" />

例：

生成ico图标

示意图

在html中使用link标签引入

示意图

2.字体图标

图片是一个选择，但是图片不但增加了总文件的大小，还增加了很多额外的"http请求"（服务器加载资源），这会大大降低网页的性能。图片还有一个缺点就是不能很好的进行“缩放”，因此，有时候在网站中需要使用图像的最好解决方案就是不去使用图片-----而使用字体图标恰恰可以解决这一点。

示意图

使用流程：

（1）打开网上的图标库，网址：http://www.iconfont.cn/，搜索需要的图标，或者打开图标库

（2）将需要的图标加入购物车

（3）打开购物车添加至自己的项目（没有的需要自己创建），点击确定

（4）下载至本地

（5）在html中引入下载好的css文件

（6）在标签中使用（需要两个类名，一个图标类型，一个图标名称）

例：

示意图

将需要的图标加入购物车

示意图

在购物车中将图标添加至项目

示意图

有项目就选择，没有就新建

示意图

下载至本地

示意图

在html页面中引入并在标签中使用

示意图

定位（重点）

定位的使用：

1.4种定位方式：静态、相对、绝对、固定

2.4种边偏移属性：left、right、top、bottom

注意：偏移值准确的理解是“距离什么位置有多少像素” 。如 top:100px; 距离顶部为100像素（向下走）

1.静态定位

所有标准流都是静态定位

语法：position:static

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.box{
			width:100px;
			height:100px;
			border:1px solid #000;
			position:static;/* 设置静态定位 */
			top:20px;/* 设置边偏移 */
		}
		.box1{
			width:200px;
			height:200px;
			background:#f00;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<div class="box1"></div>
</body>

效果图

总结：

1.工作中用的比较少，因为加了静态定位，元素也是标准流

2.偏移值对静态定位无效

使用场景：通常是将已经设置过定位的元素还原成标准流

我们以后所说的定位不包含静态定位

2.相对定位

相对于自身在标准流的位置进行定位移动

语法：position：relative

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.box{
			width:100px;
			height:100px;
			border:1px solid #000;
			position:relative;/* 设置相对定位 */
			top:20px;/* 设置边偏移 */
			left:30px;
		}
		.box1{
			width:200px;
			height:200px;
			background:#f00;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<div class="box1"></div>
</body>

效果图

总结：

1.相对定位参考自身在标准流中的位置进行偏移，移动的出发点是自身标准流的位置

2.不会对标准流的元素造成影响，没有脱离文档流，移动之后，自身在标准流中还占有空间，真正占得位置还是标准流的位置（灵魂不在肉体永驻）

3.可以盖在标准流的上方

使用场景：微调元素和配合绝对定位来实现效果

3.绝对定位

从父元素一直往上找设置过定位的直系父元素，作为自己的偏移参照物，找不到就继续往上找，直到html停止

语法：position:absolute

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.box{
			width:100px;
			height:100px;
			border:1px solid #000;
			position:absolute;/* 设置绝对定位 */
			top:20px;/* 设置边偏移 */
			left:30px;
		}
		.box1{
			width:200px;
			height:200px;
			background:#f00;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<div class="box1"></div>
</body>

效果图

总结：

1.偏移位置参考设置过定位（相对/绝对/固定）的直系父元素或直系祖宗元素，没找到就一直往上级找，直到html

2.会脱离标准流，不再继承父级的宽度（不论是块元素还是行元素，盒子的大小取决于其中内容），可以定义宽高，不占据标准流的空间

3.margin:auto对于设置过绝对定位的元素不起作用

4.设置方向偏移的时候，横向或者纵向只设置一个即可，设置多个没有意义

使用场景：配合相对定位使用（一般都会配合相对定位，但不是绝对的都是相对定位）

父相子绝

案例：

1.让盒子水平垂直居中（水平居中，垂直也居中）

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.box{
			width:100px;
			height:100px;
			border:1px solid #000;
			position:absolute;/* 设置绝对定位 */
			top:50%;/* 设置上边偏移 */
			margin-left:-50px;/* 往左边移动自身宽度的一般 */
			left:50%;/* 设置做边偏移 */
			margin-top:-50px;/* 往上面移动自身高度的一半 */
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>

效果图

2.图片上加logo

效果图示

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.box{
			width:290px;
			height:163px;
			position:relative;/* 父元素设置相对定位 */
		}
		.logo{
			width:52px;
			height:36px;
			background:url(2.png);
			position:absolute;/* 设置logo为绝对定位，父元素为相对定位，偏移位置相对父元素 */
			right:0;/* 最右边 */
			top:0;/* 最上面 */
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="1.gif" />
		<span class="logo"></span>
	</div>
	<div class="box">
		<img src="1.gif" />
		<span class="logo"></span>
	</div>
</body>

总结：父元素使用相对定位（不脱离标准流，写多个不会覆盖），子元素绝对定位（相对于父盒子的位置） ---父相子绝

3.轮播图布局（以京东为例）

效果图示

<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	.box{
		width:590px;
		height:470px;
		margin:0 auto;
		border:1px solid #000;	
		position:relative;/* 设置相对定位，因为左右按钮和下面的小圆点都需要在当前元素上面 */
	}
	ul,ol{
		list-style:none;
		padding:0;
		margin:0;
	}
	ul li{
		display:none;	
	}
	ul li.on{
		display:block;
	}
	ol{
		width:152px;
		height:18px;	
		position:absolute;/* 设置绝对定位，相对于父元素进行偏移 */
		left:46px;/* 左边偏移 */
		bottom:20px;/* 下面偏移 */
	}
	ol li{
		float:left;
		width:10px;
		height:10px;	
		border-radius:50%;
		border:1px solid #fff;
		margin:4px;
	}
	ol li.on{
		width:4px;
		height:4px;
		border:4px #999 solid;
		background:#fff;	
	}
	.box>a{
		text-decoration:none;
		color:#fff;
		background:#666;
		width:24px;
		height:40px;
		display:block;
		text-align:center;
		line-height:40px;
		position:absolute;/* 设置绝对定位，相对父元素进行偏移 */
		top:50%;/* 上边偏移 */
		margin-top:-20px;/* 向上移动自身高度的一半，已达到居中的效果 */
	}
	.box>a.left{
		left:0;	/* 左按钮左边偏移为0，在最左边 */
	}
	.box>a.right{
		right:0;	/* 右按钮右边偏移为0，在最右边 */
	}
</style>
</head>

<body>

<div class="box">
	<ul>
    	<li class="on"><a href="###"><img src="img/banner1.jpg" /></a></li>
    	<li><a href="###"><img src="img/banner2.jpg" /></a></li>
    	<li><a href="###"><img src="img/banner3.jpg" /></a></li>
    </ul>
    <ol>
    	<li class="on"></li>
    	<li></li>
    	<li></li>
    </ol>
    <a class="left" href="###">&lt;</a>
    <a class="right" href="###">&gt;</a>
</div>
</body>

4.固定定位

以浏览器作为参考进行偏移，且滚动条对固定定位无效

语法：position:fixed

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		.box{
			width:300px;
			height:200px;
			background:#abcdef;
			position:fixed;/* 设置固定定位，相对于浏览器窗口 */
			left:50%;
			top:50%;
			margin-left:-150px;
			margin-top:-100px;
		}
		.text{
			width:20px;
		}
	</style>
</head>
<body>
	<div class="text">
		日照香炉生紫烟，遥看瀑布挂前川。
		飞流直下三千尺，疑是银河落九天。
	</div>
	<div class="box"></div>
</body>

效果图

总结：

1.会脱离文档流，不占据标准流的空间

2.不继承父元素的宽高，需要给自身定义宽高

3.margin:auto对固定定位的元素不起作用

4.不会随着滚动条滚动，永远固定在浏览器窗口中的位置（移动的出发点：浏览器窗口，滚动条对设置了固定定位的元素无效）

使用场景：常用于网页右下角的“回到顶部”，或网站左右两侧的广告

案例：

京东最右侧的小列表

案例效果图

<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	*{padding:0;margin:0;}
	.container{
		height:2000px;
		border-right:5px #7A6E6E solid;	
	}
	ul{
		list-style:none;
		padding:0;
		margin:0;	
		position:fixed;
		right:5px;
		top:50%;
		margin-top:-95px;
	}
</style>
</head>

<body>
<div class="container">
	<ul>
    	<li><a href="#"><img src="img/1.jpg" /></a></li>
    	<li><a href="#"><img src="img/2.jpg" /></a></li>
    	<li><a href="#"><img src="img/3.jpg" /></a></li>
    	<li><a href="#"><img src="img/4.jpg" /></a></li>
    	<li><a href="#"><img src="img/5.jpg" /></a></li>
    </ul>
</div>
</body>

四种定位总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	不脱标，占有位置	可以	相对自身位置移动
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位的父级移动位置
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置

5.定位元素的层叠效果

控制“定位”元素的叠放层级

语法：z-index:值

取值：

1.数字：

正数，数字越大，层级越高，离用户越近

负数，数字越小，层级越低，离用户越远

2.auto：（默认值）和父元素层级相同

3.正数比auto大，负数比auto小

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		/* 两个盒子都设置相对定位并偏移，中间有重叠的部分，默认后设置的会覆盖先设置的 */
		.box{
			width:100px;
			height:100px;
			background:#f00;
			position:relative;
			top:50px;
			z-index:2;/* 设置层叠高一点，会覆盖后设置的 */
		}
		.box1{
			width:200px;
			height:200px;
			background:#0f0;
			position:relative;
			left:50px;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<div class="box1"></div>
</body>

效果图

总结：

1.z-index只针对定位元素有效果（但不包括静态定位）

2.z-index值越大，层级越高

3.如果父元素已经比较过层级了（父元素“都有”z-index的时候，并且值不为auto），那么子元素与子元素之间是不会再去比较的

出题：上大盒子压住下大盒子，下大盒子里面的子元素压住上盒子

css3和css2的区别

css3在原有的基础上新增了很多css属性选择器，伪类选择器，伪对象选择器以及动画

H5=html5 + css3 +js

大前端：js

1.内减模式

可以将padding内边距和边框带来增大盒子的影响去掉

语法：box-sizing:border-box;

<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	.box{
		width:200px;
		height:200px;
		background:#099;
		border:20px solid #333;
		padding:50px;
		box-sizing:border-box;/* 设置内减模式 */	
	}
</style>
</head>

<body>
<div class="box"></div>
</body>

效果图

总结：不能去margin带来盒子大小的影响

2.新增属性选择器

a) 语法：元素[属性^=值]

选择以指定字符开头的属性值的元素

<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	[name^='user']{
		color:red;	
	}
</style>
</head>

<body>
<div name="username">这是盒子1</div>
<div name="user-name">这是盒子2</div>
<div name="name user">这是盒子3</div>
<div name="user_name">这是盒子4</div>
<div name="user">这是盒子5</div>
</body>

效果图

b) 语法：元素[属性$=值]

选择以指定字符结尾的属性值的元素

<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	/* 属性值以指定字符结尾的元素 */
	[name$="e"]{ 
		color:red;	
	}
</style>
</head>

<body>
<div name="username">这是盒子1</div>
<div name="user-name">这是盒子2</div>
<div name="name user">这是盒子3</div>
<div name="user_name">这是盒子4</div>
<div name="user">这是盒子5</div>
</body>

效果图

3.新增伪类选择器

伪类选择器	作用
:root	可以理解为根
li:first-child	代表找出父元素中第一个li子元素
li:last-child	代表找出父元素中最后一个li子元素
li:nth-child(n)	找出父元素中的第n个li子元素
li:nth-child(even)	代表找出父元素中奇数的li子元素
li:nth-child(odd)	代表找出父元素中偶数的li子元素
li:empty	代表找出父元素中li子元素内容为空的标签
li:nth-of-type(n)	找出li标签中第几个
li:first-of-type	找出li标签中第一个
li:last-of-type	找出li标签中最后一个
li:only-child	唯一子元素

总结：重点：li:first-child li:last-child li:nth-child(n) li:nth-child(2n+1)奇数元素

4. 2d变换效果

可以设置移动，旋转，大小

语法：transform:值

A.移动

语法：transform:translate(值1,值2);

取值：第一个值代表横向移动的像素，第二个值代表纵向移动的像素

<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	.box{
		width:200px;
		height:200px;
		background:#f00;	
	}
	.box:hover{
		transform:translate(50px,20px);	/* 横线移动和纵向移动 */
		/*transform:translateY(50px);*/
	}
</style>
</head>

<body>
<div class="box"></div>
</body>

效果图

多学一招：只设置x轴或者y轴的移动可以使用translateX和translateY，里面只设置一个值即可

B.旋转

语法：transform:rotate(角度);transform-origin:横向坐标纵向坐标;

取值：

1.角度写法：数字deg。

2.横向坐标和纵向坐标确定旋转的圆心，可以是像素，也可以是关键字(left,right,top,bottom,center)，不设置的话，旋转的圆心默认是中心点

<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	.box{
		width:200px;
		height:200px;
		background:#f00;
		margin:200px;
		border-left:10px solid #0f0;
		border-bottom:10px solid #00f;
	}
	.box:hover{
		transform:rotate(45deg);/* 设置旋转和角度 */
		transform-origin:left top;/* 设置旋转的圆心 */
	}
</style>
</head>

<body>
<div class="box"></div>
</body>

效果图

C.缩放

语法：transform:scale(值)

取值：倍数，可以是整数，也可以是小数

<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	.box{
		width:200px;
		height:200px;
		background:#f00;
	}
	.box:hover{
		transform:scale(2);	
	}
</style>
</head>

<body>
<div class="box">
	
</div>
<p>asdf</p>
</body>

效果图

多学一招：如果有两个值，第一个代表宽度比例，第二个代表高度比例

5.过渡效果

是一个动画的效果

语法：transition:动画css属性过渡时间秒数速度类型延迟的秒数

取值：第一个值，写css属性名称，就是要发生改变的css属性，第二个值是时间单位s秒，第三个值是发生改变的曲线linear匀速，ease先慢后快再慢，第四个值可以定义动画在几秒后开始

<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	img{
		display:block;
		margin:50px auto;
		border:1px solid #000;
		/* 加过渡效果，必须是在元素原本的样式上面加，不在伪类上加 */
		transition:transform 2s linear;
	}
	img:hover{
		transform:scale(1.5);	
	}
</style>
</head>

<body>
<img src="img/meinv.jpg" />
</body>

效果图

css属性补充

1.光标形状

语法：cursor:值

取值：

text:文本图标

help:问号图标

wait:等待的图标

pointer: 小手图标

move 移动

url(),临时替换的样式-----需要在url后面加auto

default 箭头

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		div{
			width:100px;
			height:50px;
			border:1px solid #000;
		}
		.box1{
			cursor:text;
		}
		.box2{
			cursor:help;
		}
		.box3{
			cursor:wait;
		}
		.box4{
			cursor:pointer;
		}
		.box5{
			cursor:move;
		}
		.box6{
			cursor:url('bitbug_favicon.ico'),auto;
		}
		.box7{
			cursor:default;
		}
	</style>
</head>
<body>
	<div class="box1">文本</div>
	<div class="box2">问号</div>
	<div class="box3">等待</div>
	<div class="box4">小手</div>
	<div class="box5">移动</div>
	<div class="box6">图片</div>
	<div class="box7">箭头</div>
</body>

应用场景：主要用于修饰鼠标放到元素上面的时候光标的样式

2.强调边框

语法：outline:值------盒子轮廓

取值：和边框一样

应用场景：主要用于设置元素周围的边框，起到强调作用（常用于去掉表单选中的蓝色边框）

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		[type="password"]{outline:none;}
	</style>
</head>
<body>
	<input type="text" />
	<input type="password" />
</body>

效果

3.透明度

语法：opacity:值

取值：0-1之间的小数

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		.box{
			width:200px;
			height:100px;
			border:1px solid #000;
			position:relative;
		}
		img{
			position:absolute;
			left:0;top:0;
			opacity:0.5;
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="1.png" width="200" height="100" />
		这是一张图片
	</div>
</body>

效果

4.背景透明

语法：rgba(值1，值2，值3，值4)

取值：1-3个值都是0-255的数字，表示颜色，第4个值是透明度0-1之间取值

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		.box{
			width:200px;
			height:100px;
			border:1px solid #000;
			position:relative;
		}
		img{
			position:absolute;
			left:0;top:0;
		}
		.box2{
			width:200px;
			height:100px;
			background:rgba(3,3,3,.5);
			color:#fff;
			position:absolute;
			left:0;top:0;
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="1.png" width="200" height="100" />
		<div class="box2">
			这是一张图片
		</div>
	</div>
</body>

效果

5.去掉文本域的自动拉伸效果

语法：resize:none;

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		textarea{
			resize:none;
		}
	</style>
</head>
<body>
	<textarea cols="30" rows="10"></textarea>
</body>

效果

6.行内文字溢出省略号形式显示

overflow: hidden;
white-space: nowrap;文字不换行
text-overflow:ellipsis;/* 超出的部分以省略号形式显示 */

<style>
	.box{
		width:300px;
		height:100px;
		border:1px solid #000;	
		overflow:hidden;
		white-space: nowrap;/* 设置文本不换行，单行显示 */
		text-overflow:ellipsis;/* 超出的文本使用省略号代替 */
	}
	
</style>
<div class="box">
	央视网消息：“健全人可以活出精彩的人生，残疾人也可以活出精彩的人生。我们每个人都要珍惜生命、追求健康，努力创造无愧于时代的精彩人生。”

　　残疾人是一个特殊困难的群体，需要格外关心、格外关注。曾多次强调，全面建成小康社会，残疾人一个也不能少。做好残疾人工作，事关八千多万残疾人及其家庭的民生福祉，事关全面建成小康社会大局。党的十八大以来，以同志为核心的党中央高度重视残疾人事业发展，不断健全残疾人权益保障制度，努力“让广大残疾人安居乐业、衣食无忧，过上幸福美好的生活”。

　　在中国残联第七次全国代表大会到来之际，让我们重温***对残疾人朋友和残疾人事业的关爱和支持。

全面建成小康社会 残疾人一个也不能少

　　中国有几千万残疾人，2020年全面建成小康社会，残疾人一个也不能少。为残疾人事业做更多事情，也是全面建成小康社会的一个重要方面。

　　——2016年7月28日，在河北省唐山市考察时的讲话

　　因病致贫、因残致贫问题时有发生，扶贫机制要进一步完善兜底措施，在医保、新农合方面给予更多扶持。
</div>

效果

总结：3步走，一步也不能少

7.vertical-align

作用：控制行内块与文字的对齐方式，写在行内块元素上面

baseline 图片的基线和文字的基线保持对齐
top 图片的顶线和文字的顶线（行高的顶线）对齐
bottom 图片的底线和文字的底线（行高的底线）对齐
middle 图片的中线和文字的中线对齐

<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	.box{
		width:300px;
		height:200px;
		border:1px solid #000;
		line-height:200px;
	}
	img{
		vertical-align:middle;	
	}
</style>
</head>

<body>
<div class="box">
	<img src="3.jpg" width="100" height="100" />
    鸿飞万里
</div>
</body>

效果

案例：让一个张图片在盒子中水平垂直居中

<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	.box{
		width:300px;
		height:300px;
		border:1px solid #000;
		text-align:center;/* 水平居中 */
		line-height:300px;
	}
	img{
		vertical-align:middle;	/* 垂直居中 */
	}
</style>
</head>

<body>
<div class="box">
	<img src="3.jpg" width="100" height="100" />
</div>
</body>

效果

缩放zoom

语法：zoom:值

取值：值是一个倍数

<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	.box{
		width:200px;
		height:200px;
		border:1px solid #000;
		
	}
	div.box:hover{
		transform:scale(2);
		/*zoom:2;*/
	}
	.box1{
		width:100px;
		height:100px;
		background:#990;	
	}
</style>
</head>

<body>
<div class="box">
	
</div>
<div class="box1"></div>
</body>

效果

<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	.box{
		width:200px;
		height:200px;
		border:1px solid #000;
		
	}
	div.box:hover{
		/*transform:scale(2);*/	
		zoom:2;
	}
	.box1{
		width:100px;
		height:100px;
		background:#990;	
	}
</style>
</head>

<body>
<div class="box">
	
</div>
<div class="box1"></div>
</body>

效果

弹性布局 (重点)

1.多栏布局

概念：实现多个栏目的布局，类似于报纸

示意图

分栏显示--语法：column-count:值

取值：值是一个栏目的数量

<style type="text/css">
        .box{column-count:3;width:500px;}
    </style>
</head>
<body>
    <div class="box">
        本次论坛以“智能互联时代的媒体变革与发展”为主题，由中共中央网络安全和信息化委员会办公室指导，中华全国新闻工作者协会、中国网络社会组织联合会、中共宁波市委、宁波市人民政府、中共浙江省委网络安全和信息化领导小组办公室主办，央视网、中共宁波市委宣传部（市委网络安全和信息化领导小组办公室）共同承办，宁波日报报业集团（甬派传媒）、新浪网协办。

　　为了对论坛主题进行更深入、透彻地探讨，论坛将邀请主管部门、各地网信办、中央和地方主要新闻网站、重点商业网站和知名新媒体机构负责人等，共同研讨和应对当前网上内容建设和管理过程中遇到的问题和挑战，预测未来网络媒体发展趋势，解决技术变革带来的实际问题，分析分享媒体未来发展方向。

　　截至目前，承办方已邀请相关政府官员、中央及地方新闻网站和主要商业网站代表、专家学者、运营商代表等700多位嘉宾参会。
    </div>
</body>

效果

多栏隔断框--语法：column-rule:值

取值：这里的取值和边框的取值是一样的，也有边框厚度，边框颜色，边框样式

<style type="text/css">
        .box{column-rule:5px solid red;column-count:3;width:500px;}
    </style>
</head>
<body>
    <div class="box">
        本次论坛以“智能互联时代的媒体变革与发展”为主题，由中共中央网络安全和信息化委员会办公室指导，中华全国新闻工作者协会、中国网络社会组织联合会、中共宁波市委、宁波市人民政府、中共浙江省委网络安全和信息化领导小组办公室主办，央视网、中共宁波市委宣传部（市委网络安全和信息化领导小组办公室）共同承办，宁波日报报业集团（甬派传媒）、新浪网协办。

　　为了对论坛主题进行更深入、透彻地探讨，论坛将邀请主管部门、各地网信办、中央和地方主要新闻网站、重点商业网站和知名新媒体机构负责人等，共同研讨和应对当前网上内容建设和管理过程中遇到的问题和挑战，预测未来网络媒体发展趋势，解决技术变革带来的实际问题，分析分享媒体未来发展方向。

　　截至目前，承办方已邀请相关政府官员、中央及地方新闻网站和主要商业网站代表、专家学者、运营商代表等700多位嘉宾参会。
    </div>
</body>

效果

设置每一栏的宽度--语法：column-width:值

取值：值和宽度的值一样

<style type="text/css">
        .box{column-width:80px;width:500px;border:1px solid red;}
    </style>
</head>
<body>
    <div class="box">
        本次论坛以“智能互联时代的媒体变革与发展”为主题，由中共中央网络安全和信息化委员会办公室指导，中华全国新闻工作者协会、中国网络社会组织联合会、中共宁波市委、宁波市人民政府、中共浙江省委网络安全和信息化领导小组办公室主办，央视网、中共宁波市委宣传部（市委网络安全和信息化领导小组办公室）共同承办，宁波日报报业集团（甬派传媒）、新浪网协办。

　　为了对论坛主题进行更深入、透彻地探讨，论坛将邀请主管部门、各地网信办、中央和地方主要新闻网站、重点商业网站和知名新媒体机构负责人等，共同研讨和应对当前网上内容建设和管理过程中遇到的问题和挑战，预测未来网络媒体发展趋势，解决技术变革带来的实际问题，分析分享媒体未来发展方向。

　　截至目前，承办方已邀请相关政府官员、中央及地方新闻网站和主要商业网站代表、专家学者、运营商代表等700多位嘉宾参会。
    </div>
</body>

效果

2.弹性布局 (重点)

概念：可以实现类似浮动的效果，但是不会脱离文档流

语法：display:flex -------------设置一个弹性容器

主要属性（都需要先设置display:flex;）：

a 设置弹性布局的方向--语法： `flex-direction:值`

取值：

（1）row横向排列，等同于左浮动浮动效果

示意图

（2）row-reverse 横向反向排列，等同于右浮动的效果

示意图

（3）column 纵向排列

示意图

（4）column-reverse 纵向反向排列，从下到上的排列

示意图

b 设置弹性布局是否换行，语法：`flex-wrap:值`

取值：

（1）不换行（默认），nowrap

示意图

（2）换行， wrap

示意图

（3）换行，并反向排列（从下往上排列），wrap-reverse------从下往上，从左往右进行排列

示意图

c 设置弹性布局的水平对齐方式，语法：`justify-content:值`

取值：

（1）从左向右（左对齐），默认，flex-start

示意图

（2）从右往左排列（右对齐），flex-end

示意图

（3）两端对齐，中间等距离隔开，space-between

示意图

（4）两端的空白是中间空白的一半，space-around------------环绕对齐

示意图

（5）居中对齐，center

示意图

（6）等距离排列，space-evenly

示意图

d 垂直对齐方式，语法：`align-content:值`（在换行的时候用）

取值：

（1）默认的排列方式，stretch--------靠上排列，但是元素之间有间距

示意图

（2）靠上排列（上对齐），flex-start

示意图

（3）靠下排列（下对齐），flex-end

示意图

（4）垂直上下两端对齐，中间等距离空白，space-between

示意图

（5）两端的空白是中间的空白的一半，space-around

示意图

（6）居中对齐，center

示意图

（7）等距离摆放，space-evenly

示意图

e 交叉对齐方式，语法：`align-items:值` ，需要横向排列

取值：

（1）flex-start，从起始位置对齐

示意图

（2）flex-end，在结束位置对齐--------底部对齐

示意图

（3）center，居中对齐---------垂直居中

示意图

（4）baseline，在基准线对齐

示意图

（5）stretch，拉伸子元素------图片不行

示意图

使用场景：当网页结构鲜明，简单，使用弹性布局

f 子元素单独在y轴上的对齐方式，语法：`align-self:值`

取值：

auto：默认值，元素继承了它的父容器的align-items属性，如果没有父容器则为"stretch"

stretch：拉伸

center：居中

flex-start：最上面

flex-end：最下面

baseline：容器的基线

其实这个属性的结果和align-items的一样，只是align-items修饰的弹性容器中的所有子元素，align-self修饰的当前这一个元素。

text-align:center;和margin:auto;的区别

text-align:center;

1.文本水平居中对齐

2.设置在父元素上，作用于子元素（行元素和行内块，不能对块元素生效）

margin:auto;

1.盒子水平居中

2.设置在自身，作用于自身（自己是块元素，在父元素中居中，不能对行元素生效）

css精灵技术 (案例)

网址：http://mil.news.sina.com.cn/china/2018-08-31/doc-ihiixyeu1558608.shtml

示意图

网页加载每一张图片都需要对服务器进行一次请求，所以对服务器的负荷会很大，可以将多个小图放到一张大图上，每个地方使用小图片都对大图进行背景定位即可，这样只需要加载一张大图片，对服务器只做一次请求，可以减少服务器的开销，提供网站的性能

微信案例其实就是用的精灵图

<head>
	<meta charset="UTF-8">
	<title>微信案例</title>
	<style type="text/css">
		.box{
			height:74px;
			background:url(img/wx_bg.jpg);
			padding-left:300px;
		}
		ul{
			list-style:none;
			padding:0;
			margin:0;
		}
		li{
			float:left;
			margin-top:20px;
			margin-right:20px;
		}
		a{
			display:inline-block;
			text-decoration: none;
			color:#fff;
			height:33px;
			background:url(img/wxli_bg.png) left -192px;
			line-height:33px;
			padding-left:17px;
		}
		span{
			display:inline-block;
			height:33px;
			background:url(img/wxli_bg.png) right -192px;
			line-height:33px;
			padding-right:17px;
		}
		a:hover{
			color:green;
		}
	</style>
</head>
<body>
	<div class="box">
		<ul>
			<li><a href="#"><span>首页</span></a></li>
			<li><a href="#"><span>下载吧</span></a></li>
			<li><a href="#"><span>公共平台</span></a></li>
		</ul>
	</div>
</body>

示意图

滑动门效果 (案例)

概念：3个盒子浮动，左边和右边写宽高，负责加载两边的背景，中间的盒子宽度不定，让文字撑开

<head>
	<meta charset="UTF-8">
	<title>滑动门</title>
	<style type="text/css">
		.box{
			height:33px;
			margin-left:300px;
		}
		.box div{
			float:left;
			height:33px;
		}
		.left{
			width:18px;
			background:url(img/left.png);
		}
		.center{
			line-height:33px;
			color:#fff;
			background:url(img/center.png);
		}
		.right{
			width:17px;
			background:url(img/right.png);
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="left"></div>
		<div class="center">这是文字进来了</div>
		<div class="right"></div>
	</div>	
</body>

效果

字间距

单词间距

posted on 2024-01-07 03:02 xirang熙攘阅读(17) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

st779779

公告

css内容

css 介绍

css字体、文本属性

1.字体属性

2.文本属性

3.字体颜色

css注释

css基本选择器

1.标签选择器

2.id选择器

3.class类选择器

4.复合选择器

常用选择器

1.通配选择器（了解）

2.后代选择器（掌握）

3.子元素选择器（掌握）

4.相邻元素选择器（了解）

5.伪类

伪类选择器和类选择器一起使用

伪对象选择器（了解）

属性选择器

1.[属性名]

2.[属性=值]（重点）

3.[属性~=值]（了解）

4.[属性|=字符]（了解）

5.[属性*=值]（了解）

css尺寸、行高属性

1.尺寸属性

2.行高

font简写

背景属性

1.背景颜色

2.背景图片

3. 设置背景图片是否平铺

4.设置背景图片位置

5.设置背景图片大小

6.综合使用

7. 设置背景是否受滚动条的影响

8. 背景颜色渐变 (不常用)

①线性渐变

写法一：

写法二：

写法三：

写法四：

写法五：

②径向渐变

写法一：

写法二：

写法三：

写法四：

写法五：

③重复线性渐变

④重复径向渐变

列表属性

1.list-style-type

2.list-style-image

内容溢出

css样式的分类

1.内部样式----内联样式

2.行内样式

3.外部样式

样式的继承和覆盖（重点）

样式的优先级（了解）

1.强制优先级（important）

2.选择器优先级

3.伪对象选择器的优先级（了解）

4.样式分类优先级

5.样式叠加（权重）

标签的显示模式（重点）

1.块元素

2.行元素

3.行内的块元素

4.模式转换

盒子模型

盒子模型特性

1.内边距padding

2.外边距margin

3.边框属性

a 设置弹性布局的方向--语法： `flex-direction:值`

b 设置弹性布局是否换行，语法：`flex-wrap:值`

c 设置弹性布局的水平对齐方式，语法：`justify-content:值`

d 垂直对齐方式，语法：`align-content:值`（在换行的时候用）

e 交叉对齐方式，语法：`align-items:值` ，需要横向排列

f 子元素单独在y轴上的对齐方式，语法：`align-self:值`