黑马程序员技术交流社区

标题: 基础回忆 [打印本页]
作者: 15170281138    时间: 2019-3-19 08:57
标题: 基础回忆
css高级技巧
显示隐藏
  display（重点）
   1.不占有位置，脱离标准流
   2.隐藏
   none  block
  visibility（了解）
   1.占有位置，不会脱离标准流
   2.隐藏
   visible
  overflow（重点）
   1.溢出隐藏
   visible默认显示
   scroll  显示滚动条 不会超出盒子大小
   auto 如果超出显示滚动条  不超出则不显示滚动条
案例：仿土豆显示与隐藏
  1.重点知识  .bg:hover  .hop  当鼠标经过类bg   显示里面的子元素 .hop
  2.必须是父子级关系    bg为hop的父级元素   
用户界面操作cursor
  默认显示 default
  文本图标text
  小手图标pointer
  移动图标move
  禁止图标not-allowed
轮廓线 outline
  清楚表单外轮廓线  outline：none；或者0
防止文本域拖拽resize
  resize：none
垂直对齐vertical-align
  只对行内块和行内元素有效  块元素无效
  属性值
   middle居中对齐
   top 顶端对齐
   bottom底端对齐
   baseline基线对齐
  行内块元素默认与基线对齐
清除图片底边白边
  添加vertical-align属性
   middle
   top
   bottom
  把行内块元素转为块元素
   display：block；
溢出文字显示省略号3部曲
  1.强制文字独占一行  不换行  white-space：nowrap;
   
  2.overflow：hidden；文字溢出隐藏
  3.text-overflow：ellipsis；溢出用省略号代替
精灵图是用（重要）
  子主题 2
   为了有效的减少服务器的响应与请求
   使用核心背景定位
   一般定位值为负值
   需精确测量每一个图片的大小和位置
滑动门
  1.滑动门需要使用a包着span
  2.a负责左门  span负责右门
  3.a和span  都必须转换为行内块元素
  4.只能设置高度不能设置宽度 宽度由内容撑开
  5.左右滑动门分别设置padding-left  撑开盒子
  6.都必为背景图片
  7.鼠标经过显示凹起设置为     a:属性    a：属性   span    a和span 必须同时设置鼠标经过 用到 仿土豆案例     当鼠标经过a时显示 子元素 span
负值之美
  
css三角之美
  1.宽高为0  设置边框大小为100  分别改变四条边的颜色 即可
  2.只想要一个三角 就只给一个边框加上颜色 其余必须改成 transparent  透明背景
显示隐藏
display（重点）
  1.不占有位置，脱离标准流
  2.隐藏
  none  block
visibility（了解）
  1.占有位置，不会脱离标准流
  2.隐藏
  visible
overflow（重点）
  1.溢出隐藏
  visible默认显示
  scroll  显示滚动条 不会超出盒子大小
  auto 如果超出显示滚动条  不超出则不显示滚动条
案例：仿土豆显示与隐藏
1.重点知识  .bg:hover  .hop  当鼠标经过类bg   显示里面的子元素 .hop
2.必须是父子级关系    bg为hop的父级元素   
用户界面操作cursor
默认显示 default
文本图标text
小手图标pointer
移动图标move
禁止图标not-allowed
轮廓线 outline
清楚表单外轮廓线  outline：none；或者0
防止文本域拖拽resize
resize：none
垂直对齐vertical-align
只对行内块和行内元素有效  块元素无效
属性值
  middle居中对齐
  top 顶端对齐
  bottom底端对齐
  baseline基线对齐
行内块元素默认与基线对齐
清除图片底边白边
添加vertical-align属性
  middle
  top
  bottom
把行内块元素转为块元素
  display：block；
溢出文字显示省略号3部曲
1.强制文字独占一行  不换行  white-space：nowrap;
  
2.overflow：hidden；文字溢出隐藏
3.text-overflow：ellipsis；溢出用省略号代替
精灵图是用（重要）
子主题 2
  为了有效的减少服务器的响应与请求
  使用核心背景定位
  一般定位值为负值
  需精确测量每一个图片的大小和位置
滑动门
1.滑动门需要使用a包着span
2.a负责左门  span负责右门
3.a和span  都必须转换为行内块元素
4.只能设置高度不能设置宽度 宽度由内容撑开
5.左右滑动门分别设置padding-left  撑开盒子
6.都必为背景图片
7.鼠标经过显示凹起设置为     a:属性    a：属性   span    a和span 必须同时设置鼠标经过 用到 仿土豆案例     当鼠标经过a时显示 子元素 span
负值之美

css三角之美
1.宽高为0  设置边框大小为100  分别改变四条边的颜色 即可
2.只想要一个三角 就只给一个边框加上颜色 其余必须改成 transparent  透明背景

position定位
静态定位static
  占有原来的位置
  无定位
  没有边便宜
相对定位relative以自我为中心
  相对于自己的位置移动（以自己为中心）
  占有原来的位置不会脱离标准流
绝对定位absolut以父亲为中心
  完全脱离标准流（不占有原来的位置）
  如果父元素没有定位  以浏览器为准定位
  如果父元素有定位（相对 绝对 固定）将依据最近的已经定位的父元素（祖先）进行定位
重点：子绝父相
  父亲占有位置  子参考父元素定位
固定定位fixed以浏览器可视窗口为准
  类似绝对定位
   跟父元素么有关系
   不随滚动条滚动
  完全脱离标准流 完全不占有原来的位置
  相对于浏览器可视窗口  
绝对定位的盒子居中对齐
  绝对定位不能使用margin：auto；居中
  绝对定位居中方法
   1.设置绝对定位边偏移50%
   2.子盒子高度的一般
z-index 堆叠顺序
  1.只能用于定位元素（static）除外    不能用于标准流
  2.只有正整数 0  和负整数
  3.不能设置单位
定位元素的转换标签显示模式模式
  1.定位会转换标签显示模式   static除外   
  2.都会转换成行内块元素
外边距合并问题
  如果加了浮动 绝对定位固定定位元素不会发生外边局合并问题
定位总结
  
静态定位static
占有原来的位置
无定位
没有边便宜
相对定位relative以自我为中心
相对于自己的位置移动（以自己为中心）
占有原来的位置不会脱离标准流
绝对定位absolut以父亲为中心
完全脱离标准流（不占有原来的位置）
如果父元素没有定位  以浏览器为准定位
如果父元素有定位（相对 绝对 固定）将依据最近的已经定位的父元素（祖先）进行定位
重点：子绝父相
父亲占有位置  子参考父元素定位
固定定位fixed以浏览器可视窗口为准
类似绝对定位
  跟父元素么有关系
  不随滚动条滚动
完全脱离标准流 完全不占有原来的位置
相对于浏览器可视窗口  
绝对定位的盒子居中对齐
绝对定位不能使用margin：auto；居中
绝对定位居中方法
  1.设置绝对定位边偏移50%
  2.子盒子高度的一般
z-index 堆叠顺序
1.只能用于定位元素（static）除外    不能用于标准流
2.只有正整数 0  和负整数
3.不能设置单位
定位元素的转换标签显示模式模式
1.定位会转换标签显示模式   static除外   
2.都会转换成行内块元素
外边距合并问题
如果加了浮动 绝对定位固定定位元素不会发生外边局合并问题
盒子模型
盒子组成
  内容
   
  边框
   border-top上边框
   border-right有边框
   border-bottom底边框
   border-left左边框
  内边距margin
   1.margin 上下左右  内容到边框的距离
   2.内边距的两大特性
    1.当内边距有宽度时  给内容加内边距会撑大盒子      解决放法 用盒子宽度减去多余的宽度
    2.当盒子没有宽度是  设置padding  盒子不会被撑大
  外边距
   外边距塌陷问题
    1.上下垂直外边距  会塌陷  会选择较大的外边距  10+20  =20      解决方法  尽量给一个盒子的外边距
    2.当父元素没有设置边框及外边距时  会产生合并（塌陷问题）  解决方案
     1.给父盒子加1像素边框
     2.给父盒子加一个内边距
     3.设置overflow：hidden  溢出隐藏
盒子的大小计算
  盒子的实际宽度等于 两个边框的宽度加上两个内边距的宽度加上内容的宽度
盒子居中对齐
  设置margin：auto；  或者  0 auto   。盒子会浏览器居中
width>padding>margin按照这个顺序使用  较好
盒子组成
内容
  
边框
  border-top上边框
  border-right有边框
  border-bottom底边框
  border-left左边框
内边距margin
  1.margin 上下左右  内容到边框的距离
  2.内边距的两大特性
   1.当内边距有宽度时  给内容加内边距会撑大盒子      解决放法 用盒子宽度减去多余的宽度
   2.当盒子没有宽度是  设置padding  盒子不会被撑大
外边距
  外边距塌陷问题
   1.上下垂直外边距  会塌陷  会选择较大的外边距  10+20  =20      解决方法  尽量给一个盒子的外边距
   2.当父元素没有设置边框及外边距时  会产生合并（塌陷问题）  解决方案
    1.给父盒子加1像素边框
    2.给父盒子加一个内边距
    3.设置overflow：hidden  溢出隐藏
盒子的大小计算
盒子的实际宽度等于 两个边框的宽度加上两个内边距的宽度加上内容的宽度
盒子居中对齐
设置margin：auto；  或者  0 auto   。盒子会浏览器居中
width>padding>margin按照这个顺序使用  较好







欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2