前端笔记

border-radius: 数值px;圆角

flex布局

小程序中

display:flex;    //flex布局
flex-direction:row/column;  //规定主轴的方向：row/column
justify-content:space-around;
//元素在主轴方向的排列方式：flex-start/flex-end/space-around/space-between;
align-items:center;  
// 元素在副轴方向的排列方式：flex-start/flex-end/space-around/space-between;

微信小程序组件（标签）对照

1、text（span）
编写文本信息，类似于span标签
2、view
容器，类似于div标签
3、image
图片

小程序特殊的样式

1、像素：
px
rpx（推荐，自适应）整个页面宽度是750rpx

字体图标

css

ul标签

css

去掉列表符号（去圆点）

css中

这些在开发文档里有的。

清除标签内外边距

清除a标签下划线

{
margin：xx auto  //左右设置为auto，标签水平居中，版心居中。
}

对同一标签设置多个同一操作（参数不同）
只有最后一条实现了，why?

因为css具有层叠性。

渐变背景

单独的css文件，需要一个link标签引进。

2023/1/21 基于菜鸟教程整理css笔记

多重样式优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

一般情况下，优先级如下：

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

CSS 背景属性用于定义HTML元素的背景

CSS 属性定义背景效果:

background-color//背景颜色
background-image//背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
body {background-image:url('paper.gif');}
background-repeat//默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:
实例

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

如果你不想让图像平铺

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。

可以利用 background-position 属性改变图像在背景中的位置:

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

当使用简写属性时，属性值的顺序为：:

background-color
background-image
background-repeat
background-position

示例
body {background:#ffffff url(‘img_tree.png’) no-repeat right top;}