Css
概念 ： 层叠样式单
作用： 主要用来美化页面、完成网页的布局设置、完成字体、颜色等标签样式的设置
块元素和行内元素
块元素 ： 单独成一行的标签，将来可以设置宽和高 ，h1-h6 , p , div, 列表，表格
行内元素 ： 标签中的内容，并排显示，不能设置宽和高， a , b, i, span
行内块元素：既有块元素的特点，又有行内元素的特点，并排显示，可以调整宽高 , img ,input
Css的使用
1,行内使用
2，文档内部使用
3，外部引用
h2{
color: #ff00ff;
font-size: 50px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 在head中，加上一对style标签，将样式写在标签中 */
/* 通过选择器可以找到标签，找到标签后，可以添加样式 */
div{
color: blue;
font-size: 40px;
}
h1{
color: #81efff;
}
</style>
<!-- 通过link标签完成css文件的引入 -->
<link rel="stylesheet" href="css/test.css">
</head>
<body>
<!-- css行内的用法，直接在开始标签中，添加style属性 -->
<p style="color: red;font-size: 30px;">这是一段文本内容</p>
<!-- css文档内部使用方式，配合选择器来使用 -->
<div>这是一段文本内容</div>
<h1>这是一个标题</h1>
<!-- css外部引入的使用方式 -->
<h2>这是外部引用改变样式的标签</h2>
</body>
</html>Css的特性
1，层叠
1个html标签可能会有很多个样式，生效的只有一个，可以通过权重值，觉得到低生效的是哪一个
权重值 ： 从0开始计算，
行内样式 + 1000 ，
id选择器 +100，
属性选择器、class选择器、伪类选择器 + 10
标签选择器、伪元素选择器 + 1
!important +1000
2，继承
有些样式，父标签设置之后，内部嵌套的子标签，也能获得样式效果
Css选择器
选择器的作用 ： 就是用来找到html中某个具体的标签，并通过样式属性给这个标签加上指定的样式
写法 ： 选择器 { 样式属性 ： 样式的值 }
简单选择器（根据名称、id、类来选取元素）
CSS 元素选择器
直接以标签名来选择
CSS id 选择器
通过标签指定的id属性值来选择 写法： #id值{ }
CSS 类选择器
通过标签指定的class属性来选择 写法 ： .class值{ }
CSS 通用选择器
* 写法：*{ }
CSS 分组选择器
多个选择器写在一起的写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{ /*标签选择器*/
color: red;
}
#mydiv{ /*id选择器，选择指定id值的*/
color: blue;
}
.myclass{ /*class选择器*/
color: coral;
}
*{ /*选择全部的标签*/
font-size: 50px;
}
#mydiv,.myclass,p{ /*选择多个选择器，并设置样式*/
background-color: darkgray;
}
</style>
</head>
<body>
<div>这是普通的div标签中的内容</div>
<div id="mydiv">这个是div中包含id属性的内容展示</div>
<div class="myclass">这个是div中包含class属性的内容展示</div>
<p>这是p标签的内容</p>
<span>这是span标签内容</span>
</body>
</html>
组合器选择器（根据标签之间的特定关系来选取元素）
后代选择器 (空格)：选择某个标签的后代标签
写法 ： 父标签 后代标签{}
子选择器 (>) : 选择某个标签的子代标签
写法 ： 父标签>子标签
相邻兄弟选择器 (+) ： 选择相邻的标签
写法： 标签a+标签b
兄弟选择器 (~) ： 选择同一个层级的标签
写法 ： 标签a~标签b
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*后代选择器 空格*/
div span{
color: red;
}
/* 子代选择器 */
div>span{
font-size: 30px;
}
/* 相邻兄弟 选择器 + ,找某个标签下面相邻的标签*/
p+span{
background-color: aquamarine;
}
/* 兄弟选择器 ~ */
p.myclass~#mydiv{
background-color: yellow;
}
</style>
</head>
<body>
<div>这是父级div标签1
<p class="myclass">这是div的子标签p2
<span>这是p标签的子类span，div的后代3</span>
</p>
<span>
这个span是div的子标签span4
</span>
<div id="mydiv">
这是外层div的子标签div5
</div>
</div>
</body>
</html>伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
所有 CSS 伪类
| 选择器 | 例子 | 例子描述 |
| a:active | 选择活动的链接。 | |
| input:checked | 选择每个被选中的 <input> 元素。 | |
| input:disabled | 选择每个被禁用的 <input> 元素。 | |
| p:empty | 选择没有子元素的每个 <p> 元素。 | |
| input:enabled | 选择每个已启用的 <input> 元素。 | |
| p:first-child | 选择作为其父的首个子元素的每个 <p> 元素。 | |
| p:first-of-type | 选择作为其父的首个 <p> 元素的每个 <p> 元素。 | |
| input:focus | 选择获得焦点的 <input> 元素。 | |
| a:hover | 选择鼠标悬停其上的链接。 | |
| input:in-range | 选择具有指定范围内的值的 <input> 元素。 | |
| input:invalid | 选择所有具有无效值的 <input> 元素。 | |
| p:lang(it) | 选择每个 lang 属性值以 "it" 开头的 <p> 元素。 | |
| p:last-child | 选择作为其父的最后一个子元素的每个 <p> 元素。 | |
| p:last-of-type | 选择作为其父的最后一个 <p> 元素的每个 <p> 元素。 | |
| a:link | 选择所有未被访问的链接。 | |
| :not(p) | 选择每个非 <p> 元素的元素。 | |
| p:nth-child(2) | 选择作为其父的第二个子元素的每个 <p> 元素。 | |
| p:nth-last-child(2) | 选择作为父的第二个子元素的每个<p>元素，从最后一个子元素计数。 | |
| p:nth-last-of-type(2) | 选择作为父的第二个<p>元素的每个<p>元素，从最后一个子元素计数 | |
| p:nth-of-type(2) | 选择作为其父的第二个 <p> 元素的每个 <p> 元素。 | |
| p:only-of-type | 选择作为其父的唯一 <p> 元素的每个 <p> 元素。 | |
| p:only-child | 选择作为其父的唯一子元素的 <p> 元素。 | |
| input:optional | 选择不带 "required" 属性的 <input> 元素。 | |
| input:out-of-range | 选择值在指定范围之外的 <input> 元素。 | |
| input:read-only | 选择指定了 "readonly" 属性的 <input> 元素。 | |
| input:read-write | 选择不带 "readonly" 属性的 <input> 元素。 | |
| input:required | 选择指定了 "required" 属性的 <input> 元素。 | |
| root | 选择元素的根元素。 | |
| #news:target | 选择当前活动的 #news 元素（单击包含该锚名称的 URL）。 | |
| input:valid | 选择所有具有有效值的 <input> 元素。 | |
| a:visited | 选择所有已访问的链接。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a:link{ /*没访问过的*/
color: red;
}
a:visited{ /*已访问过的*/
color: aqua;
}
a:hover{ /*鼠标滑过内容*/
background-color: orange;
}
a:active{ /*选中某个链接(鼠标按住)*/
color: blue;
}
div:hover+p{
display: none;
}
p::before{
content: "abc";
color: blue;
}
p::selection{
background-color: green;
}
</style>
</head>
<body>
<a id="taobao" href="http://www.taobao.com">淘宝</a>
<a id="jd" href="http://www.jd.com">京东</a>
<a id="baidu" href="http://www.baidu.com">百度</a>
<a id="qq" href="http://www.tecent.com">腾讯</a>
<div>这是div块的内容</div>
<p>这是p标签的内容</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul :first-child{
color: red;
}
ul li:last-child{
color: blue;
}
ul li:nth-child(3){
color: orange;
}
ul li:first-of-type{
font-size: 30px;
}
ul li:last-of-type{
font-size: 40px;
}
ul li:nth-of-type(4){
font-size: 30px;
}
</style>
</head>
<body>
<ul>
<p>这是ul子代p</p>
<li>li标签的第1行内容</li>
<li>li标签的第2行内容</li>
<li>li标签的第3行内容</li>
<li>li标签的第4行内容</li>
<li>li标签的第5行内容</li>
<li>li标签的第6行内容</li>
<li>li标签的第7行内容</li>
<li>li标签的第8行内容</li>
</ul>
</body>
</html>所有 CSS 伪元素
| 选择器 | 例子 | 例子描述 |
| p::after | 在每个 <p> 元素之后插入内容。 | |
| p::before | 在每个 <p> 元素之前插入内容。 | |
| p::first-letter | 选择每个 <p> 元素的首字母。 | |
| p::first-line | 选择每个 <p> 元素的首行。 | |
| p::selection | 选择用户选择的元素部分。 |
属性选择器（根据属性或属性值来选取元素）
所有 CSS 属性选择器
| 选择器 | 例子 | 例子描述 |
| [attribute] | [target] | 选择带有 target 属性的所有元素。 |
| [attribute=value] | [target=_blank] | 选择带有 target="_blank" 属性的所有元素。 |
| [title~=flower] | 选择带有包含 "flower" 一词的 title 属性的所有元素。 | |
| [lang|=en] | 选择带有以 "en" 开头的 lang 属性的所有元素。 | |
| a[href^="https"] | 选择其 href 属性值以 "https" 开头的每个 <a> 元素。 | |
| a[href$=".pdf"] | 选择其 href 属性值以 ".pdf" 结尾的每个 <a> 元素。 | |
| a[href*="w3school"] | 选择其 href 属性值包含子串 "w3school" 的每个 <a> 元素。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a[name]{
color: red;
}
a[class='baidu']{
color: aqua;
}
a[class~=jd]{
color: orange;
}
/*选择值为jd或者以值中以jd为前缀的*/
a[class|=jd]{
background-color: darkgray;
}
a[href^=www]{
color: red;
}
a[href$=cn]{
color: cornflowerblue;
}
a[href*=jd]{
color: salmon;
}
</style>
</head>
<body>
<a name="hello" class="taobao" href="http://www.taobao.com">淘宝</a>
<a class="jd" href="http://www.jd.com">京东</a>
<a class="jd baidu" href="www.baidu.com">百度</a>
<a class="jd-qq baidu" href="http://www.tecent.cn">腾讯</a>
</body>
</html>CSS样式
CSS背景
CSS 背景属性用于定义元素的背景效果
background-color 属性指定元素的背景色
background-image 指定用作元素背景的图像
background-repeat 指定背景图片后，可以设置背景图片是否重复
background-attachment 指定背景图像是应该滚动还是固定的
background-position 设置背景图像的起始位置。
background-size 规定背景图像的尺寸。
background 在一条声明中设置所有背景属性的简写属性。
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inher
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
background-color 属性指定元素的背景色
background-image 指定用作元素背景的图像
background-repeat 指定背景图片后，可以设置背景图片是否重复
background-attachment 指定背景图像是应该滚动还是固定的
background-position 设置背景图像的起始位置。
background-size 规定背景图像的尺寸。
background 在一条声明中设置所有背景属性的简写属性。
*/
div.div1{
width: 200px;
height: 200px;
/* background-color: rgba(100, 100, 100,0.5); */
/* background-image: url(img/2.jpg); */
/* background-size: 100px 100px; */
/* background-repeat: no-repeat; */
/* background-attachment: scroll; */
/* background-position: center; */
background: red;
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>CSS 字体属性
font 简写属性。在一条声明中设置所有字体属性。
font: font-style font-variant font-weight fontsize/line-height font-family
font-family 规定文本的字体系列（字体族）。
font-size 规定文本的字体大小。
font-style 规定文本的字体样式。
font-variant 规定是否以小型大写字母的字体显示文本。
font-weight 规定字体的粗细。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 字体 */
div{
color: red;
font-size: 30px;
font-weight: 900;
font-family: "宋体";
font-style: italic;
font-variant: small-caps;
}
</style>
</head>
<body>
<div>内容wenben</div>
</body>
</html>CSS 文本属性
direction 指定文本的方向 / 书写方向。
etter-spacing 设置字符间距。
line-height 设置行高。
text-align 指定文本的水平对齐方式。
text-decoration 指定添加到文本的装饰效果。
text-indent 指定文本块中首行的缩进。
text-shadow 指定添加到文本的阴影效果。
text-transform 控制文本的大小写。
text-overflow 指定应如何向用户示意未显示的 溢出内容。
vertical-align 指定文本的垂直对齐方式。
white-space 指定如何处理元素内的空白。
word-spacing 设置单词间距。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
direction 指定文本的方向 / 书写方向。
letter-spacing 设置字符间距。
line-height 设置行高。
text-align 指定文本的水平对齐方式。
text-decoration 指定添加到文本的装饰效果。
text-indent 指定文本块中首行的缩进。
text-shadow 指定添加到文本的阴影效果。
text-transform 控制文本的大小写。
text-overflow 指定应如何向用户示意未显示的溢出内容。
vertical-align 指定文本的垂直对齐方式。
white-space 指定如何处理元素内的空白。
word-spacing 设置单词间距。
*/
div{
width: 200px;
height: 200px;
background: #b0ccff;
/* direction: rtl; */
/* letter-spacing: 5px; */
/* line-height: 60px; */
/* text-align: center; */
/* text-decoration: none; */
text-indent: 30px;
/* text-shadow: 5px 5px 5px rgba(10, 20, 30, 0.5); */
text-transform: uppercase;
/* 这是文本超出的省略号效果，三个一起用 */
text-overflow: ellipsis;/*设置文本超出范围省略号效果*/
overflow: hidden; /*块内容溢出的处理*/
white-space: nowrap; /*设置内容是否换行*/
}
p{
width: 200px;
height: 50px;
background: orange;
text-align: center;
/*line-height: 50px; /*单行文本上下居中*/
vertical-align: middle;
}
a{
text-decoration: none;
color: black;
}
a:hover{
color: blue;
text-decoration: underline;
}
img{
vertical-align: middle;
}
</style>
</head>
<body>
<div>
Abcd EFG文本内容文本内容文本内容文本内容文本内容文本内容
</div>
<p>
文本内容<img width="50px" src="img/2.jpg" alt="">文本内容
</p>
<a href="">链接到指定地址</a>
</body>
</html>CSS 列表属性
list-style 简写属性。在一条声明中设置列表的所有属 性。
list-style-image 指定图像作为列表项标记。
list-style-position 规定列表项标记（项目符号）的 位置。
list-style-type 规定列表项标记的类型。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul{
/* list-style-image:url(img/123.png); */
/* list-style-position: outside; */
/* list-style-type: none; */
list-style: none;
}
li{
background-color: aquamarine;
}
</style>
</head>
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</body>
</html>CSS 表格属性
border 简写属性。在一条声明中设置所有边框属 性。
border-collapse 规定是否应折叠表格边框。
border-spacing 规定相邻单元格之间的边框的距 离。
caption-side 规定表格标题的位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul{
/* list-style-image:url(img/1.png) ; */
/* list-style-position: outside; */
list-style-type: none;
}
li{
background: lavenderblush;
}
table,td{
width: 200px;
height: 30px;
border: 1px solid #00ffff;
border-collapse: collapse;
/* empty-cells: hide; */
}
td{
}
/* tr:nth-child(odd){
background-color: aliceblue;
} */
tr{
border-bottom:1px solid #00ffff ;
}
tr:hover{
color: #00ffff;
background: lavenderblush;
}
</style>
</head>
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
<table>
<tr>
<td>列1</td>
<td>列1</td>
<td>列1</td>
</tr>
<tr>
<td>列1</td>
<td>列1</td>
<td>列1</td>
</tr>
<tr>
<td>列1</td>
<td>列1</td>
<td>列1</td>
</tr>
</table>
</body>
</html>CSS 布局1
display 属性
display属性的值
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带 有换行符。
inline 默认。此元素会被显示为行内元素，元素前 后没有换行符。
inline-block 行内块元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* display:block,none,inline,inline-block; */
div.mydiv{
width: 150px;
height: 100px;
background-color: aquamarine;
display :inline-block ;
float: right;
}
span{
width: 150px;
height: 100px;
background-color: antiquewhite;
display:block;
float: left;
}
.clearboth::after{
/* 清除浮动 （固定写法）*/
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="clearboth">
<div class="mydiv">
asd
</div>
<span>
asd
</span>
<span>
asd
</span>
</div>
<a href="">链接</a>
<p>文本内容</p>
</body>
</html>CSS 布局 - 浮动和清除
CSS float 属性规定元素如何浮动。
float 属性可以设置以下值之一：
left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动（将显示在文本中刚出现的 位置）。默认值。
inherit - 元素继承其父级的 float 值
CSS clear 属性规定哪些元素可以在清除的元素旁边以及在 哪一侧浮动。
none - 允许两侧都有浮动元素。默认值
left - 左侧不允许浮动元素
right- 右侧不允许浮动元素
both - 左侧或右侧均不允许浮动元素
inherit - 元素继承其父级的 clear 值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div.mydiv{
width: 100px;
height: 100px;
background-color: aqua;
display: inline-block;
float: right;
}
span{
width: 100px;
height: 100px;
background-color: red;
display: block;
float: left;
}
.clearboth::after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="clearboth">
<div class="mydiv">
abc
</div>
<span>
abc
</span>
<span>
xyz
</span>
</div>
<a href="">链接标签</a>
<p>文本内容</p>
</boby>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul{
width: 90%;
height:50px;
background-color: orange;
}
li{
list-style: none;
float: left;
height: 50px;
line-height: 50px;
width: 147px;
text-align: center;
/* background-color: orangered; */
color: #fff;
font-weight: 900;
font-size: 16px;
}
li:hover{
background-color: orangered;
}
</style>
</head>
<body>
<ul>
<li>主体导航</li>
<li>9.9包邮</li>
<li>好货让利榜</li>
<li>大额优惠券</li>
<li>母婴榜</li>
<li>品牌尖货</li>
<li>特惠宝贝</li>
<li>潮流范</li>
<li>有好货</li>
</ul>
</boby>
</html>CSS中隐藏元素属性
display 指定应如何显示元素。
none ： 隐藏
block ：显示
visibility 指定元素是否应该可见。
visible ： 显示
hidden ：隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div1{
width: 150px;
height: 120px;
background-color: antiquewhite;
/* 隐藏的两种方法 */
/* display: none; */
visibility: hidden;
}
.div2{
width: 150px;
height: 120px;
background-color: lightblue;
}
.div2:hover~.div1{
/* 控制隐藏 */
visibility: visible;
}
</style>
</head>
<body>
<div class="div2"></div>
<div class="div1"></div>
<p>文本</p>
</body>
</html>CSS盒子模
CSS 边框属
CSS border 属性允许您指定元素边框的样式、宽度和颜色
常用的属性：
border 简写属性，在一条声明中设置所有边框属 性。
border-color 简写属性，设置四条边框的颜色。
border-radius 简写属性，可设置圆角的所有四个 border-radius 属性。
border-style 简写属性，设置四条边框的样式。
border-width 简写属性，设置四条边框的宽度。
border-bottom 简写属性，在一条声明中设置所 有下边框属性。
border-bottom-color 设置下边框的颜色。
border-bottom-style 设置下边框的样式。
border-bottom-width 设置下边框的宽度。
border-left 简写属性，在一条声明中设置所有左边 框属性。
border-left-color 设置左边框的颜色。
border-left-style 设置左边框的样式。
border-left-width 设置左边框的宽度。
border-right 简写属性，在一条声明中设置所有右边 框属性。
border-right-color 设置右边框的颜色。
border-right-style 设置右边框的样式。
border-right-width 设置右边框的宽度。
border-top 简写属性，在一条声明中设置所有上边 框属性。
border-top-color 设置上边框的颜色。
border-top-style 设置上边框的样式。
border-top-width 设置上边框的宽度。
CSS 外边距
CSS margin 属性用于在任何定义的边框之外，为元素周围 创建空间。
通过 CSS，您可以完全控制外边距。有一些属性可用于设置 元素每侧（上、右、下和左）的外边距。
margin 简写属性。在一个声明中设置所有外边距属 性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。
CSS 内边距
CSS padding 属性用于在任何定义的边界内的元素内容周围生成 空间。
通过 CSS，您可以完全控制内边距（填充）。有一些属性可以为 元素的每一侧（上、右、下和左侧）设置内边距。
padding 用于在一条声明中设置所有内边距属性的简 写属性。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 100px;
background-color: aquamarine;
border: 1px solid red;
/* border-top: 10px solid blue; */
/* border-bottom: 10px solid orange; */
/* border-radius: 100px; */
/* border-top-left-radius: 200px; */
/* border-top-right-radius: 200px; */
border-radius: 20px 40px;
border-radius: 20px 40px 60px;
border-radius: 20px 40px 60px 80px;
border-radius: 10px;
/* 外边距 */
/* margin: 30px; */
/* margin: 30px 60px; */
/* margin: 30px 60px 90px; */
/* margin: 30px 60px 90px 120px; */
/* margin-top: 50px;
margin-left: 30px; */
/* 通过margin让块居中 */
margin: 20px auto;
/* 内边距 */
/* 默认是将内边距大小算入块的整个大小的 */
padding: 50px;
padding: 50px 80px;
}
P{
background-color:skyblue;
}</stylE>
</head>
<boby>
<div>
文本
</div>
<div>
问内容
</div>
<p>文本内容</p>
</boby>
</html>练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
float: left;
width: 60px;
height: 30px;
/* background-color: orange; */
margin: 5px;
border-radius: 20px;
text-align: center;
/* 文本居中的居中 */
line-height: 30px;
color: aliceblue;
font-size: 10px;
}
.div_color1{
background-color: orangered;
font-weight: bold;
}
.div_color2{
background-color: orange;
font-weight: bold;
}
.div_color3{
background-color: aliceblue;
color: red;
border: 1px solid red;
font-weight: bold;
}
</style>
</head>
<body>
<div class="div_color1">登录</div>
<div class="div_color2">注册</div>
<div class="div_color3">开店</div>
</body>
</html>CSS 尺寸属性
height 设置元素的高度。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。 width 设置元素的宽度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
min-height: 200px;
background-color: aquamarine;
}
p{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>CSS 轮廓
轮廓是在元素周围绘制的一条线，在边框之外，以凸显元 素。
outline 简写属性，在一条声明中设置 outline-width、outline-style 以及 outline-color。
outline-color 设置轮廓的颜色。
outline-offset 指定轮廓与元素的边缘或边框之间的空 间。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 50px;
background-color: skyblue;
border: 2px solid red;
outline: 5px solid blue;
/* outline-offset: 10px; */
margin-bottom: 20px;
}
input{
outline: none;
/* border: none; */
}
</style>
</head>
<body>
<div></div>
<input type="text">
</body>
</html>练习搜索框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div1{
/* box-sizing: border-box; */
width:600px;
height: 40px;
border: 2px solid orangered;
padding: 2px;
border-radius: 40px;
}
p{
float: left;
height: 40px;
margin-left: 20px;
line-height: 40px;
margin-top: 0;
margin-bottom: 0;
}
.div2{
float: left;
margin: 20px 6px 0;
width: 0;
height: 0;
border-width: 5px;
/* 边框样式:直线 */
border-style: solid;
/* 边框透明:transperent */
border-color:#bababa transparent transparent transparent;
}
input{
border: none;
outline: none;
height: 25px;
width: 400px;
border-left:1px solid #dfdfdf ;
padding-left: 10px;
margin-top: 7px;
}
button{
float: right;
height: 40px;
width: 80px;
border-radius: 40px;
border: none;
background-color: orange;
color: #fff;
font-size: 20px;
font-weight: 800;
font-family: "宋体";
}
</style>
</head>
<body>
<div class="div1">
<p>宝贝</p>
<div class="div2"></div>
<input type="text" placeholder="行李箱">
<button>搜索</button>
</div>
</body>
</html>CSS Box Sizing 标准盒子模型
box-sizing属性，用来设置盒子模型计算宽高的实际方式
值：
content-box 根据设置宽高值 + 内边距 + 边框 ，完成最 终的宽高的显示
这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
border-box 根据实际设置的宽高，显示宽高
为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定 的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能 得到内容的宽度和高度。
inherit 规定应从父元素继承 box-sizing 属性的值。
CSS 布局2 - position 属性
css中的布局方式 ：
1，文档流 ： 默认情况，从上到下依次布局，块级 元素独占一行，行内并排显示，直到遇到边界自动换 行，如果有浮动，满足浮动后，其他的代码仍然见缝插 针
2，定位 ：按照用户自己的需要，给元素定位到指 定位置
position 属性常用的值
static
HTML 元素默认情况下的定位方式为 static（静 态）。
静态定位的元素不受 top、bottom、left 和 right 属性的影响。
relative
元素相对于其正常位置进行定位。
设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。
fixed
元素是相对于视口定位的，这意味着即使滚动页 面，它也始终位于同一位置。 top、right、bottom和 left 属性用于定位此元素。
absolute
元素相对于最近的定位祖先元素进行定位（而不是 相对于视口定位，如 fixed）。然而，如果绝对定位的 元素没有祖先，它将使用文档主体（body），并随页 面滚动一起移动
sticky
元素根据用户的滚动位置进行定位。 粘性元素根据滚动位置在相对（relative）和固定 （fixed）之间切换。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 2000px;
padding-top: 100px;
background-color: aquamarine;
/* position: relative; */
/* top: 50px; */
/* left: 50px; */
}
p{
width: 100px;
height: 100px;
background-color: red;
/* position: relative; */
/* position: fixed; */
/* position: absolute; */
/* top: 50px; */
/* left: 50px; */
position: sticky;
top: 20px;
z-index: 10;
}
h1{
width: 100px;
height: 100px;
background-color: blue;
/* position: relative; */
position: absolute;
top: 50px;
left: 50px;
z-index:100;
}
</style>
</head>
<boby>
<div>
<p></p>
<h1></h1>
</div>
</boby>
</html>z-index 属性指定定位元素的显示顺序
CSS 布局 - 溢出overflow
overflow 属性控制子元素太大而父元素无法容纳的内容的 处理方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: aquamarine;
overflow: auto;
/* overflow: hidden; */
/* overflow: scroll; */
/* overflow: visible; */
}
</style>
</head>
<body>
<div>
文本内容
文本内容
文本内容
文本内容
文本内容
文本内容
文本内容
文本内容
</div>
</body>
</html>Flex布局
参考网址
https://www.cnblogs.com/dreamperson/p/9367008.html
容器和项目的概念
采用Flex布局的元素，称为Flex容器（flex container），简 称“容器”。它的所有子元素自动成为容器成员，成为flex 项目（flex item），简称“项目”。
容器常用的属性
flex-direction 属性决定主轴的方向（即项目的排列方 向）
取值：flex-direction:row | row-reverse | column | column-reverse;
它可能有四个值
row（默认值）：主轴为水平方向，起点在左端
row-reverse:主轴为水平方向，起点在右端
column:主轴为垂直方向，起点在上沿
column-reverse:主轴为垂直方向，起点在下沿
lex-wrap 属性定义，如果一条轴线 排不下，如何换行
它可能去三个值。 （
1）nowrap（默认）：不换行
（2）wrap:换行，第一行在上方
（3）wrap-reverse:换行，在第一行的下方
flex-flow
flex-direction属性和flex-wrap属性的简写形式， 默认 row nowrap
justify-content 属性定义了项目在主轴上的对齐方式
它可能取5个值，具体对齐方式与轴的方向有关。
flex-start（默认值）：左对齐
flex-end：右对齐 center：居中
space-between:两端对齐，项目之间的间隔都相 等
space-around：每个项目两侧的间隔相等。所 以，项目之间的间隔比项目与边框的间隔大一倍。
align-items 属性定义项目在交叉轴上如何对齐
它可能取5个值。具体的对齐方式与交叉轴的方向 有关，下面假设交叉轴从上之下。
flex-start：交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center：交叉轴的中点对齐
baseline：项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为
align-content 属性定义了多根轴线的对齐方式。如果项 目只有一根轴线，该属性不起作用
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔 平均分布。
space-around：每根轴线两侧的间隔都相等。所以， 轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
项目的属性
6个属性设置在项目上。
order 属性定义项目的排列顺序。数值越小，排列越靠前， 默认为0
flex-grow 属性定义项目的放大比例，默认值为0，即如果 存在剩余空间，也不放大
flex-shrink 属性定义了项目的缩小比例，默认为1，即如果 空间不足，改项目将缩小。 flex-basis 属性定义了在分配多余空间之前，项目占据的主 轴空间
flex 属性是flex-grow，flex-shrink和flex-basis的简 写，默认值为0 1 auto
align-self 属性允许单个项目有与其他项目不一样的对齐方 式，可覆盖align-items属性。默认值为auto，表示继承父 元素的align-items属性，如果没有父元素，等同于 stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.mydiv{
width: 800px;
height: 500px;
background-color: bisque;
border: 1px solid red;
/* 浮动 */
display: flex;
/* 平均分布 (space-around) (space-between)*/
/* justify-content: space-between; */
/* 调整方向 */
/* flex-direction: row; */
/* flex-direction: row-reverse;/* 反转 */ */
/* flex-direction: column; /* 列 */ */
/* flex-direction: column-reverse; /* 列反转 */ */
/* 换行 */
/* flex-wrap:wrap; */
/* flex-wrap: wrap-reverse; */
/* flex-wrap: nowrap; */
/* flex-wrap:row-reverse wrap; */
/* justify-content:flex-start; /* 左边 */ */
/* justify-content: flex-end; /* 右边 */ */
/* justify-content:center; /* 中间 */ */
/* justify-content:space-around; /* 平分 */ */
/* justify-content:space-between; */
/* align-items:flex-start; /* 上边 */ */
/* align-items:flex-end; /* 下边 */ */
/* align-items:center; /* 中间 */ */
/* align-items:baseline; /* 上边 */ */
/* align-items:stretch; */
/* align-content:flex-start; */
/* align-content: flex-end; */
/* align-content: center; */
/* align-content: space-around; */
/* align-content: space-between; */
/* align-content: stretch; */
}
div{
width: 100px;
height: 100px;
}
.div1{
/* order: 1; */
/* flex-grow: 1; */
/* flex-shrink: 2; */
}
.div2{
/* order: 3; */
/* flex-grow: 2; */
/* flex-shrink: 5; */
}
.div3{
/* order: 5; */
/* flex-grow: 3; */
flex-basis: 300px;
/* align-self: flex-start; */
}
.div4{
/* order: 4; */
}
.div5{
/* order: 2; */
}
</style>
</head>
<body>
<div class="mydiv">
<div style="background: red;" class="div1">1</div>
<div style="background: orange;" class="div2">2</div>
<div style="background: blueviolet;" class="div3">3</div>
<div style="background: darkcyan;" class="duv4">4</div>
<div style="background: salmon;" class="div5">5</div>
</div>
</body>
</html>CSS box-shadow 属性
Zbox-shadow: h-shadow v-shadow blur spread color inset;
CSS渐变
CSS 定义了两种渐变类型：
线性渐变（向下/向上/向左/向右/对角线）
径向渐变（由其中心定义）
线性渐变
语法
background-image: linear-gradient(direction, colorstop1, color-stop2, ...);
线性渐变 - 从上到下（默认）background-image: lineargradient(red, yellow);
线性渐变 - 从左到右 background-image: lineargradient(to right, red , yellow);
线性渐变 - 对角线 background-image: linear-gradient(to bottom right, red, yellow);
使用角度 background-image: linear-gradient(angle, color-stop1, color-stop2); background-image: linear-gradient(-90deg, red, yellow);
使用多个色标 background-image: lineargradient(red, yellow, green);
使用透明度 background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
重复线性渐变 background-image: repeating-lineargradient(red, yellow 10%, green 20%);
CSS 径向渐变
径向渐变由其中心定义。
语法
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
默认地，shape 为椭圆形，size 为最远角，position 为中 心。
径向渐变-均匀间隔的色标（默认）
background-image: radial-gradient(red, yellow, green);
径向渐变-不同间距的色标
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
设置形状
shape 参数定义形状。它可接受 circle 或 ellipse 值。 默认值为 ellipse（椭圆）
background-image: radial-gradient(circle, red, yellow, green)
Css变形动画
CSS 2D、3D 转换
CSS 转换（transforms）允许您移动、旋转、缩放和倾斜 元素。
常见的值
none 定义不进行转换。 测试
translate(x,y) 定义 2D 转换。测试
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。 测试
translateY(y) 定义转换，只是用 Y 轴的值。
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。 测试
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。 测试
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。 测试
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转，在参数中规定角度。 测试
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。 测试
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。 测试
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。 测试
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转 换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: antiquewhite;
/* 2D */
/* transform: translate(10px,20px); */
/* transform: translateX(30px); */
/* transform: translateY(40px); */
/* 3D */
/* transform: translate3d(30px,40px,50px); */
/* 缩放 */
/* transform: scale(1.0,0.5); */
/* transform: scaleX(1.8); */
/* transform: scaleY(1.2); */
/* 旋转 */
/* transform: rotate(45deg); */
/* transform: rotateX(45deg); */
transform: rotateY(45deg);
transform: rotateZ(45deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>CSS 过渡
CSS 过渡允许您在给定的时间内平滑地改变属性值。 transition 简写属性，用于将四个过渡属性设置为单一属 性。
transition-delay 规定过渡效果的延迟（以秒计）。
transition-delay: time;
transition-duration 规定过渡效果要持续多少秒。
transition-duration: time;
transition-property 规定过渡效果所针对的 CSS 属性的名 称。
none 没有属性会获得过渡效果。
all 所有属性都将获得过渡效果。
property 定义应用过渡效果的 CSS 属性名称列表，列 表以逗号分隔。
transition-timing-function 规定过渡效果的速度曲线。
- linear 规定以相同速度开始至结束的过渡效果（等 于 cubic-bezier(0,0,1,1)）。
- ease 规定慢速开始，然后变快，然后慢速结束的过渡 效果（cubic-bezier(0.25,0.1,0.25,1)）。
- ease-in 规定以慢速开始的过渡效果（等于 cubicbezier(0.42,0,1,1)）。
- ease-out 规定以慢速结束的过渡效果（等于 cubicbezier(0,0,0.58,1)）。
- ease-in-out 规定以慢速开始和结束的过渡效果（等 于 cubic-bezier(0.42,0,0.58,1)）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: aqua;
}
div:hover{
transition-property:all;
transform: translate(50px,60px) rotate(45deg) scale(1.5);
background: aquamarine;
transition-delay: 1s;
transition-duration: 4s;
/* 慢-->快 */
transition-timing-function: ease;
/* 均速 */
/* transition-timing-function: linear; */
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>CSS 动画
CSS 可实现 HTML 元素的动画效果
如需使用 CSS 动画，您必须首先为动画指定一些关键帧。
关键帧包含元素在特定时间所拥有的样式。
关键帧：
@keyframes 规则
如果您在 @keyframes 规则中指定了 CSS 样式，动画将在 特定时间逐渐从当前样式更改为新样式。
要使动画生效，必须将动画绑定到某个元素。
语法1：
@keyframes 动画名称 {
from {background-color: red;}
to {background-color: yellow;} }
语法2：
/* 动画代码 */
@keyframes 动画名 {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;} }
动画属性：
animation 设置所有动画属性的简写属性。
animation-delay 规定动画开始的延迟。
animation-direction 定动画是向前播放、向后播放还 是交替播放。
animation-duration 规定动画完成一个周期应花费的 时间。
animation-fill-mode 规定元素在不播放动画时的样式 （在开始前、结束后，或两者同时）。
animation-iteration-count 规定动画应播放的次数。
animation-name 规定 @keyframes 动画的名称。
animation-play-state 规定动画是运行还是暂停。
animation-timing-function 规定动画的速度曲线。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 先定义关键帧 */
@keyframes animatetest{
0%{background: #93daff; transform:translate(0px,0px) rotateZ(0deg);}
/*25%{background: #ee8eff; transform: rotateZ(360deg); left: 200px;top:0;}
50%{background: #a4ff79; transform: rotateZ(720deg); top: 200px;left:200px;}
75%{background: #ffd1aa; transform: rotateZ(360deg);left: 0;top:200px;}
100%{background: #93daff; transform: rotateZ(0deg); top: 0;left: 0;}*/
25%{background: #ee8eff; transform:translate(200px,0px) rotateZ(360deg);}
50%{background: #a4ff79; transform:translate(200px,200px) rotateZ(720deg);}
75%{background: #ffd1aa; transform:translate(0px,200px) rotateZ(360deg);}
100%{background: #93daff; transform:translate(0px,0px) rotateZ(0deg);}
}
div{
width: 100px;
height: 100px;
background: #93daff;
animation-name: animatetest;
animation-delay:1s;
animation-duration:5s;
animation-iteration-count:infinite;
animation-timing-function: ease;
animation-direction:alternate;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
扫一扫
541
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
