一、选择器优先级进阶
id选择器的优先级是100
class选择器的优先级是10
标签选择器的优先级是1
行间距优先级是1000
计算方式：让每个选择器对应的值相加，谁的值大谁的优先级高
二、文本属性
text-indent：设置首行缩进
text-align：设置文本水平对齐方式
text-decoration：设置下划线
underline下划线
overline上划线
line-through中划线
line-height：设置行与行之间的距离，一般用于单行文本垂直居中vertical-align垂直对齐方式
<head>
<meta charset="UTF-8">
<title>文本</title>
<style type="text/css">
*{margin:0;padding:0;}
.item{
width: 400px;
height: 400px;
border: 1px solid red;
/*首行缩进*/
text-indent: 32px;
/*文本水平对齐方式一般用于单行文本*/
/*text-align: center;*/
/*行高居中*/
line-height: 30px;
}
.item1{
width: 400px;
height: 400px;
border: 1px solid red;
/*添加下划线*/
/*text-decoration:underline;*/
/*上划线*/
/*text-decoration:overline;*/
/*中划线*/
/*text-decoration:line-through;*/
line-height: 400px;
}
a{
/*去除下划线*/
text-decoration:none;
}
.item2 img{
/*让图片和文本的中间对齐*/
vertical-align: middle;
}
</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">
</div>
</body>三、布局属性
块元素： 独占一行 宽度默认是父元素的100% 默认高度由内容决定
支持所有的样式
就算设置了宽度也会独占一行
行内元素： 不会独占一行 元素排在一行显示 ，默认宽度是0 高度由内容决定，不支持宽高属性和margin的上下属性
行内块：不会独占一行 支持所有的样式 默认宽度0 默认高度由内容决定
display：规定元素以哪种元素类型表示
none隐藏
block以块元素显示
inline以行内元素显示
inline-block以行内块元素显示，此元素已经废弃，但是还能用
.inner{
width: 200px;
height: 200px;
background-color: pink;
/*转为行内元素*/
/*display: inline;*/
/*转为行内块*/
display: inline-block;
}
span{
/*宽高是无效的，等它转为块元素时生效*/
width: 200px;
height: 200px;
background-color: red;
/*margin: 20px;*/
/*padding: 20px;*/
/*display: block;*/
display: inline-block;
}overflow
visible默认值
hidden超出部分隐藏
scroll添加滚动条
auto自动检测并添加滚动条
<style>
*{margin:0;padding: 0;}
.item{
width: 100px;
height: 100px;
border: 1px solid red;
/*超出部分隐藏*/
/*overflow: hidden;*/
/*添加滚动条*/
/*overflow: scroll;*/
/*自动检测内容是否超出 如果超出自动添加滚动条*/
overflow:auto;
}
</style>四、浮动
元素从上到下，从左到右的排列方式，这种排列规则就是文档流
浮动会脱离文档流，，将后面没有浮动的元素覆盖，浮动不会覆盖文字
浮动只有两个方向left，right
当浮动元素碰到父元素的边界会停止浮动，碰到前面有浮动元素也会停止懂，并在一排显示，如果浮动预算的宽度超过父元素的宽度，会自动换行
如果前面有未浮动的元素，会另起一行进行浮动
浮动遇到的问题：当父元素没有设置固定高度时，子元素全部浮动，会导致父元素高度无法撑开
解决办法：
- 给父元素设置固定高度
- 给父元素添加overflow：hidden
- 给父元素的最后添加一个空标签设置clear:both ，这种方式会添加无意义的空标签 影响页面结构 所以不推荐
- 使用伪元素选择，给父元素添加伪类 after
<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: 100px;
height: 100px;
background-color: blue;
/*float: left;*/
}
.item3{
width: 100px;
height: 100px;
background-color: #f39;
/*float: left;*/
}
/*通常清除浮动并不使用下面方法*/
.clear{
/*width: 100px;
height: 100px;
background: yellow;*/
/*清除两边浮动产生的影响*/
/*both left right*/
/*clear: both;*/
}
</style>五、定位 position
相对定位 ：relative
相对于元素原来的位置进行偏移 参考点是原来位置的起始点，不会脱离文档流
绝对定位：Absolute
会脱离文档流 默认以body的00点位参考点进行位移
如果父元素有定位属性，绝对定位就以父元素的00点位参考点进行偏移
如果父元素没有定位属性，就找爷爷元素，以此向上找，找到body为止
固定定位(绑定定位)：fixed
脱离文档流，相对于浏览器窗口进行定位
定位的层级：
只能给有定位属性的元素设置
z-index:
相对定位
<style type="text/css">
*{margin: 0;padding: 0;}
.wrap{
width: 600px;
height: 600px;
border:1px solid red;
margin-left: 200px;
}
.item1{
width: 200px;
height: 200px;
background: #f33;
/*相对定位 相对于元素原来的位置来偏移，而非相对于body的位置来偏移*/
/*不会脱离文档流*/
position:relative;
top: 200px;
/*left: 200px;*/
}
.item2{
width: 200px;
height: 210px;
background: #606;
}
</style>
</head>
<body>
<div class="wrap">
<div class="item1"></div>
<div class="item2"></div>
</div>
</body>绝对定位
<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-color: yellow;
/*绝对定位*/
/*当父元素没有定位属性时，绝对定位生效，绝对定位相对于body的坐标来偏移，并且会浮出文档流。*/
position: absolute;
top: 100px;
left: 100px;
}
.item2{
background-color: blue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="item1"></div>
<div class="item2"></div>
</div>
</body> <title>固定定位</title>
<style>
*{margin: 0;padding: 0;}
body{
height: 2000px;
}
.item{
width: 80px;
height: 50px;
background-color: green;
position: fixed;
right: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div class="item">返回顶部</div>
</body>
1062
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
