이번에는 일반적으로 사용되는 CSS 스타일에 대한 요약을 가져왔습니다. 일반적으로 사용되는 CSS 스타일을 사용할 때 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.
센터링은 레이아웃에서 매우 중요한 기술입니다.
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; 去除默认样式Background1 .배경 이미지 : 다음과 같은 이미지 경로가 와야 합니다. 예: 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 재사용 여부를 설정해야 합니다. 그렇지 않으면 오류가 발생합니다.
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
: 작은 글꼴에서 가독성이 높도록 글꼴을 설정합니다. 예를 들어 글꼴을 100px로 설정한 다음 값을 0.58로 설정하면 작은 크기에서는 58px가 표시됩니다. 더 읽기 쉽습니다. 세부 정보
2.-webkit-text-size-adjust 휴대폰의 기본값은 자동으로 글꼴 크기를 자동으로 조정합니다. 일반적으로 이 기능을 끄고 값을 없음 또는 100%로 설정해야 합니다. 그렇지 않으면 그렇지 않을 수 있습니다. 스타일 문제를 일으킵니다.
user-modify
visibility
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等移动设备的
추천 도서:
React에서 선택한 Li를 강조 표시하는 단계에 대한 자세한 설명
Pixeler 프로젝트 개발에서 EasyCanvas 드로잉 라이브러리 사용에 대한 실제 요약
위 내용은 일반적인 CSS 스타일 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!