在 CSS 中，浮动是一种布局技术，通过 float 属性来使元素在页面中沿着容器的左侧或右侧浮动，使得其他元素能够环绕它。
Bootstrap中对h标签的字体和字号进行了微调，开发者除了可以直接使用这些标签进行标题的修饰外，还可以使用.h1到.h6类来将其他元素的字体进行修饰，示例如下：
CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：
当使用 position对齐元素时, 总是定义 margin 和 padding 为 <body> 元素. 这是为了避免不同浏览器的视觉差异。
文章目录 一、盒子模型位置摆放三大机制 - 普通流、浮动、定位 二、行内块元素的摆放缺陷 一、盒子模型位置摆放三大机制 - 普通流、浮动、定位 ---- 盒子模型位置摆放三大机制 : 普通流 : 默认的摆放样式 ; 块级元素 摆放 : 每个 块级元素 独占一行 , 排列顺序 从上到下 ; 如 : div , p , h1 等 ; 行内元素 摆放 : 多个 行内元素 在同一行显示 , 排列顺序 从左到右 , 显示到边缘 自动换行 ; 如 : span , strong , a 等 ; 浮动 : 盒子模
选中不在此范围内的元素，例如：div:not(:last-child)，选中除最后一个div的所有div元素
1、浮动元素有左浮动(float:left)和右浮动(float:right)两种
span 是标准 行内元素，从左到右依次排序，若一行的行内元素过多，多与的行内元素触碰到父元
网页布局在前端开发中是一个很重要的点，在传统布局解决方案中，一般是基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现，当然也是可以实现的，比如说table布局或者说是使用绝对定位的方式，但是相对于下面要说到的弹性布局来说就复杂多了。
Flex布局，可以简便、完整、响应式地实现各种页面布局。 多个元素在一行 HTML xxx xxx xxx xxx CSS .ly { display: flex; } 多个元素水平居中对齐 .ly { disp
当你学习CSS时，了解CSS属性是非常重要的，因为这些属性控制了网页上元素的外观和布局。本文将详细介绍一些常见的CSS属性，包括文本属性、盒子模型属性、背景和边框属性、定位属性等。我们还将为每个属性提供示例代码，以便你更好地理解它们的用法。
{dotted startColor="#ff6c6c" endColor="#1989fa"/}
一、图片大小 在CSS中，我们可以使用width、height属性来定义图片的大小。 1.实际开发 在实际开发中，需要使用多大的图片，就用Photoshop制作多大的图片。 （1）性能优化 不建议使用一张大图片，然后再借助width、height属性来改变大小。 因为一张大图片体积太大，会使页面加载速度变慢，这是性能优化方面的考虑。 二、图片边框 在5.边框样式-CSS基础 中，已经介绍过几乎可以对所有元素定义边框，也举出了对图片加上边框的例子，用border属性定义边框。 1.
使用 CSS，我们可以轻松创建导航栏，即菜单。此外，链接可以左对齐或右对齐。我们将使用 flex 来实现相同的目的。让我们看看如何。
CSS 锚点定位是一项强大的新功能，可用于创建各种交互元素，例如工具提示、模式和弹出窗口。它使工具提示更加动态。这是一个小示例，展示了如何锚定定位以创建工具提示：
Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局，而不是使用浮动来布局。
font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
Grid 可以简便、完整、响应式地实现各种页面布局。它比 Flex 布局功能更强大。
grid 布局的使用 css 网格布局，是一种二维布局系统。 浏览器支持情况:老旧浏览器不支持， 概念： 网格容器。元素应用dispalay:grid,它是所有网格项的父元素。 07
本文由来源 21aspnet，由 javajgs_com 整理编辑，其版权均为 21aspnet 所有，文章内容系作者个人观点，不代表 Java架构师必看 对观点赞同或支持。如需转载，请注明文章来源。
自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚 Tables Human Interface Guidelines链接：Tables 一个table将数据显示为可滚动的单列列表，这些列表可以分为多个部分或组。 使用table可以以列表的形式干净有效地显示大量或少量信息。 一般来说，table非常适合基于文本的内容，并且通常在split view的一侧显
注意：如果元素之间如果没有空格，回车之类的，两端对齐会失效。如，用 Angular 的 ng-repeat 生成出来的元素之间就就没有空格。
2019年实习时的 BootStrap(4.x)基础知识 备份 BootStrap5六角学院文档： HexSchool 顺便推荐一个程序员段子网站 techug.com
ContentTools是一个美观小巧的网页内容工具（一个JS库），具备所见即所得（WYSIWYG）的编辑器功能，只需几个简单的步骤，即可将ContentTools添加到任何HTML页面。如下图所示页面通过实时ContentTool的弹出层实现实时编辑功能。用小而美来形容它最好不过了！
描述: 通过前面几章的学习，相信大家已经对CSS有了一个简单的了解吧，现在我们又回到使用频率较高的 文本 text、图像 images、表单 table 等元素CSS样式的设置，此章节主要讲解针对文本的相关CSS属性以其使用的示例演示。
盒子模型：我们知道当并列书写多个div标签，它们会纵向向下排位，如果我们想将多个div并列成一排，就得借助position，float，或display属性，这便是传统的盒模型做法。
富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器。
---title: css-texttags: 笔记categories: 笔记author: 喵雨date: 2022-06-19 09:51:17coverImg:---colordiv { color: red;}text-aligntext-align用于设置元素内文本内容的水平对齐方式div { text-align: center; center 居中对齐 left 左对齐 right 右对齐}text-decoration装饰文本规定添加到文本的修饰，可以给文本添
上篇文章主要介绍了CSS样式更改篇中的字体设置Font&边框Border设置，这篇文章分享列表、表格和轮廓，一起来看看吧。
SEO图像优化的目的主要是为了提升图片在搜索引擎中的曝光率，从而增加网站的关注度。在网站设计中，重点放在图像的规划中，符合规则的图像能在搜索中发挥巨大的作用，在图像板块中位于首页，更有利于推广活动。研究图片的关键字。想要图片在搜索引擎中能够在较前的排名，您需要知道正在搜索的内容。根据SEO研究提前规划您的图像描述，这可以通过Semrush，Semstorm或Ahrefs等众多平台提供帮助。让您的图像出现在查找位置中！将特殊关键字添加到图像描述中。“意见”，“专家意见”，“前10名”，“评论”，“价格”，“比较”，“排名”，“测试”是添加到类别或产品中以查找信息的最常见关键字。回答此需求并将其添加到您的图像中！如果您正在销售手机，请将其设置为：“三星s10测试”或“快速智能手机排名”。规则很简单。左对齐居中对齐右对齐无阴影有阴影标注删除更多添加描述使用相关的图像格式。就像分辨率和大小优化一样，搜索引擎会查看图像的格式，以评估其作为搜索结果显示的价值。格式通常会影响加载的大小和速度，从而影响搜索引擎的选择。所以尽可能使用WebP或类似格式左对齐居中对齐右对齐无阴影有阴影标注删除更多添加描述保证材料质量。不要使用大量的库存图像，尝试引入尽可能多的拍摄精美的产品图像，没有像素化，没有模糊，良好的质量会在搜索引擎中得到更好的推荐，更高的排名。左对齐居中对齐右对齐无阴影有阴影标注删除更多添加描述注意照片的大小。照片的分辨率和大小对搜索引擎来说起着重要作用。不要采取所谓的“越大越好”的方法。尽量将图片保持在5 MB以下，以便快速加载以获得更好的用户体验并提高您在搜索引擎中的位置。包括产品图片！左对齐居中对齐右对齐无阴影有阴影标注删除更多添加描述延迟加载为了使网站排名更高，其图像更受搜索引擎的欢迎，您可以使用延迟加载技术。随着用户在站点中前进，它会逐渐加载图像，从而允许更流畅的浏览以及更短的页面加载时间。它还将改善用户体验，因为它有助于更快地访问内容。左对齐居中对齐右对齐无阴影有阴影标注删除更多添加描述图片替代标记一个好的图片alt标签（您在网站HTML中通过“alt”属性分配给图片的描述文本）的关键是关键字的巧妙放置。不要用流行的关键字过度替代文本，最好使其与图像内容相关，并直观地放置其中的一两个。在多语言网站中，管理所有相关语言的alt标签 - 这意味着更多的本地化任务，但肯定值得一试。左对齐居中对齐右对齐无阴影有阴影标注删除更多添加描述将照片放置在网站内。重要的是，您希望在搜索引擎中排名很高的照片正确放置在网站的文本中。将其放在包含所需关键字的文本附近，并对其进行说明。搜索引擎将从此邻近位置获取信息。电子商务网站将通过构建产品描述和图像彼此非常接近的结构来做好事。左对齐居中对齐右对齐无阴影有阴影标注删除更多添加描述不要忘记文本内容。搜索引擎是一个内容搜索引擎。确保您的文本和视觉内容具有高质量。巧妙地编写SEO建议，并使用相关图像说明您的良好文本。一步一步地，这将作为电子商务业务的总体策略得到回报。这是图像SEO更进一步！左对齐居中对齐右对齐无阴影有阴影标注删除更多添加描述避免将重要内容仅放在图像中。对于搜索引擎来说，从图像中提取内容和含义仍然很困难。如果您打算将重要信息传递给您的客户/读者，请避免仅将其放在图像中。尽管信息图表很有用，但在文本中描述它们对SEO是有益的。左对齐居中对齐右对齐无阴影有阴影标注删除更多添加描述搜索引擎友好的图像网址不仅设计精良的alt标签，而且名称明确的图像也会受到搜索引擎的青睐。使用连字符和描述性名称。诸如DSC123123_a.jpg之类的解决方案。左对齐居中对齐右对齐无阴影有阴影标注删除更多添加描述结构化数据非常重要。搜索引擎会突出显示特殊格式的内容，例如烹饪食谱，简短的传记，产品表等。如果您将网站设计为明确列为结构化数据（包括图像）的格式内容，则可以从搜索结果列表中的公开位置中受益。左对齐居中对齐右对齐无阴影有阴影标注删除更多添加描述结论通过我们的指南列表，我们引导您解决了图像优化问题。现在，是时候在实践中运用你的知识了。SEO图像优化的规则
CSS 布局本质就是控制元素的位置和大小。比如这样的布局：元素宽960px，水平居中。宽960px是大小。水平居中是位置。又如这样的布局：两个元素在一行，左侧元素固定宽200px，右侧元素撑满剩余空间。固定宽200px，撑满剩余空间是大小。两个元素在一行是位置。
1、CSS有四种控制方式：行内样式、内嵌式、链接式、导入式（优先级从高到低） 2、CSS选择器有：标记选择器（p、ul、a、li、img、span、input、select、等）、类别选择器（class的值）、ID选择器（id的值）；区别在于标记选择器使用所有，类别选择器适用不同类中相同的样式，ID选择器适用唯一不变样式（比如：div class=“one two”就是既使用.one的定义也使用.two的定义） 3、选择器声明 选择器集体声明用逗号隔开（例如：h1,h2,p,#one{}）；全局声明用*；
<integer>：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
在“文本水平对齐text-align”这一节我们详细讲解了text-align属性。大家请记住，text-align一般只用在两个地方：文本水平对齐和图片水平对齐。也就是说，text-align只对文本和img标签有效，对其他标签无效。
这2个class是直接在body标签下建立一个div标签，class等于这2个中的一个。 然后其他内容全部写在这个div标签中即可！ 例如:
h1 - h6 标题 标题文字 h1 标题文字 h2 标题文字 h3 标题文字 h4 标题文字 h5 标题文字 h6 格式 段落普通文本 段落内小号字文本 段落内加粗字文本 段落内斜体字文本 段落内删除线文本 段
段落普通文本
段落内小号字文本
段落内加粗字文本
段落内斜体字文本
段落内删除线文本
段
※ flex-direction:column-reverse (与column 相反)
css position是个很重要的知识点： 知乎Header部分： 知乎Header-inner部分： position属性值： fixed：生成绝对定位的元素，相对浏览器窗口进行定位（位置可通过：
CSS 选择器： CSS id选择器： id选择器可以为标有特定 id的HTML元素指定特定的样式 id选择器是以 “#” 来定义的 <!DOCTYPE html> <html> <head> <title>Node</title> <style type="text/css"> #red {color: red;} #green {color: green;} </style> </head> <body> id选择器：red -- 红色 <p
id选择器：red -- 红色
因为一些网页布局要求，标准流不能满足我们的需要了，因此我们需要浮动来完成网页布局。
大家好，我是柒八九。从今天起，我们又重新开辟了一个新的领域：CSS串讲。(毕竟在Web 领域，CSS也是有举足轻重的作用)在该系列文章中，我们会一起学习 「元素居中」、「层叠上下文」还有一些在面试中比较常见的问题及一些在工作中遇到比较好玩的点。
总第61篇 上一篇推送了网页的基本构成，链接地址：网页是怎么构成的？，这篇来讲讲网页的修饰，正如字面意思一般，本篇分享的内容是用来修饰网页的，是让网页变得更加好看。本文只是介绍一些基本的CSS，适合入门。 01|什么是CSS： CSS 指层叠样式表 (Cascading Style Sheets) 样式是用来定义如何显示 HTML 元素 02|CSS怎么用： CSS怎么用，也就是CSS的语法。CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 选择器通常是您需要改变样式的 HTML 元素
上回说到，移动端适配，推荐了，使用px为主，vw,百分比为辅助，再搭配flex的布局方式，于是有人就开始问我了，这个flex搭配布局应该怎么用，梳理一遍，巩固一下
CSS (Cascading Style Sheets) 其实并不是编程语言，CSS可以直接运行在浏览器中，浏览器就是它们的运行环境，CSS 中文名为层叠样式表，也就是一些样式的配置。
js实现在input框里面输入属性和值，页面的 div的属性根据输入的属性和值进行变化。
网页布局的核心——就是用 CSS 来摆放盒子。CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：
在CSS中，我们可以使用 background-size 和background-position属性为背景图像设置大小和位置。而 object-fit 和 object-position 属性则允许我们对嵌入的图像（以及其他替代元素，如视频）做类似的操作。在本文中，我们将深入探讨如何使用 object-fit 将图像适应到特定的空间中，以及如何使用 object-position 在该空间中进行精确定位。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
