标签：ima ant 透明 input 窗口 one ora 导入 绝对定位
5.29
复习CSS
css
层叠样式表 修饰网页的
css的语法
1.行内样式的语法
2.内部样式表和外部样式表的语法
css的使用方式
1.行内样式
2.内部样式表
3.外部样式表
4.外部导入样式
css选择器
ID选择器
class选择器
标签选择器
组合选择器
子代选择器
后代选择器
通用选择器
伪类选择器 :hover鼠标悬浮上去的样式
css样式的优先级
1.根据权重来确定
2.如果权重相同，就近原则（后定义原则）
权重：仅仅只是一个参考的值，并没有实际的含义
内联 1000
id 100
class 10
伪类 10
标签 1
通用 0
!important 只要出现就以这个为主
注意：计算权重的时候不需要去管子代、后代。直接加起来就OK
颜色的三种表示方法
1.颜色英文单词
2.16进制
3.rgb 扩展 rgba
文本类样式
color
line-height 得确定里面有几行
text-align 字体对齐
text-decoration 下划线
font-style 字体倾斜
font-family 字体样式 如宋体、楷体
font-weight 字体加粗
font-size 字体大小
/在浏览器中，默认字体大小16px
谷歌浏览器默认字体大小12px
火狐没有限制
元素的显示方式
display
inline 行内元素
inline-block 行内块
block 块级
none 隐藏/无
元素的隐藏
visibility:hidden
轮廓
主要用在input标签中，只需要清空即可
列表
list-style：none 即可
鼠标的样式
cursor
透明度
opacity: 0.1; 取值：0-1之间 可以为0和1 0表示全透，1表示全不透
rgba(255,0,0,0.1)
面试题
visibility:hidden 和 display:none 的区别？
1.visibility要占用域的空间，而display则不占用
2.visibility：hidden 隐藏某元素时在页面上保留改元素的空间
display:none隐藏某元素的同时也让其他内容填充空白
3.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；
visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，
浏览器会解析该元素；
opacity和rgba的区别？
opacity 子元素颜色会被影响，即变相的被继承。就是使用opacity的时候隐藏的地方背景
也会被隐藏有一些影响，表示整个元素。而rgba不会，它会全部遮盖住，只会表示背景颜色
1.CSS背景类样式
background-color 背景颜色
background-image 背景图片
background-repeat 背景图片的重复
repeat-y 只允许在y轴重复
repeat-x 只允许在x轴重复
no-repeat 不重复，只显示一次
background-position 背景图片的定位
取值： 两个，分别表示x和y方向。如果只写一个，则两个值相等
例如：京东、淘宝 五星好评
雪碧图： 各个小图标的集合，使用的目的是减少http的请求
background 是把上面所有的全部合在一起
background : color image repeat position
background-size 背景图片的大小
css布局的一种方式
定位 top,left,right,bottom 只有元素增加定位的情况下才会使用
相对定位 老大一般不要去用top,left,right,bottom
绝对定位 老二
元素会脱离文档流
一般不要去用margin，用top，left，right，bottom
虽然都能达到效果，但是为了开发的方便，代码的简洁。
固定定位 肯定不是同一个爹
元素会脱离文档流
使用场景：回到顶部
侧边栏的广告
纯种的野孩子。只有浏览器的窗口可以管的住
一般的情况下：相对定位和绝对定位是同时出现的
一般所有的下拉框都是绝对配合着相对定位完成的
display: inline-block; inline-block 块级转换成行内元素
样式
width: 160px;
height: 30px;
text-align: center; 文本对齐方式
line-height: 30px; 行高
border: 1px solid #ccc; 边框 solid表示实线
cursor: pointer; 鼠标变换
position: relative; 相对定位
标签：ima ant 透明 input 窗口 one ora 导入 绝对定位
原文地址：https://www.cnblogs.com/htmlhu/p/10945147.html
