目录
/* 为了边框和文字宽度一致,需要将h2转换为行内块元素 */
display: inline-block;
/* 给news-list下面的所以li列表,设置超链接鼠标移入样式 */
.news-list li a:hover{
color: red;
}
/* 设置文字加粗效果 */
font-weight: bold;
/* 删除浏览器自带的项目符号*/
list-style: none;
/* 去除文字样式(下划线) */
text-decoration: none;
/* 让文字在父元素中垂直居中 */
line-height: 48px;
/* 将a转换成块元素 */
display: block;
/* 设置鼠标移入效果 */
.nav a:hover{
background-color: #3f3f3f;
color: #e8e7e3;
}
水平布局:
margin-left + border + padding-left + width +padding-right + border + margin-right
= 其父元素内容区的宽度 (必须满足)
0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
0 + 0 + 0 + 200 + 0 + 0 + 600 = 800
-以上等式必须满足,如果相加结果使等式不成立,则成为过度约束,则等式会自动调整
-调整的情况:如果这七个值没有为auto的情况,则浏览器会自动调整margin-right的值以使等式成立
轮廓、阴影、圆角
/*
outline 用来设置元素的轮廓线,用法和border一模一样
轮廓和边框的不同的点是,轮廓不会影响到可见框的大小
*/
outline: 10px red solid;
/* box-shadow用来设置元素的阴影效果,阴影不会影响页面的布局
第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动
第二个值 垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上移动
第三个值 阴影的模糊半径
第四个值 阴影的颜色
*/
box-shadow:20px 20px 10px rgba(0, 0, 0, .3);
/* border-radius:用来设置圆角 圆角设置的圆的半径大小 */
/* border-top-left-radius: */
/* border-top-right-radius: */
/* border-bottom-left-radius: */
/* border-bottom-right-radius: */
/* border-top-left-radius: 50px 100px; 左上角为椭圆x y方向为不同的两个半径*/
/* border-radius阔以分别指定四个角的圆角
四个值 左上 右上 右下 左下
三个值 左上 右上/左下 右下
两个值 左上/右下 右上/左下
*/
/* 分别指定x/y方向的值 椭圆 */
border-radius: 10px / 40px;
/* 将元素设置为一个圆形 */
border-radius: 50%;
浮动: (含脱离文档流的特点)
设置浮动后,水平布局的等式不需要强制成立
/* 通过浮动阔以使一个元素向其父元素的左侧或右侧移动
使用float属性来设置元素的浮动
可选值
none 默认值, 元素不浮动
left 元素向左浮动
right 元素向右浮动
注意,元素设置浮动以后,水平布局的等式不需要强制成立
元素设置浮动后 ,会完全从文档流中脱离,不再占用文档流的位置,
所以元素下边的还在文档流中的元素会自动向上移动
浮动的特点:
1、浮动的元素会完全脱离文档流,不再占据文档流中的位置
2、设置浮动以后元素会向父元素的左侧或右侧移动
3、浮动元素默认不会从父元素中移出
4、浮动元素向左或向右移动时,不会超过它前边的其他浮动元素
5、如果浮动元素的上边是一个没有浮动的块元素,则浮动元素无法上移
6、浮动元素不会超过它上边的浮动的兄弟元素,最多最多就是和它一样高
简单总结:
浮动目前来讲它的主要作用就是让页面中的元素可以水平排列
通过浮动可以制作一些水平方向的布局
*/
float: left;
*/ 浮动元素不会盖住文字,文字会自动环绕在浮动元素的周围,
所以我们可以利用浮动来设置文字环绕图片的效果
元素设置浮动以后,将会从文档流中脱离,从文档流中脱离后,元素的一些特点也会发生变化
脱离文档流的特点:
块元素:
1、块元素将不再独占页面的一行
2、脱离文档流以后,块元素的宽度和高度都默认被内容撑开
行内元素
行内元素脱离文档流以后会变成块元素,特点和块元素一样
脱离文档流以后,不需要再区分块元素和行内元素
高度塌陷:
高度塌陷的问题:
在浮动布局中,父元素的高度默认是被子元素撑开的,
当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离
将会无法撑起父元素的高度,导致父元素的高度丢失
父元素高度丢失后,其下的元素会自动上移,导致页面的布局混乱
所以高度塌陷是浮动布局中比较常见的一个问题,这个问题我们必须进行处理
高度塌陷的解决办法:
开启BFC
clear
after伪类 (较好)
clearfix(最好!!!)
BFC(block fortting content) 块级格式化环境:
BFC是CSS种的一个隐含的属性,可以为一个元素开启BFC
开启BFC该元素会变成一个独立的布局区域a
元素开启BFC的特点:
1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素
可以通过一些特殊方式来开启元素的BFC:(除以下外还有很多方式)
1.设置元素的浮动(不推荐)
2.将元素设置为行内块元素(不推荐)
3.将元素的overflow设置为一个非visible的值
常用的方式 为元素设置overflow:hidden 开启其BFC 以使其可以包含浮动的元素
clear:
如果我们不希望某个元素因为其他元素浮动的影响而改变位置,
可以通过clear属性来清除浮动元素对当前元素所产生的影响
clear:
作用:清楚浮动元素对当前元素所产生的影响
-可选值:
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧中最大影响的那侧
原理:设置清除浮动以后,浏览器会自动为元素添加一个上外边距,
以使其位置不受其他元素的影响
after伪类:
用CSS在box1后面添加一个伪元素‘ ’,
由于其是行内元素,想要其垂直排列在浮动的box2下面需先将其转化为块元素,
再清除box2浮动对伪元素的影响
让该伪元素去撑起box1的高度
.box1::after{
content:'';
display:block;
clear:both;
}
clearfix:
<!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>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2{
width: 100px;
height: 100px;
background-color:orange;
margin-top: 100px;
}
/* clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题,当你在遇到这些问题时,
直接使用clearfix这个类即可 */
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
相对定位:
position默认为: position:static
.box2{
position:relative
left:100px;
top:0;
}
相对定位:
当前元素的position属性值设置为relative时则开启了元素的相对定位
特点:
1.元素开启相对定位以后,可以通过偏移量来设置元素的位置
2.相对定位会提升元素的层级
3.相对定位不会使元素脱离文档流
4.相对定位不会改变元素的性质,块还是块,行内还是行内
偏移量(offset):
当元素开启了定位以后,可以通过偏移量来设置元素的位置
top-定位元素和定位位置上边的距离
bottom-定位元素和定位位置下边的距离
定位元素垂直方向的位置由top和bottom两个属性来控制,通常使用其中一个
left-定位元素和定位位置左边的距离
right-定位元素和定位位置右边的距离
定位元素水平方向的位置由left和 right两个属性来控制,通常使用其中一个
绝对定位:
.box2{
position:absolute
left:100px;
top:0;
}
绝对定位:
当元素的position属性为absolute时,则开启了元素的绝对定位
特点:
1.开启绝对定位后,如果不设置偏移量,元素的位置不会发生变化
2.开启绝对定位后,元素会从文档流中脱离
3.绝对定位会改变元素的性质,行内变成块,块的高度被内容撑开
4.绝对定位会使元素提升一个层级
5.绝对定位是相对于其包含块进行定位的
包含块:(containing block)
-正常情况下:
包含块就是离当前元素最近的祖先块元素
-绝对定位的包含块:
包含块就是离它最近的开启了定位的祖先元素
如果所有的祖先元素都没有开启定位,则根元素就是它的包含块
-html(根元素、初始包含块)
固定定位:
.box2{
position:fixed
left:0;
top:0;
}
固定定位:
将元素的position属性设置为fixed,则开启了元素的固定定位
固定定位也是一种绝对定位,所有固定定位的大部分特点都和绝对定位一样
唯一不同的是固定定位永远参照于浏览器的视口进行定位
固定定位的元素不会随网页的滚动条滚动
粘滞定位:
.box2{
position:sticky
top:10px;
}
粘滞定位:
当元素的position设置为sticky时,则开启了元素的粘滞定位
粘滞定位和相对定位的特点基本一致
不同的是粘滞定位可以在元素到达某个位置时将其固定
(浏览器兼容性不好,少用)
绝对定位元素的位置:
水平布局:
left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块的内容区的宽度
当我们开启了绝对定位后:
水平方向的布局等式就需要添加 left 和 right 两个值
此时规则和之前一样只是多添加了两个值
当发生过度约束:
如果9个值中没有auto 则自动调整right值以使等式满足
如果由auto,则自动调整auto的值以使等式满足
可设置auto的值
margin width left right
因为left 和right 的值默认是auto, 所有如果不指定left 和right
则等式不满足时,会自动调整这两个值
可以利用margin-left/right 来让元素水平居中(前提是元素开启了绝对定位;left:0 right:0)
垂直方向的布局的等式也必须要满足
top + margin-top/bottom + padding-top/bottom + height = 包含块的高度
可以利用margin-top/bottom 让元素垂直居中(前提是元素开启了绝对定位;top:0 bottom:0)
都开启时可以让元素水平垂直居中(在包含块中间,如果把包含块的相对定位关了就在网页中间)
<!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> .box1{ width:500px; height: 500px; background-color: #bfa; position: relative; } .box2{ width: 100px; height: 100px; background-color:orange; position: absolute; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; left:0; right:0; top: 0; bottom: 0; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>
让元素水平垂直居中的方法有:
1.绝对定位 (元素大小确定) 2.将父元素设置为表格/单元格 (很少用)
3.平移(元素大小不确定,由内容撑开)
<head>
<style>
.box1{
width: 300px;
height: 300px;
background-color: orange;
/* 将元素设置为单元格 td */
display: table-cell;
vertical-align: middle;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
图标字体方法:
1 类
2 伪元素
3 实体