浮动与定位

浮动

最本质功能:实现并排

浮动使用的要点

  • 要浮动,并排的盒子都要设置浮动
  • 父盒子要有足够的宽度,否则子盒子会掉下去

浮动的顺序贴靠特性

子盒子会按顺序进行贴靠,如果没有足够空间,则会寻找再前一个兄弟元素

浮动的元素一定能设置宽高

浮动的元素不再区分块级元素、行内元素,已经脱离了标准文档流,一律能够设置宽度和高度,即使它是span或者a标签

利用浮动实现网页布局

  • 垂直显示的盒子,不要设置浮动,只有并排显示的盒子才要设置浮动
  • “大盒子带着小盒子跑”,一个大盒子中,又是一个小天地内部可以继续使用浮动
  • 超市售卖的塑料袋0.3元一个,div是免费的!不要节约盒子!

BFC规范和浏览器差异

BFC( Box Formatting Context,块级格式化上下文)是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然

从一个现象说起

一个盒子不设置 height,当内容子元素都浮动时,无法撑起自身

我们就说这个盒子没有形成BFC

如何创建BFC

  1. float的值不是none
  2. positon的值不是static或者relative
  3. display的值是inline-block,flex,后者inline-flex
  4. overflow:hidden

overflow:hidden的三个作用

  1. 溢出隐藏

给一个元素中设置overflow:hidden,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位。

一般情况下,在页面中,一般溢出后会显示省略号,比如,当一行文本超出固定宽度就隐藏超出的内容显示省略号。

    overflow: hidden;      /*溢出隐藏*/
    white-space: nowrap;    /*规定文本不进行换行*/
    text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记(...)*/
  1. 清除浮动
  2. 解决外边距塌陷

BFC的作用

  1. 清除浮动
  2. BFC可以取消盒子 margin塌陷
  3. BFC可以可以阻止元素被浮动元素覆盖(没有实战意义,本身是一种错误的现象,要浮动都浮动)

浏览器差异

  • IE6、7浏览器使用haslayout机制,和BFC规范略有差异,比如IE浏览器可以使用zoom:1属性,让盒子拥有layout(布局)
  • 如果要制作兼容到6、7的网页时,尽量让网页布局变得简单,内部有浮动的盒子要设置 height,属性,规范编程.

清除浮动

清除浮动:浮动一定要封闭到一个盒子中,否则就会对页面后续元素产生影响

清除浮动的方法

    <style>
        div{
            overflow: hidden;
        }
        p{
            float: left;
            width: 100px;
            height: 100px;
            background-color:orange;
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
        <p></p>
    </div>
    <div>
        <p></p>
        <p></p>
    </div>
</body> 
  1. 让内部有浮动的父盒子形成BFC,它就能关闭住内部的浮动。此时最好的方法就是 overflow:hidden属性
  2. 给后面的父盒子设置 clear:both属性。
    clear表示清除浮动对自己的影响,both表示左右浮动都清除
  3. 使用::after伪元素给盒子添加最后一个子元素,并且给::after设置 clear:both。
.clearfix::after{
    content:"";
    clear:both;
    <!----转为块级元素>
    display:block;
}
  1. 在两个盒子之间加一个div盒子,设置clear:both

定位

相对定位

  • position:relative;
  • 盒子可以相对自己原来的位置进行位置调整,称为相对定位
  • 相对定位的元素,会在“老家留坑”,本质上仍然是在原来的位置,只不过渲染在新的地方而已,渲染的图形可以比喻成“影子”,不会对页面其他元素产生任何影响

用途

  1. 微调元素位置
  2. 相对定位的元素,可以用作绝对定位的参考盒子

绝对定位

  • position:absloute;
  • 盒子可以在浏览器中以坐标进行位置精准描述,拥有自己的绝对位置

绝对定位脱离标准文档流

  • 绝对定位的元素脱离标准文档流,将释放自己的位置,对其他元素不会产生任何干扰,而是对它们进行压盖
  • 脱离标准文档流的方法:浮动、绝对定位、固定定位

绝对定位的参考盒子

  • 绝对定位的盒子并不是永远以浏览器作为基准点
  • 绝对定位的盒子会以自己祖先元素中,离自己最近的拥有定位属性的盒子,当做基准点。这个盒子通常是相对定位的,所以这个性质也叫作“子绝父相”

绝对定位的盒子垂直居中

position:absloute;
top:50%;
margin-top:-自己高度的一半

堆叠顺序z- index属性

z- index属性是一个没有单位的正整数,数值大的能够压住数值小的

用途

  1. 压盖 遮罩效果
  2. css精灵
  3. 结合js实现动画

固定定位

  • 不管页面如何卷动,它永远固定在那里
  • 固定定位只能以页面为参考点,没有子固父相这个性质
  • 固定定位脱离标准文档流

用途

  1. 返回顶部
  2. 楼层导航

边框与圆角

边框、圆角与盒子阴影

边框的三要素

  • border属性

border:1px solid red
//  线宽度 线型  线颜色                                                                 
  • 线型
  1. solid实线
  2. dashed虚线
  3. dotted 点状线
  • 边框的三要素可以拆分为小属性
  1. border-width 线宽
  2. border-style 线型
  3. border-color 线颜色

四个方向的边框

border-top //上边框 
......
  • 同样,四个方向边框的三要素也可以拆分为小属性
border-top-width //上边框宽度
border-top-style //上边框线型
......
  • 去掉边框
border-left: none // 属性即可以去掉左边框,以此类推
  • 利用边框制作三角形
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;

圆角

  • border-radius 属性
    border-radius 属性的值通常为px单位。表示圆角的半径。
border-radius:10px
  • 单独设置四个圆角
border-radius:10px 20px 30px 40px
// 左上 右上 右下 左下 
  • 也可以利用小属性单独设置四个圆角

border-top-left-radius //左上角
  • 百分比为单位
    border-radius属性的值也可以用百分比做单位,表示圆角起始于每条边的哪里。
  • 正圆形
  border-radius: 50%;

盒子阴影

  • box-shadow属性
    box-shadow 属性用来实现盒子的阴影
  box-shadow: 10px 20px 30px rgba(0, 0, 0, 0.4);
// x偏移,y偏移,模糊量,颜色  
  • 阴影延展
box-shadow:10px 20px 30px 40px rgba(0,0,0,.4)
  • 内阴影
box-shadow:inset 10px 20px 30px 40px rgba(0,0,0,.4)
  • 多阴影

box-shadow 属性值可以用逗号隔开多个,表示携带多个阴影

  box-shadow: 10px 20px 30px 40px blue, 10px 20px 100px 40px green;

背景与渐变

背景

bgckground-color

  • 表示背景颜色
  • 可以用十六进制,rgb(),rgba()
  • padding区域是有背景颜色的

background-image

用来设置背景图片,图片路径要写到ur1()圆括号中,可以是相对路径,也可以是http://开头的绝对路径

background-repeat

用来设置背景的重复模式

  • repeat:x,y均平铺(默认)
  • repeat-x:x平铺
  • repeat-y:y平铺
  • no-repeat:不平铺

background-size

  • 属性用来设置背景图片的尺寸
background-size:100px 200px;宽度 高度
  • 值也可以用百分数来设置,表示为盒子宽、高的百分之多少
  • 需要等比例设置的值,写auto
contain和 cover
  • contain和 cover是两个特殊的 background-size的值
  • contain表示将背景图片智能改变尺寸以容纳到盒子里
  • cover表示将背景图片智能改变尺寸以撑满盒子

background-clip

用来设置元素的背景裁切到哪个盒子

  • border-box:背景延伸至边框(默认值)
  • padding-box:背景延伸至内边( padding),不会绘制到边框处(仅在 dotted、 dashed边框可察觉)
  • content-box:背景被裁剪至内容区

background-attachment

决定背景图像的位置是在视口内固定,或者随着包含它的区块滚动。

  • fixed:自己滚动条不动,外部滚动条不动
  • local:自己滚动条动,外部滚动条动
  • scroll:自己滚动条不动,外部滚动条动(默认值)

background- position

  • 可以设置背景图片出现在盒子的什么位置
background-position:100px 200px;
  • 可以用top、 bottom、 center、left、right描述图片出现的位置

CSS精灵

  • CSS精灵:将多个小图标合并制作到一张图片上,使用background- position属性单独显示其中一个,这样的技术叫做CSS精灵技术,也叫作CSS雪碧图

    • CSS精灵可以減少HTTP请求数,加快网页显示速度。缺点也很明显:不方便测量、后期改动麻烦

background综合属性

background:white url(images/archer.png) no-repeat center center;

从左到右:背景颜色 背景图片 背景重复 背景位置

渐变

线性渐变

  • 盒子的 background- image属性可以用 linear- gradient()
    形式创建线性渐变背景
background-image: linear-gradient(to right, blue,red);

to 渐变方向 开始颜色 结束颜色

  • 渐变方向也可以写成度数 eg:45deg
  • 可以有多个颜色值,并且可以用百分数定义它们出现的位置
background-image: linear-gradient(to right, blue,yellow 20%,red);

径向渐变

  • 盒子的 background- image属性可以用 radial- gradient()
    形式创建径向渐变背景
background-image: radial-gradient(50% 50%, blue,red);

百分数代表圆心坐标

2D与3D转换

2d变形

旋转变形

  • 将 transform属性的值设置为 rotate(),即可实现旋转变形
transform:rotate(45deg)
  • 若角度为正,则顺时针方向旋转,否则逆时针方向旋转

transform- origin属性

可以使用 transform-origin属性设置自己的自定义变换原点,默认是以中心点作为变换原点

transform-origin(MDN)

缩放变形

  • 将 transform属性的值设置为 scale(),即可实现缩放变形
  • 当数值小于1时,表示缩小元素;大于1表示放大元素

斜切变形

将 trans form属性的值设置为skew(),即可实现斜切变形

transform:skew(10deg,20deg)
<!---- 第一个值是x斜切角度。第二个值为y斜切角度>

位移变形

将transform属性的值设置为translate(),即可实现位移变形

transform:translate(100px,200px)

3D转换

3d旋转

将 transform属性的值设置为 rotateX()或者 rotateY(),即可实现绕横轴、纵轴旋转

注:rotateZ和rotate效果一样

perspective属性

perspective属性用来定义透视强度,可以理解为“人眼到舞台的距离”,单位是px

    <div class="box">     => 舞台 必须设置perspective属性
        <p></p>             => 设置transform属性
    </div>

空间移动

  • 当元素进行3D旋转后,即可继续添加 translateX()、 translateY()、 translateZ()属性让元素在空间进行移动
  • 以当前的旋转面形成坐标轴
最后修改:2021 年 07 月 28 日 12 : 15 AM