前端复习大纲-CSS05

最新推荐文章于 2021-11-28 22:18:09 发布

莩甲柚

最新推荐文章于 2021-11-28 22:18:09 发布

阅读量117

点赞数

分类专栏：前端学习文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_36303923/article/details/121216339

版权

前端学习专栏收录该内容

16 篇文章 1 订阅

订阅专栏

本文介绍了如何通过border-radius实现圆角边框，box-shadow控制盒子阴影，以及float属性在浮动布局中的关键作用。理解标准流、浮动和定位有助于掌握网页布局的基石，包括行内元素与块级元素的排列规则，以及如何利用浮动达成多列布局和对齐效果。

摘要由CSDN通过智能技术生成

圆角边框

border-radius属性用于设置元素的外边框圆角, 有了圆角边框后，盒子就可以变成圆角的了

参数值可以是数值或者百分比
如果是正方形，想要设置为一个圆，把数值改为高度或者宽度的一半就行，或者写50%
如果是矩形，设置为高度的一半就可以
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
分开写是：border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius

盒子阴影

box-shadow属性为盒子添加阴影

box-shadow：h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，运行负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选，将外部阴影（outset）改为内部阴影

默认的就是外阴影，但是不可以写这个单词，否则阴影无效
要是想改为内阴影，在最后添加inset即可

盒子阴影不占用空间，不影响其他盒子排列

    <style>
        div {
            height: 200px;
            width: 200px;
            background-color: blue;
            margin: 100px auto;
        }
        /* 原来没有阴影，鼠标经过盒子就添加阴影效果 */
        div:hover {
            box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3);
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

文字阴影

使用text-shadow属性将阴影应用于文本

text-shadow：h-shadow v-shadow blur color;

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，运行负值
blur	可选，模糊距离
color	可选，阴影的颜色

传统网页布局的三种方式

盒子如何进行排列顺序

普通流/标准流
浮动
定位

实际开发中，一个页面都包含了三种布局方式

标准流

所谓标准流，就是标签按照规定好默认的方式排列，是最基本的布局方式

块级元素会独占一行，从上到下的顺序排列 div hr p h1~h6 ul ol dl form table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行 span a i em

浮动

为什么需要浮动

使用标准流很难做到以下效果：

让多个块级盒子 div 排成一行，并且没有空白空隙
让两个盒子左右对齐

很多布局的效果，标准流没有办法完成，此时就可以利用浮动完成布局，因为浮动可以改变元素标签默认的排列方式

浮动最典型的应用就是可以让多个块级元素在一行内排列显示

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

什么是浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或者另一个浮动框的边缘

选择器 { float: 属性值；}

none：元素不浮动，默认值
left：元素向左浮动
right：元素向右浮动

    <style>
        .left,
        .right {
            height: 200px;
            width: 200px;
            background-color: #c0c0c0;
            float: left;    
        }
        .right {
            float: right;
        }
      
    </style>
</head>
<body>
    <div class="left">1</div>
    <div class="right">2</div>
</body>
</html>

在这里插入图片描述

浮动特性

浮动元素会脱离标准流（脱标）
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性

脱标

脱离标准流的控制（浮）移动到指定位置（动），俗称脱标
浮动的盒子不再保留原先的位置

设置了浮动的元素，漂浮在普通流的上面，不占有位置，脱标；而标准流正常显示

    <style>
        .bx1 {
            height: 200px;
            width: 200px;
            background-color: #c0c0c0;
            float: left;    
        }
        .bx2 {
            height: 400px;
            width: 400px;
            background-color: #5d5dd4;
        }
      
    </style>
</head>
<body>
    <div class="bx1">浮动的盒子</div>
    <div class="bx2">标准流的盒子</div>
</body>
</html>

在这里插入图片描述

一行显示

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列

浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
在这里插入图片描述

行内块元素

如果行内元素有了浮动，则不需要转换为块级/行内块元素就可以直接给高度和宽度
任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后都具有行内块元素相似的特性

如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动之后，它的大小根据内容来决定
浮动的盒子中间没有缝隙，是紧挨着一起的
行内元素同理

浮动元素经常和标准流父级搭配使用

网页布局一般采取的措施是：先用标准流的父元素排列上下位置，之后内部子元素采用浮动排列左右位置
在这里插入图片描述

定位

有些效果，标准流或者浮动都无法快速实现，此时需要定位来实现

浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子

定位则是可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置，而且可以压住其他盒子

定位组成

定位是将盒子定在某一位置，所以定位也是在摆盒子，按照定位的方式移动盒子

定位 = 定位模式 + 边位移

定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置

定位模式

定位模式决定元素的定位方式，通过CSS的position属性来设置，其值可以分为四个：

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移

边偏移就是定位的盒子移动到最终位置，有 top bottom left right 4个属性:

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离