Css
关注
分享
扫一扫
12程序猿
这个作者很懒，什么都没留下…
展开
-
使用flex布局时，宽度超限，一行显示 ，图片缩小变形了，怎么解决？
1.问题：在做微信小程序项目时，使用flex布局时，宽度超限时，一行显示 ，发现图片缩小变形了，在同事的帮助下解决了问题，现把解决方法记录下，以便之后查看。2.解决方法：flex布局下的元素使用flex-shrink属性（1）.flex-shrink具体是做什么的，请看如下介绍：比如你设置了一个父元素400px，然后来了三个子元素，宽度分别200px。 那么加起来600px。我擦，这不脑残么？ 超了怎么办？还有得救。flex-shrink 按比例压缩。<style>h1{font原创 2020-10-16 10:53:16 · 4252 阅读 · 0 评论 -
css实现一行文字居中，多行文字左对齐
问题及场景：当内容能一行显示在盒子内时，文字居中对齐。当内容过多换行后显示在盒子内时，文字左对齐。其实这种视觉上的需求还是蛮常见的。比如用于弹出提示框，当提示内容比较少时，内容居中显示在弹出框，提示内容比较多时，内容居左对齐。但是其纯CSS实现有点麻烦，一般就放掉这个需求，或者，使用JS实现。解决方案：CSS实现代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g转载 2020-09-01 13:54:48 · 1822 阅读 · 0 评论 -
CSS学习知识整理（六）Css position(定位)、margin 简写
margin 简写属性：原创 2020-07-07 14:20:37 · 895 阅读 · 0 评论 -
CSS学习知识整理（五）Css display(显示)
目录display的作用隐藏元素 - display:none或visibility:hiddenCSS Display - 块和内联元素display的作用display的作用：规定了元素以何种方式展示。浏览器支持所有主流浏览器都支持 display 属性。**注释：**如果规定了 !DOCTYPE，则 Internet Explorer 8 （以及更高版本）支持属性值 “inline-table”、“run-in”、“table”、“table-caption”、“table-cell”、“t原创 2020-07-07 14:13:04 · 287 阅读 · 1 评论 -
Css 自定义滚动条样式
css实现自定义滚动条样式：1.效果图：2.代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css 自定义滚动条样式</title> <script src原创 2020-07-07 13:51:23 · 248 阅读 · 0 评论 -
select自定义箭头
select自定义箭头：1.去除select默认下拉箭头：可以适应appearance与-ms-expand去除 select默认的下拉箭头样式2.添加右侧小箭头的背景图行内水平垂直居中<div class="main">确定</div>.main{ display:flex; text-align:center;/*文本水平居中*/ align-items:center;/*垂直方向*/ justify-content:center;/*水平方向*/}原创 2020-07-07 13:32:23 · 911 阅读 · 0 评论 -
CSS学习知识整理（四）Css 盒子模型
Css 盒子模型CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。不同部分的说明：Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Content(内容) - 盒子的内容，显示文本和图像。...原创 2020-07-07 13:29:47 · 296 阅读 · 0 评论 -
CSS学习知识整理（三）Css 文本
目录Css文本颜色 --- color文本的对齐方式 --- text-align文本修饰 --- text-decoration文本转换 --- text-transform文本缩进 --- text-indent文本阴影 --- text-shadow垂直对齐方式 --- vertical-alignCss文本颜色 — color文本的对齐方式 — text-align文本排列属性是用来设置文本的水平对齐方式。文本可居中或对齐到左或右,两端对齐.text-align:center;//居原创 2020-07-07 11:29:32 · 351 阅读 · 0 评论 -
CSS学习知识整理（二）Css 背景
CSS 背景属性用于定义HTML元素的背景。目录背景图像 background-imageCSS 属性定义背景效果:background-color （设置元素的背景颜色。）background-image （描述了元素的背景图像）background-repeat （设置背景图像是否及如何重复。）background-attachment（背景图像是否固定或者随着页面的其余部分滚动。）background-position （设置背景图像的起始位置。）背景图像 backg原创 2020-07-07 11:08:05 · 189 阅读 · 0 评论 -
CSS学习知识整理（一）Css 简介、语法与创建
Css样式学习目录一、简介二、语法三、创建 --- 三种引入方式一、简介二、语法三、创建 — 三种引入方式原创 2020-07-07 10:53:50 · 193 阅读 · 0 评论 -
CSS学习知识整理（一）Css 布局
目录一、Css 布局 - overflow二、Css 布局 - 水平 & 垂直对齐总结1.水平居中方法：2.垂直居中方法：一、Css 布局 - overflowoverflow属性有以下值：值描述visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inher原创 2020-07-07 10:43:10 · 221 阅读 · 0 评论