css에 대한 기본 지식

이번에는 프론트엔드 CSS 기본지식을 알려드리겠습니다. 프론트엔드 CSS 기본지식 중 주의할 점은 무엇인가요? 실제 사례를 살펴보겠습니다.

css에 대한 기본 지식 먼저 작은 예를 살펴보겠습니다.

Title 1

2

3

로그인 후 복사

배경색, 높이 및 기타 속성이 있는 p에 스타일을 추가하여 아무것도 없는 것을 볼 수 있습니다. 원본 p는 배경색 높이 등을 추가합니다.

Css writing

태그에 스타일 속성을 설정하세요: 너비, 높이, 배경....

헤드에 쓰고, 태그를 쓰고 스타일을 쓰세요:

#i1{ background-color:red; height:48px } 로그인 후 복사 .css 형식으로 별도의 파일을 만들고, .css 파일에 스타일을 작성한 다음, .css 파일을 html 파일의 head 태그에 삽입하세요.

로그인 후 복사 CSS의 댓글: /** /

선택기는 CSS를 사용합니다 1. 태그 선택기:

p{Background-color:red; }

2.class 선택기:

.bd{ background-color :red; }

3.id 선택기:

#idselect{Background-color:red }

4. 연관 선택기(공백)

#idselect p{Background-color:red } p>

5. 조합 선택기: (쉼표)

input,p,p{ background-color:red; }

6. 속성 선택기 :

input[type=' text']{ 너비:100px ; height:200px; }

css의 우선순위 Title .c1{ background-color: red; color: white; } .c2{ font-size: 58px; #color:black; } asdfas

로그인 후 복사 위에서는 두 개의 클래스 이름으로 p를 설정한 다음 먼저 색상을 흰색으로 설정합니다. 표시 효과는 다음과 같습니다.

다음으로 주석을 제거합니다. .c2의 CSS에서 color:black 표시되는 효과는 다음과 같습니다.

그런 다음 태그에 style="color:blue"를 추가하면 표시되는 효과는 다음과 같습니다.

이것은 CSS 스타일의 우선순위와 관련됩니다: (근접성 원칙)

style--->c2----c1 (여기서 c2와 c1의 우선순위는 CSS를 기반으로 합니다. 아래에 작성된 스타일은 무엇입니까? 위의 head 태그 스타일 태그의 두 위치가 바뀌면 c1의 우선순위가 c2보다 큽니다. 빨간색 실선/점선(1픽셀, 실선/점선, 빨간색):

왼쪽과 오른쪽만 추가: border-left-right:1px 빨간색 실선/점선

2. 높이, 너비, 줄 높이, 색상 ,font-size,font-weight:

height,width: height, width

height:48px;width:200px 또는 height:48px;width:80% (특정 값을 사용할 수 있습니다. 값도 포함될 수 있습니다.

text-align:center, 수평 중앙

line-height:

텍스트를 수직

중앙에 배치하려면 이 속성을 사용할 수 있습니다(행 높이 픽셀 = = 높이 픽셀). height:48px, line-height:48px이면 글꼴이 중앙에 배치됩니다.

font-size字体大小：font-size:12px;

font-weight字体的样式：100-900,bold(加粗),bolder（更粗），inherit,initial,lighter,normal,unset

color字体颜色；

3.float属性：浮动

如果我们写了2个p,那这2个p就会每个各占一行，如果我们想让一个p在左边占20%，一个p在右边80%，想要两个p在一行对接起来，那就需要用到float

首先看看我们不用float的效果：

p1

p2

로그인 후 복사

如果我们让这两个p都向左浮动：

p1

p2

로그인 후 복사 两个就重合在一起，并且一个站20%，一个占80%

如果我改成p1占20%往左浮动，p2占60%往右浮动：那么中间就会空出20%

p1

p2

로그인 후 복사

现在我们写一个盒子，里面有一些p：

로그인 후 복사 我们可以发现用了float我们就可以做到类似很多前端页面一块一块的样式，我们最外面的p的高度是随着里面小p不断的增多而增多的。

但是 有一个问题 ，我们可以看到上面有一个红色的线，他是外层p的边框， 为什么父p的边框没有了呢 ，只有一个了呢？这个就是使用float之后会产生的问题。

解决方法：

在父p中的最后加上这么一段：

这样，父p的边框就显现了出来

4.display

首先我们看一段：

p1

span1 로그인 후 복사

现在我们想要让 块级标签变成一个行内标签 ：display: inline

p1

span1 로그인 후 복사

我们想要让span这个 行内标签变成块级标签 ：display: block ;

********

行内标签：无法设置高度，宽度，padding,margin

块级标签：可以设置高度，宽度，padding,margin

span1 chaolianjei 로그인 후 복사 我们可以发现一点效果都没有

display:inline-block;

具有inline，默认自己有多少占多少；

具有block，可以设置高度，宽度，padding,margin

span1 chaolianjei 로그인 후 복사 加了display:inline-block;之后，span就可以设置宽高了：

display:none;让标签消失：

5.padding margin(0 auto)内边距，外边距：

margin:

margin:0 auto;上下为0，左右居中

6.position:

fixed---->固定在页面的某个位置，滚轮滚动，位置也不会变

absolute---->绝对定位，单用它，滚轮滚动时，位置会改变，要和relative一起使用

relative

fixed：

我们先看一串代码：

Title 返回顶部

로그인 후 복사

现在我们希望的是 “返回顶部” 这个p 固定在浏览器的右下角

返回顶部

로그인 후 복사 我在style中添加了

position:fixed;bottom:20px;right:20px; 로그인 후 복사 这样我们就把那个p固定在右下角了。

我们再看一个例子：有的网站，它的菜单栏是一直在浏览器的上面的，即使是滚动条滚动，头部的菜单栏也不会变，这个我们应该怎么做呢：

Title .pg-header{ height:48px; background-color: black; color: #dddddd; position:fixed; top:0; right:0; left: 0; } .pg-body{ background-color: #dddddd; height:5000px; margin-top:50px ; } 头部

内容

로그인 후 복사 其实只需要加上上面色的代码就可以了，下面的margin-top是为了让pg-body的能够往下来一点，显示出全部内容

relative+absolute:

我现在有3个p:

Title p1

p2

p3

로그인 후 복사

我想要在p1的左下角放一个黑色的小方框， p2的右下角放一个黑色的小方框，p3的左上角放一个黑色的小方框，应该怎么做 ：

Title p1

p2

p3

로그인 후 복사 只要relative 和 absolute 相配合，然后设置top,left,right,bottom的值就可以了，这个值可以是正数也可以是负数

还有一个场景：我们点一个按钮，然后就会跳出一个小窗口，这个时候窗口以外的东西就没有办法进行操作了，如：我点击了大模态框，之后跳出了large model，但是灰色的地方是没有办法进行操作的

这就是一个典型的三层模式：本身文本是一层，灰色的遮罩是一层，弹出的框是一层。那我们怎么实现这个呢？

Title

로그인 후 복사 效果如图所示：下面有一个green的p，然后有一个black的p，只是设置了透明度，最上面有一个居中的白色p

分析：首先我们先说两个新的属性：

opcity:0.6;设置透明度，值为0-1

z-index:9，设置优先级，值越高优先级越大

我们先实现两个p，一个是绿色的，一个是黑色的。这个很简单。下面要再加上第三层。最关键的就是这上面两个属性，如果透明属性没有的话，在做两层的时候，黑色的就会把绿色彻底覆盖住，如果没有优先级属性的话，那么在做第三个p的时候就会不知道谁覆盖了谁。

这里我们还要记录的是居中方法：

position: fixed;top:50%;left: 50%; margin-top: -50px;margin-left:-200px; 로그인 후 복사 设置50%，然后用margin返回宽高的一半，这样就能够让一个p居中显示

7.overflow

我们设置了一个p的宽度和高度，现在想要在这个p中放入一个图片，那图片有自己的高度和宽度。如果直接发放进去就会超出p的范围显示，那我们怎么办呢？

在style中加入overflow属性：

hidden：超出的部分隐藏

auto:超出的部分会给滚动条

8.hover

Title .pg-header{ position: fixed; top:0; right:0; left:0; height:48px; background-color: #2459a2; line-height:48px; } .pg-body{ margin-top:50px; } .w{ width:980px; margin:0 auto; } .pg-header .menu{ display: inline-block; padding:0 10px; color:white; } /*当鼠标移动到当前标签的时候，以下css属性才会生效*/ .pg-header .menu:hover{ background-color: blue; } logo 全部 42区 段子 1024

로그인 후 복사 hover当鼠标移动到超链接的时候，就会对hover的css里的属性生效

9.background

background-image :url('image/4.jpg')：背景是一个图片，如果这个p比图片的尺寸还要大的话，图片就会一直重复着放

应用场景：渐变色的背景，我们只需要一个很窄的图片，就可以利用这个属性，让整个背景都是这个渐变色的图片

background-repeat :no-repeat/repeat-x/repeat-y：改属性设置图片是否要重复，水平重复还是垂直重复

background-position :10px 10px 选取一张图上的某一个位置进行显示

应用场景：网站有的时候用一张图上存储了很多的图标，要用哪个图标就可以选哪个坐标

页面布局 一、主站布局：

内容自动居中

로그인 후 복사 二、后台管理布局

同样都是三个部分，头部，中间内容，和尾部：

我们先看看中间的变化： 一类是中间内容的菜单和内容都不动，右边内容多的时候出现滚动条 我们用position:fixed做的话应该怎么做呢：

Title body{ margin:0 auto; } .left{ float:left; } .right{ float:right; } .pg-header{ height:48px; background-color: #2459a2; color:white; } .pg-content .menu{ position: fixed; top:48px; left:0; bottom:0; width:200px; background-color: #dddddd; } .pg-content .content{ position: fixed; top:48px; bottom: 0; left:200px; right:0; background-color:purple; overflow: auto; }

a

afasdf

로그인 후 복사 View Code

我们通过用position:fixed实现了菜单栏和内容栏的固定，然后当内容过多的时候我们就可以用overflow：auto实现添加一个滚动条，从而实现了布局

还有一类是中间内容部分如果多了，我们让左边的菜单跟随滚动条：

Title body{ margin:0 auto; } .left{ float:left; } .right{ float:right; } .pg-header{ height:48px; background-color: #2459a2; color:white; } .pg-content .menu{ position: absolute; top:48px; left:0; bottom:0; width:200px; background-color: #dddddd; } .pg-content .content{ position: absolute; top:48px; bottom: 0; left:200px; right:0; min-width: 980px; /*background-color:purple;*/ /*overflow: auto;*/ }

a

afasdf

로그인 후 복사 View Code

那和第一类的区别就在于，我们用的是position:absolute进行定位：

postion:absolute这个属性，可以在页面一开始生成的时候进行初始定位，但是随着你滚动滚动条的时候，定位就会改变，随着滚动条一起滚动，所以我们就可以利用这特点进行操作。

如果想要背景也跟着一起的话，可以在用一个p把内容包住，然后在这个p里面设置一个background-color，这样背景颜色就可以跟着内容一起增加。

如果我们要用absolute来实现第一类情况的话，我 们也只要在第二类的基础上加上overflow:auto ，就可以变回第一种情况了，非常的方便。

当然我们考虑一种情况，如果我们的浏览器不断的缩小，那个我们也要保证我们的内容要正常显示，这个时候就需要 左右滚动条 ，我们就可以 设置一下内容p的最小宽度min-width:980px ，当小于这个宽度的时候就出现滚动条，就ok了

我们再看看头部的变化：

Title body{ margin:0 auto; } .left{ float:left; } .right{ float:right; } .pg-header{ height:48px; background-color: #2459a2; color:white; line-height: 48px; } .pg-header .logo{ width:200px; background-color: cadetblue; text-align: center; } .pg-header .user{ height:48px; position: relative; margin-right:60px; padding:0 20px; } .pg-header .user:hover{ background-color: #204982; } .pg-header .user .a img{ height:40px; width:40px; margin-top: 4px; border-radius:50%; } .pg-header .user .menu2{ position:absolute; top:48px; right:-10px; background-color: white; width:100px; z-index:10; display: none; color:black; text-align:center; } .pg-header .user .menu2 a{ display: block; border-bottom: 1px solid black; text-decoration:none;/*去掉超链接的下划线*/ } .pg-header .user:hover .menu2{ display:block; } /* 未访问的链接 */ .pg-header .user .menu2 a:link{ color:black; } .pg-header .user .menu2 a:hover{ background-color: #dddddd; } .pg-header .icons{ padding:0 20px; } .pg-header .icons:hover{ background-color: #204982; } .pg-content .menu{ position: absolute; top:48px; left:0; bottom:0; width:200px; background-color: #dddddd; } .pg-content .content{ position: absolute; top:48px; bottom: 0; left:200px; right:0; min-width: 980px; /*background-color:purple;*/ overflow: auto; z-index:9; } logo图标

我的资料 注销

5

3

a

afasdf

로그인 후 복사 View Code

显示的效果图就是如下效果：

需要知道的知识：

关于超链接的：

a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ text-decoration:none;/*去掉超链接的下划线*/ 로그인 후 복사 关于边框的：

border-radius:50%;/*把边框变成椭圆*/ 로그인 후 복사 关于菜单栏的出现消失，不用js的做法：

.pg-header .user .menu2{ display: none; } 로그인 후 복사 { display:block; }/*这样做就能够实现，当鼠标放在头像上菜单栏自动出现，当鼠标移开的时候菜单栏自动隐藏*/ 로그인 후 복사 关于菜单栏的图标的：

到https://fontawesome.com/icons下载图标包，然后导入css文件，并在网站上寻找相关的图片的html，就可以显示了：

/*导入css文件*/ /*应用图标的html*/ 로그인 후 복사 相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

프론트 엔드 CSS에 대한 기본 지식

css에 대한 기본 지식