文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS很难学吗?这几个属性掌握了,秒变CSS大神!

2024-11-30 16:02

关注

虽然 CSS 看起来很简单,但实际上它有很多属性和特性,需要花费一定的时间和精力去学习和掌握。

本文将介绍一些常用的 CSS 属性,包括 `border`、`display`、`padding`、`margin`、`rem`、`em` 和 `box-sizing`。这些属性涵盖了 CSS 中的基本概念和常见用法,掌握它们可以让你在 CSS 中游刃有余,成为一名 CSS 大神。

Box-sizing

CSS `box-sizing` 属性用于设置 HTML 元素的盒模型。
盒模型是指元素的宽度和高度是由内容、内边距、边框和外边距组成的。
CSS 中有两种盒模型:内容盒模型和边框盒模型。

- 内容盒模型(`box-sizing: content-box`):元素的宽度和高度只包括内容,
不包括内边距、边框和外边距。这是默认的盒模型。

- 边框盒模型(`box-sizing: border-box`):元素的宽度和高度包括内容、
内边距和边框,不包括外边距。

使用 `border-box` 盒模型可以更方便地设置元素的宽度和高度,
因为不需要考虑内边距和边框的影响。
例如,如果要创建一个宽度为 200px、内边距为 10px、边框为 1px 的盒子,
使用 `content-box` 盒模型需要将宽度设置为 212px(200px + 2 × 10px + 2 × 1px),
而使用 `border-box` 盒模型只需要将宽度设置为 200px。

以下代码展示了 `box-sizing` 属性的用法:

div {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid #ccc;
margin: 10px;
box-sizing: content-box;
}

div.box {
box-sizing: border-box;
}

Fonts (rem, em)

`rem`  `em` 都是 CSS 中用于设置字体大小的单位,但它们的计算方式不同。

`rem` 单位是相对于根元素(即 `` 元素)的字体大小来计算的。
例如,如果根元素的字体大小为 16px,那么 `1rem` 就等于 16px,`2rem` 就等于 32px,
以此类推。
使用 `rem` 单位可以方便地实现响应式设计,
因为根元素的字体大小可以根据屏幕尺寸或设备类型进行调整。

`em` 单位是相对于父元素的字体大小来计算的。例如,如果父元素的字体大小为 16px,
那么 `1em` 就等于 16px,`2em` 就等于 32px,以此类推。使用 `em` 单位
可以方便地实现相对大小的字体和布局,因为它们可以根据父元素的字体大小进行缩放。

以下代码展示了 `rem` `em` 单位的用法:

html {
font-size: 16px;
}

h1 {
font-size: 2rem;
}

p {
font-size: 1.2rem;
line-height: 1.5em;
}

.container {
font-size: 1.5em;
}

.box {
font-size: 0.8em;
padding: 1em;
}

Padding & Margin

CSS `padding`  `margin` 属性用于设置 HTML 元素的内边距和外边距:

- `padding-top``padding-right``padding-bottom``padding-left`:
分别设置上、右、下、左四个方向的内边距。

- `padding`: 设置上、右、下、左四个方向的内边距,可以使用一个、两个或四个值来设置。

- `margin-top``margin-right``margin-bottom``margin-left`:
分别设置上、右、下、左四个方向的外边距。

- `margin`: 设置上、右、下、左四个方向的外边距,可以使用一个、两个或四个值来设置。
- `padding: auto`: 自动计算内边距,使元素居中。
- `margin: auto`: 自动计算外边距,使元素居中。

- `box-sizing: border-box`:
设置盒模型为边框盒模型,即元素的宽度和高度包括内边距和边框,不包括外边距。

- `box-sizing: content-box`:
设置盒模型为内容盒模型,即元素的宽度和高度只包括内容,不包括内边距、边框和外边距。

以下展示了 `padding` `margin` 属性的多种用法:

div {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}

span {
padding: 10px 20px;
}

p {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}

a {
margin: 10px 20px;
}

.center {
padding: auto;
margin: auto;
width: 200px;
height: 100px;
background-color: #ccc;
}

.box {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid #ccc;
margin: 10px;
}

.content {
box-sizing: content-box;
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid #ccc;
margin: 10px;
}

Display

CSS  display 属性用于设置元素的显示方式:

- `block`:将元素显示为块级元素,即在页面中显示为一块矩形区域,可以设置宽度、高度、内边距和外边距等属性。

- `inline`:将元素显示为行内元素,即在页面中显示为一行,不可以设置宽度、高度、内边距和外边距等属性。

- `inline-block`:将元素显示为行内块级元素,即在页面中显示为一行,但可以设置宽度、高度、内边距和外边距等属性。

- `none`:将元素隐藏,不占用页面空间。

- `flex`:将元素显示为弹性盒子,可以使用弹性盒子布局来排列子元素。

- `grid`:将元素显示为网格容器,可以使用网格布局来排列子元素。

- `table`:将元素显示为表格,可以使用表格布局来排列子元素。

- `list-item`:将元素显示为列表项,通常用于 ul ol 元素的子元素。

- `inherit`:继承父元素的 display 属性值。

Position

CSS  position 属性用于设置元素的定位方式:

- `static`:默认值,元素按照正常文档流排列,不进行定位。
- `relative`:相对定位,元素相对于其正常位置进行定位,可以使用 top、right、bottom、left 属性来设置偏移量。
- `absolute`:绝对定位,元素相对于其最近的已定位祖先元素进行定位,如果没有已定位的祖先元素,则相对于 body 元素进行定位,可以使用 top、right、bottom、left 属性来设置偏移量。
- `fixed`:固定定位,元素相对于浏览器窗口进行定位,不随页面滚动而滚动,可以使用 top、right、bottom、left 属性来设置偏移量。
- `sticky`:粘性定位,元素在滚动到特定位置时变为固定定位,可以使用 top、right、bottom、left 属性来设置偏移量。

Width & Height

CSS  width  height 属性用于设置元素的宽度和高度:

- `auto`:默认值,元素的宽度或高度根据内容自适应。
- ``:使用具体的长度值来设置元素的宽度或高度,如 `width: 200px;`
- ``:使用相对于父元素的百分比来设置元素的宽度或高度,如 `width: 50%;`
- `inherit`:继承父元素的宽度或高度属性值。

除了这些基本用法,还可以使用其他一些属性来进一步控制元素的宽度和高度,例如:

- `max-width` `max-height`:设置元素的最大宽度和最大高度,超过这个值时会自动缩小。
- `min-width` `min-height`:设置元素的最小宽度和最小高度,小于这个值时会自动扩展。
- `box-sizing`:设置元素的盒模型,可以选择 `content-box`(默认值,宽度和高度只包括内容,不包括内边距和边框)或 `border-box`(宽度和高度包括内容、内边距和边框)。
- `padding` `margin`:设置元素的内边距和外边距,会影响元素的实际宽度和高度。

max- & min-

CSS  `max-width``min-width``max-height`  `min-height` 
属性用于设置元素的最大宽度、最小宽度、最大高度和最小高度:

- `max-width`:设置元素的最大宽度,超过这个宽度时会自动缩小。
可以使用具体的长度值或百分比来设置,
例如: `max-width: 500px;` `max-width: 80%;`

- `min-width`:设置元素的最小宽度,小于这个宽度时会自动扩展。
可以使用具体的长度值或百分比来设置,
例如: `min-width: 200px;` `min-width: 50%;`

- `max-height`:设置元素的最大高度,超过这个高度时会自动缩小。
可以使用具体的长度值或百分比来设置,
例如: `max-height: 300px;` `max-height: 60%;`

- `min-height`:设置元素的最小高度,小于这个高度时会自动扩展。
可以使用具体的长度值或百分比来设置,
例如: `min-height: 100px;` `min-height: 20%;`

Border

CSS `border` 属性用于设置 HTML 元素的边框样式、宽度和颜色:

- `border-style`: 设置边框样式,如 `solid``dotted``dashed``double``groove``ridge``inset``outset` `none`
- `border-width`: 设置边框宽度,如 `thin``medium``thick` 或具体的像素值。
- `border-color`: 设置边框颜色,如颜色名称、十六进制值或 RGB 值。
- `border-top``border-right``border-bottom``border-left`: 分别设置上、右、下、左四个方向的边框样式、宽度和颜色。
- `border-radius`: 设置边框圆角,如 `10px` `50%`
- `border-image`: 设置边框图片,如 `url(border.png) 30 30 round`

Z-index

`z-index` 属性用于控制元素的堆叠顺序,即控制元素在层叠上下文中的显示顺序。具体用法如下:

1. 设置元素的 `z-index` 值,值越大,元素越靠近顶部,即显示在其他元素的上方。

.element {
z-index: 10;
}

2. 创建新的层叠上下文,通过设置 `position` 属性为 `relative``absolute` `fixed` 来创建新的层叠上下文。

.element {
position: relative;
z-index: 10;
}

3. 层叠上下文的嵌套,当一个元素的子元素设置了 `z-index` 值时,子元素会在父元素的上方显示。

.parent {
position: relative;
z-index: 1;
}

.child {
position: relative;
z-index: 2;
}

注意:`z-index` 属性只对设置了 `position` 属性的元素有效。

Overflow

`overflow` 属性用于控制元素内容溢出时的处理方式。具体用法如下:

1. `overflow: visible;`(默认值):内容不会被修剪,会呈现在元素框之外。

2. `overflow: hidden;`:内容会被修剪,并且其余内容是不可见的。

3. `overflow: scroll;`:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

4. `overflow: auto;`:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

注意:`overflow` 属性只对设置了固定高度或宽度的元素有效。

CSS 伪类

CSS 伪类用于向某些选择器添加特殊的效果:

1. `:hover`:鼠标悬停在元素上时的效果。

a:hover {
color: red;
}

2. `:active`:元素被激活时的效果,通常是鼠标点击时。

button:active {
background-color: blue;
}

3. `:focus`:元素获得焦点时的效果,通常是通过 Tab 键或鼠标点击输入框等元素时。

input:focus {
border: 2px solid blue;
}

4. `:first-child`:选择元素的第一个子元素。

li:first-child {
font-weight: bold;
}

5. `:last-child`:选择元素的最后一个子元素。

li:last-child {
margin-bottom: 0;
}

6. `:nth-child(n)`:选择元素的第 n 个子元素。

li:nth-child(2) {
color: red;
}

7. `:nth-of-type(n)`:选择元素的第 n 个指定类型的子元素。

p:nth-of-type(2) {
font-size: 20px;
}

8. `:not(selector)`:选择不匹配指定选择器的元素。

:not(.special) {
color: blue;
}

CSS 伪元素

CSS 伪元素用于向某些选择器添加特殊的效果,
它们可以创建一些不在文档树中的元素,并为其添加样式:

1. `::before`:在元素的内容前面插入一个元素。

p::before {
content: "前缀:";
font-weight: bold;
}

2. `::after`:在元素的内容后面插入一个元素。

p::after {
content: "后缀。";
font-style: italic;
}

3. `::first-letter`:选择元素的第一个字母。

p::first-letter {
font-size: 24px;
font-weight: bold;
}

4. `::first-line`:选择元素的第一行。

p::first-line {
font-size: 18px;
font-weight: bold;
}

5. `::selection`:选择元素中被用户选中的部分。

::selection {
background-color: yellow;
color: black;
}

Flexbox

Flexbox 是一种用于布局的 CSS3 属性,它可以使元素在容器中按照一定的规则排列:

1. `display: flex;`:将容器设置为 Flexbox 布局。

.container {
display: flex;
}

2. `flex-direction: row/column;`:设置主轴的方向,即元素的排列方向。

.container {
flex-direction: row;
}

.container {
flex-direction: column;
}

3. `justify-content: flex-start/center/flex-end/space-between/space-around;`:设置主轴上的对齐方式。

.container {
justify-content: flex-start;
}

.container {
justify-content: center;
}

.container {
justify-content: flex-end;
}

.container {
justify-content: space-between;
}

.container {
justify-content: space-around;
}

4. `align-items: stretch/flex-start/center/flex-end/baseline;`:设置交叉轴上的对齐方式。

.container {
align-items: stretch;
}

.container {
align-items: flex-start;
}

.container {
align-items: center;
}

.container {
align-items: flex-end;
}

.container {
align-items: baseline;
}

5. `flex-wrap: nowrap/wrap/wrap-reverse;`:设置元素是否换行。

.container {
flex-wrap: nowrap;
}

.container {
flex-wrap: wrap;
}

.container {
flex-wrap: wrap-reverse;
}

6. `flex-grow: number;`:设置元素的放大比例。

.item {
flex-grow: 1;
}

7. `flex-shrink: number;`:设置元素的缩小比例。

.item {
flex-shrink: 1;
}

8. `flex-basis: length/initial/auto;`:设置元素在主轴上的初始大小。

.item {
flex-basis: 100px;
}

Grid

CSS Grid 是一种用于布局的 CSS3 属性,它可以将元素划分为行和列,从而创建复杂的布局:

1. `display: grid;`:将容器设置为 Grid 布局。

.container {
display: grid;
}

2. `grid-template-columns: value;`:设置列的大小和数量。

.container {
grid-template-columns: 100px 100px 100px;
}

3. `grid-template-rows: value;`:设置行的大小和数量。

.container {
grid-template-rows: 100px 100px 100px;
}

4. `grid-template-areas: value;`:设置区域的名称。

.container {
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}

5. `grid-column-start/end: value;`:设置元素的列起始和结束位置。

.item {
grid-column-start: 1;
grid-column-end: 3;
}

6. `grid-row-start/end: value;`:设置元素的行起始和结束位置。

.item {
grid-row-start: 1;
grid-row-end: 3;
}

7. `grid-area: value;`:设置元素的区域名称。

.item {
grid-area: content;
}

8. `grid-gap: value;`:设置行和列之间的间距。

.container {
grid-gap: 10px;
}

Transitions

CSS Transitions 属性用于在元素从一种样式逐渐变为另一种样式时添加动画效果:

1. `transition-property: value;`:设置要过渡的 CSS 属性。

.box {
transition-property: background-color;
}

2. `transition-duration: value;`:设置过渡的持续时间。

.box {
transition-duration: 1s;
}

3. `transition-timing-function: value;`:设置过渡的时间函数。

.box {
transition-timing-function: ease-in-out;
}

4. `transition-delay: value;`:设置过渡的延迟时间。

.box {
transition-delay: 0.5s;
}

Animation

CSS Animation 属性用于创建动画效果,它可以让元素从一种样式逐渐变为另一种样式:

1. `animation-name: value;`:设置动画的名称。

.box {
animation-name: example;
}

2. `animation-duration: value;`:设置动画的持续时间。

.box {
animation-duration: 2s;
}

3. `animation-timing-function: value;`:设置动画的时间函数。

.box {
animation-timing-function: ease-in-out;
}

4. `animation-delay: value;`:设置动画的延迟时间。

.box {
animation-delay: 0.5s;
}

5. `animation-iteration-count: value;`:设置动画的播放次数。

.box {
animation-iteration-count: infinite;
}

6. `animation-direction: value;`:设置动画的播放方向。

.box {
animation-direction: alternate;
}

7. `animation-fill-mode: value;`:设置动画结束后元素的样式。

.box {
animation-fill-mode: forwards;
}

8. `@keyframes`:定义动画的关键帧。

@keyframes example {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}

Media Queries

CSS Media Queries 属性用于根据设备的特性(如屏幕宽度、高度、方向等)来应用不同的样式:

1. `@media screen and (max-width: value) { ... }`:设置屏幕宽度小于某个值时应用的样式。

@media screen and (max-width: 768px) {
body {
font-size: 16px;
}
}

2. `@media screen and (min-width: value) { ... }`:设置屏幕宽度大于某个值时应用的样式。

@media screen and (min-width: 768px) {
body {
font-size: 18px;
}
}

3. `@media screen and (orientation: value) { ... }`:设置屏幕方向为横向或纵向时应用的样式。

@media screen and (orientation: landscape) {
body {
background-color: #f0f0f0;
}
}

4. `@media screen and (resolution: value) { ... }`:设置屏幕分辨率大于某个值时应用的样式。

@media screen and (resolution: 300dpi) {
body {
font-size: 20px;
}
}

掌握这些 CSS 属性只是成为一名 CSS 大神的第一步。在实际开发中,你还需要不断学习和探索新的 CSS 特性和技巧,以应对不同的需求和挑战。希望本文能够为你提供一些帮助和启示,让你在 CSS 的世界中越走越远!

来源:今日头条内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯