前端三件套-css

news2024/11/27 21:58:18

一、元素选择器

元素选择器:利用标签名称。p,h1-h6......

行内样式(内联样式):例如<p style="color:red;font-size:50px">

id选择器:针对某一个特定的标签来使用。以#定义。

class(类)选择器:可以被多种标签使用,同一个标签可以使用多个类选择器,用空格隔开。

合并选择器:选择器1,选择器2,.....{}

选择器优先级:内联样式>id选择器>类选择器>元素选择器

同优先级多次定义会执行覆盖(最后定义的为最终效果)

①后代选择器 A B{ }

例如:

 <style>

        ul li{

            color: blue;

        }

    </style>

</head>

<body>

<ul>

    <li>后面的后代标签都会生效</li>

    <li>1</li>

    <div>

        <ol>

            <li>也会生效</li>

        </ol>

    </div>

</ul>

</body>

②子代选择器 A>B{ }

例如上面的选择器则只有第一个包括的li起效后面div包括的是孙代会失效。

③相邻选择器 A+B{ }

只有相邻的第一个元素生效,只能是往下选择。

④通用选择器 A~B{ }

向下的所有元素都起效。

伪元素和伪类

伪元素和伪类的根据区别就是:前者是创建出了一个新元素,而后者是一个已存在但你不能直接看到的元素。

伪元素

伪元素本身不存在在DOM文档中,它需要人为的去创建它。且就算你创建了伪元素,它也只是逻辑上存在,实际上也并不存在DOM文档中,也就是说你无法使用JS去获取改变它。

伪类

伪类它存在于DOM文档中,但如果你没有特别的去声明它,你就看不到它。

二、属性

1、字体属性

(1)color颜色

四种形式:

①color:red

②color:#ff0000   //十六进制形式(常用)

③color:rgb((255,0,0)

④color:rgba(255,0,0,.5)  //第四个参数:0透明 1不透明 0.5半透明

(2)font-weight 字体粗细

①bold 粗体字符

②bolder 更粗的字符

③lighter 更细的字符

④400-900 细到粗  400为默认 700等同bolder

(3)font-style 字体样式

①normal   默认值

②italic 斜体字

(4)font-family 字体效果

例如:<h3 style="font-family: 黑体;">黑体:SimHei</h3>

<h3 style="font-family: 微软雅黑体;">Microsoft YaHei</h3>(默认)

 2、背景属性

   (1)  background-color 背景颜色
(2)background-image 背景图像

(图像不够大会垂直和水平平铺)

background-image:url("");

(3)background-repeat 背景内容平铺方式

①repeat 默认

②repeat-x 水平方向平铺

③repeat-y 垂直方向平铺

④no-repeat 不平铺

默认情况例如:

(4)background-size 背景图像大小

①background-size:200px 300px;

②background-size:100% 100%; //百分比方式

③background-size:cover;//完全覆盖容器(放大裁剪)

④background-size:contain;//缩放到对于容器合适即可(自适应)

(5)background-position 背景图像位置

①自行匹配:left right top bottom center

例如 background-position:left top;//左上角

②百分比和像素方式

3、文本属性

(1)text-decoration 文本属性

①下划线:underline

②上划线:overline

③删除线:line-through

(2)text-transform 文本大小写

①首字母大写:captialize

②全部大写:uppercase

③全部小写:lowercase

(3)text-indent  首行文本缩进

text-indent:?px

4、表格属性

(1)边框

①border属性 

table,td{

        border:1px solid black;//边框大小 边框线样式(实线) 边框线的颜色

}

添加collapse属性 折叠边框为单边框

table{

        border-collapse:collapse;

}ver

 (2)表格大小:width height
(3)表格文字对齐:

水平对齐:text-align(left or right or center)

垂直对齐:vertical-align(top bottom center)

(4)表格填充

td{

padding:10px:

}//控制边框与文本的距离

5、盒子属性

盒子模型阴影 

属性设置 :

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

h-shadow:水平阴影的位置。可以使用负值表示阴影在元素左侧,正值表示阴影在元素右侧,0 表示没有水平阴影。

v-shadow:垂直阴影的位置。可以使用负值表示阴影在元素上方,正值表示阴影在元素下方,0 表示没有垂直阴影。

blur:模糊半径。可选值,表示阴影的模糊程度。值越大,阴影越模糊,0 表示没有模糊。

spread:阴影的扩展半径。可选值,表示阴影的大小扩展。正值表示阴影扩展,负值表示阴影收缩。

color:阴影的颜色。可选值,表示阴影的颜色,可以是 CSS 颜色值

inset:可选值,用于设置是否为内阴影。如果存在 inset,则表示是内阴影,否则为外阴影。内阴影会出现在元素内部,外阴影则出现在元素外部。

只有 前两个阴影 , 水平阴影 和 垂直阴影 必须写 , 后面的四个值可以省略 ;

三、CSS盒子模型

盒子模型的组成:content内容、padding内边距、border边框、margin外边距

content(内容)

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      div{
        width: 100px;
        height: 100px;
        background-color: cornflowerblue;
        padding: 50px;
        border: 20px solid burlywood;
        margin: 20px;
      }
    </style>
</head>
<body>
<div class="test">
    content
</div>

效果

盒子模型又有两类,标准盒模型和怪异盒模型),两个盒模型可以通过box-sizing属性切换。

/* 标准盒模型 */
box-sizing: content-box;
/* 怪异盒模型 */
box-sizing: border-box;

① 标准盒模型

在标准盒模型中为盒子设置的width、height属性为content内容的宽度和高度,因此盒子模型的总宽度和总高度为:

总宽度 = width + 2 * padding + 2 * border + 2 * margin
总高度 = height + 2 * padding + 2 * border + 2 * margin
② 怪异盒模型
在怪异盒模型中,盒子的width、height属性为content内容+padding内边距+border边框的宽度和高度,因此盒子模型的总宽度和总高度为:

总宽度 = width + 2*margin
总高度 = height + 2*margin

四、布局

(1)flex布局

display:flex 使用弹性盒子(子元素默认水平排列)

容器属性

1、flex-direction 指定子元素的位置

row:横向从左到右,也是默认方式

row-reverse:反转横向排列(靠右对齐,最后一项排列在前面)

column:纵向排列

column-reverse:反转纵向排列

    <style>
      .test{
        width: 500px;
        height: 500px;
        background-color: bisque;
      }
      .box1{
        width: 100px;
        height: 100px;
        background-color: aquamarine;
      }
      .box2{
        width: 100px;
        height: 100px;
        background-color:blueviolet
      }
      .box3{
        width: 100px;
        height: 100px;
        background-color:yellowgreen
      }
    
    </style>
</head>
<body>
<div class="test">
   <div class="box1"></div>
   <div class="box2"></div>
   <div class="box3"></div>
</div>
</body>

正常效果:

使用弹性盒子:

      .test{

        width: 500px;

        height: 500px;

        background-color: bisque;

        display: flex;

      }

 

其他效果感兴趣可以自行尝试 

2、flex - wrap 子元素在主轴方向上超出容器空间时是否换行。

nowrap(默认值):不换行,子元素可能会被压缩以适应容器。
wrap:换行,子元素在超出容器宽度(主轴为水平方向时)或高度(主轴为垂直方向时)时,会换行排列。
wrap - reverse:换行,但新行的添加方向与 wrap 相反。

3、两种对齐方式

justify-content(垂直方向) align-items(水平方向),在父级元素上定义

①justify-content: 子元素沿X轴排列

justify-content: flex-star; 子元素从左向右排

justify-content: flex-end; 子元素水平靠右排列

justify-content: center; 子元素水平居中排列

justify-content: space-between; 子元素水平居中散开排列

justify-content: space-around; 第一个子元素靠左,第二个子元素居中,第三个子元素靠右排列

②.align-items: 子元素沿y轴排列

align-items: flex-start; 子元素垂直于父级盒子顶部排列

align-items: flex-end; 子元素垂直于父级盒子底部排列

align-items: center; 子元素垂直居中排列

align-items: baseline; 子元素以第一行文字为基准线进行排列

align-items: strech; 当某个子元素没有设置高度时,会自动撑满子元素所在的那一列

4、设置子元素权重:flex
    <style>
      .test{
        width: 500px;
        height: 500px;
        background-color: bisque;
        display: flex;
      }
      .box1{
        width: 100px;
        height: 100px;
        background-color: aquamarine;
        flex: 3
      }
      .box2{
        width: 100px;
        height: 100px;
        background-color:blueviolet;
        flex:2
      }
      .box3{
        width: 100px;
        height: 100px;
        background-color:yellowgreen;
        flex:1
      }
    
    </style>

左侧固定宽度,右侧自适应:

<body>
    <div class="big">
        <div class="small1">
        </div>
        <div class="small2">
        </div>
    </div>
</body>
<style>
    .big {
        width: 200px;
        height: 200px;
        background-color: blue;
       display: flex;
    }
    .small1 {
        width: 50px;
        background-color: rgb(237, 2, 45);
    }
    .small2 {
        background-color: rgb(2, 237, 131);
        flex: 1;
    }
</style>

 项目属性:

1.order 设置子元素前后顺序

order:默认值是0,数值越小越靠前,可以给负数。

2.flex-grow 设置子元素的放大比例

默认值为0

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

3.flex-shrink 设置子元素的缩小比例
默认值为1。

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。(适合移动端溢出出滚动条的效果,前提是利用弹性布局写)

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

(2)position定位布局

常用三种值:

relative:相对定位,相对于当前元素的当前位置进行定位。元素会在原本文档流的位置进行定位

absolute:绝对定位,相对于最近已经定位的祖先元素进行定位,如果不存在已经定位的祖先元素,则相对于初始包含块进行定位。

fixed:固定定位,相对于浏览器窗口进行定位,元素会随着页面滚动而保持固定位置。

三种方式都用到四个偏移量:top bottom left right

position:absolute

.box1{

  background-color: aqua;

  width: 800px;

  height: 400px;

  position: relative;

  left: 200px;

}

.box2{

  background-color: rgb(255, 0, 251);

  width: 700px;

  height: 300px;

}

.box3{

width: 200px;

height: 200px;

  background-color: blue;

  position: absolute;

  bottom: 10px;

}

可以看出box3不是根据父元素box2进行定位而是相对于最近已经定位的祖先元素进行定位。

position:fixed

.box1{

  background-color: aqua;

  width: 800px;

  height: 400px;

  position: relative;

  left: 200px;

}

.box2{

width: 200px;

height: 200px;

  background-color: blue;

  position: fixed;

  bottom: 10px;

}

可以看出fiexd定位是根据body判定而不是根据父元素box1

并且进行缩放后始终是相对于浏览器窗口的。

(3)Grid布局

<div class="tes">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>
</template>
<style lang="scss">
.tes{
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;//列的宽度自定义为父元素的1:2:1
  .box1{
    height: 100px;
    background-color: aqua;
  }
  .box2{
    height: 100px;
    background-color: rgb(255, 196, 230);
  }
  .box3{
    height: 100px;
    background-color: rgb(210, 196, 255);
  }
}
</style>

六、CSS3新属性

1.boder_radius属性 (元素圆角)

2.box-shadow属性(边框阴影)

box-shadow:X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
值描述:

X轴偏移量:必需。水平阴影的位置,允许负值。
Y轴偏移量:必需。垂直阴影的位置,允许负值。
阴影模糊半径:可选。模糊距离,其值只能是正值,如果值为0,表示阴影没有模糊效果。
阴影扩展半径:可选。阴影的尺寸。
阴影颜色:可选。阴影的颜色。省略默认会黑色。
投影方式:可选。设置为inset时为内部阴影方式,若省略为外阴影方式。

九、字体图标

注册阿里巴巴字体库下载图标代码后放到你的项目目录下使用

网页内有使用说明

推荐使用symbol方式

居中方式大全(经典三种)

1

1、 

<style>
    .big {
        width: 200px;
        height: 200px;
        background-color: blue;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .small {
        width: 100px;
        height: 100px;
        background-color: rgb(237, 2, 45);
    }
</style>

2、 

<style>
    .big {
        width: 200px;
        height: 200px;
        background-color: blue;
        display: flex;
    }

    .small {
        width: 100px;
        height: 100px;
        background-color: rgb(237, 2, 45);
        margin: auto;
    }
</style>

3、

<style>
    .big {
        width: 200px;
        height: 200px;
        background-color: blue;
        position: relative;
    }

    .small {
        width: 100px;
        height: 100px;
        background-color: rgb(237, 2, 45);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2235774.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MoonBit 双周报 Vol.59:新增编译器常量支持,改进未使用警告,支持跨包函数导入...多个关键技术持续优化中!

2024-11-04 MoonBit更新 增加了编译期常量的支持。常量的名字以大写字母开头&#xff0c;用语法 const C ... 声明。常量的类型必须是内建的数字类型或 String。常量可以当作普通的值使用&#xff0c;也可以用于模式匹配。常量的值目前只能是字面量&#xff1a; const MIN_…

新疆高校大数据实验室案例分享

高校大数据实验室建设&#xff0c;企业可以提供技术支持、实训平台和项目案例&#xff0c;高校则提供科研和教学资源&#xff0c;实现产学研一体化。不仅有利于大数据技术的应用和人才培养也有利于区域发展。 泰迪与新疆合作的院校包括新疆大学、昌吉学院等 新疆大…

Capcut,更适合做TikTok运营的“剪映”

剪映这一次的更新&#xff0c;可谓是引来许多视频创作者的怒火。原本免费的功能&#xff0c;更新之后需要vip才能使用了&#xff1b;原本的vip功能&#xff0c;则需要升级至svip&#xff0c;甚至一些功能&#xff0c;需要会员积分才能使用。 许多运营TikTok的小伙伴一直在用剪映…

linux centos 安装redis

安装 wget https://download.redis.io/releases/redis-7.4.0.tar.gz解压redis-7.4.0.tar.gz文件 tar -zxvf redis-7.4.0.tar.gz进入redis安装目录 cd redis-7.4.0make时报错&#xff0c;因为需要安装gcc&#xff0c;gcc安装需要联网安装 修改端口 编辑文件用vi。nano命令cen…

第一个纯血鸿蒙应用(Napi开发-ArtTS调用C/C++)

1.行业背景 纯血鸿蒙&#xff0c;即鸿蒙Next版已于2014年1月正式发版&#xff0c;鸿蒙生态设备数量已经突破10亿台&#xff0c;已经有超过15000个应用和元服务上架。鸿蒙生态不只是移动设备这么简单&#xff0c;他打造的是一个18n的全场景战略&#xff0c;真正做到了“万物互联…

2.ARM_ARM是什么

CPU工作原理 CPU与内存中的内容&#xff1a; 内存中存放了指令&#xff0c;每一个指令存放的地址不一样&#xff0c;所需的内存空间也不一样。 运算器能够进行算数运算和逻辑运算&#xff0c;这些运算在CPU中都是以运算电路的形式存在&#xff0c;一个运算功能对应一种运算电…

【Ant.designpro】上传图片

文章目录 一、前端二、后端 一、前端 fieldProps:可以监听并且获取到组件输入的内容 action{“/api/upload_image”} 直接调用后端接口 <ProFormUploadButtonlabel{"上传手续图片"}name{"imgs"}action{"/api/upload_image"}max{5} fieldPro…

CSS基础知识六(浮动的高度塌陷问题及解决方案)

目录 1.浮动高度塌陷概念 2.下面是几种解决高度塌陷的几种方案&#xff1a; 解决方案一&#xff1a; 解决方案二&#xff1a; 解决方案三&#xff1a; 1.浮动高度塌陷概念 在CSS中&#xff0c;高度塌陷问题指的是父元素没有正确地根据其内部的浮动元素或绝对定位元素来计…

【云原生开发】K8S集群管理后端开发设计与实现

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

计算机网络——SDN

分布式控制路由 集中式控制路由

qt QTableWidgetItem详解

1、概述 QTableWidgetItem 是 Qt 框架中的一个类&#xff0c;专门用于在 QTableWidget&#xff08;一个基于项的表格视图&#xff09;中表示单个单元格的内容。QTableWidget 继承自 QAbstractItemView&#xff0c;而 QTableWidgetItem 则作为表格中的一个单元格项&#xff0c;…

DevExpress中文教程 - 如何使用AI模型检查HTML编辑中的语法?

DevExpress .NET MAUI多平台应用UI组件库提供了用于Android和iOS移动开发的高性能UI组件&#xff0c;该组件库包括数据网格、图表、调度程序、数据编辑器、CollectionView和选项卡组件等。 目前许多开发人员正在寻找多种方法将AI添加到解决方案中&#xff08;这通常比想象的要…

vue中html如何转成pdf下载,pdf转base64,忽略某个元素渲染在pdf中,方法封装

一、下载 html2Canvas jspdf npm install jspdf html2canvas二、封装转换下载方法 htmlToPdf.js import html2Canvas from html2canvas import JsPDF from jspdf/*** param {*} reportName 下载时候的标题* param {*} isDownload 是否下载默认为下载&#xff0c;传false不…

day05(单片机)SPI+数码管

目录 SPI数码管 SPI通信 SPI总线介绍 字节交换原理 时序单元 ​​​​​​​SPI模式 模式0 模式1 模式2 模式3 数码管 介绍 74HC595芯片分析 ​​​​​​​原理图分析 ​​​​​​​cubeMX配置​​​​​​​ 程序编写 硬件SPI ​​​​​​​软件SPI 作业&#xff1a; SPI数…

越学越爽!4小时从零入门大模型教程,2024最详细的学习路线,让你少走99%弯路!(大模型/LLM/Agent/提示工程)

第一阶段&#xff1a;基础理论入门 目标&#xff1a;了解大模型的基本概念和背景。 内容&#xff1a; 人工智能演进与大模型兴起。 大模型定义及通用人工智能定义。 GPT模型的发展历程。 第二阶段&#xff1a;核心技术解析 目标&#xff1a;深入学习大模型的关键技术和工…

论文速读:简化目标检测的无源域适应-有效的自我训练策略和性能洞察(ECCV2024)

中文标题&#xff1a;简化目标检测的无源域适应&#xff1a;有效的自我训练策略和性能洞察 原文标题&#xff1a;Simplifying Source-Free Domain Adaptation for Object Detection: Effective Self-Training Strategies and Performance Insights 此篇文章为论文速读&#xff…

小白入门学习计算机辅助工具--Git和Github

虽然平时大家都有听过Github&#xff0c;但这实际上要分为Git和Github&#xff0c;我们可以简单理解为前者是用于本地&#xff0c;后者是远程端。下面我们来看看一些基本的操作。 Github创建仓库 让我们先从Github开始&#xff0c;点击右边的绿色按钮new进入创建库界面&#x…

【C++】哈希表封装 unordered_map 和 unordered_set 的实现过程

C语法相关知识点可以通过点击以下链接进行学习一起加油&#xff01;命名空间缺省参数与函数重载C相关特性类和对象-上篇类和对象-中篇类和对象-下篇日期类C/C内存管理模板初阶String使用String模拟实现Vector使用及其模拟实现List使用及其模拟实现容器适配器Stack与QueuePriori…

攀拓(PAT)- 程序设计(乙级)2024年春季考试

题目来源&#xff1a;https://pintia.cn/market/item/1767454903977603072 B-1 题目要求 2024 这个数字&#xff0c;可以由 n n n个互不相同的正偶数和 m m m个互不相同的正奇数组合出来吗&#xff1f;本题就请你回答这个问题。 输入格式&#xff1a; 输入在一行中给出一个…

STM32 BootLoader 刷新项目 (九) 跳转指定地址-命令0x55

STM32 BootLoader 刷新项目 (九) 跳转指定地址-命令0x55 前面我们讲述了几种BootLoader中的命令&#xff0c;包括获取软件版本号、获取帮助、获取芯片ID、读取Flash保护Level。 下面我们来介绍一下BootLoader中最重要的功能之一—跳转&#xff01;就像BootLoader词汇中的Boot…