1.定在某个位置:简称定位 2.浮动和定位的区别 定位的分类:定位模式 a.静态定位:(标准流) b.相对定位(不脱离文档流)---以自己左上角为基准点定位 c.绝对定位absolute  (拼爹型:完全脱离文档流---不占有位置,飘起来的) 拼爹型:绝对定位的位置和父元素有关,若父元素没有定位,那就会以浏览器左上角基准点来定位. 最常用”子绝父相”---(若父也绝对定位那父就脱标了,那父下面的的元素就上来了,那布局就又乱了.) 绝对定位的盒子水平/垂直居中---加了绝对定位的盒子用margin…

CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用,比如策略战争游戏,比如从移动版的网页,屏幕狭小.空间有限:比如你可能想要放置许多信息的紧凑消息框,不用就会充满整个UI.我们简单的例子完成后就会像下面这样: 注意: 你能看完整的示例,可运行在 info-box.html (source code).检出它以理解你在本文章里要建立什么. 你可能会想:…

CSS学习摘要-定位 注:全文摘自MDN-CSS定位 定位允许您从正常的文档流布局中取出元素,并使它们具有不同的行为,例如放在另一个元素的上面,或者始终保持在浏览器视窗内的同一位置. 本文解释的是定位(position)的各种不同值,以及如何使用它们. 文档流 定位是一个相当复杂的话题,所以我们深入了解代码之前,让我们审视一下布局理论,并让我们了解它的工作原理. 首先,环绕元素内容添加任何内边距.边界和外边距来布置单个元素盒子--这就是 盒模型 ,我们前面看过. 默认情况下,块级元素的内容宽度是…

今天学习之前剩下的一个问题:CSS的position属性.首先归纳出和position相关的问题: position作为一个属性,它一共有哪几个属性值? position常用的属性值有哪几个?分别有什么特点? 第一个问题:position作为一个属性,它一共有哪几个属性值? 对于position属性,他一共有5个值,分别是 static:默认值.没有定位,元素出现在正常的流中. relative:生成相对定位的元素,相对于其正常位置进行定位.正常位置也就是指如果没有position属性它会出现的…

1.文档流介绍 网页布局的核心就是利用css来摆放盒子, 把盒子摆放在合适的位置. css的定位机制有以下3种(网页布局一般需要3种搭配使用): a.普通流(标准流) b.浮动 1.浮动只有左右. 2.浮动后找离他最近的父元素靠左/右对齐. 3.!!!一个父盒子里的子盒子,如果其中一个子元素有浮动的话,则其他子元素都需要浮动,这样才能一行显示. 4.浮动飘在标准流的上面,压住标准流. 5.浮动元素有哪些特性?(浮动影响盒子显示模式) 1.块级元素浮动后会有行内块特性 2.行内元素浮动后也具有行内…

CSS相对定位        设置为相对定位(relative)的元素会偏移某个距离,元素仍保持其未定位前的形状,他原本所占的空间仍然保留 相对定位是一个非常容易掌握的概念,如果对一个元素进行相对定位,它将出现在它所在的位置上 ,然后可以通过设置垂直或者水平位置让这个元素相对于它的起点进行移动.如果将top 设置为20px, 那么框的位置就在顶部下方20px的地方,如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动. #box_relative {…

1.中间栏先加载  !!!(若不是这个条件的话  ,那可以用  calc 或者flex布局来实现  中间栏自适应,左右栏定宽) 2.中间栏自适应   width:100% 3.左右栏固定宽 左中右  浮动  (本来应该在一行显示的,但是中间栏宽100% ,所以左右会掉下来,此时就需要设置margin-left) 左margin-left:-100% 右 margin-left:  200px(自身宽) 父元素设置padding: 0  200px  (父元素不能右宽100%,保证左右留200给左…

1.渐进增强,优雅降级 2.浏览器前缀 3.背景渐变   4.css  验证工具 2种方式:第2种支持验证本地的css(推荐) 5.css压缩  ----(节约空间,节省带宽) 6.旋转轮播图 案例: 注意: 1.3d  旋转      3d 的translateZ 2.子盒子要一般要写transform-style属性 更有3d效果 3.过渡做动画 4.父元素透视属性  有3d效果…

1.css用户界面样式 a.鼠标样式(记住几个兼容性好的) cursor:default/pointer/move/text; b.轮廓 outline outline:2px solid red: outline:0/none(取消轮廓线) c.防止拖拽文本域 textarea{resize:none:} d.背景图片和背景颜色一起出现时,背景颜色在最底层. e.行内块和文字对齐 vertical-align  对块级元素不起作用 图片和文字默认基线对齐 f.去除图片底侧空白缝隙 g. 溢出的…

1.元素的显示模式 a.被动转换:浮动.绝对定位.固定定位(转换为行内块元素特性的模式---不设置宽度时,模式换行为行内块模式后宽度是内容宽度.) b.主动转换:display:block  / inline-block displsy:none(隐藏元素,不保留位置) display:block(显示元素和块级元素显示模式的意思) display:inline-block(转换成行内块模式) visiblity:hidden(隐藏元素,位置仍然保留) visiblity:visible(显示元…