css 布局方式

布局方式

　　1 布局：设置元素在网页中的排列方式及显示效果

　　2 分类：　　

　　　　1 标准流布局（文档流，普通流，静态流）

　　　　　　是默认的布局方式

　　　　　　特点：将元素按照书写顺序及元素类型，从上至下，从左至右排列

　　　　2 浮动布局

　　　　　　设置元素浮动　

　　　　　　　　属性：float

　　　　　　　　取值：left / right / none (默认值)

　　　　　　浮动元素的特点：

　　　　　　　1 元素设置浮动（left / right），会脱离文档流，在文档中不再占位，后面正常的元素会向前占位，浮动元素会“漂浮在文档流上方”

　　　　　　　2 元素设置浮动，会从它当前所在文档中的位置脱流向左或向右浮动。

　　　　　　　3 多个元素同时左浮或右浮，浮动元素会依次停靠在前一个浮动元素的边缘，中间没有缝隙

　　　　　　　4 浮动元素会在父元素的尺寸范围内浮动，多个浮动元素无法并排显示时，会自动换行，停靠在其他浮动元素边缘

　　　　　　　5 任何元素只要设置浮动，就具有块元素的特征，可以手动调整宽高

　　　　3 浮动引发的特殊效果：

　　　　　　文字环绕效果：

　　　　　　　　浮动元素脱流，在文档中不占位，后面正常元素会向前占位，可能被浮动元素遮挡，但是浮动元素只会遮挡正常元素尺寸区域，

　　　　　　　　不会遮挡正常文本内容，文本会围绕在浮动元素周围显示。

　　　　4 元素浮动引起的问题：

　　　　　　子元素如果全部设置浮动，在文档中不占位，父元素高度为0：

　　　　　　　　1 父元素的背景图片和背景颜色无法显示

　　　　　　　　2 父元素后面的正常元素会上移，影响布局

　　　　　　解决：

　　　　　　　　1 为父元素指定高度（常见写法）

　　　　　　　　2 设置父元素 overflow:hidden;

　　　　　　　　3 清除浮动的影响：

　　　　　　　　　　属性：clear

　　　　　　　　　　取值：left / right / both

　　　　　　　　　　使用：为正常元素添加clear属性，清除浮动元素带来的影响

　　　　　　　　　　　　left：表示正常元素左边不允许出现浮动元素，

　　　　　　　　　　　　right :正常元素不受右浮元素影响

　　　　　　　　　　　　both:正常元素不受浮动元素影响

　　　　　　　　　　解决父元素高度为0的问题：

　　　　　　　　　　　1　为父元素末尾添加空的块元素

　　　　　　　　　　　2 为空的块元素设置clear:both;　　

　 3 定位布局

　　　1 定位布局：通过调整元素的位置，实现网页布局

　　　2 属性：position

　　　　取值：

　　　　　　1 static:默认值，使用文档流布局　　

　　　　　　2 relative:相对定位

　　　　　　3 absolute:绝对定位

　　　　　　4 fixed:固定定位

　　　　注意：只有元素设置position 属性为 relative / absolute / fixed 三者之一，才认为元素是“已定位元素”

　　　3 偏移属性

　　　　　使用 top / bottom /left / right 偏移属性来调整已定位元素的位置

　　　　　　1 top:取像素值，可正可负，正值表示元素向下移动，负值向上

　　　　　　2 bottom: 正值表示向上移动，负值向下

　　　　　　3 left:正值表示元素向右移动，负值向左

　　　　　　4 right:正值表示元素向左，负值向右

　　　4 分类：

　　　　　1 相对定位 position :relative

　　　　　　　元素设置相对定位之后，可以使用偏移属性调整元素位置，

　　　　　　　相对定位的元素是参照元素在文档中的原始位置进行偏移

　　　　　　　特点：

　　　　　　　　相对定位的元素不会脱离文档流，在文档中始终保留它的原始位置，

　　　　　2 绝对定位 position;absolute:

　　　　　　　绝对定位的元素会脱离文档流，类似于浮动，绝对定位的元素参照一个离他最近的已定位的祖先元素

　　　　　　　会参照浏览器窗口的(0,0)点偏移

　　　　　　　使用：

　　　　　　　　采用“父相子绝” 的方式实现元素绝对定位。父元素采用相对定位，子元素使用绝对定位，实现子元素参照父元素的（0，0）点偏移

　　　　　3 固定定位 position:fixed:

　　　　　　　特点：

　　　　　　　　1 固定定位的元素，永远都参照浏览器窗口进行偏移

　　　　　　　　2 固定定位的元素，会被定位在窗口的某个位置，不会跟随页面滚动而滚动

　　5 调整已定位元素的堆叠次序

　　　　属性：z-index

　　　　取值:无单位的数值，默认为0，数值越大，元素越靠上显示

　　　　注意：

　　　　　1 z-index 属性只能在已定位的元素中使用

　　　　　2 兄弟元素之间可以通过 z-index 数值的大小调整堆叠次序

　　　　　3 父子元素之间，永远是子元素在上，无法通过z-index 调整父子元素的堆叠次序

　　　　　4 如果兄弟元素的z-index 取值相同，后来者居上

2 元素显示效果

　　1 display

　　2 visibility

　　3 透明度设置

　　　　1 属性：opacity 设置元素透明度

　　　　 2 取值：0 （透明）- 1 （不透明）

　　　　 3 注意：

　　　　　　1 元素使用opacity设置半透明，所有显示的内容（背景颜色，文本颜色等）都会呈现半透明效果

　　　　　　2 opacity 是对元素整体透明度的设置，包含元素自身和内部的子元素

　　　　　　3 子元素同时设置透明度，最终的透明度值是在父元素opacity取值的基础上再次进行透明度设置

　　　　　　　　父元素中 opacity: .5;

　　　　　　　　子元素 opacity: .5 ;

　　　　　　　　子元素最终的透明度为 0.5*0.5

　　4 行内块元素的垂直对齐方式

　　　　行内块元素：img input button

　　　　　　属性 vertical-align

　　　　　　取值：top / middle / bottom

　　　　　　作用：调整行内块元素左右元素与其自身的垂直对齐方式

　　5 设置鼠标形状

　　　　属性：cursor

　　　　取值：

　　　　　　1 default 默认值

　　　　　　2 pointer 鼠标在元素上展现为手指的样式

　　　　　　3 text 鼠标展示为 “Ｉ” ，表示普通文本 info的意思　

　　　　　　4 crasshair 鼠标展示为 “+”

3 列表相关属性

　　列表自带内外边距和项目符号

　　1 list-style-type

　　　　设置项目符号

　　　　取值：

　　　　　　1 none(取消项目符号，最常用)

　　　　　　2 disc 实心圆点

　　　　　　3 circle 空心圆点

　　　　　　4 square 实心方块

　　　　　　5 ...

　　2 list-style-image

　　　　指定图片作为项目符号

　　　　取值：url()

　　3 liist-stype-position

　　　　指定项目符号的显示位置

　　　　默认项目符号显示在内容外部，在左边的padding中展现

　　　　取值：

　　　　　　1 outside 默认值

　　　　　　2 inside 设置项目符号显示在内容区域

　　4 属性简写：

　　　属性：　list-stype

　　　　取值：type / image position

　　　　常用：

　　　　　　list-style:none;

　　　　　　取消项目符号

1 过渡效果

　　1 过渡指的是元素的CSS属性值发生变化时的一种平滑过渡效果

　　1 语法：

　　　　1 属性：transition

　　　　　　取值： property，duration，timing-function，delay

　　　　　　注意：

　　　　　　　　1 属性简写时，四个属性值中，duration 是必填项，其他三个属性值可以省略

　　　　　　　　2 transiition属性如果在伪类选择器中设置，元素的过渡效果只发生在第一次属性值改变的过程中，再有属性值变化都不会添加过渡效果

　　　　2 过渡详解

　　　　　　1 属性：transition-property

　　　　　　　取值：css 属性名称

　　　　　　　作用：指定某一个css样式发生值改变时添加过渡效果

　　　　　　　　注意：

　　　　　　　　　1 指定多个属性时，使用逗号隔开

　　　　　　　　　2 可以省略，省略同时，所有涉及值改变的属性都会被自动添加过渡效果

　　　　　　　　　3 all 指定所有CSS属性在值变化产生过渡效果

　　　　　　2 属性：transition-duration:

　　　　　　　取值：以s 为单位的数值

　　　　　　　作用：指定过渡时长

　　　　　　3 属性：transiton-timing-function

　　　　　　　作用：指定过渡效果的速度变化曲率

　　　　　　　　取值：

　　　　　　　　　　1 ease:默认值，慢速开始，中间快速变快，慢速结束

　　　　　　　　　　2 linear:匀速变化

　　　　　　　　　　3 ease-in ：慢速开始，加速结束

　　　　　　　　　　4 ease-out :快速开始，慢速结束

　　　　　　　　　　5 ease-in-out :慢速开始和结束，中间先加速后减速

　　　　　　4 属性：transition-delay

　　　　　　　　取值：以s 为单位的数值

　　　　　　　　作用：指定过渡效果延迟几秒后执行

2 转换属性：

　　　1 转换：改变元素的位置，角度或大小（平移，旋转，缩放）

　　　2 语法：

　　　　1 属性：transform　　

　　　　2 取值：转换函数

　　　　　　1 平移转换

　　　　　　　　1 作用：改变元素在文档中的位置

　　　　　　　　2 函数：translate(x,y)

　　　　　　　　　取值：x 表示水平方向的平移距离

　　　　　　　　　　　　y 表示垂直方向的平移距离

　　　　　　　　　　　　正值表示向右或向下移动

　　　　　　　　　　　　负值相反

　　　　　　　　3 其他情况：

　　　　　　　　　　1 trannslateX(value)　　

　　　　　　　　　　　　指定沿水平方向平移

　　　　　　　　　　2 translaterY(value)

　　　　　　　　　　　　指定沿垂直方向平移

　　　　　　　　　　3 translate(value)

　　　　　　　　　　　　等价于translateX(value)

　　　　　　2 旋转变换

　　　　　　　　1 作用：将元素旋转一定角度，默认的转换原点是元素的中心

　　　　　　　　２　函数：rotate(ndeg)

　　　　　　　　　　取值：以deg角度为单位的数值，

　　　　　　　　　　　　正值表示顺时针旋转

　　　　　　　　　　　　负值表示逆时针旋转

　　　　　　　　　　元素3D转换

　　　　　　　　　　rotateX(ndeg)

　　　　　　　　　　rotateY(ndeg)

　　　　　　3 缩放变换

　　　　　　　　1 作用：改变元素在页面的大小

　　　　　　　　2 函数：scale(value)

　　　　　　　　　取值：无单位的数值，表示缩放比例

　　　　　　　　　　1 value = 1 原始比例显示

　　　　　　　　　　2 value > 1 等比放大

　　　　　　　　　　3 0< value < 1 等比缩小

　　　　　　　　　　4 value < 0 元素不仅会比例，而且会翻转

　　　　　　　　3 其他情况

　　　　　　　　　　scaleX(v) 横向缩放

　　　　　　　　　　scaleY(v) 垂直缩放

　　　　　　转换原点：实际上是元素发生平移，旋转或缩放变换的基准点，默认是元素的中心点

　　　　属性：transform-origin:

　　　　　　取值：x ,y

　　　　　　百分比

　　　　　　方位值：left / center / right

　　　　　　　　　　top / center / bottom

　　　　注意：

　　　　　　1 以元素左上角为（0,0）原点，给出转换原点的坐标位置

　　　　　　2 改变元素的转换基准点会影响元素转换的效果

　　　　　　3 旋转操作会连带元素的坐标轴一起旋转，影响其转换效果

　　　　　　　　transform : translate(50px,50px) rotate(45deg)

　　　　　　　　transform:rotate(45deg) translate(50px);

巴特西

css 布局方式

最新文章

热门文章