u013179804的博客

CSS 的 overflow 属性用于控制元素内容溢出时的表现方式。当元素的内容超出其指定的尺寸范围时，就会出现溢出现象。比如，一个元素的高度设置是 80px，但内容高度不只是 80px，内容此时就叫做溢出了。而 overflow 属性则可以决定如何处理这种溢出情况，能让溢出部分，达到如下效果，。右侧出现了滚动条，可以查看所有内容了。那需要注意的是，overflow 属性生效的前提是需要设置元素的宽度和高度。

CSS 中的positionstatic：默认值，relative：相对定位，absolute：绝对定位，fixed：固定定位，sticky：粘性定位。因为positiontop：距离定位父元素或包含块顶部的距离。right：距离定位父元素或包含块右侧的距离。bottom：距离定位父元素或包含块底部的距离。left：距离定位父元素或包含块左侧的距离。这四个方位属性可以使用像素(px)、百分比(%)、em 等单位来指定距离，正负值皆可以。

display属性用于控制元素的显示方式：是否显示/如何显示元素。大多数元素的display属性有两种状态：块级元素（Block）和 内联元素（Inline）。除了这两种常见的状态外，还有一些其他的display属性取值，如flexgrid等，用于实现更灵活的布局和样式效果。因为，对于新手，其他属性相对复杂，本次呢，我们么主要来介绍display的 3 个基础常用的属性值。

之前在 HTML 基础部分，我们讲解了表格的结构和写法。简单回顾下。包含等表格部分。和分别包含多个行。行中可以包含或单元格，用来显示表格的标题或数据。本文，我们来给它们增加一些漂亮的样式。图为增加样式前，增加样式后的效果，是不是确实漂亮多了。ok，那我们一起来看看这些表格标签的样式属性吧。

无序列表（<ul>）和有序列表（<ol>）是 HTML 中常用的列表标签。它们在网页中是一种灵活且功能强大的组合方式，能够帮助设计师和开发者有效地组织和展示网页内容，提高页面的可读性、可访问性和用户友好性。ul：用于显示项目列表，项目之间没有顺序关系。默认使用实心圆（●）或者其他符号作为项目符号。ol：用于显示项目序号列表，项目之间有顺序关系，通常用于列出步骤、排名等内容。默认使用数字（1, 2, 3...）作为项目序号，可以通过 CSS 修改序号样式。

我们在之前 HTML 基础 提到了，标签是一个超链接标签，它在不添加样式时，文本颜色：通常是浏览器默认的蓝色，表示链接状态下的文本颜色。下划线：链接文本会默认显示下划线，表示它是一个可点击的链接。光标样式：当鼠标悬停在链接上时，光标通常会变为手型指示点击状态。访问后的样式：当鼠标点击过过链接时，是紫色。那如果这些默认的样式，不符合设计稿要求，能不能修改呢？当然能。本文，就说一下这个。我们在之前 HTML 基础 提到了，标签是一个超链接标签，它在不添加样式时，文本颜色。

学习 CSS text 文本样式能提升页面美观度、用户体验，并传达信息重点，提高网站可访问性，标识网站风格。比如，淘宝的活力橙黄色，网易云的红色，QQ音乐的绿色，知乎的蓝色等等。如图。那我们一起来看一看吧。在学习 CSS 样式时，你可以先单独应用一个样式，观察其效果，然后再添加另一个样式，逐步叠加，直到达到期望的效果为止。你也可以在实践中不断尝试，探索各种样式组合的效果。你可能会说，这么多，记不住怎么办？不全记住也没关系，写文本样式的时候，来看看，多用就会了。ok，本文完。

盒模型时，也叫"框模型"，指的是 CSS 中元素的布局方式和尺寸计算规则。盒模型定义了一个元素在页面布局中所占的空间，包括了元素的内容、内边距、边框和外边距，没错，而这些，正是我们前几篇文所提到的。CSS 基础：border 的 3 个基础属性和简写方法CSS基础：margin属性4种值类型，4个写法规则详解CSS基础：最详细 padding的 4 种用法解析CSS基础：width，height尺寸属性详解。

在 CSS 中，宽度（width）和高度（height）属性用于设置元素的尺寸，控制元素在页面中所占的水平和垂直空间。我们在之前的文中，已多次用到，今天来细致聊一下它的更多用法。

CSS 中的 padding 属性用于控制元素内容与其边框之间的距离，即元素内边距。它的主要作用是调整元素内部内容与边框之间上右下左的间距，以增加页面的美观性和布局灵活性。好，那我们一起来看看吧。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集。近期看有行内朋友（公众号：雪天前端）分享了uniapp写的高颜值登录界面火了，看来高颜值UI，确实比较受欢迎啊。那我就写一个纯净的HTML，CSS版本的吧，代码随便拿走用~效果如图。”可得到前端基础100题汇总，持续更新中。”可获取开发工具，持续更新中。

你好，我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集268篇原创内容-gz.h后台回复“”可获取开发工具，持续更新中后台回复“”可得到前端基础100题汇总，持续更新中。

你好，我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集265篇原创内容-gzh后台回复“”可获取开发工具，持续更新中后台回复“”可得到前端基础100题汇总，持续更新中上文说完border边框，这篇说一下圆角边框。属性用于设置元素的圆角边框效果。通过指定属性，可以使元素的边框呈现圆角而不是直角。比如，下图淘宝的登录，注册，开店按钮。

你好，我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集264篇原创内容-gzh后台回复“”可获取开发工具，持续更新中后台回复“”可得到前端基础100题汇总，持续更新中border（边框）是 CSS 中用来装饰元素周围区域的样式属性，主要作用是美化页面元素并提供视觉分隔效果。那我们一起来看一看它的基础属性，简写方法吧。

你好，我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集263篇原创内容-gzh后台回复“”可获取开发工具，持续更新中后台回复“”可得到前端基础100题汇总，持续更新中CSS 中的background背景属性是前端开发中常用的一个属性，它用于控制元素的背景样式，包括背景颜色、背景图片、背景位置等。本文将详细探讨 CSS 中的background。

ok，我们来举 2 个案例，一下就能看出来区别了。

来再次总结一下这 4 个选择器。id 选择器优点：具有唯一性，能够精确选择特定元素。应用场景：适用于需要特定样式的元素，如页面顶部导航栏、页脚等。class 选择器优点：适用于多个元素共享同一样式的情况，可以在不改变 HTML 结构的情况下重用样式。应用场景：常用于定义可重复使用的样式，如按钮样式、卡片样式等。比如，淘宝这块商品的样子，虽然商品不一样，但外观宽高字体什么的其实是一样的，这就用class。通配符* 选择器优点：选择所有元素，可以作为全局样式的基础，但一般不推荐使用。应用场景。

你好，我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。1枚程序媛，大专生，2年时间从1800到月入过万，工作5年买房。分享成长心得。259篇原创内容-公众号后台回复“”可获取开发工具，持续更新中后台回复“”可得到前端基础100题汇总，持续更新中今天我们来聊聊 CSS 语法，它是理解和编写 CSS 样式的基础，接着再聊聊 CSS 注释的写法。好，那就一起来学习吧。

总之，前端小白可以通过掌握基本的样式设计和布局技能，开始构建网页，比如，模仿一些知名的常用的电脑端网站，如淘宝、腾讯新闻、QQ 音乐、网易云音乐等。随着刻意练习熟练度增加，后续才可以逐渐提升到更复杂和丰富的网页设计和开发中。HTML 和 CSS 是 web 开发中最基础、最重要的 2 种技术。务必要认真把基础打牢~

自从微信小程序火了以后，貌似flex布局方式忽然之间火了起来，而最近正好把flexbox布局又温习了一遍，参考了阮一峰老师的文章，在此基础上做了一些默认标识和错误修改，加粗部分为css属性默认值，如图所示。

为什么要css重置？ 因为在各种浏览器（chrome,safari,firefox,ie等主流浏览器）中，每个浏览器都有一套css样式默认一些数值，但并不是所有的浏览器都使用一样的属性值，用于保证网页正常显示。譬如body，在chrome的盒子模型中可以看到，css默认情况下margin:8px。 如图所示： 然而当开始一个项目的时候，我们都是希望在一张白纸上写，所以有了css reset