Web前端105天-day06-CSS

smile陌辰

已于 2022-11-16 19:39:55 修改

阅读量232

点赞数 1

分类专栏： CSS 文章标签：开发语言前端 html css

于 2022-11-10 15:25:43 首次发布

本文链接：https://blog.csdn.net/qq_52810836/article/details/127783610

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

day06

前言

第六天学习开始

一、复习

元素的性质

1. 块级元素

2. 行内元素

3.行内块（属于行内）

元素显示属性display
宽度、高度（分了行和块）

外间距

        1.外间距重叠

        2.可以是负值

        3.水平居中的方式

内间距

边框

宽度、高度（分了行和块）
盒子模型的两种模式

1.标准：宽高+内间距+边框+外间距

2.怪异：（宽高+内间距+边框）+外间距

溢出属性

触发 BFC

二、背景属性

1.背景颜色

background-color背景颜色，值为色值

background-color: red;
background-color: #ff0000;
background-color: rgb(255,0,0);
/*rgba的a代表透明度，取值0-1之间可以为小数 */
background-color: rgba(255,0,0,0.6);

2.背景图插入

背景图 background-image: url(图片路径);
背景图和图片img标签展示出图片区别：

1.img 的图是没有任何一点被裁切的，背景图根据元素设置的宽高决定图片的展示内容

2.当元素的空间足够大的，比图片本身还大。 img 没变化，背景图会出现重复显示

3. img 自身不被要元素宽高的限制，背景图没有宽度高度无法显示

4. img 可以通过宽度属性调整大小，并且只调整其中一个值就行。单一给一个边调整尺寸，只能是单个边变化尺寸

5.背景图上直接可以加入内容或文字， img 是不行的。

6.背景图常用于大的页面 banner 广告，或精灵图。 img 常用于图片展示。

background-image:linear-gradient(色值1,色值2) 值的是线性渐变效果，css3.0新增的属性值，大部分浏览器已经兼容了，除了低版本IE。

1.线性渐变背景色，至少两个值

2.前面的是默认上面的颜色，后面的默认下面的颜色

3.可以把角度值放在颜色值前面来改变渐变的方向

/*背景图插入*/
background-image: url(./img/nav-bg.png);
/*背景色*/
background-image:linear-gradient(#D41011,#940000);
/* 改变渐变的角度 */
background-image: linear-gradient(30deg,red,green);

3.背景图重复

background-repeat背景图是否重复，设置背景图重复

/* 不重复 */
background-repeat: no-repeat;
/* 默认的x轴y轴都重复 */
background-repeat: repeat;
/* x轴重复 */
background-repeat: repeat-x;
/* y轴重复 */
background-repeat: repeat-y;

4.背景图定位

background-position 背景图定位，值1为x轴方向位置，值2为y轴方向位置，用空格分开。
关键词取值：

1.right 右

2. bottom 下

3.top 上

4.top 上

5.center 中间

百分比取值

像素取值

精灵图

1. 先要一个元素的宽高，精灵图需要的宽度高度

2.整个的一张精灵图插入

3.使用背景定位找到精灵图所在位置，注意负值可以让图片项左上移动

5.背景图尺寸

background-size 背景图尺寸，两个值，值1是x轴的尺寸，值2是y轴的尺寸，可以把背景图放大和缩小
如果想按照原图的比例缩放，可以控制其中一个轴的尺寸，剩下一个轴写auto

关键词取值

1. background - size: cover ; 图片能占满整个元素且不变形，但有可能会损失一部分图片

2.background - size:contain ; 能保证一张完整的图片显示，不损失任何一部分，但有可能会出现重复

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .d1{
      height: 100px;
      /* background-color: red;
      background-color: #ff0000; */
      /* background-color: rgb(255,0,0); */

      /* rgba 中的a代表透明度，取值0-1之间，可以为小数 */
      background-color: rgba(255,255,0,0.6);

    }
    .d2{
      width: 600px;
      height: 300px;
      border: 5px solid black;
      /* 背景图插入 */
      background-image: url("./bg/mr.png");
      /* background-image: url("bg/bg.png"); */
      background-repeat: no-repeat;
      /* 默认x,y轴都重复 */
      background-repeat: repeat;
      /* x轴重复 */
      background-repeat: repeat-x;
      /* y轴重复 */
      background-repeat: repeat-y;
    
    }
    a{
        
      }
  </style>
</head>
<body>
  <div class="d1">
    天理昭昭
  </div>
  <img src="./bg/mr.png" alt="">
  <div class="d2">阿萨大大</div>
  <a href="#">首页</a>
</body>
</html>

二、元素的美化和修饰

1.圆角

四个角度单独设定：

border-top-left-radius: 60px; 上左角

border-top-right-radius: 20px;上右角

border-bottom-left-radius: 30px;下左角

border-bottom-right-radius: 20px;下右角

设定一个值的时候:

border-radius: 20px; 四个角统一弧度

圆形:

前提是元素宽度和高度相等，先做成正方形

弧度值50%以上都是圆形 border-radius: 50%

胶囊型:

前提胶囊型是一个长方形

弧度，是高度的一半

2.盒子阴影

box-shadow 设置元素都是阴影效果
阴影不占位

第一个值：x轴方向的位移（必要

第二个值： y 轴方向的位移（必要）

第三个值：羽化（虚化）不能为负值

第四个值：阴影的扩大 / 缩小

第五个值：阴影颜色

第六个值：内外阴影，默认 outset 外阴影， inset 内阴影（用得少）

/* 盒子阴影 x y 羽化 颜色*/
box-shadow: 10px 5px 10px blue;
/* 扩大和缩小阴影 */
box-shadow: 0 80px 15px -40px black inset;

3.列表项

有序和无序列表都有标识符在每个li的前面

去掉 li 前面的标识符 list-style: none;

列表标签和很多标签都有不同程度的内外间距，在布局中这些间距影响正常样式编写，以下可以最简单的去掉所有元素的内外间距

* {
    margin: 0;
    padding: 0;
}

4.轮廓线

当表单类的元素，获取焦点的时候。会出现默认的轮廓线，它不属于边框线，它在边框之外。
outline: none; 去掉轮廓线

5.光标设置

不同的系统，可能展现的效果不同

cursor: default; 箭头光标

cursor: text; 工字型选择文本

cursor: pointer;手型

cursor: crosshair;十字型

li{
   /* 箭头光标 */
   cursor: default;
   /* 文本型 */
   cursor: text;
   /* 小手型 */
   cursor: pointer;
   /* 十字型 */
   cursor: crosshair;
   /* float: left; */
}

三、布局相关属性

1.简介布局

PC端布局

1.屏幕较大，可以容纳的素材比较多

2.确定的主要内容显示宽度不变

3.显示器宽度是可能变的

4.pc端布局一般使用一个确定的宽度（绝对单位px）作为内容的主要显示区域，这个宽度的元素也叫作“版心”

5.版心在整个页面中水平居中

6.pc端内容多布局复杂，但绝对单位，所有页面一样不需要过多适配调试

移动端布局

1.移动端设备太多样化，单位一定不能是绝对单位

2.移动端布局界面要简化，元素要大

3.移动端布局，界面布局简单，适配复杂

响应式布局

2.浮动

2.1使用浮动的原因

在布局中遇到的第一个困难就是块级元素横向排列。因为块级元素特性竖向从上向下排列。
行内元素确实是从左向右横向排列，但设置宽度高度无效，而且不能包裹更多的标签。

行内块，不建议做布局，因为行内块带有很多不好去掉的样式。

浮动就是兼容性最好，可以做块级元素横置的属性。

2.2浮动的属性

原则：如果一个元素浮动，它的兄弟都要浮动

flfloat:left; 左浮动

flfloat:right;右浮动

一旦让元素浮动，它会贴向父级的左侧或右侧

原本的竖向排列就变为了横向排列

2.3父级的失高

当子元素浮动横向排列，父元素如果没有自身高度，只靠子元素撑起，那么父元素会在子元素浮动后失去高度，导致布局混乱

给父元素增加高度，最直观的方法

利用父级元素的 overflow: hidden; 触发BFC，清除了浮动产生的负面效果

父级也浮动，但是再上一级同样要解决失高问题

使用伪类做清除浮动的类，写好之后给父级元素

/* 给爸爸增加一个专门清除浮动类 */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .baba{
      background-color: aqua;
      border: 5px solid black;
      overflow: hidden;
    }

    .d1{
      width: 100px;
      height: 100px;
      background-color: red;
      float: left;
      margin-top: -30px;
    }
    .d2{
      width: 100px;
      height: 300px;
      background-color: blue;
      float: left;
    }
    .d3{
      width: 100px;
      height: 100px;
      background-color: green;
      float: left;
    }
    .shushu{
      height: 150px;
      background-color: yellow;
    }
    .clearfix::after{
      content: "";
      display: block;
      clear: both;
    }
  </style>
</head>
<body>
  <div class="baba clearfix">
    <div class="d1"></div>
    <div class="d2">Lorem</div>
    <div class="d3"></div>
  </div>
  <div class="shushu"></div>
</body>
</html>