CSS的一些必记属性整理

下面是对于CSS的一些必记属性整理的详细讲解:

CSS的一些必记属性整理

1. display 属性

display属性常用于控制元素的显示方式。具体的取值有:

  • none:元素不显示,同时占用的空间也不保留
  • block:元素被渲染为块级元素,通常会独占一行,可以在其中设置宽度、高度、内外边距等属性
  • inline:元素被渲染为行内元素,通常不支持设置宽度、高度、内外边距等属性
  • inline-block:元素被渲染为行内块级元素,可以支持设置宽度、高度、内外边距等属性
  • flex:元素被渲染为弹性布局容器,可以通过子元素的属性来控制布局方式、对齐方式等

2. position 属性

position属性用于控制元素的定位方式。具体的取值有:

  • static:默认定位方式,元素遵循普通文档流的布局规则
  • relative:相对定位方式,元素相对于自身原先在文档流中所处的位置进行定位,不影响其他元素的布局
  • absolute:绝对定位方式,元素相对于最近的非static定位祖先元素进行定位,如果没有祖先元素则相对于<html>元素进行定位
  • fixed:固定定位方式,元素相对于<html>元素进行定位,不随滚动条滚动而变化
  • sticky:粘性定位方式,原本在普通文档流中的元素在满足一定条件时切换为固定定位,当滚动到指定位置时会停留在该位置

3. box-sizing 属性

box-sizing属性用于控制一个盒子的尺寸计算方式。具体的取值有:

  • content-box:默认值,指定元素的宽度和高度属性仅包括内容,不包括内边距和边框
  • border-box:指定元素的宽度和高度属性包括内容、内边距和边框,不包括外边距

示例1:控制元素的尺寸

.box {
  display: inline-block;
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  padding: 20px;
  font-size: 24px;
  text-align: center;
  line-height: 100px;
}

在这个示例中,我们使用了border-box属性来控制.box元素的尺寸计算方式,并设置了宽度、高度、内边距、字体大小等属性来对元素进行样式设置,最终得到一个带有边框、内边距、文本居中等样式的方形盒子。

示例2:控制元素的定位

<div class="container">
  <div class="box box-1">1</div>
  <div class="box box-2">2</div>
  <div class="box box-3">3</div>
</div>
.container {
  position: relative;
  width: 800px;
  height: 600px;
}
.box {
  position: absolute;
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  font-size: 36px;
  color: #fff;
}
.box-1 {
  left: 0;
  top: 0;
  background-color: #f00;
}
.box-2 {
  right: 0;
  top: 0;
  background-color: #0f0;
}
.box-3 {
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
  background-color: #00f;
}

在这个示例中,我们使用了position属性来控制.box元素的定位方式,并结合leftrighttopmargin-leftmargin-top等属性来对元素进行定位和布局,最终实现了三个不同位置的盒子元素。

希望以上内容能够对您有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:CSS的一些必记属性整理 - Python技术站

(0)
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • 基于Css Variable的主题切换完美解决方案(推荐)

    下面我将详细讲解如何使用CSS变量实现主题切换的完美解决方案。 什么是CSS变量 CSS变量(也称为自定义属性)是一种新特性,可以让开发者使用自定义的变量来定义CSS属性值。例如,定义一个颜色变量并在不同的CSS属性中使用它。 :root { –primary-color: #007bff; } a { color: var(–primary-color…

    css 2023年6月10日
    00
  • CSS Gird布局教程指南

    当谈到网页布局技术时,CSS Grid应该是最流行的之一。下面是一个CSS Grid布局教程指南,让您了解如何使用CSS Grid来构建现代、响应式的网站布局。 什么是CSS Grid? CSS Grid是一个网页布局技术,它允许您创建复杂的网格结构,以更好地控制您的网页上的元素排列。使用CSS Grid,您可以轻松地创建响应式布局,以满足不同屏幕尺寸的需求…

    css 2023年6月10日
    00
  • CSS定位的4种方法

    CSS定位是指通过CSS属性对HTML元素进行定位和排版。它可以帮助我们更灵活地控制页面布局,使网页看上去更加美观、整洁。 首先,我们来介绍一些与定位相关的CSS属性: position 该属性用于定义元素在文档中的定位方式。它有四个取值: static:默认值,元素在文档流中按照原来的位置排布; relative:元素在文档流中占据位置,但是可以通过lef…

    2023年3月20日
    00
  • css把容器级别(div…)标签固定在一个位置(在页面最右边)

    要把容器级别(如div)标签固定在一个位置(如页面最右边),可以使用CSS中的position属性以及相关的取值。 下面是实现这一效果的步骤: 在CSS中选中需要固定的容器级别标签,并设置其position属性为fixed。同时,可以设置right属性为零或其他具体值,以确定容器级别标签在页面最右边的位置。 .container { position: fi…

    css 2023年6月9日
    00
  • Vue 实现轮播图功能的示例代码

    下面我将为你详细讲解Vue实现轮播图功能的完整攻略。 1. 准备工作 在开始编写轮播图功能的示例代码之前,首先需要准备的是 Vue 的基本开发环境。确保你已经完成了以下几个环节: 安装了 Node.js 安装了 Vue-CLI 创建了 Vue 项目 2. 组件设计 在 Vue 中,轮播图功能通常需要采用组件的形式进行封装。因此,示例代码中的第一个关键步骤就是…

    css 2023年6月10日
    00
  • CSS文本阴影 text-shadow 悬停效果详解

    CSS文本阴影 text-shadow 悬停效果详解 文本阴影是在字体背后添加投影效果,让字体看起来有立体和浮动的效果。 text-shadow 属性可以添加阴影效果,以逐步增加各种文字的 3D 效果,文本阴影可以用于各种文本或标题。 语法 text-shadow: h-shadow v-shadow blur-radius color; 参数 h-shad…

    css 2023年6月10日
    00
  • css Sprites小实例代码

    下面我将详细讲解“CSS Sprites小实例代码”的完整攻略。 什么是CSS Sprites CSS Sprites是一种技术,用于将多个小图片合并成一张大图片,并通过CSS的background-position属性来控制显示哪个小图片。通过这种技术,可以减少网页的http请求,提升网页加载速度,从而提高用户体验。 CSS Sprites的使用流程 准备…

    css 2023年6月10日
    00
  • DOCTYPE和XHTML的相关认识

    DOCTYPE 是一种文档类型定义,它使得浏览器知道文档使用哪种规范解析。在 HTML 中,DOCTYPE 是必须的,否则浏览器将无法正确显示页面。而在 XHTML 中,DOCTYPE 不仅是必须的,还与 XHTML 版本紧密相关。 常用的 DOCTYPE 有以下几种: HTML5:<!DOCTYPE html> HTML 4.01:<!D…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部