day 44
给标签设置长宽
只有块级标签才可以设置长宽
行内标签设置了没有任何作用(仅仅只取决于内部文本内容)
字体颜色
color后面可以跟多种颜色数据
颜色英文 red
#u6a0de 直接用pycharm提供的颜色取色器即可
rgb(1,2,3) 可以利用截图软件获取三基色数字
rgba(0,123,123,0.2) 最后一个数字 只能用来调节颜色的透明度
语义
p {
font-size: 24px; /*字体大小*/
text-indent: 48px; /*字体缩进*/
text-align: center;/*居中*/
text-align: left;/*居左*/
text-align: right;/*居右*/
text-decoration: #e33d46 line-through; /*删除线*/
text-decoration: overline; /*上划线*/
text-decoration: underline;/*下划线*/
}
a {
text-decoration: none; /*取消标签的默认下划线*/
}
背景图片
默认是铺满整个区域
background-repeat: no-repeat; /*不平铺*/
background-repeat: repeat-x; /*水平方向上平铺*/
background-repeat: repeat-y; /*垂直方向上平铺*/
background-position: 200px 200px; /*位置*/
background: #334422 url('1.jpg') no-repeat left top; /*简写*/
通常一个页面上的一个个小图标 并不是单独的
而是一张非常大的图片 该图片上有网址所用到的所有的小图标
通过控制背景图片的位置 来显示不同的图表样式
边框
border 后面写三个参数 位置没有关系
颜色
字体
样式
可以单独设置 样式 颜色 粗细
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; /*solid 实线边框*/
border-left: 1px dotted green; /*dotted 点状虚线边框*/
border-right: 5px dashed blue; /*dashed 矩形虚线边框*/
border-bottom; 10px solid pink; /*none 默认无边框*/
也可以同一简写设置:
border: solid 10px red
border-radius: 50%; /*设置为长或高的一半可得到圆形*/
display
display: inline 将块级标签变成行内标签
display: block 能将行内标签 设置成长宽和独占一行
display: inline-block 既可以设置长宽,也可以在一行展示
display: none 隐藏标签 并且标签原来占的位置也没有了
visibility: hidden 隐藏标签 标签原来的位置还在
css盒子模型
谷歌浏览器body默认有8px外边距
margin 用于控制元素与元素之间的距离
padding 用于控制内容于边框之间的距离
border 围绕在内边距和内容外的边框
content 盒子内容,显示文本和图像
body {
margin:0px;
}
以快递盒为例
1.两个快递盒之间的距离(标签与标签之间的距离) 外边距(margin)
2.快递盒子的厚度(边框border) 边框(border)
3.快递盒中物品距离内边距的距离(内部文本与内边距之间的距离 内边距(内填充)
4.物品的大小(文本的大小) 内容content
margin: 15px; 只写一个参数 上下左右都是一样
margin: 10px 20px; 第一个控制的上下 第二个是左右
margin: 10px 20px 30px; 第一个控制的上 第二个是左右 第三个是下
margin: 1px 10px 20px 30px; 上 右 下 左
padding 也是一样
#dl {
margin: 0 auto;
}/*只能左右居中,不能上下居中*/
浮动
float
在css中 任何元素都可以浮动
浮动的元素是脱离正常文档流的(原来的位置会让出来)
浏览器会优先展示文本内容
float: left: 向左浮动
float: right: 向右浮动
float: none: 不浮动
浮动带来的影响
会造成父标签塌陷
如何解决父标签塌陷问题
clear
清除浮动带来的影响
clear属性规定元素的哪一侧不允许其他浮动元素
left: 在左侧不允许浮动元素
right: 在右侧不允许浮动元素
both: 在左右两侧均不允许浮动元素
none: 默认值.允许浮动元素出现在两侧
inherit: 规定应该从父元素继承clear属性的值
.clearfix:after {
content: '';
clear: both; /*左右两边都不能有浮动的元素*/
display: block;
}
那个父标签塌陷了 就给谁加clearfix这个属性值
overflow溢出属性
visible 默认值,内容不会被修剪,会呈现在元素框之外
hidden 内容会被修剪,并且其余内容是不可见的
scroll 内容会被修剪,但是浏览器会显示滚动条一边查看其余的内容
auto 如果内容被修剪,则浏览器会呈现滚动条一边查看其余内容
inherit 规定应该从父类继承overflow属性的值
overflow (水平和垂直均设置)
overflow-x (设置水平方向)
overflow-y (设置垂直方向)
定位
所有的标签默认都是静态的 无法改变位置
position: static;
必须将静态的状态修改成定位之后
相对定位(了解) relative
相对于标签原来的位置移动
绝对定位 absolute
相对于已经定位过(只要不是static都可以relative)的父标签 再做定位
固定定位 fixed
相对浏览器窗口 固定在某个位置不动
z-index
设置对象的层叠顺序
1.z-index值表示谁压着谁,数值大的压盖住数值小的
2.只有定位了的元素才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index
3.z-index值没有单位,就是一个整数,默认的z-index值为0如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素
# i2 {
z-index:999;
}
位置的辩护是否脱离文档流
1.不脱离文档流
相对定位
2.脱离文档流
浮动的元素
绝对定位
固定定位
opacity
用来定义透明效果,取值范围0~1,0完全透明,1完全不透明
# l1 {
opacity:0.2;
}
即可以调颜色也可以调字体
