快速入门CSS布局：从零开始，快速掌握关键技巧！

最新推荐文章于 2024-08-21 15:33:15 发布
最新推荐文章于 2024-08-21 15:33:15 发布
阅读量907 收藏 12
点赞数 5
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62413155/article/details/137168925
版权

一、CSS简介和基本概念

1、CSS（层叠样式表，Cascading Style Sheets）

是一种用于描述网页内容外观和样式的标记语言，它与HTML结合使用，控制网页中各个元素的样式、布局和设计。

2、css的作用

CSS的作用是将网页内容和样式分离，使得开发者可以更灵活地控制网页的外观，同时提高网站的可维护性和可重用性。

  • 网页内容：网页内容指的是网页中实际显示给用户的信息和元素，包括文字、图片、视频、链接等。在HTML（超文本标记语言）中，网页内容通过不同的标签来表示和组织，如

    表示段落、表示图片、< a >表示链接等。网页内容是用户访问网页时所看到的主要信息和数据。

  • 网页样式：网页样式指的是网页内容的外观设计和布局，包括文字颜色、字体样式、边距、背景颜色、元素大小等方面。样式通过CSS（层叠样式表）来控制和定义，可以使网页内容更加美观、易读和具有吸引力。通过CSS，开发者可以调整网页元素的样式以及整体布局，从而实现定制化的外观效果。

3.CSS语法和规则

  1. 选择器：用于选择要应用样式的HTML元素，如标签选择器（< p >）、类选择器（.classname）、ID选择器（#idname）等。
  2. 属性和值：每条CSS规则由一个属性和一个属性值组成，用于定义元素的样式，如color: red;中，color为属性，red为值。
  3. 声明块：CSS规则由选择器和一组声明块组成，每个声明块包含一个或多个属性-值对，用花括号{}包围起来。
  4. 样式表：CSS样式可以直接写在HTML文件中的< style >标签内，也可以作为外部样式表引入HTML文档中。
  5. 层叠顺序：当多条样式规则作用于同一个元素时，根据层叠顺序和特异度（specificity）来确定最终生效的样式。
  6. 继承：某些样式会被子元素继承，例如字体样式通常会被子元素继承，可以通过inherit关键字明确指定继承。
  7. 盒模型：元素在页面中被表示为矩形盒子，包括内容区域、内边距、边框、外边距，CSS可以用来控制这些盒子的大小和间距。

二、css的编写方式

1. 优先级最高的是行内样式

  1. 直接使用style属性写在开始标签中
  2. 针对一个标签

2. 内部样式表

  1. 在head标签中使用style标签包裹
  2. 样式选择器{ 样式选择器 }
  3. 针对当前html内所有满足的标签

3. 外部样式表

  1. 写在css文件中，通过link引入html
  2. 一般先引入外部样式表，再编写内部样式表
  3. 针对多个html

三、css选择器

1、4种基本选择器

  1. #id名: id选择器; 匹配拥有id的标签.
  2. .类名: 类名选择器; 匹配拥有相同类名的标签.
  3. 标签名: 标签选择器; 匹配固定标签名.
  4. *: 通配符选择器; 选择所有标签.
  5. 匹配顺序: #id名、.class名、标签、*.

2、5种符号选择器

  1. ，: 逗号左右满足一个即可
    • 即满足的都可以有此属性
    • 作用：逗号用于同时选择多个不同的选择器，将样式应用于这些选择器所匹配的所有元素。
  2. 空格: 子孙选择器
    • 选择的是父亲的子孙，父亲的性质不变
    • 作用：空格用于选择元素的后代（包括嵌套元素）。选择器之间的空格表示父元素与子孙元素之间的关系。 例：#hot .p1 .info a

  3. : 子级选择器

    • 作用：大于号表示选择器之间的直接父子关系，只会选中作为前一项选择器的直接子元素。
  4. +: 相邻下一个
    • 大框架隔开的不能算
    • 作用：加号表示选择器之间的相邻兄弟关系，选中紧接在前一项选择器后面的兄弟元素。
  5. ~: 下面的多个
    作用：波浪号表示选择器之间的通用兄弟关系，选中与前一项选择器匹配元素具有相同父元素的所有兄弟元素。

3、其他选择器

  1. 属性
    • [attr]： 拥有属性
    • [attr=]： 拥有属性并且值等于
    • [attr^=]：拥有属性并且值以……开头
    • [attr$=]： 拥有属性并且值以……结尾
  2. 伪类：在正常使用选择器之后使用
    • 状态
      • ：hover： 鼠标划入
      • ：active： 鼠标点下
        注意划入要在点下之前
    • 顺序
      • ：first-of-type： 第一个
      • : last-of-type：最后一个
      • : nth-of-type(n)： 正数第n个
      • : nth-last-of-type(n)：倒数第n个
      • n从1开始：odd，奇数；even，偶数；

三、 css样式属性

1、 字体属性 font-

  1. family: 类型, 多个字体使用逗号隔开
  2. size: 大小,默认16px
  3. weight: 粗细; 400: normal; 700: bold;
  4. style: intalic,斜体

2、 文本属性 text-

  1. text-transform: 更改大小写
    • capitalize: 首字母大写
    • lowercase： 全小写
    • uppercase：全大写
  2. text-align: 对齐
    • left: 默认
    • center: 居中
    • right: 居右
  3. text-indent: 缩进
    • 2em: 2*font-size
  4. decoration:none; 对于媒体标签去除下划线

3、 背景属性 background

  1. width和height属性
  2. background-color: 背景色
  3. image：图片；优先级高于背景色
  4. repeat：重复
    • no-repeat：不使用no-repeat会重复背景
    • repeat配合其他性质使用
  5. position：位置
    • 位置可以绝对也可以相对
    • 位置分为宽高
      • left、right、center、bottom、top
      • 100px 500px
  6. size：
    • 100%
    • contain
      • 长边展示，短边补充空白；相当于100%
      • cover：短边展示，多余长边舍弃

4、 列表属性 list-style

  1. type
    • none:无;优先级比list-style低
    • circle：空心圆
    • disc：实心圆
    • square：方块
    • lower-alpha：小写字母
    • lower-roman：罗马数字
    • upper-alpha：大写字母
    • position
      • outside：序号在外侧
      • inside：序号在内侧
    • image：url
    • list-style:none
  2. 作用于ul，ol，li

四、 布局相关

1、 css包围盒

盒模型是CSS中用来描述网页元素在页面中所占空间的模型。
每个HTML元素都被看作是一个矩形的盒子，这个盒子包括了内容区域、内边距、边框和外边距等部分。
盒模型属性用来控制和调整这些部分的大小和间距，从而影响元素在页面中的布局和样式。

  1. border（边框）上下左右
    • 作用：border 用于设置元素的边框样式、宽度和颜色。
    • 属性
      • width
      • style：bashed虚线；solid实线
      • color
      • 可以集中写多个性质：2px solid red
  2. padding（内边距）
    • 内补：只有宽度
    • 作用：padding 用于设置元素内容与其边框之间的空白区域，即内边距。
    • 使用自己的背景色
  3. margin（外边距）
    • 外补
    • 只有宽度
    • 作用：margin 用于设置元素与其他元素之间的空白区域，即外边距。
      使用父元素背景色
      margin可以共享
    • 例：margin：0 auto；使其中的元素始终居中
  4. padding与margin支持四种写法
    • 一个数值：上下左右一样
    • 两个数值：上下， 左右
    • 三个数值：上， 左右， 下
    • 四个数值： 上，右， 下， 左
  5. 更改包围盒计算方式 box-sizing
    • border-box
      • box-sizing：border-box;给定宽高包含边框 和 内补
      • 包括了内容区域、内边距和边框，但不包括外边距
    • content-box默认
      • 仅包括内容区域

2、 css中的显示（display）

不同性质之间可以相互转换

  1. inline：行内元素，不可以给宽高
  2. block：块元素，占一行，可以给宽高
  3. inline-block：行内块，多个块在一行，可以给定宽高
  4. none：隐藏
    • 例：div:hover+img{其中是img的性质}

3、 css的定位(position)

  1. static：静态定位，从左到右，从上到下
  2. relative：相对定位，相对于文档流静态定位，反生偏移
    • 相对于静态位置的位置移动
      • left
      • top
  3. absolute：绝对定位
    • 参考位置：外层第一个非static的标签发生偏移，直到html
    • 不占用文档流
    • left/top/right/bottom
  4. fixed：固定定位
    • 配合top或bottm使用
    • 参考位置：浏览器窗口
  5. sticky：粘性定位
    • 没有达到粘性位置：相当于静态定位
    • 到达粘性位置：相当于固定定位
    • 设置bottom和top

4、css浮动与清除

通过设置元素的 float 属性，可以使元素沿着其容器的左侧或右侧浮动

  1. float
    • left: 靠左侧排列
      • 排列在上一个左浮动的右侧
    • right: 靠右排列
      • 排列在上一个右浮动的左侧

当父元素包含浮动的子元素时，可能会导致父元素无法正确计算高度，出现高度塌陷的情况。

  1. clear
    • left: 左侧不能有左浮动
    • right: 右侧不能有右浮动
    • both: 后续元素不会被浮动元素覆盖
    • 例：如果某个元素单独占一行，可以float和clear相同方向。如：float left；clear left；

4、 弹性盒模型（Flexbox）

控制主轴方向的属性通常用于 flex 布局，即display：flex；
flex 容器：flexbox弹性容器

  1. flex-direction: 设置主轴方向
    • row: 主轴方向与文档流方向相同（默认值）
    • row-reverse: 主轴方向与文档流方向相反。
    • column: 主轴方向垂直于文档流方向。
    • column-reverse: 主轴方向垂直于文档流方向，且方向相反。
  2. flex-wrap
    • wrap: 默认值，表示项目不换行，所有项目将尽量排在一条线上。
    • no-wrap: 表示项目在必要的时候换行，第一行在上方。
    • wrap-reverse: 表示项目在必要的时候换行，第一行在下方。
  3. justify-content
    控制 flex 容器中的子元素在主轴（水平方向）上的对齐方式的属性
    • flex-start: 与主轴开始的位置对齐
    • flex-end: 与主轴结束位置对齐
    • center: 主轴居中对齐
    • space-bewteen: 沿主轴均匀分布排列，首尾没有空白
    • space-around: 沿主轴均匀分布排列，两侧有相等的空白空间
  4. align-content
    控制 flex 容器中多行子元素在交叉轴（垂直方向）上的对齐方式的属性
    • flex-start: 交叉轴起始位置; 没有空白; 多行子元素在交叉轴的起始位置紧凑排列。
    • flex-end: 多行子元素在交叉轴的末尾位置紧凑排列。
    • center: 多行子元素在交叉轴的中间位置紧凑排列。
    • space-between: 多行子元素在交叉轴上均匀分布排列，首尾没有空白。
    • space-around: 多行子元素在交叉轴上均匀分布排列，两侧有相等的空白空间。
    • 当交叉轴有多行，使用多轴对其设置
  5. align-items
    控制 flex 容器中的子元素在交叉轴（垂直方向）上的对齐方式的属性
    • flex-start: 从交叉轴起始位置
    • flex-end: 从交叉轴结束
    • center: 居中
    • 当交叉轴方向只有一行使用交叉轴

五、 常用例子

1、评星

设置background-position：10%；

2、字体图标

  1. 使用font class类型
 <!-- 先引入所使用的字体图标文件 -->
<!-- 使用前需要将css和ttf拷贝到同一个文件夹中 -->
<link rel="stylesheet" href="./font/iconfont.css">
	 <!-- 需要先使用iconfont,再使用字体特有的class名 -->
<span class="iconfont icon-gouwuche"></span>
  1. 使用unicode自定义类型
    在style中使用font-face,并设置字体名称；在对应的class或id中引用
	<style>
        @font-face{
            font-family:"python2401";
            src:url(./font/iconfont.ttf) format('truetype');
        }
        .myfont{
            font-family: "python2401" !important;
        }
    </style>
			 <!-- 每种字体都有自己的编码 -->
    <span class="myfont">&#xe66f;</span>

3、渐变

1、transition：过渡
  1. 可使用的属性
    • width、height、background-color、opacity、transform……
    • transform：
    • translate：平移元素，可以指定水平和垂直方向的位移，如 translateX 和 translateY。
    • rotate：旋转元素，可以指定旋转的角度，正值为顺时针旋转，负值为逆时针旋转。
    • scale：缩放元素，可以指定水平和垂直方向的缩放比例，如 scaleX 和 scaleY。
    • skew：倾斜元素，可以指定水平和垂直方向的倾斜角度，如 skewX 和 skewY。
    • 例： transform: rotate(45deg); /* 将元素顺时针旋转45度 */
  2. transition 属性包含以下几个参数：
    • transition-property：指定需要过渡的 CSS 属性的名称。
    • transition-duration：指定过渡效果持续的时间。
    • transition-timing-function：控制过渡期间属性值的变化速度。
      • ease：默认值，缓慢加速，然后缓慢减速的过渡效果，是一种常用的时间函数。
      • linear：匀速过渡，属性值均匀变化，没有加速或减速的效果。
    • transition-delay：指定过渡效果延迟开始的时间。
      • 例子： /* transition要写在原始状态下 */
      • transition: all 1s linear;
1、 动画
  1. @keyframes 自定义动画名{0%{transform} 100%{transform} }
  2. 类名/id名{animation：自定义动画名 时间 动画方式 无限循环 反向旋转}
    自定义的动画名要一致
<style>
       @keyframes myrotation{
            0%{
                transform: rotate(0deg);

            }
            100%{
                transform: rotate(360deg);

            }
        }
        .animation{
            width: 64px;
            height: 64px;

            animation: myrotation 1s linear infinite reverse;
        }
        @keyframes myrote{
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }
        </style>
m0_62413155
关注
CSS布局学习
Wangyifan1596的博客
06-17 609
CSS布局
《从零开始学HTML5+CSS3》中文PDF及配套代码.rar
05-31
《从零开始学HTML5+CSS3》是一本旨在帮助初学者掌握现代网页开发核心技术的教程。这本书包含HTML5和CSS3的详细讲解，以及配套的实战代码示例，覆盖了从基础知识到高级特性的全面内容。以下是针对这两个重要技术的...
CSS——布局
Fan_web的博客
08-09 1319
本文详细介绍了CSS中的布局，包括文档流、盒子模型和大小、浏览器的默认样式介绍以及补充一些轮廓和圆角的一些知识点。
2024最强CSS基础知识大全（含代码）
最新发布
HTDiiii的博客
08-21 1383
CSS 什么是 CSS CSS(Cascading Style Sheets) 指层叠样式表，样式定义如何显示 HTML 的样式，样式通常存储在样式表中，把样式添加到 HTML5 中，是为了解决内容与表现分离的问题，外部样式表可以极大提高工作效率，外部样式表通常存储在 CSS 文件中，多个样式定义可以层叠为一。 什么地方可以写 css 行内样式，在标签内部通过 style 属性编写的 CSS 样式就是行内。 内嵌样式，一般在页面中的 head 标签内通过外部 css 标签 通过在页面中的 标签中使用 标签
CSS布局入门
10-20 759
CSS布局入门#sample{MARGIN: 10px 10px 10px 10px;PADDING-LEFT: 20px; PADDING-TOP: 20px;PADDING-RIGHT: 10px; PADDING-BOTTOM: 10px;BORDER-RIGHT: #CCC 2px solid;BORDER-BOTTOM:
Div+CSS布局入门教程
动性忍心
06-16 3690
教程写了很长时间了，不过并没有发帖，这次特意帖出来，希望能够帮助更多的网友学习DIV+CSS布局。目前总共写了五篇，由于比较懒，所以更新速度很慢。一、页面布局与规划　　在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DI
CSS设计指南(第3版)》
csdn1232的博客
04-18 116
《CSS设计指南(第3版)》 基本信息 原书名：Stylin’with CSS:a designer's guide 作者： (英)Charles Wyke-Smith 译者： 李松峰 丛书名： 图灵程序设计丛书 ...
如何学习 CSS
前端大全
05-18 674
（给前端大全加星标，提升前端技能）英文：rachel-andrew 译文：廖泽恩https://zhuanlan.zhihu.com/p/57994014很多人想让我给...
从零开始:html5+css3快速入门 pdf
07-12
从零开始:HTML5 CSS3快速入门是一本教学性很强的PDF电子书，旨在帮助初学者快速入门并掌握HTML5和CSS3编程技术。 HTML5是用于构建Web页面的标准的最新版本。它提供了许多新的功能和标签，以使网页内容更丰富和交互...
BootStrap入门到实战：BootStrap全局CSS样式（一）
05-14
BootStrap全局CSS样式是框架的基础，它们为所有HTML元素提供了一致的样式，使得开发者无需从零开始设计。例如，`<body>`元素默认的背景色、链接的颜色和状态、段落的间距等都是由全局CSS控制的。使用BootStrap，你...
Bootstrap入门指南：从零开始构建响应式网站
Bootstrap的目标是简化Web开发过程，并使设计师和开发者能够快速创建出美观和可用性强的界面。 ## 1.2 Bootstrap的优势和特点 - 响应式设计：Bootstrap提供了强大的响应式栅格系统，可以自动适应不同大小的屏幕和...
React.js 入门指南：从零开始构建你的第一个应用
# 1. React.js 简介 ## 1.1 什么是React.js？ React.js是一个用于构建用户界面的JavaScript库。它由Facebook开发，并且已经在大规模应用中得到了验证。React.js采用了组件化和虚拟DOM的设计思想，可以高效地更新和...
css介绍
weixin_34235371的博客
06-26 115
css概述 css是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离 css的四种引入方式 行内式 行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。 &lt;p style="background-color: rebeccapurple"&gt;hello yuan&lt...
CSS
jack_970124的博客
05-06 204
CSS的简介 为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表(后面的样式如果跟前面的样式是同一块内容会覆盖)有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁 ...
css概述（续2）
weixin_45866849的博客
10-29 1631
css概述（续2） 1.文档流 文档流指的是文档中的标签在排列时所占用的位置。将长提自上而下分成一行行，并在每行中按从左至右的顺序排放标签，即为文档流。 在文档流中标签默认会紧贴到上一个标签的右边，如果右边不足以放下标签，标签则会另起一行，在新的一行中继续从左至右摆放。 2.浮动 浮动是使标签脱离原来的文档流，在父标签中浮动起来。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <t
一篇全面的CSS布局学习指南 [译]
weixin_34289454的博客
07-07 296
本文来自SmashingMagazine上一篇非常不错的CSS布局综述类文章，汇总了各类CSS布局技术，并提供了这些技术深度阅读的链接。故而翻译过来和大家分享，原文链接在文末，感谢作者Rachel Andrew。 引言 无论你是一个想要学习CSS布局的新手，还是一个比较有经验但想要进一步巩固与了解最新CSS布局知识的前端开发者，这篇指南都能帮你全面了解如今CSS布局发展的现状。 在过去的许多年...
CSS介绍
aopdb5567的博客
08-26 165
1.什么是div div是html一个普通标签，进行区域划分。特性：独自占一行，独自不能事项复杂的效果。必须结合css样式进行渲染。 div通常其实块级元素。 <div>ke dingyi 文档中分区或节. <div>标签可以把文档分割为独立的不同的部分,他可以用作严格的组织工具,并且不使用任何格式与关联. 如果用id或class来标记<div&g...
CSS基础入门 ----- 网页布局
weixin_65489884的博客
03-04 842
网页页面设计
CSS布局基础
机器人视觉感知
04-05 425
（1）布局前的注意事项 内容与显示分离,即HTML与CSS样式分离。 网站布局方法，固定宽度和响应式，固定布局即每一栏都有基于像素的宽度，响应式布局以百分数定义宽度，可为不同终端定制单独的体验。 考虑浏览器的兼容性 (2) 构建页面，恰当的使用article,aside,nav,section等元素，要按照一定的顺序放置内容，使用合适的语义标记剩余内容。 （3）针对所有浏览器为HTML5新元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值