CSS两个经典BUG+层模型+浮动元素+伪元素+阿里开发小常识

CSS各种零散知识点,开发技巧以及, 伪元素, 浮动, 定位的介绍

CSS

知识点1

  • 块级元素如果不设高度, 块级元素的高度由元素内容撑开.
  • 不设宽度的宽度自适应. 例: width: auto; auto是指不管浏览器的宽高, 系统自适应
  • height的默认值是0
  • opacity:0.5; 设置一个元素的透明程度,后面的值在0-1之间.
  • 设定位absolute最合适, 设参照物relative最合适
  • 浮动元素可以使图片和文字一起展示.
  • z-index: z轴只在定位元素中生效, 设置层数, 多个定位元素谁在上面.
  • 阴影 例: box-shadow: 2px 1px 7px #000;
  • clear: both; 清除左右两侧的浮动.必须要基于块级元素
  • 去掉ul前面的圆点, 在ul的CSS属性中写上list-style: none;
  • ‘#’占位符, 锚点
  • 浮动元素图片包裹文字

知识点2

  1. 单行溢出文字打点(三件套)
    • 在div的CSS属性后面加上white-space: nowrap;这样超出文字就不会折行
    • 继续加入overflow: hidden;溢出部分隐藏
    • 最后text-overflow: ellipsis; 溢出部分文字打点
  2. 设置背景图片
    • background-image: url(图片地址);
    • background-size:100px 100px/ 100% 100%;
    • 如果使用小图会重复铺满边框, 不想重复的话可以使用background-repeat : no-repeat/ repeat-x/ repeat-y; x轴重复,y轴重复
    • 背景图片出生位置
      background-position:10px,10px/ right top/ center center/ 50% 50%;
  3. 隐藏图片下的文字(有网/ 无网情况)
    • 使用
      text -indent: 200px;
      white-space: nowrap;
      overflow: hidden;
    • 使用
      height:0;
      padding-top:50px;
      overflow:hidden;

开发小常识

  • 行级元素可以嵌套行级元素, 但是行级元素不能放块级元素和行级块元素.
  • 行级块元素和块元素里面可以放任何东西
  • p标签里面不能嵌套div, p标签里面也不能嵌套p标签
  • 一旦p标签中放上div标签, div标签就把p标签截断,变成两个
  • a标签中不能嵌套a标签
  • 一个元素如果被设置成了position: absolute; 或者 float: left则该元素将自动变成display: inline-block; relative不触发bfc
  • 写完浮动元素之后一定要把浮动清除掉

经典BUG

  1. margin塌陷
  • 在外边框处加一个顶棚, border-top: 10px soild black;(一般不使用)
  • bfc(在一定的机制下每个盒子又能触发自己的功能)—-block format context.
    触发bfc之后将会产生一个独特的渲染规则.其中有以下属性可以触发bfc属性:
    1. overflow: hidden; 所有溢出盒子的部分隐藏.
    2. display:inline-block;
    3. float: left;
    4. position: absolute;

2.margin水平合并

  • bfc属性依然可以解决.
    但在正常开发时是不要解决的, 破坏了程序的框架

3.行级元素垂直的margin是不好使的.

层模型

  1. 绝对定位:
    脱离原来位置进行定位
    相对于最近的有定位的父级进行定位, 设定位是,最好把父级设置成 relative 如果没有最近有定位的则相对于文档进行定位
    position: absolute;
    一般配合两个值一起使用:
例: left:100px; top100px;
  • left是横方向, 即x轴.距离左侧浏览器壁
  • top是纵方向, 即y轴.距离上浏览器壁
    • right是距离右侧浏览器壁多少多少像素.
    • bottom元素下边线距离浏览器的距离

2.relative
保留原来出生位置, 进行层定位
相对于自己出生位置进行定位

3.fixed 固定定位:
position: fixed; 相对于可视区窗口进行定位.(ie6不能用)

浮动元素

  1. 基本特性: 排队 图片包裹文字
  2. 例: float: right; float: left;
  3. 产生浮动流, 会废除原来块级元素特点. 文本/ 文本类元素和触发bfc的元素, 都能看到浮动元素.
  4. clear: both; 清除两侧的浮动流.必须要基于块级元素
  5. 例:例子
    注意:p标签的border的粗细值为0, 撑开了父级的盒子, p在容器的最底部.
    但破坏了结构
  6. 因此接下来这一种清除伪元素方法比较好, 采用伪元素的方法 :例:例重点内容.wrapper::after{
    content: “”;
    clear: both;
    display: block;
    }
  7. 在ie7,ie6中没有伪元素, 因此可以采用overflow: hidden;/ display: inline-block;/ zoom: 1;
    在zoom前面加一个”_”下划线,只有ie6能识别, 要是在它前面加一个” “, 只有ie6,ie7可以识别.*

伪元素

  • 每一种元素都有两种伪元素, 分别为beforeafter, 一个是逻辑最前一个是逻辑最后, 但它在HTML中没有结构, 可是它可以通过CSS属性去更改它.
  • 例: 例子
  • 必须要在CSS属性中有content属性(可以不加任何东西,比如 content: “”), 否则操作不了伪元素的任何东西.
  • 默认的display是inline.
越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!