分组与嵌套
# 多个选择器可以并列公用一套css样式
div,p,span {}
# 不同选择器之间也可以混合使用
.c1,#d1>span {}
伪类选择器
a:link {} #访问之前状态
a:hover {} # 鼠标悬停在上面的状态 需要记忆
a:active {} #点下去 不松开的状态
a:visited {}#访问之后的状态
input:focus {} # input框获取焦点
伪元素选择器
p:first-letter {} # 通过css加文本内容 但是无法选中
p:before {} #在前面
p:after {}#在后面
# ps:before和after多用于清除浮动带来的负面影响
选择器优先级
""" 选择器相同 就近原则 行内 > id > class > 标签 精确度越高说话越硬 """
宽和高
width height # 块儿级标签的宽度不修改的情况下默认占浏览器一整行，块儿级标签的高度也是取决于标签内部的文本的高度 但是可以通过css设置 # 行内标签宽度和高度都是有内部文本决定的 行内标签是无法设置长宽的 无效
字体属性
# 字体样式 草书 行书 ...
font-family
# 字体大小
font-size
# 字重
font-weight
# 文本颜色
1 直接写颜色英文
2 写颜色编号 #4e4e4e
3 写颜色的三基色 rgb(128,128,128) # 范围0-255
4 可以给颜色加透明度 rgba(128,128,128,0.5) # 范围0-1
ps:可以用pycharm 微信 qq等软件快速的获取你想要的颜色
文字属性
# 文字对齐
text-align
center
# 文字装饰 记忆 主要就是用来给a标签去掉自带的下划线
text-decoration
none
# 首行缩进
text-indent
背景属性
# 背景色 backgroud-color # 背景图片 background:#fff url() no-repeat center center """ ps:当多个属性名前缀都是相同的情况下 一般都支持简写:只写前缀 """ ps:在调样式的时候 可以借助于浏览器快速的微调，然后讲调整好的参数修改到css样式中
边框
# 任何一个标签都有上下左右四个方向的边框 border-width border-style border-color 简写 border # 画圆 border-radius:50%
display属性
# 能够让标签具有自身没有的属性和特征
display
none 隐藏 并且原来的位置也没了
inline 变成行内
block 变成块级
inline-block 既是行内又是块级
ps:visibility:hidden只隐藏 位置还在
css盒子模型
# 1 外边距(标签与标签之间的距离) margin
# 2 边框 border
# 3 内边距/内填充 padding
# 4 内容 content
"""
body标签默认自带8px的margin
margin:
10 上下左右
10 20 上下 左右
10 20 30 上 左右 下
10 20 30 40 上 右 下 左
padding:
10 上下左右
10 20 上下 左右
10 20 30 上 左右 下
10 20 30 40 上 右 下 左
"""
清除浮动带来的影响
"""
浮动的元素会造成父标签的塌陷
解决塌陷推导步骤
1.自己写一个标签强行撑起一个高度
2.clear属性
clear:left\right\both
3.统一解决方式 提前定义好后续直接使用
.clearfix:after {
content:'';
display:block;
clear:both;
}
谁塌陷了就给谁加上clearfix类属性
"""
溢出属性
"""标签内部的内容超出了标签自身的范围会造成内容的溢出"""
overflow:hidden/scroll/auto/visible
# 圆形头像制作
overflow:hidden
img {
max-width:100%;
}
定位
"""
静态 static
默认所有的标签都是静态的 无法改变位置
相对定位 relative
相对于标签自身原来的位置
(如果你讲标签的position由static变成relative，那么标签就会由没有定位过的标签变成已经定位过的标签 性质就改变了)
绝对定位 absolute
eg:小米购物车
相对于已经定位过的父标签(如果没有则以body作为参照)
固定定位 fixed
eg:回到顶部、右侧小广告...
相对于浏览器窗口定位
left
top
right
bottom
"""
# 脱离文档流
1.浮动
2.绝对定位
3.固定定位
# 不脱离文档流
1.相对定位
透明度
opacity # 颜色和字体均可改变
标签：浮动,定位,20,10,标签,选择器,属性 From： https://www.cnblogs.com/py1234/p/16659413.html