position 相关

position

relative:距离自己原先位置发生变化

absolute:寻找最近的具有position属性的父元素进行定位,如果没有的话,就根据整个文档进行定位。

absolute:脱离文档流(飞起来了,离开了自己的位置,后面的就上去了)top ,

float:漂浮,脱离文档流

float:right(left):向右漂浮


2017/08/31

Relative: 相对于自身位置进行定位,初始位置还在

Absolute:相对于最近的具有relative/Absolute属性的父元素进行定位,如果没有,则相对于body进行定位,初始位置已经不存在了(其他元素的文字也会占据初始位置),可以把行内元素变成块级元素

Static: 默认设置

Fixed: 相对于窗口永远不动,float 对 其不起作用。

Float:左右漂浮,

(1)跟在最前面的标准流块级元素下一行

(2)越过所有行内元素

(3)跟在前面的float元素的后面,

(4)当所有的float元素总宽度超过一行的时候,后面的float元素会换行,换行之后, 

       a 左边缘与前面的float元素右边缘对齐或者 

       b 与body左边缘对齐


a


b

(5)初始位置不存在了(文字不会占据初始位置)

(6)本来块级元素的默认宽度是父元素宽度的100%,但是加了float之后,宽度变为内容宽度

(7)可以把行内元素变为块级元素


alignment: 以baseline对齐



 clear: 只对自己有效果,和 float 搭配用。


overflow:当内容超过div的大小时。   (可以分别设置x轴,y轴)

a  visible:字全部显示

b  hidden 只显示div的大小

scroll 带有滚动条 

d  auto  带有滚动条(和scroll有区别,查一查)


visibility :显示或隐藏

visible

hidden

collapse:用于表格


content-box:内容固定,加修饰的额话往外扩

border-box:边框固定,加修饰的话会挤压内容

不包括margin


www.phpstudy.net/css3

www.css88.com


双飞翼解决的问题

1 两个边框部分固定,中间内容随着屏幕大小自动变化

2中间部分先被渲染,让用户先看到中间的内容


height和width的百分之多少是以父元素来衡量标准。如果父元素的height是0(默认值),那子元素也是0

块级元素的width的默认值是100%,而height的默认值是0

如果块级元素用float修饰,变成行内元素,width默认值也变成0了。


flex 弹性盒子——display:flex

1  flex-direction:row,这时,设置的width失效

    flex-direction:column ,这时,设置的height失效

2 -webkit-flex 用来设置比例

3 older用于设置flex的顺序

ul>li*4>a

ul:无序列表

<li>

ol:有序列表




align-content  对只有一行元素不起作用,要加 flex-wrap:wrap(换行)

justify-content:水平对齐方式

align-content,align-items:纵向对齐方式


clip 

默认值:auto  对象无剪切

适用于:绝对定位元素

示例:clip:rect(auto 50px 20px auto)

说明:上边不剪切,右边从左起第50个像素开始剪切直至最右边,下边从上起第20个像素开始剪切直至最底部,左边不剪切

上-左 方位的裁剪:从0开始剪裁直到设定值,即 上-左 方位的auto值等同于0;

右-下 方位的裁剪:从设定值开始剪裁直到最右边和最下边,即 右-下 方位的auto值为盒子的实际宽度和高度;

上→右→下→左 的顺序

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,814评论 1 92
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,519评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,630评论 0 26
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,806评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,339评论 0 11