CSS 관련 팁

IE10, IE11 브라우저에서 입력 텍스트 상자를 클릭하면 텍스트 입력 후 삭제 기능이 있는 X 버튼이 나타납니다.

입력 텍스트 상자 뒤의 X 버튼을 제거하는 방법: 입력 텍스트에 다음 CSS를 추가하세요.

input::-ms-clear{ display:none } //팁: 입력 후 두 개의 콜론이 있으면 의사 요소에는 두 개의 콜론이 필요합니다.

읽기 전용: 편집할 수 없고, 포커스를 얻을 수 없으며, 배경색은 기본적으로 투명하고, 글꼴 색상은 기본적으로 전경색이 검은색이며, 값은 요청에 전달될 수 있습니다.

chorme 및 ie 지원됨, Firefox는 읽기 전용 속성을 지원하지 않습니다(속성에 정의됨: onfocus="this.blur()")

disabled: 편집할 수 없고 포커스를 얻을 수 없습니다. 배경색은 기본적으로 회색이고 글꼴 색상은 기본값이며 요청에 값을 전달할 수 없습니다.

태그 속성(읽기 전용)의 경우에는 영향을 미치지 않습니다. 그 효과는 있지만 js의 DOM은 대소문자를 엄격하게 구분합니다(readOnly ).

Firefox의 CSS 사용 플러그인은 반복되거나 사용되지 않는 CSS 규칙을 표시할 수 있습니다. 각 페이지를 한 번 스캔하는 것이 자동 스캔보다 더 정확합니다.

Firefox는 background-position-x/y 속성을 지원하지 않으므로 대신 background-position:X Y를 사용하세요.

위치가 고정된 요소는 적응형 최소 너비를 가지며 전체 줄을 차지하지 않습니다.

테이블의 셀이 자동으로 축소되며 오버플로 속성을 사용할 수 없습니다. 너비 속성이 고정 너비로 ​​설정되어 있어도 최소 텍스트 너비로 축소됩니다. 고정 너비를 정말로 설정하고 싶다면 td에 p를 중첩하고 p의 너비를 설정할 수 있습니다. 또는 테이블의 table-layout:fixed 속성을 사용하십시오.

표의 첫 번째 행은 전체 표의 셀 너비를 결정합니다. 내용에 따라 테이블 너비를 조정하려면 white-space:nowrap 속성을 추가하면 됩니다. 특히 IE, 다른 브라우저에서는 너비가 자동으로 조정됩니다.

브라우저 크기를 변경하시겠습니까?

글꼴 약어에 관한 주의사항

1. 약어를 쓸 때, 글꼴 크기와 줄 높이는 슬래시/를 통해 하나의 값만 형성할 수 있으며 따로 쓸 수 없습니다.

글꼴: italic Bold .8em/1.2 Arial, sans-serif; // 계열간 사용, 숫자

2. 이 약어 방식은 변경할 수 없습니다. 동시에 사용됨 글꼴 크기 및 글꼴 모음 속성이 지정된 경우에만 작동합니다. 또한, 글꼴 두께, 글꼴 스타일 및 글꼴 변형을 설정하지 않으면 기본값을 사용합니다.

페이지가 중앙에 있을 때 스크롤 막대가 점프하지 않도록 하는 방법:

only margin-left가 자동인 경우 스크롤 막대의 값이 변경되고 페이지가 나타날 때 페이지가 점프합니다.

1.body { Overflow-y: scroll; } //오버플로를 초과하면 스크롤바가 나타나고, 초과하지 않으면 보기 흉한 회색 스크롤바가 남습니다.

2. Wrap-outer { margin-left: calc(100vw - 100%);} //왼쪽 스크롤바의 너비를 미리 예약해두세요

//calc()는 css3에서 할 수 있는 함수입니다. 4가지 산술연산(전후 공백이 있어야 함 ), 퍼센트, px, em, rem 등의 단위가 혼합될 수 있습니다

// 100vw는 뷰포트의 너비를 의미하며, 스크롤 막대의 너비를 포함하고 100%는 스크롤 막대 너비가 없는 뷰포트입니다.

margin-left가 고정값이면 점프하지 않습니다. 스크롤 막대가 맨 위 레이어에 나타나서 아래 콘텐츠를 억제합니다.

다른 해상도는 다른 너비를 표시합니다

.abc{ height:300px; border:1px solid #000; margin:0 auto} //通用样式
@media screen and (min-width: 1201px) { //设置了浏览器宽度不小于1201px时 abc 显示1200px宽度
      .abc {width: 1200px}
}
@media screen and (max-width: 1200px) {//设置了浏览器宽度不大于1200px时 abc 显示900px宽度
      .abc {width: 900px}
}

참고: CSS 코드 순서, CSS를 큰 것에서 작은 것으로 조판(브라우저의 너비가 클수록 높아짐)

블록 요소는 기본적으로 한 줄을 차지합니다. 너비가 충분하지 않으면 자동으로 줄 바꿈됩니다. 공백:nowrap 속성을 사용하면 줄 바꿈을 강제로 수행할 수 없습니다.

하위 요소는 너비를 100%로 설정합니다. 테두리가 있는 경우 하위 요소의 너비는 상위 요소의 고정 너비를 초과합니다.

box-sizing: content-box|border-box|inherit;//상자 모델이 너비와 높이를 계산하는 방식을 지정합니다.

content-box: 너비와 높이는 요소의 콘텐츠 상자에만 적용되며 요소의 패딩과 테두리는 너비와 높이 외부에 그려집니다.

border-box: 요소에 지정된 패딩과 테두리가 설정된 너비와 높이 내에서 그려집니다.

.cf:after, .cf:before {content: " "; 디스플레이: 테이블;}

.cf:after {clear: 둘 다;}

:before 이는 테이블 유형이 상단 여백이 무너지는 것을 방지하기 위해 독립적인 bfc를 생성할 수 있기 때문입니다.

: after는 부동 소수점을 지우고 함께 사용되는 상위 높이가 무너지는 것을 방지하는 역할을 담당하므로 코드가 적고 효율성이 떨어집니다. 높다.
이미지의 수직 및 수평 중앙 정렬과 다양한 크기의 여러 줄 텍스트?

1. 상위 컨테이너를 display:table로 설정하고 고정 높이를 지정하고, 하위 컨테이너를 display:table-cell로 설정하고, 테이블에서 수직 정렬:중간 속성을 사용합니다. 인라인 요소는 다음에서 적용됩니다.)

또는 상위 컨테이너는 상대 위치 지정 position:relative를 사용해야 합니다. 하위 컨테이너는 절대 위치 지정 top:50%;left:50%;margin-top을 사용해야 합니다. margin-left 값은 컨테이너 높이, 너비의 음수 절반입니다.

또는 상위 요소의 상대 위치 지정, 하위 컨테이너의 절대 위치 지정 , 위쪽:0, 아래쪽:0, 여백:자동, 계산이 필요하지 않습니다.

동시에 가로로 가운데에 맞추려면 position:relative 속성을 사용하거나 p 레이어를 추가하고 margin:auto 속성을 사용하세요.

다중 열 콘텐츠가 고정되지 않고 높이가 동일합니다. CSS 해킹:

상위 컨테이너 설정 Overflow:hidden; 하위 요소: padding-bottom:9999px;

每个p都增加相同的高度，内容少的增加的p会被父容器hidden掉。

label标签的for 属性规定 label 与哪个表单元素绑定。

隐式和显式的联系

例如，在 XHTML 中：

显式的联系：

<labelfor="SSN">SocialSecurity Number:</label>
<inputtype="text" name="SocSecNum" id="SSN" />

隐式的联系：

<label>Date of Birth: <inputtype="text" name="DofB" /></label>

第一个标记是以显式形式将文本 "Social Security Number:" 和表单的社会安全号码的文本输入控件 ("SocSecNum") 联系起来，它的 for 属性的值和控件的 id 一样，都是 SSN。第二个标记 ("Date of Birth:") 不需要 for 属性，它的相关控件也不需要 id 属性，它们是通过在 标签中放入 标签来隐式地连接起来的。

 ie8之前不支持opacity属性，需要使用滤镜：filter:alpha(opacity=30);  /* IE 4-9 */ 

IE专有的滤镜属性filter是只适用于 layout 元素的，也就是说如果你给一个p设置透明用的是filter:alpha(opacity=80);如果你没有让p触发hasLayout，那么这个透明将无效。需要另外设置zoom：1；这个属性进行触发。

 IE8开始添加的属性，指定浏览器去模拟某个特定版本的IE浏览器的渲染方式，解决IE的兼容性问题。

   background-origin: 规定 background-position 属性相对于什么位置来定位。

padding-box      背景图像相对于内边距框来定位；（默认）

border-box背景图像相对于边框盒来定位；

content-box背景图像相对于内容框来定位。

background-position ：设置背景图像的起始位置。

默认值：0% 0%（从背景图的左上点开始）；如果只设置一个值，另一个值将为“居中”（50%/center）

background-size:取值（IE8不支持此属性）

百分比/length：背景图的尺寸相对于背景区域的长度。只设一个，第二个为auto（会保持比例不变，不变形）。

如果都设为100%，则背景图会铺满背景区域，但长宽比率会跟着变化。

contain:背景区域按背景图的固定比例包含整个背景图。背景图的尺寸以背景图按固定比例扩大，其任意一条边到达背景区域的边界为止，经常会导致另一边空白。

cover:背景图按固定长宽比缩放至填充满整个背景区域，有一边的背景图会因超出背景区域而被切除。

IE8兼容：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='绝对路径',sizingMethod='scale/crop');

      crop : 背景图大小不变，剪切图片以适应区域尺寸。

      image : 默认值。增大或减小区域的尺寸边界以适应背景图的尺寸，相当于overflow：visible的效果。

      scale : 缩放背景图以适应区域的尺寸边界。

①不能指定任意大小background百分比②只适于单张图片不能使用图片精灵等拼图③要引用绝对路径图片④兼容ie7，8

 JPG：有损压缩，压缩比例高，体积小，打开快。不支持透明，色彩丰富，数码相机最常用的格式，压缩比率高。

PNG：无损压缩，体积大。

      png8：支持透明/不透明，体积小，256种颜色，适合颜色比较单一的图像，如纯色、logo、图标等。

      png24：支持半透明，体积稍大，1600万种颜色，适合颜色比较丰富的图片。

更多css相关tips相关文章请关注PHP中文网！