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

最新推荐文章于 2024-08-09 16:30:00 发布
最新推荐文章于 2024-08-09 16:30:00 发布
阅读量910 收藏 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 1335
本文详细介绍了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 117
《CSS设计指南(第3版)》 基本信息 原书名：Stylin’with CSS:a designer's guide 作者： (英)Charles Wyke-Smith 译者： 李松峰 丛书名： 图灵程序设计丛书 ...
如何学习 CSS
前端大全
05-18 676
（给前端大全加星标，提升前端技能）英文：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 1632
css概述（续2） 1.文档流 文档流指的是文档中的标签在排列时所占用的位置。将长提自上而下分成一行行，并在每行中按从左至右的顺序排放标签，即为文档流。 在文档流中标签默认会紧贴到上一个标签的右边，如果右边不足以放下标签，标签则会另起一行，在新的一行中继续从左至右摆放。 2.浮动 浮动是使标签脱离原来的文档流，在父标签中浮动起来。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <t
一篇全面的CSS布局学习指南 [译]
weixin_34289454的博客
07-07 299
本文来自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 426
（1）布局前的注意事项 内容与显示分离,即HTML与CSS样式分离。 网站布局方法，固定宽度和响应式，固定布局即每一栏都有基于像素的宽度，响应式布局以百分数定义宽度，可为不同终端定制单独的体验。 考虑浏览器的兼容性 (2) 构建页面，恰当的使用article,aside,nav,section等元素，要按照一定的顺序放置内容，使用合适的语义标记剩余内容。 （3）针对所有浏览器为HTML5新元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值