前端初体验-day5

桀桀O.o

已于 2024-06-18 22:03:53 修改

阅读量678

点赞数 8

文章标签：前端 css3 css

于 2024-06-18 22:03:41 首次发布

本文链接：https://blog.csdn.net/dai2905304084/article/details/139767017

版权

###圆角边框的应用

小风车案例

<!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>
        /* 1.行内以及行内块元素如果html元素中间有回车将会被解析为空白符，会有空白
        2.一行内显示的元素空间不足，会自动换行排列 */
        
        .windmill {
            width: 410px;
            height: 410px;
            /* background-color: pink; */
        }
        
        .windmill div {
            width: 200px;
            height: 200px;
            background-color: green;
            display: inline-block;
        }
        
        .windmill .blade1 {
            border-radius: 0px 100% 0px 100%;
        }
        
        .windmill .blade2 {
            border-radius: 100% 0px 100% 0px;
        }
    </style>
</head>

<body>
    <div class="windmill">
        <div class="blade1">1</div>
        <div class="blade2">2</div>
        <div class="blade2">3</div>
        <div class="blade1">4</div>
    </div>
</body>

</html>

解决回车留白的方法： 1.浮动 2.弹性盒子 3.给父元素设置font-size为0

###外边距应用
####1.外边距实现盒子居中
可以让一个盒子实现水平居中，需要满足一下两个条件:
1.必须是块级元素。
2.盒子必须指定了宽度(width)
然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

 .main {
            /* 1.块元素 */
            /* 版心 内容中心的宽度 */
            width: 1000px;
            height: 100px;
            margin: 0 auto;
            background-color: red;
        }

####2.文字(行内元素)居中
1.文字水平居中是 text-align: center
2.盒子水平居中:左右margin 改为 auto

            text-align: center;
            margin: 0 auto;

####3.清除内外边距
body 和其他标签通常都有内外边距我们要想去除内外边距可以通过通配符选择器（不推荐）或者直接使用标签选择器将其内外边距设为0 代码如下：

            padding: 0;
            margin: 0;

####4.外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
4.1相邻块元素垂直外边距的合并当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin.top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)

4.2 嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
解决方案:
1.可以为父元素定义1像素的上边框或上内边距。
2.可以为父元素添加overflow:hidden(overflow 属性规定当内容溢出元素框时发生的事情)

####5.插入图片和背景图片区别
1.插入图片我们用的最多比如产品展示类移动位置只能靠盒模型 padding margin
2.背景图片我们一般用于小图标背景或者超大背景图片背景图片只能通过 background-position

###旋转小风车案例
代码如下

<!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>
        /* 1.行内以及行内块元素如果html元素中间有回车将会被解析为空白符，会有空白
        2.一行内显示的元素空间不足，会自动换行排列 */
        
        .windmill {
            width: 410px;
            height: 410px;
            /* background-color: pink; */
            font-size: 0px;
            /* 使风车居中显示 */
            margin: 50px auto;
            /* 过渡 在一定时间内完成这个动作 */
            transition: all 1s;
        }
        
        .windmill div {
            width: 200px;
            height: 200px;
            background-color: rgb(86, 243, 86);
            display: inline-block;
        }
        
        .windmill .blade1 {
            border-radius: 0px 100% 0px 100%;
        }
        
        .windmill .blade2 {
            border-radius: 100% 0px 100% 0px;
        }
        
        .windmill:hover {
            /* 属性变换css3的一个属性值 */
            transform: rotate(3600deg);
        }
    </style>
</head>

<body>
    <!-- 1.浮动 2.弹性盒子 3.给父元素设置font-size为0 -->
    <div class="windmill">
        <div class="blade1">1</div>
        <div class="blade2">2</div>
        <div class="blade2">3</div>
        <div class="blade1">4</div>
    </div>
</body>

</html>

###CSS盒模型大小计算
CSS3中可以通过box-sizing来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况:
。1、box-sizing: content-box 盒子大小为 content (width/heigth)+ padding + border, content-box:此值为其默认值，其让元素维持W3C的标准ox Mode。
。2、box-sizing: border-box 盒子大小为 width/heigth 就是说 padding和 border 是包含到width里面的。

###1盒子模型的概念
就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

###2 盒子模型的组成
一个元素占有空间的大小由几个部分构成，其中包括
元素的内容(content)，元素的内边距(padding)，元素的边框(border)，元素的外边距(margin)，四个部分，这四个部分一起构成了盒子模型。

###3 盒子模型的分类
盒模型的分类(最重要的部分)
盒模型分为: W3C标准盒子、IE盒子
1.W3C标准盒子(content-box):
在这种盒模型下，我们所说的元素的 width，实际上只包含 content
盒子总宽度=margin + border+ padding+ width

2.IE盒子(border-box):
又称怪异盒模型(边框盒子)，是指块元素box-sizing属性为border-box的盒模型。在这种盒模型下，我们所说的元素的 width ，实际上包含了 content+ padding+ border
盒子总宽度= margin + width

###盒子阴影
语法格式:
box-shadow:水平阴影垂直阴影距离阴影尺寸阴影颜色内/外阴影;

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在css颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影(开始时)改变阴影内侧阴影

注意:
前两个属性是必须写的。其余的可以省略。1.
2.默认是外阴影(outset) ，不用设置，想要内阴影设为 inset,
3.X轴与Y轴如果有值，就改变了(正值向右向下)

###overflow溢出隐藏
overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

overflow 属性可设置以下值：

visible - 默认。溢出没有被剪裁。内容在元素框外渲染
hidden - 溢出被剪裁，其余内容将不可见
scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
auto - 与 scroll 类似，但仅在必要时添加滚动条

##css-浮动和定位(重点）
###1.浮动(float)
1.1 CSS 布局的三种机制
网页布局的核心–就是用 css 来摆放盒子。css 提供了3种机制来设置盒子的摆放位置，分别是普通流(标准流)、浮动和定位，其中:
1.普通流(标准流)
块级元素会独占一行，从上向下顺序排列;
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行;
2.浮动
让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示,
3.定位
将盒子定在浏览器的某一个位置–css 离不开定位，特别是后面的js 特效。
总结:html当中有一个相当重要的概念，标准流或者普通流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列;按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。