标签：侧边栏 表示 显示 行内元素 列表 width otto 情况下 ima
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-size
font-style
font-family
font-weight
八、元素的显示方式
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 的区别？
都是隐藏
但是visibility：hidden隐藏以后还会继续保留位置
display：none 隐藏以后就不会占位置
十、opacity和rgba的区别？
opacity针对整个元素的，包括里面的背景颜色，图片，文字...
rgba只针对背景颜色
十一、
background-color 背景颜色
background-image 背景图片
background-repeat 背景图片的重复
repeat-y 只允许在y轴重复
repeat-x 只允许在x轴重复
no-repeat 不重复，只显示一次
background-position 背景图片的定位
background-size 背景图片的大小
取值： 两个，分别表示x和y方向。如果只写一个，则两个值相等
框模型
1.任何一个元素，都可以理解成一个盒子
盒子是可以装"东西"
里面东西跟"盒子的包装"有一定的空间
两个盒子或者说多个盒子，盒子之间是不是有一定的"距离"(空间)
盒子模型的组成
margin 外边距 盒子与盒子之间的距离
border 边框 包装盒
padding 内边距 填充物
content 内容 买好的东西
margin 合起来写的属性
margin-top margin-right margin-bottom margin-left
这四个属性可以单独的拿出来写
2.
border 边框 合写的属性
border-color 颜色
border-top-color: ;
border-left-color:
border-style 样式
也分上下左右
border-width 宽度
也分上下左右
写的时候不需要区分顺序
padding
上右下左
对边补齐
定义的width和height只是content部分
padding和border会把盒子撑大
盒子的大小 content+padding+border
3.
定位 : top,left,right,bottom 只有元素增加定位的情况下才会使用
相对定位 老大
一般不要去用top,left,right,bottom
绝对定位 老二
元素会脱离文档流
一般不要去用margin，用top，left，right，bottom
虽然都能达到效果，但是为了开发的方便，代码的简洁。
固定定位 肯定不是同一个爹
元素会脱离文档流
使用场景：回到顶部
侧边栏的广告
纯种的野孩子，只有浏览器的窗口可以管的住
一般的情况下：相对定位和绝对定位是同时出现的
一般所有的下拉框都是绝对配合着相对定位完成的
浮动
浮动分为两种，左浮动和右浮动
浮动会脱离文档流
难点在于清除浮动
清除浮动： 不是清除自身的浮动，而是清除上一个浮动对自身造成影响
标签：侧边栏 表示 显示 行内元素 列表 width otto 情况下 ima
原文地址：https://www.cnblogs.com/lttt/p/10956933.html
