day 46
CSS样式操作
给字体设置长宽
只有块级标签才可以设置长宽
行内标签设置了没有任何作用(仅仅只取决于内部文本值)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Yeah</title>
<style>
div {
width: 200px;
height: 100px;
}
span {
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<div>
div
</div>
<span>span</span>
</body>
</html>
字体颜色
color后面可以跟多种颜色数据
- 颜色英文：
red rgb(1,1,1)：可以利用截图软件获取三基色数字,数字范围只能是0~255- 直接使用 pycharm 提供的取色器
rgba(128,128,128,0.4)：最后一个数字可以调节颜色的透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>YEAH</title>
<style>
p {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
font-size: 48px;
font-weight: lighter;
/*color: red;*/
/*color: rgb(156,59,24);*/
/*color: #c3ff69;*/
color: rgba(61,94,86,0.7);
}
</style>
</head>
<body>
<p>
鹅鹅鹅，曲项向天歌。
</p>
</body>
</html>
语义
a {
text-decoration: none;
}
取消a标签默认的下划线
背景图片
默认是铺满整个区域
通常一个页面上的一个个小图标，并不是单独的，而是通过一个非常大的图片，该图片上有网址所用到所有的小图标。
通过控制背景图片的位置，来显示不同的图标样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>YEAH</title>
<style>
#d1 {
height: 800px;
background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573737709470&di=3763ef1067405bd66e3c372343454bc6&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201608%2F24%2F20160824232248_PdVQU.jpeg");
background-attachment: fixed;
}
</style>
</head>
<body>
<div style="height: 600px;background-color: red"></div>
<div style="height: 600px;background-color: blue"></div>
<div id="d1"></div>
<div style="height: 600px;background-color: greenyellow"></div>
</body>
</html>
边框
后面跟三个参数
颜色，字体，样式
可以单独设置：样式，颜色，粗细
border-top-style:dotted;
border-top-color:red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
可以单独设置某一边的样式
border-top: 3px solid red;
border-left: 1px dotted green;
border-right: 5px dashed blue;
border-bottom: 10px solid pink;
也可以简写统一设置
display
inline 将块级标签变成行内标签
block 能够将行内标签设置成长宽和独占一行
inline-block 即可以设置长度，也可以在一行展示
display:none 隐藏标签，并且标签原来占的位置也消失了
visibility:hidden 隐藏标签，但是标签原来的位置还在
盒子模型
以快递盒为例
1.两个快递盒之间的距离(标签与标签之间的距离)
2.快递盒盒子的厚度(边框border)
3.快递盒中的物品距离内边框的距离(内部文本与内边框之间的距离)
4.物品的大小(文本大小)
margin: 10px; 只写一个参数，上下左右全是
margin: 10px 20px; 第一个控制的是上下，第二个则是左右
margin: 10px 20px 30px; 第一个控制的是上，第二个是左右。第三个是下
margin: 10px 20px 30px 40px; 第一个控制的是上，第二个是右，第三个是下，第四个是左
margin:0 auto; 左右居中，不能上下居中
浮动(**************)
float
在CSS中，任何元素都可以浮动。
浮动的元素，是脱离正常的文档流(原来的位置会空出来)
浏览器会优先展示文本内容(**********)
浮动带来的影响
会造成父标签塌陷
clear
可清除浮动带来的影响
.clearfix:after {
content: '';
clear: both; /*左右两边都不能有浮动的元素*/
display: block;
}
哪一个父标签塌陷了，就给它加clearfix这个类属性值
overflow溢出属性
visible 默认值。内容不会被修改，会呈现在元素框之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit 规定应该从父元素继承 overflow属性的值
定位
所有的标签默认都是静态的，无法改变位置
position: static;
必须将静态的状态修改成定位之后
相对定位(了解) relative
相对于标签原来的位置，移动
绝对定位(购物车) absolute
相对于已经定位过(只要不是static都可以 relative)的父标签，再做定位(**************)
固定定位(回到顶部) fixed
相对于浏览器窗口，固定在某个位置不动
位置的辩护是否脱离文档流
1.不脱离文档流
相对定位
2.脱离文档流
浮动的元素
绝对定位
opacity
既可以调颜色，也可以调字体
