css布局
目录
标签样式设置
只有块级标签才可以设置长宽
行内标签设置了没有任何作用
字体颜色样式
颜色英文 如red
06a0de 直接用pycharm提供的取色器即可
rgb(1,1,1) 可以利用截图软件获取三基色数字
rgba(0,128,128,0.3) 最后一个数字是用来调节颜色的透明度
a标签的样式设置
a{
text_decoration:none;
}
背景图片，默认是铺满整取区域
通常一个页面上的一个个的小图标 并不是单独的
而是一张非常大的图片 该图片上有网址所用到的所有的小图标
通过控制背景图片的位置 来显示不同的图标样式
边框
border 后面写三个参数 和位置没有关系：颜色，字体，样式 如red 3px solid
也可以单独设置样式，颜色，粗细
border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
border—radius：50% 圆角
背景样式设置
div {
width: 400px;
height: 400px;
/*background-color: orange;*/
/*background-image: url("111.png");*/
/*background-repeat: no-repeat; !*不平铺*!*/
/*background-repeat: repeat-x; x轴*/
/*background-repeat: repeat-y;*/
/*background-position: center center;*/
/*background-position: 10px 50px; !*第一个参数是x轴 第二个参数y轴*!*/
/*支持简写*/
background: url("111.png") red no-repeat center center;
}
display
inline 将块级标签变成行内标签
block 能够将行内标签也能设置长宽和独占一行
inline-block 隐藏标签，并且标签原来占的位置也没有了
visibility：hidden 隐藏标签 但是标签原来的位置还在
盒子模型
以盒子为例
- 两个快递盒之间的距离（标签与标签之间的距离）
- 快递盒盒子的厚度（border）
- 两盒子中物品距离内边框的距离（内部文本与边框之间的距离）
- 物品的大小（文本大小）
marigin 0auto：只能左右居中，不能上下居中
浮动
float：在css中任何元素都可以浮动。
浮动的元素是脱离正常文当流的（原来的位置会让出来）
游览器会优先展示文本内容
浮动带来的影响
会造成父类的塌陷
clear
清楚浮动带来的影响
.clearfix:after{
content:'';
clear:both # 左右两边都不能有浮动的元素
display：block
}
overflow溢出属性
overflow：hidden 隐藏
overflow：auto
定位
所有的标签默认都是静态的，无法改变位置
position：static
必须将静态的状态修改成定位之后
相对定位：relative
相对于标签原来的位置移动
绝对定位：absolute
相对于已经定位过（只要不是static都可以relative）的父标签 再做定位
固定定位（回到顶部）fixed
相对于游览器窗口 固定再某个位置不动
opacity
既可以调颜色 也可以调字体
位置的变化是否脱离文当流
-
不脱离文当流
相对路径relative
-
脱离文当流
绝对路径absolute
固定定位fixed
浮动的元素
z-index
为z轴的高度
