A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

大煊

初级黑马

  • 黑马币:32

  • 帖子:11

  • 精华:0

© 大煊 初级黑马   /  2019-3-19 08:54  /  1039 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

来一波技术贴,整理下自己的东西position:
static                                        静态定位     无定位的意思相当于border的none。静态定位无法使用边偏移。
relative                                     相对定位  自恋型,相对自身原来位置改变,相对于自己原来的标准流区域继续占有。后面的盒子还是按照标准流。
absolute                                   绝对定位以父亲元素进行定位,父亲需要定位。如果没有定位,则参考浏览器文档为准。,不保留位置,脱离标准流,不占用位置。
                                                 子绝父相。父亲因为要占有位置,所以必须用相对定位。这样相邻的就不上去了。
绝对定位无法用margin水平居中。
fixed                                         固定定位:不占位置,只认浏览器可视窗口为主。和父级没有任何关系,不随滚动条滚动。


定位=定位模式+边偏移
页面在实际显示盒子的位置的时候包含margin值。
标准流和浮动压不住图片

定位居中
先移动盒子的一般top50%,接着往回走自己margin一半。margin-top:-多少px;



清除浮动:

为神马要清除浮动?

1. 当父元素没有高度的时候,浮动的子元素 无法撑开父元素 ,导致父元素高度为0,父元素后面标准流中的兄弟元素就会占据父元素的位置

清除浮动的属性:  clear:both

清除浮动的方法:

1. 额外标签法 增加一个带有清除浮动属性的 空标签
   用法: 谁浮动就给最后浮动的元素后面增加一个 带有清除浮动属性的空标签
   缺点:会给页面增加许多没有用的空标签 导致页面结构混乱

2. 给父元素设置overflow :hidden

3.3.使用after伪元素清除浮动。(假的标签,使用css创造)
.clearfix:after{
   content:"";        content属性一定要写,老版本的火狐“”里加一个点.
   display:block;
    height:0;
     visibility:hidden;
    clear:both;
}
  .clearfix{
         *zoom:1;              兼容IE6 7
}

4使用双伪元素清除浮动

z-index
只能给相对定位,绝对定位,固定定位设置层级
定位层级高于标准流,浮动元素
默认值为0 ,后来者居上,谁靠后,谁层级高。
只能设置0,负整数,正整数。


忍得住寂寞,方能守住繁华。
.块级元素的特点:独占一行 ;可以控制大小、内外边距 ;宽度默认为100% ;容器可以嵌套其它元素
  注:文本类块级元素h,p,dt不能嵌套div 包括自己

2 行内元素的特点:一行内显示多个 ;只能容纳文本或其他行内元素;宽高无效(包括垂直方向的内外边距!) ;默认宽度是本身 a不能包a但是可以嵌套块级!
3.行内块元素特点:行内块:(img input textarea... )可以设置大小;同一行显示(白色空隙是换行引起);大小由内容决定
4.margin塌陷解决:1给父元素设置边框   2给父元素设置一个像素上内边距  3给父元素设置overflow:hidden属性(常用)  4父元素/子元素加float属性  5父元素/子元素加position:fixed/absolute属性
5.浮动元素特点:1脱离标准流 不占位置   2显示模式改变 类似行内块元素  3只会影响当前和后面的标准流元素   4不会超过/覆盖父元素的边框和内边距
6.font:font-style font-weight (font-size/line-height)! font-family 注:使用综合写法不带行高有默认字体大小行高
7.span,a,em,strong,del,ins...这类元素不能设置text-align:center/right/left属性
8.thead 和tbody (tfoot)之间不能跨列合并
9.浮动盒子边变行内块 可以设宽高
10.计算器快捷运行:运行calc
11.关于li在版心里装不下的时候处理办法:
可以设置子盒子宽度(加上外边距)大于父盒子,子盒子可以比父盒子大
12.div嵌套img时多出的空白怎么解决?给img设置vertical-align为baseline以外的值或者改变img的显示模式


0 个回复

您需要登录后才可以回帖 登录 | 加入黑马