前端随堂笔录3

Posted 2021-12-11 htmlhu

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; 相对定位