标签：23 color 08 元素 day33 height width background 200px
目录CSS三大特性
1、层叠性
一个标签可以有多个CSS样式
浏览器处理冲突的能力，如果一个属性通过两个相同的选择器设置到这个元素上，样式的层叠规则
按照样式的声明顺序来层叠，就近原则，样式不冲突，不会层叠
前提：选择器必须是同一种
2、继承性
子标签会继承父标签的某些样式
3、优先级
权重
继承的权重0-------最低
行内样式100
权重相同，就近原则
!important命令 无限大
css权重公式：贡献值
继承、*----0,0,0,0
标签选择器----0,0,0,1
类、伪类选择器----0,0,1,0
ID选择器----0,1,0,0
行内样式----1,0,0,0
!important----无穷大
width,height,max-width,max-height,min-width,max-height----大于无穷大
权重不能被继承
贡献值不能进位
常用单位
px(像素)：最常用
em：绝对单位，比如说父级的字号16px,我们可以设置成2em
rem：由整个html的字号决定。当浏览器的字号发生改变，页面的字号会随之改变
百分比：相对父元素的比例
字体
/* 字体大小 */
font-size: 20px;
/* 字体样式 */
font-style: italic;
/* 字体粗细 */
font-weight: normal;
/* 字体修饰 */
text-decoration: underline;
/* 字体 */
font-family: monospace;
/* 复合属性 */
font: 30px italic bold;
背景
/* 背景颜色 */
background-color: rgb(25, 55, 77);
width: 200px;
height: 200px;
/* 背景图片 */
background-image: url(地址);
/* 背景图片大小 */
background-size: 200px;
/* 背景图片位置 */
background-position: center;
/* 指定如何重复背景图像 */
background-repeat: no-repeat;
列表属性
div ul li {
/* list-style-type 属性设置列表项标记的类型 */
list-style-type: decimal;
list-style-position: outside;
/* list-style-image: url(img/libai.jpeg); */
}
盒子模型
* {
/* *号选择器初始化 */
/* 初始化浏览器默认的内外边距 */
margin: 0px;
padding: 0px;
}
div {
width: 300px;
height: 300px;
background-color: orange;
/* 外边距 */
margin-top: 100px;
margin-left: 100px;
border: 10px solid red;
/* 内边距 */
padding: 20px;
/* boder-box：保证盒子的大小是300*300，外边距不包括 */
box-sizing: border-box;
/* content-box：保证当前div的尺寸是300*300，不包括内边距和边框线 */
/* box-sizing: content-box; */
}
display的inline、block、inline-block的区别
display:block就是将元素显示为块级元素----->独占一行，高度，行高以及顶和底边距都可控制；
display:inline就是将元素显示为行内元素----->和其他元素都在一行上，高，行高及顶和底>边距不可改变，宽度就是它的文字或图片的宽度，不可改变----->
display：inline-block 行内块元素----->和其他元素都在一行上，高度，行高以及顶和底边距都可控制
文档流
在网页中将窗体自上而下分成好多行，并在每行从左到右的顺序排列元素，即为文档流（网页默>认的布局方式）
定位
static：文档流，默认的
absolute：绝对定位------>相对于一个父元素的绝对定位，当设置了绝对定位之后，原来的元素会脱离文档流，在页面上浮起来
relative：相对定位------>相对于上一个元素的位置
fixed：固定定位
当设置了定位之后，原来的元素会脱离文档流，在页面上浮起来
子绝父相
子元素绝对定位
父元素相对定位
点击查看代码
<!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;
}
.div1 {
width: 300px;
height: 300px;
background-color: orange;
position: absolute;
left: 150px;
top: 50px;
}
.div2 {
width: 200px;
height: 200px;
background-color: skyblue;
/* 绝对定位 */
position: absolute;
/* 坐标 */
left: 150px;
top: 400px;
}
.container {
width: 600px;
height: 800px;
background-color: pink;
position: relative;
top: 100px;
left: 200px;
}
.nav {
width: 100%;
height: 100px;
background-color: red;
/* 水平居中 */
margin: auto;
position: fixed;
/* z轴的索引 */
z-index: 1;
}
</style>
</head>
<body>
<div class="nav">我是导航栏</div>
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
</div>
</body>
</html>
定位的left和top、right和bottom和margin-left.....的区别
定位的left等是相对于父元素的位置，margin是相对于自己的初始位置，margin是盒子模型的属性
在开发中，尽量统一使用
visibility: hidden---->使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”
浮动
float: left;向左浮动
float: right;向右浮动
可见性
display: none---->使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值
visibility: hidden---->使用该属性后，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>
.div1 {
/* 引用自定义动画，延迟时间 */
animation: myAnim 5s;
}
/* 先声明动画，再使用 */
@keyframes myAnim {
0% {
width: 100px;
height: 100px;
background-color: orange;
}
25%{
width: 200px;
height: 200px;
background-color: blue;
}
50% {
width: 400px;
height: 400px;
background-color: red;transform: rotate(45deg);
}
75% {
width: 200px;
height: 200px;
background-color: blue;transform: rotateZ(180deg);
}
100% {
width: 100px;
height: 100px;
background-color: orange;transform: rotate3d(270deg);
}
}
</style>
</head>
<body>
<div class="div1">123</div>
</body>
</html>
transition和animation区别
transition是一个过渡的效果，没有中间状态，需要设置触发事件（如hover等）才能执行；
animation是一个动画的效果，有多个中间帧，可以在任意一个中间帧设置状态，不需要设置触发事件就能执行。
作业
点击查看代码
<!DOCTYPE html>
<html lang="zh-CN">
<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: 50px;
height: 307px;
overflow: hidden;
display: inline-block;
}
div:hover {
width: 410px;
overflow: visible;
}
</style>
</head>
<body>
<div>
<img src="./1.jpg">
</div>
<div>
<img src="./1.jpg">
</div>
<div>
<img src="./1.jpg">
</div>
<div>
<img src="./1.jpg">
</div>
</body>
</html>
标签：23,color,08,元素,day33,height,width,background,200px 来源： https://www.cnblogs.com/wmh19990109/p/16633441.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。