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

hi, 我来了, 最近的事情感觉好多啊, 马上就要十月一了, 一方面要做赶博客进度, 另一方面还要开始准备期中考试(博主今年大二), 并且还要找房子出去住, 真是忙死了.
闲话少说, 接下来进入正题, 借着上一篇继续学习web前端, 这一篇博客写完之后打算做个淘宝首页.

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可以识别.*

伪元素

• 每一种元素都有两种伪元素, 分别为before和after, 一个是逻辑最前一个是逻辑最后, 但它在HTML中没有结构, 可是它可以通过CSS属性去更改它.
• 例:
• 必须要在CSS属性中有content属性(可以不加任何东西,比如 content: “”), 否则操作不了伪元素的任何东西.
• 默认的display是inline.