第三天学习的内容

05.29
一.文本类样式
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只针对背景颜色

二.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 背景图片的大小

三.框模型
任何一个元素，都可以理解成一个盒子
盒子是可以装"东西"
里面东西跟"盒子的包装"有一定的空间
两个盒子或者说多个盒子，盒子之间是不是有一定的"距离"(空间)
盒子模型的组成
margin 外边距 盒子与盒子之间的距离
border 边框 包装盒
padding 内边距 填充物
content 内容 买好的东西
margin 合起来写的属性
4个
当你写一个的时候，四个全部相同
两个的时候，上右，对边补齐
三个的时候，上右下，对边补齐
margin-top margin-right margin-bottom margin-left
这四个属性可以单独的拿出来写
border 边框 合写的属性
border-color 颜色
border-top-color: ;
border-left-color:
border-style 样式
也分上下左右
border-width 宽度
也分上下左右
写的时候不需要区分顺序
padding
上右下左
对边补齐
定义的width和height只是content部分
padding和border会把盒子撑大
盒子的大小 content+padding+border
四.css的布局
定位 : top,left,right,bottom 只有元素增加定位的情况下才会使用
1.相对定位：relative 老大
一般不要去用top,left,right,bottom
2.绝对定位:absolute 老二
元素会脱离文档流
一般不要去用margin，用top，left，right，bottom
虽然都能达到效果，但是为了开发的方便，代码的简洁。
3.固定定位 肯定不是同一个爹
元素会脱离文档流
使用场景：回到顶部
侧边栏的广告
纯种的野孩子。只有浏览器的窗口可以管的住
一般的情况下：相对定位和绝对定位是同时出现的
一般所有的下拉框都是绝对配合着相对定位完成的
相对定位的作用一般是用来管着绝对定位的
五.浮动
浮动分为两种，左浮动和右浮动
浮动会脱离文档流
难点在于清除浮动
清除浮动： 不是清除自身的浮动，而是清除上一个浮动对自身造成影响
overflow: hidden; /*溢出隐藏，主要是用于清除浮动*/
overflow: scroll; /*溢出部分以滚动条显示*/
<!--增加一个空的标签，清除所有的浮动，即可解决高度失效的问题-->
<p style="clear: both;"></p>