十五天学会css之第六天 浮动 背景

东方淼淼
216 阅读4分钟

第六天 浮动 背景

第六天css笔记.png

盒模型相关属性的补充

width宽度

  • min-width：最小宽度
  • max-width：最大宽度

height高度

  • min-height：最小高度
  • max-height：最大高度

padding内填充

  • 左填充：padding-left
  • 右填充：padding-right
  • 上填充：padding-top
  • 下填充：padding-bottom

border详解

  • 边框的宽度：border-width
  • 指定边框的样式：border-style
  • 边框的颜色：border-color
  • border的复合属性：宽度 样式 颜色
border: 10px dashed red;

margin

  • 离左边的距离：margin-left
  • 离右边的距离：margin-right
  • 离上边的距离：margin-top
  • 离下边的距离：margin-bottom

浮动

两个块级元素在一行显示的问题及解决办法

可以把两个块级元素都转换成行内块，但是结构中如果出现了换行，在浏览器渲染的时候，两个盒子之间会有一个缝隙 解决的办法

  • 消除结构中的换行符
  • 给这两个元素的父级添加font-size：0:；如果这两个元素中还有文字，可以再具体的给这两个元素设置相应的字体。 延伸问题2

在上面的前提下，如果我们其中一个盒子里面写了文字，另一个没写，会出现盒子下掉。出现的原因是因为，默认是基线对齐 解决办法

1.改变基线对齐方式

  • 中线对齐：vertical-align：middle；
  • 顶线对齐：vertical-align：top；
  • 低线对齐：vertical-align：bottom；
  • 默认基线对齐：vertical-align：baseline；

2.浮动

  • 左浮动：float：left；
  • 右浮动：float：right；
  • 默认（没有）浮动：float：none；

浮动的特点

  • 脱离正常文档流（不占位置）
  • 左右浮动的方向针对的是父级元素（以父级元素为参照物）
  • 正常文档中，宽度是可继承的，但是元素一旦浮动，宽度不能再继承父级，而是由自身内容大小决定
  • 行内元素本来写宽、高是不起作用的，但是一旦设置浮动，设置宽、高也可以起作用
  • 注意：只有排列方式上需要了，才用浮动
  • 浮动的本质：最初的时候是为了实现图文混排，场景：有一张图片，一些文字，如果给图片设置浮动，文字就会对环绕图片进行排列。

面试题1：解决浮动元素造成父级的“盒子塌陷”

  • 没高度，就给浮动元素的父级设置height
  • 给浮动元素的父级设置：overflow：hidden；
  • 给浮动元素的父级盒子的末尾添加一个块级元素，然后给这个块级元素设置样式：clear：both
    • 清除左浮动：clear：left；
    • 清除右浮动：clear：right；
    • 清除左右浮动：clear：both；
  • 谁浮动，就给谁的父级增加一个类名：clearfix，但是前提是，必须把下面的代码放到样式里 三种办法和第四种办法原理是一样的，第四种通过伪元素动态的添加了一个元素，并且清除了浮动

伪元素:通过css样式去更改合同目录的结构，不是真正的在结构中去添加 注意：在用伪元素的时候，content这个属性值不能省，可以写成""

.clearfix:after{
content:"";
font-size:0;
display:block;
height:0;
visibility: hidden;
clear: both;
}
.clearfix{
*zoom:1;
}

面试题2：用浮动制作一个三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            border: 20px solid coral;
            border-color: transparent transparent transparent red;
            width: 0;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

overflow的常用值

  • 超出隐藏：overflow：hidden
  • 会根据情况自动添加滚动条：overflow：auto
  • 始终添加滚动条:overflow:scroll
<style>
    .box{
        width:200px;
        height:200px;
        border:1px solid red;
        /* 超出隐藏 */
        /* overflow:hidden; */
        /* 根据你内容大小来自动添加滚动条，如果宽度大于你设置的盒子的宽，x轴方向自动添加滚动条，如果是高度亦如此（y轴添加滚动条） */
        /* overflow:auto; */
        /* 不管你内容是否超出盒子的大小都会增加一个滚动条 */
        overflow:scroll;
    }
</style>

background

  • background-color：背景颜色
  • background-image:url(“图片的路径”)
  • background-position：背景图片的位置
    • 水平方向：left、center、right；垂直方向：top、center、bottom
    • 具体的像素值：background-position:50px 50px;
    • 百分比：background-position: 100% 100%；
  • background-repeat:(控制图片是否平铺，以及平铺的方向)
  • no-repeat：不平铺
  • repeat-x ：水平方向平铺
  • repeat-y:垂直方向平铺
  • background-attachment:设置背景图像是否固定或者随着页面的其余部分滚动。
    • fixed
    • scroll （默认）
  • background-size:x y；控制背景图片的大小，x代表的背景图片的宽，y代表的是背景图片高
    • 具体的像素值：background-size:100px 100px;
    • 百分比：background-size:100% 100%;
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。可能造成背景图像的某些部分也许无法显示在背景定位区域中。
    • contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。（背景图片放大的时候，只要宽度或者高度，一边铺满了容器，就停止放大。）
avatar
文章
阅读
粉丝