일반적인 CSS 스타일 요약-JS 튜토리얼-php.cn

이번에는 일반적으로 사용되는 CSS 스타일에 대한 요약을 가져왔습니다. 일반적으로 사용되는 CSS 스타일을 사용할 때 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

센터링

센터링은 레이아웃에서 매우 중요한 기술입니다.

input

1. 내부 여백 제거: 패딩: 0
. 3.
유형 위쪽 및 아래쪽 스핀 버튼 제거: type="number"

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": 휴대폰 소프트 키보드 검색을 불러오려면 Apple 휴대폰의 from 태그를 사용해야 합니다.

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

로그인 후 복사

Background

1 .

배경 이미지 : 다음과 같은 이미지 경로가 와야 합니다. 예: background-image:url(xxx.jpg), url(xxx.png),...2.
배경 위치: 필요합니다. 사용 시 해당 경로의 이미지와 일치하도록 합니다. 예: background-position: 0 0,100px 100px,...3.
Background-repeat: 사용 규칙은 background-position4과 동일합니다. .
배경색: 배경색을 설정합니다참고: 배경을 사용할 때 여러 배경을 사용하지 않는 경우 합성 쓰기를 사용할 수 있습니다. 그렇지 않은 경우 잘못된 배경 표시를 방지하기 위해 별도로 작성하십시오. background-image를 사용하는 경우 뒤에는 url만 올 수 있다는 점을 강조할 필요가 있습니다.
Background-Position을 이용해 위치를 설정하고, Background-Repeat 재사용 여부를 설정해야 합니다. 그렇지 않으면 오류가 발생합니다.

box-shadow

box-shadow: h-shadow v-shadow 블러 확산 색상 삽입;

1.h-shadow : 필수. 수평 그림자의 위치입니다. 음수 값이 허용됩니다. [가장 가까운 경계를 기준으로 한 위치]
2.v-shadow : 필수입니다. 수직 그림자의 위치입니다. 음수 값이 허용됩니다. [가장 가까운 경계를 기준으로 한 위치]
3.blur: 선택 사항. 퍼지 길이 [실제 길이는 주어진 길이의 절반입니다]
4.spread: 선택 사항입니다. 그림자의 크기. [음수 가능]
5.color : 선택사항입니다. 그림자의 색상입니다. CSS 색상 값을 참조하세요.
6.inset : 선택사항. 외부 그림자(시작)를 내부 그림자로 변경합니다.

설명:

1. h-shadow와 v-shadow가 모두 0이면 오프셋이 없음을 의미하며, 이는 모든 방향으로의 확산을 의미합니다.
2.blur: 실제 블러 길이는 세트의 절반입니다.
3. 지정된 가장자리를 설정합니다. 주로 가로 및 세로 그림자의 위치를 제어합니다. 예를 들어 4개의 측면을 각각 지정합니다.
.box{ box-shadow: 0 -2px 0 0 red, 2px 0 0 0 red, 0 2px 0 0 red, -2px 0 0 0 red;}
4. 이 속성을 사용하면 테두리의 테두리 속성을 대체할 수 있다는 장점이 있습니다. 예:
box{배경: 녹색; 너비: 200px; 높이: 200px;}
// 위치 처리가 완료되었습니다. 그렇지 않으면 레이아웃에 영향을 미칩니다.
.box1:hover: 2px 솔리드 #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

: 작은 글꼴에서 가독성이 높도록 글꼴을 설정합니다. 예를 들어 글꼴을 100px로 설정한 다음 값을 0.58로 설정하면 작은 크기에서는 58px가 표시됩니다. 더 읽기 쉽습니다. 세부 정보
2.-webkit-text-size-adjust 휴대폰의 기본값은 자동으로 글꼴 크기를 자동으로 조정합니다. 일반적으로 이 기능을 끄고 값을 없음 또는 100%로 설정해야 합니다. 그렇지 않으면 그렇지 않을 수 있습니다. 스타일 문제를 일으킵니다.

user-modify

user-modify에는 쓰기 전용(쓰기 전용), 읽기-쓰기(읽기-쓰기), 읽기 전용(읽기 전용)의 세 가지 속성 값이 있으며 편집 가능성 및 집중 편집 가능 속성에 사용됩니다. 일반 요소 기능은 비슷합니다. 사용할 때 브라우저 접두어를 추가해야 합니다. 테스트 결과, Firefox는

visibility

를 지원하지 않는 것으로 나타났습니다. 불투명도와의 차이점은 사용 시 속성이 숨김으로 설정되어 공간을 차지하지만 이벤트 트리거에는 영향을 미치지 않는다는 것입니다. 예를 들어, 숨겨진 속성을 사용하는 요소가 다른 요소를 완전히 덮는 경우 해당 요소의 이벤트는 여전히 정상적으로 트리거됩니다. 그리고 자체 이벤트가 트리거되지 않습니다. visible 속성을 설정하여 요소를 표시합니다

flex

flex 레이아웃을 이해하려면 먼저 두 가지 사항을 이해해야 합니다

첫 번째: 상위 상자 속성. 상위 상자의 2개 축을 이해합니다.

가로 방향

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 : 子元素两端间隔自适应

로그인 후 복사

세로 방향

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

로그인 후 복사

두 번째: 하위 상자 속성

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等移动设备的

로그인 후 복사