CSS入门

一、`CSS`简介

1、什么是`CSS`

CSS：Cascading Style Sheet层叠样式表

是一组样式设置的规则，用于控制页面的外观样式

二、基本用法

1、css语法

<head>
	<style>
		选择器{
			属性名：属性值;
			属性名：属性值;
		}
	</style>
</head>

选择器：要修饰的对象
属性名：要修饰对象的哪一个属性
属性值：样式的取值

<head>
	<style>
		p {
			font-size:20px;
			color:pink;
		}
	</style>
</head>

2、`css`的应用

2.1 内部样式

<style>
            div {
                color: pink;
            }
     </style>

<body>
    <div>
    所谓内部样式表,就是在html页面内部写样式,但是是单独写到style标签内部.		</div>
</body>

2.2 行内样式

1	<p style="color: pink; font-size: 20px;">夏天夏天悄悄过去留下小秘密</p>

2.3 外部样式表

使用单独的css文件，在页面中通过link标签链接外部样式文件

1	<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">

三、选择器

1. 基础选择器

1.1 标签选择器

使用html标签作为选择器的名称，也被称为元素选择器

1.2 类选择器

使用自定义的名称，以.作为前缀，通过HTML标签的class属性调用选择器

注：

类选择器不能以数字开头
调用多个类选择器时，以空格隔开
class属性可写多个类名

1.3 ID选择器

使用自定义的名称，以#作为前缀，通过HTML标签的id属性调用选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p{
			color:red;
			font-size:20px;
		}
		.hello{
			background: #cccccc;
		}
		#haha{
			color:blue;
		}
	</style>
</head>
<body>
	<p>welcome to css!</p>
	<div class="hello">welcome to css!</div>
	<h1 id="haha">welcome to css!</h1>
</body>
</html>

1.4 通配符选择器

<!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>
     * {
         color: red;
     }
     /* * 这里把 html  body  div  span  li 等等的标签都改为了红色 */
    </style>
</head>
<body>
    <div>我的</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
    </ul>
</body>
</html>

2.复杂选择器

2.1 复合选择器

标签选择器，类选择器，id选择器一起使用，不使用空格

2.2 并集选择器

可以将多个具有相同样式的选择器放在一起调用，使用逗号隔开

2.3 嵌套选择器

在选择器内部使用空格隔开，不区分父子还是后代

使用>时必须是父子关系

<!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,
        p,
        .pig li {
            color: pink;
        }
    </style>
</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

</html>

2.4 链接伪类选择器

a:link 把没有点击过的(访问过的)链接选出来
a:visited选择点击过的(访问过的)链接
a:hover 选择鼠标经过的那个链接
a:active选择的是我们鼠标正在按下还没有弹起鼠标的那个链接

<!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>
        a:link {
            color: #333;
            text-decoration: none;
        }
        a:visited {
            color: orange;
        }
        a:hover {
            color: skyblue;
        }
        a:active {
            color: green;
        }
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a>
    <a href="http://www.xxxxxxxx.com">未知的网站</a>
</body>

</html>

2.5 focus选择器

把获得光标的input表单元素选取出来

input:focus {
           background-color: pink;
           color: red;
       }

2.6 伪元素选择器

:first-letter 为第一个字符的样式
:first-line 为第一行添加样式
:before 在元素内容的最前面添加的内容，需要配合content属性使用
:after 在元素内容的最后面添加的内容，需要配合content属性使用

3. 选择器优先级

带!important 标记的样式属性优先级最高；样式表的来源相同时：!important > 行内样式>嵌入样式和外链样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

四、常用`css`属性

1. 字体属性

属性	含义	说明
font-family	字体系列	宋体，微软雅黑等
font-size	字体大小	`px`,`em`,`rem`,%
font-weight	字体粗细	使用数字表示加粗或变细
font-style	字体样式	italic，normal
font	字体简写

<!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>CSS字体属性之复合属性</title>
    <style>
       /* 想要div文字变倾斜 加粗 字号设置为16像素 并且 是微软雅黑 */
       div {
           /* font-style: italic;
           font-weight: 700;
           font-size: 16px;
           font-family: 'Microsoft yahei'; */
           /* 复合属性: 简写的方式  节约代码 */
           /* font: font-style  font-weight  font-size/line-height  font-family; */
           /* font: italic 700 16px 'Microsoft yahei'; */
           font: 20px '黑体';
       }
    </style>
</head>
<body>
   <div>三生三世十里桃花,一心一意百行代码</div>
</body>
</html>

2. 文本属性

属性	含义	说明
color	颜色	英文单词，`rgb`,16进制
line-height	行高	行之间的间距
text-align	水平对齐方式	常用文本居中
vertical-align	垂直对齐方式	常用文本与图片对齐
text-indent	首行缩进
text-decoration	文本修饰	underline,`overline`,
text-transform	字母大小写转换	首字母大小写等
letter-spacing	字符间距
letter-spacing	单词间距	只对英文有效
white-space	空白的处理	文本超出后是否换行
text-shadow	文字阴影

<!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>
        body {
            font: 16px/28px "微软雅黑";
        }
        h1 {
            /* 文字不加粗 */
            font-weight: 400;
            /* 让H1里面的文字巨中对齐 */
            text-align: center;
        }
        a {
            /* 文本装饰为默认值 */
            text-decoration: none;
        }
        .gray {
            /* 第二行颜色为灰色 字体大小为12像素 文本居中对齐 */
            color: #888;
            font-size: 12px;
            text-align: center;
        }
        .search {

            color: #666;
            width: 170px;
        }
        .btn {
            /* 搜索字体粗细为700 */
            font-weight: 700;
        }
        p {
            /* 首行缩进两个字的距离 */
            text-indent: 2em;
        }
        .pic {
            /* 图片居中对齐 */
            text-align: center;
        }
        .footer {
            color: #888;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <h1>北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>
    <p class="gray">2019-07-03 16:31:47 来源:   <a href="#">中国天气网</a>　 <input type="text" value="请输入查询条件..." class="search"> <button>搜索</button></p>
    <hr>
    <p>中国天气网讯 今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。</p>
    <h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日</h4>
    <p class="pic"><img src="D:\桌面文件\html_css_material-master\html_css_material-master\第三天\images\pic.jpeg"></p>
    <p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。</p>
    <p>在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p>
    <h4>明日热度再升级！京津冀携手冲击38℃+</h4>
    <p>中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。 明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p>
    <p>不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）</p>
    <p class="footer">本文来源：中国天气网 责任编辑：刘京_NO5631</p>
</body>
</html>

3. 背景属性

属性	含义	说明
background-color	背景颜色	transparent 透明
background-image	背景图片	`url`
background-repeat	背景图片的重复方式	no-repeat,repeat
background-position	背景图片的显示位置	方向名词或者具体位置
background-attachment	背景图片是否跟随滚动	scroll(默认)、fixed固定不动
background	简写

<!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>
        body {
            /* background-image: url(images/bg.jpg);
            background-repeat: no-repeat;
            background-position: center top; */
            /* 把背景图片固定住 */
            /* background-attachment: fixed;
            background-color: black; */
            background: black url(images/bg.jpg) no-repeat fixed center top;
            color: #fff;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
</body>

</html>

4.列表属性

属性	含义	说明
list-style-type	列表前的样式	none,disc,circle,square
list-style-image	列表前的样式图片	`url`
list-style-position	标记的位置	outside,inside
list-style	简写

5. 表格属性

border-collapse:表格中相邻的边框是否合并（折叠）为单一边框

取值：separated（默认） collapse

五、`css`元素显示模式

1. 块级元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素的特点：

自己独占一行
可以控制高度，宽度，内外边距
是一个盒子，里面可以放行内块或者行内元素

注：文字类标签如<p>,<h1>等等不能放其他块级元素

2. 行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

相邻行内元素在同一行上，一行可以显示多个
直接设置宽高是无效的
默认宽度是它本身内容的宽度
只能容纳文本和其他行内元素

注：链接里面不能再放链接

3. 行内块元素

在行内元素中有几个特殊的标签——<img />、<input />、<td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点：

和相邻元素在同一行上，但是他们之间会有缝隙，一行可以显示多个
可以设置宽高
默认宽度是他内容的宽度

4. 元素显示模式的转化

转化为块级元素：display:block
转化为行内元素:display:inline
转化为行内块元素:display:inline-block

六、盒子模型

1. 简介

盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

包括：边框(border)、外边距(margin)、内边距(padding)、和实际内容 (content)

2.盒子

1. border

属性	作用
border-width	边框粗细
border-style	边框的样式
border-color	边框颜色
border	简写

border-style的属性值：

none：没有边框
solid：单实线
dashed：虚线边框
dotted：点线边框

border-radius设置圆角边框

2. margin

margin:0,auto可以让块级元素水平居中

text-align:center可以让行内元素水平居中

3. 其他

3.1 边距合并

外边距合并：

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom 与margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

清除内外边距：

* {
	padding:0;
	margin:0
}

3.2 盒模型的设置***

盒模型分为标准盒模型和IE盒模型

标准盒模型：width为content的宽度，box-sizing:content-box

IE盒模型：width为content+padding+border的宽度，box-sizing:border-box

3.3 盒子阴影

1
2
3

div:hover {
            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
}

七、浮动

1. 简介

标准流：标签按照规定好默认方式排列.

浮动：设置浮动的图片，文字会环绕图片，设置浮动的块级元素，可以排列在一行，设置浮动的行内元素，可以设置宽高。

none：元素不浮动
left：元素向左浮动
right：元素向右移动

2. 浮动特性

浮动元素脱离标准流,不再保留原先的位置
在一行显示且与元素顶部对齐
具有行内块的特性

<!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>
        .box {
            width: 1200px;
            height: 460px;
            background-color: pink;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 230px;
            height: 460px;
            background-color: purple;
        }

        .right {
            float: left;
            width: 970px;
            height: 460px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
    </div>
</body>

</html>

3. 注意点

浮动和标准流的父盒子搭配。

先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

一个元素浮动了，理论上其余的兄弟元素也要浮动。

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

4. 清除浮动

原因：由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

4.1 额外标签法

额外标签法会在浮动元素末尾添加一个空的标签。例如

，或者其他标签（如
等）。

注：新的空标签必须是块级元素

4.2 父级添加overflow

可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。子不教,父之过,注意是给父元素添加代码

4.3 :after伪元素法

给父元素添加

.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix{/* IE6、7专有*/*zoom: 1;
}

4.4 双伪元素清除浮动

.clearfix:before,.clearfix:after{
	content:"";
	display:table;
}
.clearfix:after{
	clear:both;
}
.clearfix{
*zoom:1;
}

4.4 总结

额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear:both）
新添加了一个标签，会造成不必要的渲染
父级添加overflow属性（overflow: hidden;）
写法方便简单，但是如果盒子中有定位元素超出了父级，则超出部分会隐藏。
使用after不会新增加标签，不回影响元素，是最流行的方法。

八、定位

1. 简介

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

值	语义
static	静态定位
relative	相对定位，占据空间，相对于自身
absolute	绝对定位，脱离文档流，不占据空间，相对于定位的父级
fixed	固定定位，脱离文档流，不占据空间，浏览器可视区
sticky	粘性定位，占据空间，浏览器可视区

2. 定位方式

2.1 静态定位

静态定位是元素的默认定位方式，无定位的意思。

2.2 相对定位 relative

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的

特点：

它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。

2.3 绝对定位 absolute

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（

特点：

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
绝对定位不再占有原先的位置。（脱标）

2.4 子绝父相

因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

2.5 固定定位 fixed

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

特点：

以浏览器的可视窗口为参照点移动元素。
跟父元素没有任何关系不随滚动条滚动。
固定定位不在占有原先的位置。

2.6 粘性定位 sticky

粘性定位可以被认为是相对定位和固定定位的混合。

特点：

以浏览器的可视窗口为参照点移动元素（固定定位特点）
粘性定位占有原先的位置（相对定位特点）
必须添加top 、left、right、bottom 其中一个才有效

3. 定位提升层级

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)

1	选择器{z-index: 1; }

九、其他属性

1. 显示与隐藏

1.1 display 属性

通过display属性设置元素是否显示，以及是否独占一行

无法添加过渡效果，不占有原来的位置

取值	含义	说明
`none`	不显示	隐藏对象，不再占有原来的位置
`inline`	行内元素	行内元素的也行
`block`	块级元素	块级元素的特性
`inline-block`	行内块元素	行内块元素的特性

1.2 visibility 可见性

visibility属性用于指定一个元素应可见还是隐藏。

无法添加过渡效果，占有原来的位置

visibility：visible ;元素可视
visibility：hidden; 元素隐藏，继续占有原来的位置

1.3 opcity 透明度

opcity属性可以设置元素透明度

可以添加过度效果，但是占据原来的位置

2. overflow

overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

可以添加过渡效果，不占有原来的位置

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	超出部分隐藏
scroll	不管超出内容否，显示滚动条
auto	超出自动显示滚动条，不超出不显示

display 显示隐藏元素但是不保留位置
visibility 显示隐藏元素但是保留原来的位置
overflow 溢出显示隐藏但是只是对于溢出的部分处理

3. outline 轮廓属性

轮廓outline,用于在元素周围绘制一个轮廓，位于border外围，可以突出显示元素

outline-width:轮廓宽度
outline-color:轮廓颜色
outline-style:轮廓样式
outline简写

<!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>
        input, textarea {
            /* 取消表单轮廓 */
            outline: none;
        }
        textarea {
            /* 防止拖拽文本域 */
            resize: none;
        }
    </style>
</head>
<body>
    <!-- 1. 取消表单轮廓 -->
    <input type="text">
    <!-- 2. 防止拖拽文本域 -->
    <textarea name="" id="" cols="30" rows="10"></textarea>

    
</body>
</html>

4. cursor 鼠标样式

设置鼠标的形状

default默认光标，一般为箭头
pointer手形，光标移动超链接上时一般显示为手形
move表示可移动
text表示文本
wait表示程序正忙，需要等待
hep表示帮助

<!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>
</head>
<body>
    <ul>
        <li style="cursor: default;">我是默认的小白鼠标样式</li>
        <li style="cursor: pointer;">我是鼠标小手样式</li>
        <li style="cursor: move;">我是鼠标移动样式</li>
        <li style="cursor: text;">我是鼠标文本样式</li>
        <li style="cursor: not-allowed;">我是鼠标禁止样式</li>
    </ul>
</body>
</html>

十、小技巧

1. 图片和文字垂直居中对齐

img {
            /* vertical-align: bottom; */
            /* 让图片和文字垂直居中 */
            vertical-align: middle;
            /* vertical-align: top; */
        }
        textarea {
            vertical-align: middle;
        }

2. 图片底侧有空白缝隙

img {
            /* vertical-align: middle; */
            display: block;
        }

3. 单行溢出文字显示省略号

div {
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 100px auto;
            /* 这个单词的意思是如果文字显示不开自动换行 */
            /* white-space: normal; */
            /* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */
            white-space: nowrap;
            /* 2.溢出的部分隐藏起来 */
            overflow: hidden;
            /* 3. 文字溢出的时候用省略号来显示 */
            text-overflow: ellipsis;
        }

4. 多行文字溢出显示省略号

div {
            width: 150px;
            height: 65px;
            background-color: pink;
            margin: 100px auto;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 3;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }

5. margin负值解决缝隙显示问题

/* ul li:hover {
           1. 如果盒子没有定位，则鼠标经过添加相对定位即可
        position: relative;
        border: 1px solid blue;

       } */
        ul li:hover {
            /* 2.如果li都有定位，则利用 z-index提高层级 */
            z-index: 1;
            border: 1px solid blue;
        }

6. 三角制作

<style>
        .box1 {
            width: 0;
            height: 0;
            /* border: 10px solid pink; */
            border-top: 10px solid pink;
            border-right: 10px solid red;
            border-bottom: 10px solid blue;
            border-left: 10px solid green;
        }

        .box2 {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-left-color: pink;
            margin: 100px auto;
        }

        .jd {
            position: relative;
            width: 120px;
            height: 249px;
            background-color: pink;
        }

        .jd span {
            position: absolute;
            right: 15px;
            top: -10px;
            width: 0;
            height: 0;
            /* 为了照顾兼容性 */
            line-height: 0;
            font-size: 0;
            border: 5px solid transparent;
            border-bottom-color: pink;
        }
    </style>

7. 去掉表单默认边框

1	input {outline: none; }

8. 防止拖拽文本域

1	textarea{ resize: none;}

CSS入门

一、CSS简介

1、什么是CSS

二、基本用法

2、css的应用

2.1 内部样式

2.2 行内样式

2.3 外部样式表

三、选择器

1. 基础选择器

1.1 标签选择器

1.2 类选择器

1.3 ID选择器

1.4 通配符选择器

2.复杂选择器

2.1 复合选择器

2.2 并集选择器

2.3 嵌套选择器

2.4 链接伪类选择器

2.5 focus选择器

2.6 伪元素选择器

3. 选择器优先级

四、常用css属性

1. 字体属性

2. 文本属性

3. 背景属性

4.列表属性

5. 表格属性

五、css元素显示模式

1. 块级元素

2. 行内元素

3. 行内块元素

4. 元素显示模式的转化

六、盒子模型

1. 简介

2.盒子

1. border

2. margin

3. 其他

3.1 边距合并

3.2 盒模型的设置***

3.3 盒子阴影

七、浮动

1. 简介

2. 浮动特性

3. 注意点

4. 清除浮动

4.1 额外标签法

4.2 父级添加overflow

4.3 :after伪元素法

4.4 双伪元素清除浮动

4.4 总结

八、定位

1. 简介

2. 定位方式

2.1 静态定位

2.2 相对定位 relative

2.3 绝对定位 absolute

2.4 子绝父相

2.5 固定定位 fixed

2.6 粘性定位 sticky

3. 定位提升层级

九、其他属性

1. 显示与隐藏

1.1 display 属性

1.2 visibility 可见性

1.3 opcity 透明度

2. overflow

3. outline 轮廓属性

4. cursor 鼠标样式

十、小技巧

1. 图片和文字垂直居中对齐

2. 图片底侧有空白缝隙

3. 单行溢出文字显示省略号

4. 多行文字溢出显示省略号

5. margin负值解决缝隙显示问题

6. 三角制作

7. 去掉表单默认边框

8. 防止拖拽文本域

一、`CSS`简介

1、什么是`CSS`

2、`css`的应用

四、常用`css`属性

五、`css`元素显示模式