CSS笔记III

news/2024/2/25 12:43:31/文章来源:https://blog.csdn.net/2303_77073508/article/details/135638402

选择器

结构伪类选择器

作用:根据元素的结构关系查找元素

选择器说明
E:first-child查找第一个E元素
E:last-child查找最后一个E元素
E:nth-child(N)查找第N个E元素(第一个元素N值为1)

nth-child(公式) 作用是可以根据元素的结构关系查找多个元素

偶数标签:2n ;奇数2n+1 or 2n-1 之类的依次类推

找到第五个以后的所有标签 n+5 ;第五个以前的所有标签是-n+5

伪元素选择器

作用:创建虚拟元素(伪元素) ,用来摆放装饰性的内容

选择器说明
E::beforeE元素中面添加一个伪元素
E::afterE元素中面添加一个伪元素
  • 必须设置 content:" " 属性,用来设置伪元素内容,如果没有内容,则引号留空即可
  • 伪元素默认是行内显示模式
  • 权重标签选择器相同
    <style>div::before {content: "html";}div::after {content: "js";}</style>
</head>
<body><div>css</div><!--这是在css前后分别添加html和js-->

注意:伪元素选择器创建出来的是行内元素,宽高效果如果想修改显示需要,转换成块元素;

PxCook软件

PxCook(像素大厨) 是一款切图设计工具软件。支持psd文件

低代码工具

盒子模型

​ 盒子模型是css技术所使用的一种思维模型。盒子模型是指将网页设计页面中的内容元素看作一个个装了东西的矩形盒子。每个矩形盒子都由内容、内边距、边框和外边距4个部分组成。除去内容部分,其余每个部分又分别包含上、下、左和右4个方向,方向既可以分别定义也可以统一定义。

​ 我们生活中常见的手机盒子就可以看作一个盒子模型,完整的手机盒子通常包含手机、内填充物和盛装手机的外壳。如果把手机想象成HTML标记,那么手机盒子就是一个CSS盒子模型。内容就是盒子里装的手机;内边距就是怕手机损坏得填充物:边框就是盒子本身外部的壳;外边距就是多个手机盒子排放时空的缝隙。

组成

盒子模型重要组成部分:

  • 内容区域 width&height
  • 内边距 padding
  • 边框线 border
  • 外边距 margin

边框线

属性名:border (bd)

属性值:边框线粗细(数字+px) 线条样式(solid -实线、dashed -虚线、dotted -点线) 颜色 (三个属性不区分书写顺序)

设置单方向边框线

属性名:border-方位名词 (缩写方式:bd+方位名词首字母)

top bottom left right (上下左右)

属性值:边框线粗细 线条样式 颜色 (不区分顺序)

内边距

作用:设置内容与盒子边缘之间的距离

属性名:padding

设置单方向内边距 同样是属性名-方位词

例如 顶部内边距 padding-top

多值写法

padding 复合属性写法 看下面表格

顺序是上右下左 (top 、right 、bottom、left)绕着盒子从top开始顺时针转取值,如果数到当前方向没有数值,取值就和对面的数值一样。

取值个数code说明
一个值padding:10px四个方向内边距均为10px
四个值padding:10px 40px 80px 40px上:10px ; 右: 20px; x下:80px ;左:40px;
三个值padding: 10px 40px 80px上:10px ; 左右: 40px; x下:80px ;
两个值padding: 10px 80px上下:10px ; 左右: 80px;

尺寸计算

默认情况:

盒子尺寸=内容尺寸 + border尺寸 + 内边距尺寸

给盒子增加boeder / padding 会增加盒子尺寸 产生不必要的尺寸

  • 解决方法
    • 手动做减法
    • 内减模式:box-sizing:border-box

外边距

作用:拉开两个盒子之间的距离

属性名:margin

注意:与padding的属性值,写法含义基本一样,也同样可以定义单个方向的属性。

板心居中 margin: 0 auto

板心居中的前提是盒子必须要有宽度width 不然不会产生效果

清楚默认样式

清楚标签的默认样式

* {margin:0;padding:0;box-sizing:border-box;
}
<!--先清楚所有标签内外边距并且设置内减盒子属性-->

元素溢出

作用:控制溢出元素的内容的显示方式

属性名:overflow

属性值 :关键字

属性值效果
hidden溢出隐藏
scroll溢出滚动 (无论是否溢出,都显示滚动条位置)
auto溢出滚动 (溢出才显示滚动条位置)

外边距问题

外边距合并问题

特定场景:垂直排列的兄弟元素,上下margin会合并

显示:合并时取两个margin中较大值生效

外边距塌陷问题

特定场景:父子级标签,子级标签添加的margin-top会产生外边距塌陷问题

显示效果:导致父级标签一起向下移动

  • 解决方法
    • 取消子级margin 父级设置padding
    • 父级设置overflow:hidden
    • 父级设置boeder-top

行内元素-内边距问题

特定场景:行内元素添加margin和padding ,无法改变元素垂直位置

解决方法:给行内元素添加line-height可以改变垂直位置

圆角效果

作用:设置元素的外边框为圆角

属性名:border-radius

属性值:数字+px / 百分比

属性值(圆角半径)

外边框有四个角 同样四个角可以单独取值 单个取值的写法同上文padding的格式从左上角开始顺时针书写数值 没有读取到数值的角与其对角的数值相同

  • 常见圆角

    • 正圆 :将正方形盒子设置圆角属性值为宽高的一半or50%
    yuan {width:200px;height:200px;border-radius:100px;
    }
    
    • 胶囊形状 给长方形盒子设置圆角属性值为盒子高度的一半

      yuan {width:200px;height:100px;backfround-color: greenborder-radius:50px;
      }
      

注意圆角最大取值是50%,超过50%不会变得更圆。

阴影

作用:给元素设置阴影效果

属性名:box-shadow

属性值:x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影

注意:x轴偏移量 y轴偏移量 必须书写 不然阴影不会生效

默认是外阴影 ,内阴影需要添加inset

标准流

标准流也叫文档流,指的是标签在页面中默认的排布规则

例如:块元素独占一行,行内元素可以一行显示多个。

就是网页中标签的默认显示模式 当不足以满足需求时再使用浮动或者flex布局

浮动

作用:让块级元素在一行水平排列

属性名:float

属性值 关键字 left(左对齐) 、right(右对齐)

特点:顶对齐,具有行内块级元素显示模式的特点

注意:如果要设置块级元素浮动尽量全部设置 不然可能会出现 脱标效果 和强转行内块有异曲同工之秒 具体基础看code

<!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>* {margin: 0;padding:0;}li {list-style: none;}.product {margin: 50px auto;width: 1226px;height: 628px;background-color: pink;/* 版心居中的大盒子 */}.left {float: left;width: 234px;height: 628px;background-color: green;}.right {float: right;width: 978px;height: 628px;background-color: brown;}.right li {float: left;margin-right: 14px;margin-bottom: 14px;width: 234px;height: 300px;background-color: yellowgreen;}/* 第四个和第八个li 去掉margin-right 不然会掉出盒子 */.right li:nth-child(4n){margin-right: 0;}/* 因为父级的宽度不够 所以浮动的盒子回掉出盒子 */</style>
</head>
<body><div class="product"> <div class="left"></div><div class="right"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></div>
</body>
</html>

清除浮动

特点场景:浮动元素会脱标,如果父级没有高度,子级无法撑开父级高度(可能导致页面布局错乱)

解决方法:清除浮动(清楚浮动带来的影响)、

  • 方法一: 额外标签法

​ 在父元素内容的最后添加一个块元素设置CSS属性 clear:both

  • 方法二 :单伪元素法

    .clearfix::after {content: "";display:block;clear:both;}
    
  • 方法三 :双伪元素法(推荐)

           <!--before是为了防止塌陷,解决外边距塌陷问题-->.clearfix::before,.clearfix::after{content: "";display: table;}<!--after作用是清除浮动-->.clearfix::after{clear: both;}
    
  • 方法四 :overflow

    父元素添加CSS属性 overflow:hidden

浮动 -总结

属性 float , left表示左浮动 、right表示右浮动

  • 特点
    • 浮动后的盒子顶对齐
    • 浮动后的盒子具备行内块的特点
    • 父级宽度不够,浮动的子级会换行
    • 浮动后的盒子脱标
  • 清楚浮动 :子级浮动 ,父级没有高度,子级无法撑开父级高度,影响布局效果
    • 双伪元素法

Flex布局

重点 学习

flex布局也叫弹性布局,是浏览器提倡的布局模型,非常适合结构化布局,提供了强大的空间分布和对齐能力。flex模型不会产生浮动布局中脱标现象,布局网页更加灵活简单

flex-组成

设置方式:给父元素设置 display:flex,子元素可以自动挤压或者拉伸

组成部分:

  • 弹性容器
  • 弹性盒子
  • 主轴:默认在水平方向
  • 侧轴/交叉轴:默认在垂直方向

弹性容器 display:flex里面的元素盒子叫弹性盒子

	<!--仅写css样式-->   <style>/* 弹性容器 */.box {display:flex;height: 300px;border:1px solid #000;}/* 弹性盒子 */.box div {width: 200px;background-color: pink;}</style>

flex -布局

描述属性
create flex containerdisplay:flex
主轴对齐方式justify-content
侧轴对齐方式align-items
某个弹性盒子侧轴对齐方式align-self
修改主轴方向flex-direction
弹性伸缩比flex
弹性盒子换行flex-wrap
行对齐方式align-content

主轴对齐方式

属性名 : justify-content

属性值效果
flex-start默认值,弹性盒子从起点开始依次排列
flex-end弹性盒子从终点开始依次排列
center弹性盒子沿主轴居中排列
space-between弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子之间
space-around弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子两侧
space-evenly弹性盒子沿主轴均匀排列,弹性盒子与container之间间距相等

侧轴对齐方式

属性名:

  • align-items 当前弹性容器内所有的弹性盒子的侧轴对齐方式(给弹性容器设置)
  • align-self 单独控制某个弹性盒子的侧轴对齐方式(给弹性盒子设置)

属性值相同都是关键字:

属性值说明
stretch弹性盒子沿着侧轴线拉伸至铺满容器(弹性盒子没有设置侧轴方向尺寸则默认拉伸)
center弹性盒子沿侧轴居中排列
flex-start弹性盒子沿起点开始依次排列
flex-end弹性盒子从终点开始依次排列

技巧:在为单独的弹性盒子的时候可以配合结构伪类选择器,选中某个特定的弹性盒子。

修改主轴方向

属性名:flex-direction

属性值:关键字

属性值效果
row水平方向,从左到右
column垂直方向,从上到下
row-reverse水平方向,从右向左
column-reverse垂直方向,从下向上

注意:

  • 修改主轴方向 为垂直方向 ,侧轴自动变换到水平方向
  • 主轴在垂直 垂直居中
  • 侧轴在水平 水平居中

弹性伸缩比

特点:可以控制弹性盒子的主轴方向的尺寸

属性名:flex

属性值:数字 ,表示占用父级剩余尺寸的份数 (权重

整数数字 控制权重 剩余空间的弹性盒子所占弹性容器的权重

弹性盒子换行

弹性盒子可以自动挤压或者拉伸,默认情况下,所有弹性盒子在一行显示

属性名: flex-wrap

属性值:

  • wrap 换行
  • nowrap 不换行 (默认)

行对齐方式

属性名:align-content

属性值:

属性值效果
flex-start默认值,弹性盒子从起点开始依次排列
flex-end弹性盒子从终点开始依次排列
center弹性盒子沿主轴居中排列
space-between弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子之间
space-around弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子两侧
space-evenly弹性盒子沿主轴均匀排列,弹性盒子与container之间间距相等

注意此处显示的是 对行的对齐方式 对于单行的弹性盒子不生效

纸上谈来终觉浅 ,绝知此事要躬行

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

还在质疑js的性能,人家都干到过第一了。

前两天看到一个 just.js&#xff0c;感到了 Techempower 排名第一&#xff0c;甚至打败了 asp.net core&#xff0c;还有drogn&#xff0c;不知道背后什么原因&#xff0c;反正挺震撼的。 现在开始慢慢验证Atwood定律&#xff1a;任何能够用JavaScript实现的应用系统&#xf…

如何在 Python3 中使用变量

介绍 变量是一个重要的编程概念&#xff0c;值得掌握。它们本质上是在程序中用于表示值的符号。 本教程将涵盖一些变量基础知识&#xff0c;以及如何在您创建的 Python 3 程序中最好地使用它们。 理解变量 从技术角度来说&#xff0c;变量是将存储位置分配给与符号名称或标…

java自动化将用例和截图一起执行测试放入world中直接生成测试报告【搬代码】

1.首先我们得用例写好之后放入文档中&#xff0c;把不用的案例类型、前置条件去掉之后&#xff0c;如图&#xff1a; 放到桌面后&#xff0c;先看执行结果&#xff1a; 首先&#xff0c;我们先创建一个时间&#xff0c;这个时间主要是给图片创建名称&#xff0c;并且要在插入…

【LabVIEW FPGA入门】没有CompactRIO时进行编程测试

1.新建一个空白项目。 2.新建cRIO终端。 要添加仿真的远程实时目标&#xff0c;请选择项目名称&#xff0c;右击并选择新建>>目标和设备(Targets and Devices)。 3.新建终端和设备&#xff0c;选一个cRIO型号 接下来&#xff0c;当添加目标和设备窗口出现时&#xff0c;请…

【数据结构】常见八大排序算法总结

目录 前言 1.直接插入排序 2.希尔排序 3.选择排序 4.堆排序 5.冒泡排序 6.快速排序 6.1Hoare版本 6.2挖坑法 6.3前后指针法 6.4快速排序的递归实现 6.5快速排序的非递归实现 7.归并排序 8.计数排序&#xff08;非比较排序&#xff09; 9.补充:基数排序 10.总结…

Jmeter 性能-监控服务器

Jmeter监控Linux需要三个文件 JMeterPlugins-Extras.jar (包&#xff1a;JMeterPlugins-Extras-1.4.0.zip) JMeterPlugins-Standard.jar (包&#xff1a;JMeterPlugins-Standard-1.4.0.zip) ServerAgent-2.2.3.zip 1、Jemter 安装插件 在插件管理中心的搜索Servers Perform…

散列函数,哈希表hash table

附上一句话&#xff1a;我知道大家可能曾经了解过这个散列表了&#xff0c;我发现&#xff0c;如果多看几个相关的视频&#xff0c;从不同的表述方式和不同的理解角度来理解这个问题&#xff0c;我会明白的更透彻&#xff0c;也有更多新的收获&#xff0c;尤其是对这个算法的应…

宁夏银行关键系统基于OceanBase的创新实践

宁夏银行成立于 1998 年&#xff0c;是宁夏第一家“宁”字号地方商业银行&#xff0c;西部地区第一家以省级行政区命名的地方商业银行。2016 年&#xff0c;被中国人民银行评为宁夏地区系统性重要银行。目前&#xff0c;全行设分支机构 97 家&#xff0c;其中总行营业部 1 家&a…

制造工厂ERP系统:从数字销售-生产到财务管理,掌握企业数字化十大核心!

在快速发展的数字化时代&#xff0c;企业&#xff08;尤其是传统生产制造行业&#xff09;面临着诸多挑战与机遇。无论是客户体验、供应链管理还是内部流程优化&#xff0c;数字化都在发挥着关键作用。为了更好地应对数字化带来的挑战和机遇为了更好地应对市场变化和提高竞争力…

打造高品质家具的必选!数控开料机为何备受推崇?

随着科技的不断进步&#xff0c;数控开料机已经成为了木材加工行业中的首选设备。 一、数控开料机在木材加工行业中的优势 高效、精准的加工效果 数控开料机采用高精度的数控技术和高功率的机械传动系统&#xff0c;可以实现对木材的精确开料和高效加工。与传统的手工操作相…

【RabbitMQ】RabbitMQ高级:死信队列和延迟队列

目录 设置TTL&#xff08;过期时间&#xff09;概述RabbitMQ使用TTL原生API案例springboot案例 死信队列概述原生API案例springboot案例 延迟队列概述插件实现延迟队列安装插件代码 TTL实现延迟队列实现延迟队列优化 设置TTL&#xff08;过期时间&#xff09; 概述 在电商平台…

51单片机-电子密码锁

实物演示效果&#xff1a; https://www.bilibili.com/video/BV1xh4y1K7uV/?vd_source6ff7cd03af95cd504b60511ef9373a1d 电子密码锁的主要功能 1.按键设置6位密码&#xff0c;输入密码若密码正确&#xff0c;则锁打开。显示open&#xff01; 2.密码可以自己修改&#xff0…

Ubuntu 22.04安装使用easyconnect

EasyConnect 百度百科&#xff0c;EasyConnect能够帮助您在办公室之外使用公司内网的所有系统及应用。在您的公司部署深信服远程应用发布解决方案后&#xff0c;您的公司所有业务系统及应用都可以轻松迁移至移动互联网上。您可以通过手机、PAD等智能移动终端随时随地开展您的业…

【Leetcode】82. 删除排序链表中的重复元素 II

文章目录 题目思路代码 题目 82. 删除排序链表中的重复元素 II 题目&#xff1a;给定一个已排序的链表的头 head &#xff0c; 删除原始链表中所有重复数字的节点&#xff0c;只留下不同的数字 。返回 已排序的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,3,4,…

带你解析git的基础功能(二)

文章目录 一.前言二.什么是git的分支管理三.git的分支管理的相关操作3.1 创建分支3.2 切换分支3.3 合并分支 和合并冲突3.4 删除分支 四.分支管理策略第一种分支策略第二种分支策略 总结 一.前言 掌握 Git 分⽀管理&#xff0c;从分⽀创建&#xff0c;切换&#xff0c;合并&am…

Visual Studio 2019 ctrl+f 呼出查找和替换窗口

有时候 ctrlshiftf 呼出查找和替换窗口不起作用&#xff0c;可能和其它程序的快捷键冲突&#xff0c;解决方案&#xff1a; ------------英文版本------------ 依次点击VS菜单栏中的 Tools - Options - Environment - Keyboard: 1. 在右侧的 Show commands containing: 文本框输…

【深度学习】RTX2060 2080如何安装CUDA,如何使用onnx runtime

文章目录 如何在Python环境下配置RTX 2060与CUDA 101. 安装最新的NVIDIA显卡驱动2. 使用conda安装CUDA Toolkit3. 验证onnxruntime与CUDA版本4. 验证ONNX需求版本5. 安装ONNX与onnxruntime6. 编写ONNX推理代码 如何在Python环境下配置RTX 2060与CUDA 10 RTX 2060虽然是一款较早…

Android PendingIntent 闪退

先来给大家推荐一个我日常会使用到的图片高清处理在线工具&#xff0c;主要是免费&#xff0c;直接白嫖 。 有时候我看到一张图片感觉很不错&#xff0c;但是图片清晰度不合我意&#xff0c;就想有没有什么工具可以处理让其更清晰&#xff0c; 网上随便搜下就能找到&#xff…

activiti流程图+动态表单

使用技术 jeecg-bootactivitivue3form-create 简单效果展示 流程图绘制 审批人配置 动态表单配置 流程审批 流程审批记录 填写表单信息 源码地址 后台&#xff1a;https://gitee.com/houshixin/jmg-boot前端&#xff1a;https://gitee.com/houshixin/jmg-ui

Pandas加载大数据集

Scaling to large datasets — pandas 2.1.4 documentationhttps://pandas.pydata.org/docs/user_guide/scale.html#use-efficient-datatypes官方文档提供了4种方法&#xff1a;只加载需要的列、转化数据类型、使用chunking&#xff08;转化文件存储格式&#xff09;、使用Dask…