1.CSS内部样式

一般会写在<heaad>标签中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1{color: red;}h2{color: yellow;}h3{color: blue;}</style>
</head>
<body><h1>11111111111</h1><h2>22222222222</h2><h3>33333333333</h3></body>
</html>

2.外部样式表

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- CSS外部引入方式1 --><link rel="stylesheet" type="text/css" href="../css/index.css"/><!-- CSS外部引入方式2,type属性可以省略 --><style type="text/css">@import url("../css/index.css");</style>
</head>
<body><h1>111111</h1><h2>2222222</h2><h3>333333</h3>
</body>

扩展知识点：link与import之间的区别
- 差别1：本质的区别：link属于XHTML标签，而,@import完全是CSS提供的一种方式
- 差别2：加载顺序的差别：当一个页面被加载的时候（就是浏览者浏览的时候），link引用的css会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式，就是闪烁，网速慢的时候还挺明显
- 差别3：兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签没有这个问题

3.行内样式表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>行内样式、内联样式、嵌入式样式</title>
</head>
<body><div style="width: 200px; height:200px; color: red;">我是div</div></body>
</html>

4.样式表的优先级

！import>行内>内部>外部
例子：color:red!important
针对同一个属性，同一个标签，否则不存在优先级的问题

5.标签选择器

直接使用标签名（也被称之为元素选择器）

6.类选择器

在类名之前加个点
在一个便签中有两个class并且有共同属性时，跟class的定义位置有关，定义时后面定义的会覆盖前面的，class的书写位置无关

7.id选择器

一个id名称只能对应文档中一个具体的元素对象（唯一性）
使用方式：在id名前加一个#号

8.通配符选择器

*{ margin:0;padding:0; }

margin是外边距
padding是内边距

9.群组和后代选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* div{background-color: yellow;}p{background-color: yellow;}h1{background-color: yellow;} */*{margin: 0;padding: 0;}/* 群组选择器：提出公共代码，节约代码量 */div,.boxp,h1{background-color: yellow;}</style></head>
<body><div>111111111111111</div><p class="boxp">1111111111111111</p><h1>111111111111</h1></body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 后代选择器（空格选择器），使用空格 */div p{background-color: yellow;}</style></head>
<body><div><p>111111111111</p></div><p>2222222222222</p></body>
</html>

后代选择器实际上是从右到左去匹配！

10.伪类选择器

语法：
- a:link{属性：属性值}超链接的初始状态
- a:visited{属性：属性值;}超链接被访问后的状态
- a:hover{属性：属性值}：鼠标悬停，即鼠标划过超链接时的状态
- a:active{属性：属性值}超链接被激活时的状态，即鼠标按下时超链接的状态
- Link–visited–hover–active
说明：
- A)当这四个超链接伪类选择器符联合使用时，应注意他们的顺序，正常顺序为：a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效
- B)为了简化代码，可以把伪类选择器符中相同的声明提出来放在a选择符中；例如：a{color:red} a:hover{color:green}表示超链接的初始和访问过后的状态一样，鼠标划过的状态和点击时的状态一样

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 初始状态 */a:link{color: yellow;}
/* 点击过后 */a:visited{color: red;}/* 鼠标悬停 */a:hover{color: blue;}/* 点击激活,激活的那一刻 */a:active{color: green;}</style>
</head>
<body><a href="http://www.baidu.com">百度</a>
</body>
</html>

11.新闻导航案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* a:link{background-color: black;color: white;}a:visited{background-color: black;color: white;}a:hover{background-color: red;}a:active{background-color: red;} */a{background-color: black;color: white;}a:hover{background-color: red;}/* a:active{background-color: red;} */.home{background-color: red;}</style></head>
<body><a href="" class="home">首页</a><a href="">国内</a><a href="">国际</a><a href="">军事</a><a href="">财经</a>
</body>
</html>

12.选择器权重

个数	选择器	权重，CSS中用四位数字表示权重，权重的表达方式如：0,0,0,0
1	类型（元素选择器）	0001
2	Class选择器（类选择器）	0010
3	id选择器	0100
4	包含选择器	为包含选择符的权重之和
5	内联选择器	1000
6	!import	10000
	CSS选择器解析规则1：	当不同选择符的样式设置有冲突的时候，高权重选择器符的样式会覆盖低权重选择符的样式
	CSS选择器解析规则2：	相同权重的选择符，样式遵循就近原则，哪个选择符最后定义，就采用哪个选择符样式

13.文本属性

个数	属性	描述	说明
1	font-size	字体大小	单位是px，浏览器默认是16px，设计图常用字号是12px
2	font-family	字体	当字体中是中文字体、英文字体中有空格时，需加双引号；多个字体中间用逗号链接，先解析第一个字体，如果没有解析第二个字体，以此类推
3	color	颜色	`color:red` `color:#ff0;` `color:rgb(255,0,0)` 0-255，rgba()–最后一个数字表示透明度
4	font-weight	加粗	`font-weight：bolder(更粗的)/bold(加粗)/normal(常规)` `font-weight:100-900;`100-500不加粗，600-900加粗
5	font-style	倾斜	`font-style:italic(斜体字)/oblique(倾斜的文字)/normal（常规显示）`
6	text-align	文本水平对齐	`text-align:left`水平靠左`text-align:right`水平靠右`text-align:center;`水平居中`text-align:justify;`水平两端对齐，但是只对多行起作用
7	line-height	行高	lline-height的数据=height的数据，可以实现单行文本垂直居中，行高
8	text-indent	首行缩进	text-indent可以取负值；text-indent属性只对第一行起作用，一般使用2em，即相对字体大小的两倍
9	letter-spacing	字间距	控制文字与文字之间的距离，字符间距
10	word-spacing	词间距	可以取负值
11	text-decoration	文本修饰	text-decoration:none没有（一般用在超链接中）/underline下划线/overline上划线/line-through删除线，如果要使用多个，使用空格隔开
12	font	文字简写	font是font-style font-weight font-size/line-height fomt-family的简写。例：`font:italic 800 30px/80px "宋体"`顺序不能改变，必须同时指定font-size和font-family属性时才起作用
13	text-transform	大小写	capitalize–首字母大写，lowercase小写，uppercase全部大写，none不做设置

font-family常用字体：
- 微软雅黑
- 楷体
- 宋体
字体加粗：100细体，400正常，700加粗，900更粗体

14.千锋简介案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.title {height: 50px;width: 200px;font-size: 25px;background-color: #808080;color: #fff;text-align: center;line-height: 50px;}.p1 {width: 500px;font-size: 20px;text-indent: 2em;}span {color: red;}</style>
</head><body><p class="title">千锋简介</p><p class="p1"><strong>Lorem ipsum, dolor sit amet consectetur </strong>adipisicing elit.Fuga, amet modi pariatur doloremofficia, quas quasialiquid molestiae qui,<span>deleniti mollitia magnam praesentium quaerat at animi tempore </span>assumenda quibusdam ex.</p><p class="p1">Lorem,<strong> ipsum dolor sit amet consectetur adipisicing</strong> elit. Natus assumenda, doloreliberoexplicabo, commodiminima voluptate molestiae et excepturi provident animi in iure exercitationem aperiam vel nostrum repellatmollitia voluptas!</p><p class="p1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus reiciendis adipisci dolore exmaxime liberoprovident debitis inventore soluta voluptatem quisquam, illum hic in accusantium! Perspiciatis fuga quisvoluptatem corporis.</p></body></html>

格式化代码

15.列表属性

个数	属性	描述	说明
1	list-style-type	定义列表符合样式	`list-style-type:disc（实心圆）/circle(空心圆)/square(实心方块)/none(去掉符号)`
2	list-style-image	将图片设置为列表符合样式	`list-style-image:url();`
3	list-style-position	设置列表项标记的放置位置	`list-style-position:outside;`列表的外面默认值 `list-style-position:inside`列表的里面
4	list-style	简写	`list-style:none`去除列表符号 `list-style:disc url() inside`(这里顺序可以随便改换)

16.背景属性

个数	属性	描述	说明
1	background-color	背景颜色	`background-color:red`
2	background-image	背景图片	`background-image:url()`
3	background-repeat	背景图片的平铺	`background-repeat:no-repeat/repeat/repeat-x/repeat-y`
4	background-position	背景图片的定位	`background-position:水平位置垂直位置`；可以给负值（可以给数值也可以使用right、left、center）
5	background-attachment	背景图片的固定	`background-attachment:scorll(滚动，默认值)/fixed(固定，固定在浏览器窗口，固定之后就相对于浏览器窗口了)`
			可以简写成background
6	background-size	背景图片的大小	`background-size:500px 500px

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 200px;height: 200px;background-color: yellow;}.box2 {width: 900px;height: 1000px;background-color: rgba(255, 0, 0, 0.549);background-image: url("../img/2056332.jpg");background-size: contain;background-repeat: no-repeat;background-attachment: fixed;}.box3 {width: 500px;height: 270px;background-color: green;background-image: url("../img/2056309.jpg");/*默认是平铺效果*/background-repeat: no-repeat;background-position: 70% 10%;/* background-position: right top; */background-size: contain;background-attachment: scroll;}</style>
</head><body><div class="box1">大家好<div class="box2"></div></div><div class="box3"></div></body></html>

17.视觉差案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100%;height: 100%;background-color: white;background-position: center;background-size: cover;background-attachment: fixed;}.box1 {background-image: url("../img/2056309.jpg");}.box2 {background-image: url("../img/2056332.jpg");}.box3 {background-image: url("../img/2056359.jpg");}* {margin: 0;padding: 0;}html,body {height: 100%;}</style>
</head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div></body></html>

18.知乎案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 50%;height: 100%;background-color: yellow;margin: 0 auto;}* {margin: 0;padding: 0;}html,body {height: 100%;}body {background-image: url("../img/2056309.jpg");background-position: center;background-size: cover;background-attachment: fixed;}</style>
</head><body><div class="box"></div></body></html>

19.背景的复合属性

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/*
复合写法：
1.使用空格隔开
2.顺序可以换
3.可以只取一个值，放在后面的能覆盖前面的值
4.background-size必须独立写
*/div {width: 300px;height: 300px;/* background-color: yellow;background-image: url("../img/2056309.jpg");background-position: center;background-repeat: no-repeat;background-size: contain;background-attachment: fixed; */background: yellow url("../img/2056309.jpg") center no-repeat fixed;background-size: contain;margin: 0 auto;}* {margin: 0;padding: 0;}</style>
</head><body><div></div>
</body></html>

20.浮动属性

个数	属性	描述	说明
1	float	float:left	元素靠左边浮动
2	float	float:right	元素靠右边浮动
3	float	float:none	元素不浮动
浮动的作用1：		定义网页中其他文本如何环绕该元素显示
浮动的作用2：		就是让竖着的东西横着来
4	clear	Clear:none;	允许有浮动对象
5	clear	Clear:right	不允许右边有浮动对象
6	clear	Clear:right	不允许左边有浮对象
7	clear	Clear:both	不允许有浮动对象
		清除浮动只是改变元素的排列方式，该元素还是漂浮着，不占据文档位置

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 50%;height: 200px;}.red {background-color: red;}.yellow {background-color: yellow;width: 40%;float: left;}.blue {background-color: blue;}</style>
</head><body><div class="red"></div><div class="yellow"></div><div class="blue"></div>
</body></html>

谁先左浮动谁在左边，谁先右浮动谁在右边
浮动属于见缝插针，不会按照垂直一直排列

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1,.box2 {width: 100px;height: 100px;float: left;}.box {width: 100px;height: 200px;background-color: blue;}.box1 {background-color: red;}.box2 {background-color: yellow;}/* 1.写死高度 *//* .container {height: 100px;} *//* 2.清浮动 *//* .box {clear: left;} *//* 3.当前浮动元素后面补一个盒子，不设置宽高，clear：both *//* 4.overflow:hidden */.container {overflow: hidden;/* bfc,让浮动元素计算高度 */}</style></head><body><div class="container"><div class="box1"></div><div class="box2"></div><!-- <div style="clear: left;"></div> --></div><div class="box"></div>
</body></html>

21.浮动案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}div {float: left}div img {width: 187px;height: 125px;}div p {font-size: 12px;text-align: center;background-color: #f6f7f8;width: 187px;}</style>
</head><body><div><imgsrc="http://contentcms-bj.cdn.bcebos.com/cmspic/a0f393d56f8964e95dcd077d3ed5e332.jpeg?x-bce-process=image/crop,x_0,y_57,w_640,h_430" /><p>吴磊时尚大片曝光 少年感十足</p></div><div><imgsrc="http://contentcms-bj.cdn.bcebos.com/cmspic/ad344613749749a3cd6305c34f29e98f.jpeg?x-bce-process=image/crop,x_0,y_91,w_640,h_430" /><p>吴磊时尚大片曝光 少年感十足</p></div><div><imgsrc="http://contentcms-bj.cdn.bcebos.com/cmspic/9fed4f6b5d6d22dde9af8195ff0598db.jpeg?x-bce-process=image/crop,x_0,y_305,w_640,h_430" /><p>吴磊时尚大片曝光 少年感十足</p></div><div><imgsrc="http://contentcms-bj.cdn.bcebos.com/cmspic/9379a58fe77d92527306ff58888f3ecd.jpeg?x-bce-process=image/crop,x_0,y_39,w_640,h_430" /><p>吴磊时尚大片曝光 少年感十足</p></div><div><imgsrc="http://contentcms-bj.cdn.bcebos.com/cmspic/c122866cea6c6df373f02b0e215a2cd6.jpeg?x-bce-process=image/crop,x_43,y_26,w_470,h_315" /><p>吴磊时尚大片曝光 少年感十足</p></div>
</body></html>

22.盒子模型

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 500px;height: 300px;background-color: yellow;text-align: justify;/* 内边距 *//* 1个值表示四个方向都一样，2个值表示上下和左右 *//* 3个值：上，左右，下4个值：上，右，下，左 */padding: 30px;}</style>
</head><body><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas tempora eligendi culpa. Accusantium aspernaturminus asperiores impedit quibusdam cumque magni culpa vitae amet. Excepturi, id doloremque. Alias repudiandaevoluptas aperiam?</div>
</body>

内边距特性

背景色延伸到内边距
可以使用padding-方向的写法设置单个方向
不能设置负数

边框

border:1px solid gray

三个属性分别是：大小，样式，颜色
其中样式有solid–实线，double是双实线，dashed线段线，dotted点状线
同样支持border-方向设置单个方向
同时，还可以单独设置大小，样式与颜色：border-width\border-style\border-color
1个值表示四个方向都一样
2个值表示上下和左右
3个值：上，左右，下
4个值：上，右，下，左

外边距特性

margin:1px 2px 3px 4px

支持四个方向
- margin-top
- margin-bottom
- margin-left
- margin-right
外边距支持负数
屏幕居中方案：margin:0 auto

1.兄弟关系

垂直方向，外边距取两个当中的最大值，但是如果另一个为负数则会取和
水平方向，会直接求和

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 群组选择器 */.box1,.box2,.box3,.box4 {width: 100px;height: 100px;}.box1 {background-color: red;margin-bottom: 20px;}.box2 {background-color: yellow;margin-top: 10px;}.box3 {background-color: blue;float: left;margin-right: 20px;}.box4 {background-color: green;float: left;margin-left: 10px;}</style>
</head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div>
</body></html>

2.父子关系

水平与垂直特性与兄弟关系相同

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1,.box2 {padding: 0;}.box1 {width: 500px;height: 500px;background-color: red;margin-top: 10px;/* padding-top: 10px; *//* border: 1px solid transparent; *//* float: left; */overflow: hidden;}.box2 {width: 200px;height: 100px;background-color: yellow;margin-top: 30px;margin-left: 0;/* float: left; */}/* 1.子margin-top转化为父的padding-top *//* 2.给父盒子设置边框 *//* 3.给父或者子盒子添加浮动 *//* 4.overflow:hidden BFC块，不会影响外部*/</style>
</head><body><div class="box1"><div class="box2"></div></div>
</body></html>

23.PS基本操作

ps===图片处理软件（美工用来作图，前端用来测量，吸取颜色，切图）

拿到设计稿之后使用ps打开

图片放大和缩小
- ctrl++
- ctrl±
- alt+滚动
图片的移动
- 按住空格，鼠标变为小手，拖动图片
如何调整出标尺
- ctrl+r
- 作用：拖动参考线方便测量
- 视图里面找到标尺，把对勾勾选上
测量图片大小
- 标尺-右键-像素
- 使用矩形选框工具（左侧竖着第二个）
- 如何查看数据大小（窗口------信息面板=====wh）
截图
- 1.使用快捷键截图===每次只能截取一个
  - 使用选框工具框选你要截取的区域
  - ctrl+cctrl+n回车=ctrl+v=ctrl+s回车=======回车
- 2.切片工具（裁剪工具进行切换）
  - 使用切片工具框选你要留住的区域，点击文件，存储为wen所用格式，弹窗里面点击存储
  - 弹窗======格式：仅限图像，切片：所有用户切片
吸取颜色
- 使用吸管工具
- 吸取完颜色后，点击左下角的背景色，会有弹窗，在弹窗里面选择十六进制的颜色值并进行复制

24.盒子案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}img {display: block;}#box {width: 241px;height: 335px;background-color: white;margin: 0 auto;padding: 11px 11px 18px;}.title {width: 235px;height: 19px;background-color: rgb(252, 250, 250);padding-left: 4px;border-left: 2px solid blue;color: blue;font-size: 14px;line-height: 19px;font-weight: bold;margin-bottom: 12px;}/* .bigpic {width: 241px;height: 170px;} */.bigpic p {width: 241px;height: 26px;background-color: #f6f7f8;font-size: 12px;text-align: center;/* 垂直方向居中 */line-height: 26px;margin-bottom: 16px;}.smallpic p {font-size: 12px;width: 112px;background-color: #f6f7f8;line-height: 18px;text-align: center;}.smallpic img {width: 112px;height: 70px;}.left {float: left;}.right {float: right;}</style>
</head><body><div id="box"><div class="title">女人图片</div><div class="bigpic"><img src="../img/2056309.jpg" style="width: 241px;height:170px" alt="" /><!-- <img src="../img/2056309.jpg" /> --><p>这是一张无关紧要的图片</p></div><div class="smallpic"><div class="left"><img src="../img/2056332.jpg" alt="" /><p>啊哈哈哈，我滴任务完成啦</p></div><div class="right"><img src="../img/2056359.jpg" alt="" /><p>给你机会你不中用啊</p></div></div></div>
</body></html>

25.溢出属性

1.溢出属性（容器的）

说明：

overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;

visible:默认值，溢出内容会显示在元素之外
hidden：溢出内容隐藏
scroll：滚动，溢出内容以滚动方式显示
auto：如果有溢出会添加滚动条，没有溢出正常显示
inhreit：规定应该遵从父元素继承overflow属性
overflow-x：X轴溢出
overflow-Y：Y轴溢出

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 200px;height: 200px;background-color: yellow;/* overflow: visible;显示溢出 *//* overflow: hidden;溢出隐藏，文本裁切 *//* overflow: scroll;有没有溢出，都会有滚动条 *//* overflow: auto;只有溢出时才会有滚动条 *//* overflow: inherit;继承父元素的效果 */overflow: auto;}.box {width: 500px;height: 100px;overflow-y: auto;/* 要配合使用 */overflow-x: hidden;}</style>
</head><body><div class="box1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi officia impedit commodi, quibusdam repellendusrepudiandae ex ullam neque iusto id debitis dolorum? Consequatur iure reprehenderit fugiat quos reiciendistempora pariatur.</div><div class="box"><img src="../img/2056309.jpg"></div>
</body>

2.空余空间

说明：

white-space:normal/nowrap/pre/pre-wrap/pre-line/inherit该属性用来设置如何处理元素内的空白；
normal:默认值，空白会被浏览器忽略
nowrap：文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止
pre-wrap：显示空格，回车，换行
pre-line：显示回车，不显示空格，换行

说明：

text-overflow:clip/ellipsis
clip:默认，不显示省略号（…）
ellipsis:显示省略标记

当单行文本溢出显示省略号需要同时设置以下声明：

1.容器宽度：width:200px

2.强制文本在一行内显示：white-space:nowrap

3.溢出内容为隐藏：overflow:hidden

4.溢出文本显示省略号：text-overflow:ellipsis

26.溢出属性案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}#box {width: 890px;height: 290px;background-color: white;margin: 0 auto;overflow: auto;}.info {width: 162px;height: 112px;border: 1px solid #808080;float: left;margin-right: 48px;margin-bottom: 20px;}.info div {width: 162px;height: 84px;background-color: #cccccc;background-image: url("../img/2056359.jpg");background-size: cover;font-size: 13px;}.price {height: 63px;line-height: 63px;padding-left: 21px;color: #b5b5b5;}.info .date {color: #b5b5b5;padding-left: 21px;}.category {background-color: white;height: 28px;line-height: 28px;color: #000;text-align: center;font-size: 12px;}.info:hover div {background-color: #219cea;background-image: url("../img/2056309.jpg");}.info:hover .price {color: white;}.info:hover .date {color: white}.info:hover .category {color: #219cea;background-image: url("../img/2056332.jpg");background-repeat: no-repeat;background-size: contain;background-position: right bottom;}</style>
</head><body><div id="box"><div class="info"><div><p class="price">¥100.00圆</p><p class="date">有效期至：2022-8-4</p></div><p class="category">[店铺类][商城类]</p></div><div class="info"><div><p class="price">¥100.00圆</p><p class="date">有效期至：2022-8-4</p></div><p class="category">[店铺类][商城类]</p></div><div class="info"><div><p class="price">¥100.00圆</p><p class="date">有效期至：2022-8-4</p></div><p class="category">[店铺类][商城类]</p></div><div class="info"><div><p class="price">¥100.00圆</p><p class="date">有效期至：2022-8-4</p></div><p class="category">[店铺类][商城类]</p></div><div class="info"><div><p class="price">¥100.00圆</p><p class="date">有效期至：2022-8-4</p></div><p class="category">[店铺类][商城类]</p></div><div class="info"><div><p class="price">¥100.00圆</p><p class="date">有效期至：2022-8-4</p></div><p class="category">[店铺类][商城类]</p></div><div class="info"><div><p class="price">¥100.00圆</p><p class="date">有效期至：2022-8-4</p></div><p class="category">[店铺类][商城类]</p></div><div class="info"><div><p class="price">¥100.00圆</p><p class="date">有效期至：2022-8-4</p></div><p class="category">[店铺类][商城类]</p></div><div class="info"><div><p class="price">¥100.00圆</p><p class="date">有效期至：2022-8-4</p></div><p class="category">[店铺类][商城类]</p></div><div class="info"><div><p class="price">¥100.00圆</p><p class="date">有效期至：2022-8-4</p></div><p class="category">[店铺类][商城类]</p></div></div>
</body></html>

HTML基础--CSS样式表（一）相关推荐

HTML基础--CSS样式表（二）
1.元素显示类型元素类型的分类,依据CSS的显示块元素(block element) 行内(内联元素) 行内块元素块元素 A)块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域 ...
WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式能力目标 Ø 理解CSS的 ...
[19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器...
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
前端基础 CSS 第十一章使用CSS样式表 ----暑假学习第七、八天
第十一章使用CSS样式表通过CSS样式定义,可以将网页制作得更加绚丽多彩.采用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其他效果实现更加精确地控制.用CSS不仅可以做出令浏览者赏心悦目 ...
前端基础 CSS 第十一章使用CSS样式表特效属性部分 ----暑假学习第九天
第十一章使用CSS样式表 11.8 定位属性使用定位属性可以控制元素的位置,包括相对定位和绝对定位两种方式.相对定位指允许元素在相对于文档布局的原始位置上进行偏移,而绝对定位是指允许元素与原始文档 ...
【HTML基础】CSS样式表
目录 1 CSS样式表简介 2 CSS与HTML的三种组合方式 2.1 内联样式 2.2 内部样式表 2.3 外部引用 3 总结参考文献 1 CSS样式表简介定义: CSS是Cascading S ...
(原创分享，改进版)CSS样式表速成！
大话CSS样式表速成程序和美工一直是相辅相成的,一个好的Web项目需要不仅仅是程序的完美,同样一个好的用户使用页面,也可以吸引一大部分用户.往往在传统的概念里,程序和美工总是被分开来说.一方面,这 ...
Web前端基础---CSS样式--盒子模型--浮动与定位
Day02 CSS样式 DIV和CSS DIV是层叠样式表中的定位技术,全称DIVision,即为划分.有时可以称其为图层. DIV元素是用来为HTML文档内大块(block-level)的内容提供结 ...
css样式表诞生,[css]简明教程 CSS样式表概述
CSS(Cascading Style sheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一.使用CSS能够简化网页的格式代码,加快下载显示 ...

HTML基础--CSS样式表（一）

1.CSS内部样式

2.外部样式表

3.行内样式表

4.样式表的优先级

5.标签选择器

6.类选择器

7.id选择器

8.通配符选择器

9.群组和后代选择器

10.伪类选择器

11.新闻导航案例

12.选择器权重

13.文本属性

14.千锋简介案例

15.列表属性

16.背景属性

17.视觉差案例

18.知乎案例

19.背景的复合属性

20.浮动属性

21.浮动案例

22.盒子模型

内边距特性

边框

外边距特性

1.兄弟关系

2.父子关系

23.PS基本操作

24.盒子案例

25.溢出属性

1.溢出属性（容器的）

2.空余空间

26.溢出属性案例

HTML基础--CSS样式表（一）相关推荐

最新文章

热门文章