CSS定位

时间:2019-09-15
本文章向大家介绍CSS定位,主要包括CSS定位使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

CSS定位

float浮动属性

浮动:css样式表中用float来表示,它有

属性值 描述
none 表示不浮动,所有之前讲解的HTML标签默认不浮动
left 左浮动
right 右浮动
inherit 继承父元素的浮动属性

常见作用

浮动实现布局

文字环绕

出现问题

父盒子高度塌陷

清除浮动的方式

父盒子设置固定高度

内墙法

伪元素清除法

overflow:hidden

伪元素清除法

p::after{
    /*p::after{}一定要有content。表示在p元素内部的最后面的添加内容*/
    content:'...'
}

overflow:hidden

属性值 描述
visible 默认值。内容不会被修剪,会呈现在元素框之外
hidden 内容会被修剪,并且其余内容不可见
scroll 内容会被修剪,浏览器会显示滚动条以便查看其余内容
auto 由浏览器定夺,如果内容被修剪,就会显示滚动条
inherit 规定从父元素继承overflow属性的值

Block Formtting Context

BFC区域一条规则:计算BFC(块级盒子)的高度时,浮动元素也参与计算

BFC布局规则

1.内部的Box会在垂直方向,一个接一个地放置。

2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

3.每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。4.BFC的区域不会与float 元素重叠。

5.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。

6.计算BFC的高度时,浮动元素也参与计算

BFC产生条件

1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

CSS定位

css position属性用于指定一个元素在文档中的定位方式。toprightbottomleft属性则决定了该元素的最终位置。

属性值 描述
static 默认。静态定位, 指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top, right, bottom, leftz-index属性无效。
relative 相对定位。 元素先放置在未添加定位时的位置,在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)
absolute 绝对定位。不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并
fixed 固定定位。 不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变

relative

1.不脱离文档流

参考点

以元类的位置作为参考点,可以进行top,left,right,bottom进行位移

y轴是相反的

absolute

1.脱离文档流

2.层级提高

参考点

static:

无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。

相对于最近的非static祖先元素定位,如果没有非static祖先元素,那么以页面左上角进行定位子绝父相

fixed

1.脱离文档

参考点

html左上角为参考点

z-index

  1. z-index只应用在定位的元素,默认z-index:auto;
  2. z-index取值为整数,数值越大,它的层级越高
  3. 如果元素设置了定位,没有设置z-index,那么谁写在最后面的,表示谁的层级越高。
  4. 从父现象。通常布局方案我们采用子绝父相,比较的是父元素的z-index值,哪个父元素的z-index值越大,表示子元素的层级越高。

background

属性 属性值 描述
background-color 单词颜色表示法、rgb、十六进制 设置元素的背景颜色
background-image url(‘http://www.aaa.com/1.png‘) 给一个元素设置一个或多个背景图像
background-position top,left,center,百分比,px, 为每一个背景图片设置初始位置
background-repeat repeat-x repeat-y repeat spance round no-repeat 定义背景图像的重复方式。 背景图像可以沿着水平轴,垂直轴,两个轴重复,或者根本不重复。

background-size

背景图比例

CSS Sprite雪碧图技术

使用雪碧图的使用场景

静态图片,不随用户信息的变化而变化

小图片,图片容量比较小(2~3k)

加载量比较大

一些大图不建议制作雪碧图

优点

有效的减少HTTP请求数量

加速内容显示

每次请求一次,就会和服务器连接一次,建立连接是需要额外的时间开销的。

雪碧图的实现原理

它通过css的背景属性的backrground-position的来控制雪碧图的显示。

控制一个层,可显示的区域范围大消息,通过一个窗口,进行背景图的移动。

border-radius

圆角属性

画圆

border-radius: 50%;

圆环

    border: 3px solid #FC0107;
    border-radius: 50%;

box-shadow 阴影

语法:

box-shadow: h-shadow v-shadow blur color inset;
描述
h-shadow 必需。水平阴影的位置。允许负值
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
color 可选。阴影的颜色。
inset 可选。将外部阴影 (outset) 改为内部阴影。

布局

行内元素水平居中

1

text-align:center
line-height:盒子高度

2

display:table-cell 转为单元格
vertical-align:middle

块级元素水平居中

1

position:absolute
margin:auto
left:0
right:0
top:0
bottom:0

2

display:table-cell
vertical-align:middle
text-align:center

display:inline-block

3

position:absolution
top:50%
left:50%
margin-left:-50px
margin-top:-50px

原文地址:https://www.cnblogs.com/zx125/p/11523776.html