Summary of common css styles

This time I will bring you a summary of commonly used CSS styles. What are the precautions for using commonly used CSS styles? The following is a practical case, let’s take a look.

Centering

Centering is a very important technique in layout. Mastering the technique of centering is very important for layout.

input

1. Remove the outer border : outline : none
2. Remove padding : padding : 0
3. Remove type="number" type of up and down spin buttons:

input::-webkit-outer-spin-button {-webkit-appearance: none; }
input::-webkit-inner-spin-button {-webkit-appearance: none; }
input[type="number"]{-moz-appearance:textfield;}
注意：使用 number 时，安卓下可以调出数字键盘，并且只能输入数字，苹果手机不可以。

4. type="search": Call up the mobile phone soft keyboard search, you need to use the from tag on Apple phones,

input::-webkit-search-cancel-button {display:none} 去除小差号
-webkit-appearance: textfield; 去除默认样式

background

1.background-image: must be followed With the image path, for example, background-image:url(xxx.jpg),url(xxx.png),...
2.background-position: The image with the corresponding path needs to be used when using it. Be consistent, for example, background-position:0 0,100px 100px,...
3.background-repeat: The usage rules are the same as background-position
4.background-color : Set the background color
Note: When using background, if you are not using multiple backgrounds, you can use composite writing. If not, write them separately to avoid incorrect background display. It needs to be emphasized that if background-image is used, it can only be followed by url.
You need to set the position using background-position and whether to reuse background-repeat, otherwise an error will occur.

box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;
1.h-shadow : Required. The position of the horizontal shadow. Negative values ​​are allowed. [Position relative to nearest boundary]
2.v-shadow : Required. The position of the vertical shadow. Negative values ​​are allowed. [Position relative to nearest boundary]
3.blur: Optional. Fuzzy length [actual length is half of the given length]
4.spread: Optional. The size of the shadow. [can be negative]
5.color : Optional. The color of the shadow. See CSS color values.
6.inset: Optional. Change the outer shadow (outset) to an inner shadow.

Instructions:
1. When h-shadow and v-shadow are both 0, it means no offset, which means spread around
2.blur: means blur length, the actual blur distance is the set value Half
3. Set the specified side, which mainly controls the position of the horizontal and vertical shadows. You can specify the shadow positions in any direction, such as specifying the four sides respectively:
.box{ box-shadow: 0 -2px 0 0 red, 2px 0 0 0 red, 0 2px 0 0 red, -2px 0 0 0 red;}
4. You can use this attribute to replace the border attribute of the border. The advantage is that the shadow does not take up space and the animation will not move.
For example:
box{background:green;width:200px;height:200px;}
// Position processing is done, otherwise it will affect the layout
.box1:hover{border:2px solid # ffffff;box-sizing:border-box;position:relative;top:-2px;left:-2px; }
.box2:hover{box-shadow:0 0 0 2px #ffffff;}

font

1.font-size-adjust: Set the font to be more readable in small fonts.
For example, set the font to 100px, then set the value to 0.58, which is small The size is 58px, which makes it easier to read. Details

2.-Webkit-text-size-adjust The default mobile phone setting is auto, which automatically adjusts the font size. Generally, you need to turn off this function and set the value to none or 100%, otherwise it may cause style problems.

user-modify

user-modify has three attribute values: write-only (write-only), read-write (read-write), read-only (read-only), which is used for ordinary The editability of an element functions similarly to the concentrateditable attribute. You need to add a browser prefix when using it. The test found that Firefox does not support

visibility

. The difference from opacity is that when used, the attribute is set to hidden, which takes up space but does not affect the triggering of the event. For example, if an element using the hidden attribute completely covers another element, the events of the covered element will still trigger normally. And its own events will not be triggered. Display elements by setting the visible attribute

flex

To understand flex layout, first understand two points

First: the parent box attribute. Understand 2 axes in parent box.

Horizontal direction

flex-direction : 属性决定主轴的方向（即项目的排列方向）
    row : 横向，按元素顺序，居左[主轴为水平方向，起点在左端]
    row-reverse ：横向，倒序，居右[主轴为水平方向，起点在右端]
    column ：纵向，按元素顺序，[主轴为垂直方向，起点在上沿]
    column-reverse : 纵向，倒序[主轴为垂直方向，起点在下沿]
flex-wrap : 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行
    nowrap : （默认）不换行，盒子会自适应
    wrap : 换行，第一行在上方
    wrap-reverse : 换行，第一行在下方
flex-flow ：<flex-direction> || <flex-wrap> 合并写法
justify-content : 属性定义了项目在主轴上的对齐方式，控制水平方向
flex-start : 左对齐
flex-end : 右对齐
center : 水平居中
space-between : 子元素间隔相等并自适应
space-around : 子元素两端间隔自适应

Vertical direction

align-items : 属性定义项目在交叉轴上如何对齐，控制垂直方向
    flex-start : 上对齐
    flex-end : 下对齐
    center : 垂直居中
    baseline : 文字低端对齐
    stretch : 如果项目未设置高度或设为auto，将占满整个容器的高度( 默认值 )
align-content ：属性定义了多根轴线的对齐方式。
 如果项目只有一根轴线，该属性不起作用。( 多个轴 )，控制垂直方向
    flex-start : 多轴上对齐
    flex-end : 多轴上下对齐
    center : 多轴居中
    space-between ： 两端对齐，均分剩余空间

Second: Subbox attributes

order : 指定元素权重，默认为 0，权重越大，对应的元素越靠后。在使用时注意 flex-direction 的属性值
flex-grow ：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
        分配空间的权重，按权重比均分剩余空间(注意是宽度，不包含 padding 和 margin )
flex-shrink : 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
        值为 0 ：不缩小
flex-basis ：定义了在分配多余空间之前，项目占据的主轴空间（main size）。
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
flex : 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self : 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。[注意换行]
    auto ：默认值
    flex-start ：上对齐
    flex-end ：下对齐
    center : 垂直居中
    baseline : 文本基线对齐(设置所有的item)

Others

 1. 去除苹果点击事件的灰色阴影:-webkit-tap-highlight-color: rgba(0,0,0,0);有些元素需要设置背景色。
 2. 溢出出现省略号 : white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
 3. 指定宽度数字不换行，需要指定换行属性：overflow:hidden; word-wrap:break-word;
 4. 文字平滑：-webkit-font-smoothing：none: 无抗锯齿；subpixel-antialiased (default): 次像素平滑 常见于Mac OS和MacType For Windows；antialiased: 灰度平滑 常用于Android和iOS等移动设备的

I believe I read the case in this article You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps to select li highlighting in react

Practical summary of the use of EasyCanvas drawing library in Pixeler project development

The above is the detailed content of Summary of common css styles. For more information, please follow other related articles on the PHP Chinese website!