1. 选择器优先级进阶
<div id=”item” class=”box”>
<p></p>
</div>
#item p{}
.box p{}
id 100
class 10
标签选择器 1
行间优先级是 1000
计算方式 : 让每一个选择器对应的值相加 谁的值大谁的优先级高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.优先级</title>
<style type="text/css">
*{margin: 0;padding: 0;}
/*设置1.优先级,这三个比较,101 21 110,第三个大*/
/*设置2.优先级,与行间优先级1000比,均小*/
#box p {
color: green;
}
.wrap .item p{
color: red;
}
#el .item p{
color: gold;
}
</style>
</head>
<body>
<div class="wrap" id="el">
<div class="item" id="box">
<p >1.优先级</p>
<p style="color: blue">2.优先级</p>
</div>
</div>
</body>
</html>
2. 文本属性
text-indent: 设置首行缩进
text-align: 文本的水平对其方式
text-decoration: 设置下划线
line-height: 行高
设置行于行之间的间距
一般用于单行文本的垂直居中
vertical-align:设置垂直对齐方式,一般用于有图片的时候
默认的时候:图片和文字底边对齐
文字在图片的中间,就需要这个属性,需要在img里面去设置vertical-align:middle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本属性</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.item{
width: 400px;
height: 400px;
border:1px solid red;
/*一个字符默认16px*/
/*设置首行缩进*/
text-indent: 32px;
/*设置居中显示*/
text-align: center;
/*设置行高*/
line-height: 30px;
}
.item1{
width: 400px;
height: 400px;
border:1px solid red;
/*文本水平对其方式 一般用于单行文本*/
text-align: center;
/*添加下划线*/
/*text-decoration:underline;*/
/*上划线*/
/*text-decoration: overline;*/
/*中划线*/
text-decoration: line-through;
/*设置垂直居中*/
line-height: 400px;
}
a{
/*去除下划线*/
text-decoration:none;
}
.item2 img{
/*默认是和下面对齐*/
/*让图片和文本的中间对其*/
/*vertical-align:middle;*/
/*vertical-align:top;*/
}
</style>
</head>
<body>
<div class="item">
<span>帝高阳之苗裔兮,朕皇考曰伯庸。</span>
摄提贞于孟陬兮,惟庚寅吾以降。
皇览揆余初度兮,肇锡余以嘉名:
名余曰正则兮,字余曰灵均。
纷吾既有此内美兮,又重之以修能。
扈江离与辟芷兮,纫秋兰以为佩。
汩余若将不及兮,恐年岁之不吾与。
朝搴阰之木兰兮,夕揽洲之宿莽。
日月忽其不淹兮,春与秋其代序。
</div>
<div class="item1">
帝高阳之苗裔兮
</div>
<a href="http://www.baidu.com">百度</a>
<div class="item2">
摄提贞于孟陬兮,惟庚寅吾以降。<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2491562693,485434067&fm=26&gp=0.jpg" alt="">
</div>
</body>
</html>
3. 布局属性
块元素: 独占一行 宽度默认是父元素的100% 默认高度由内容决定
支持所有的样式
就算设置了宽度也会独占一行
行内元素:不会独占一行 元素排在一行显示
默认宽度是0 高度由内容决定
不支持宽高属性和margin的上下属性
行内块: 不会独占一行 支持所有的样式 默认宽度0 默认高度由内容决定
display: 规定元素以哪种元素类型显示
none 隐藏
block 以块元素显示
inline-block 以行内快元素显示 此属性已经被废弃 但是还能用
inline: 以行内元素显示
一般情况下 我们都是将行内元素转变成块元素或者行内块,不会将块元 素转成行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素类型</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.wrap{
width: 500px;
height: 500px;
border:1px solid red;
}
.inner{
width: 200px;
height:200px;
background-color: pink;
/*将div以行内元素显示*/
/*display:inline;*/
/*将div转换成 行内块*/
display: inline-block;
}
span{
width: 200px;
height: 200px;
background-color: red;
/*margin只对左右起作用*/
margin: 20px;
padding:40px;
/*将span转成块*/
/*display: block;*/
display: inline-block;
}
img{
width: 80px;
margin: 20px;
padding:20px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">1</div>
<span>2</span>
<span>3</span>
<img src="./0.jpg" alt="">
<span>4</span>
</div>
</body>
</html>
overflow:
Visible: 默认值
hidden: 超出部分隐藏
Scroll: 添加滚动条
Auto: 自检测并添加滚动条
清除当前元素内部对外部元素的影响,理解:因为如果图片太大,就会超过这个范围,影响外面的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.item{
width: 100px;
height: 100px;
border:1px solid red;
/*超出部分隐藏*/
/*overflow:hidden;*/
/*添加滚动条*/
/*overflow:scroll;*/
/*自动检测内容是否超出 如果超出自动添加滚动条*/
overflow:auto;
}
</style>
</head>
<body>
<div class="item">
<img src="./0.jpg" alt="">
</div>
overflow
</body>
</html>
4. 浮动
float:
left
right
文档流:元素以从上到下,从左向右的排列方式 这种排列规则就是文档流
A. 浮动会脱离文档流 会将后面没有浮动的元素覆盖
浮动不会覆盖文字
B. 浮动只有两个方向,左浮动或者右浮动
C. 当浮动元素碰到父元素的边界时会停止浮动,碰到前面有浮动元素也会停止浮动,并排在一排显示 如果浮动元素的宽度超过父元素的宽度 会自动换行
D. 如果前面有未浮动的元素 会另起一行进行浮动
浮动遇到的问题:当父元素没有设置固定高度时,子元素全部浮动,会导致父元素高度无法撑开
解决办法:
- 给父元素设置固定高度
- 给父元素添加overflow:hidden
- 给父元素的最后添加一个空标签设置clear:both
这种方式会添加无意义的空标签 影响页面结构 所以不推荐 - 使用伪元素选择
给父元素添加伪类 after
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
.wrap{
width:300px;
border:2px solid red;
/*清除浮动对外部元素的影响*/
/*overflow:hidden;*/
}
/*清除浮动*/
.wrap:after{
content:'';
display: table;
clear:both;
}
.item1{
width:100px;
height:100px;
background: green;
/*添加左浮动*/
float:left;
/*右浮动*/
/*float:right;*/
}
.item2{
width:105px;
height:105px;
background: blue;
/*左浮动*/
float:left;
}
.item3{
width:100px;
height:100px;
background: #f39;
float:left;
/*清除某一个元素的浮动,可以在里面加clear:both;*/
}
.clear{
/*width:100px;
height:100px;*/
/*background:yellow;*/
/*清除浮动
clear:
both 清除两边元素浮动产生的影响
left 清除前面元素左浮动 带来的影响
right 清除前面元素右浮动带来的影响
*/
clear:both;
}
</style>
</head>
<body>
<div class="wrap">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<!-- <div class="clear"></div> -->
</div>
</body>
<html>
5. 定位
position
相对定位 relative
相对于元素原来的位置进行偏移 参考点是原来位置的起始点
不会脱离文档流。
绝对定位 absolute
会脱离文档流 默认以body的00点位参考点进行位移
如果父元素有定位属性,绝对定位就以父元素的00点位参考点进行偏移
如果父元素没有定位属性,就找爷爷元素,以此向上找,找到body为止
固定定位(绑定定位) fixed
脱离文档流
相对于浏览器窗口进行定位
定位的层级:
只能给有定位属性的元素设置
z-index:层级是数字,谁的数字大,谁就在上层显示
相对定位:
<!-- 定位 参考点 相对于元素原来的位置
相对位置,参考位置是原来所在位置 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style type="text/css">
.item1{
width: 600px;
height: 600px;
border:1px solid red;
margin-left: 100px;
position: relative;
top: 200px;
}
.item2{
width: 200px;
height: 200px;
background-color: blue
/*相对定位*/
position: relative;
top: 200px;/*它是浮动元素,所以会覆盖其他。*/
left: 200px;
}
.item3{
width: 200px;
height: 222px;
background-color: gold;
}
</style>
</head>
<body>
<div class="item1">
<div class="item2"></div>
<div class="item3"></div>
</div>
</body>
</html>
绝对定位:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
*{margin:0;padding:0;}
.wrap{
width:400px;
height:400px;
border:1px solid red;
margin-left:100px;
position:relative;
}
.item1,.item2{
width:100px;
height:100px;
}
.item1{
background:yellow;
/*绝对定位*/
position:absolute;
top:100px;
left:100px;
z-index:1;
}
.item2{
background:blue;
position:absolute;
top:100px;
left:100px;
z-index:2;
}
</style>
</head>
<body>
<div class="wrap">
<div class="item1">1</div>
<div class="item2">2</div>
</div>
</body>
</html>
固定定位:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
body{
height:2000px;
}
.top{
width:100px;
height:50px;
background:green;
text-align:center;
line-height:50px;
/*固定定位*/
position:fixed;
right:20px;
bottom:20px;
}
</style>
</head>
<body>
<div class="top">返回顶部</div>
</body>
</html>