写CSS之前，你必须要知道的CSS规则

最新推荐文章于 2022-07-06 19:01:22 发布

Bil!

最新推荐文章于 2022-07-06 19:01:22 发布

阅读量302

点赞数 1

分类专栏： HTML和CSS

本文链接：https://blog.csdn.net/weixin_45045689/article/details/108433936

版权

本文介绍了CSS编写时的布局顺序，包括行内元素、行内块元素和块元素的特性和区别，并强调了CSS的层叠性、继承性和优先级概念，帮助开发者理解如何写出更规范、易于维护的CSS代码。

摘要由CSDN通过智能技术生成

前言

前几天在写动态网站时，用到了600多行的CSS，如果对CSS书写的不规范，到后面维护时，会十分混乱且耗时。有时，明明加了句CSS代码，可网站并没有出现预期的效果。这就需要了解下CSS规则。

CSS书写顺序

遵循以下顺序：
1.布局定位属性：display / position / float / clear / visibility / overflow / flex
2.自身属性：width / height / margin / padding / border / background
3.文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break-word
4.其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient….

标签类型

行内元素

常见的行内元素有

<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>

等，其中< span >标签是最典型的行内
元素，有的地方行内元素称为内联元素。

行内元素特点：
1.相邻行内元素在一行上，一行可以显示多个。
2.高、宽直接设置是无效的。
3.默认宽度就是它本身内容的宽度。
4.行内元素只能容纳文本或其他行内元素。
注意:
< a>可以放块元素。当给< a>转化一下最安全。

行内块元素

在行内元素中有几个特殊的标签 —< img /> 、 < input /> 、< td>,
它们同时具有块元素和行内元素的特点。

行内块元素的特点：
1.和相邻行内元素(行内块)在一行上，但他们之间会有空白缝隙（可以消除），一行可以显示多个（行内元素的特点）。
2.默认宽度就是它本身内容的宽度(行内元素的特点)。
3.高度、行高、外边距以及内边距可以控制（块级元素的特点）。

块元素

常见的块元素有

<h1>…<h6>、<p>、<div>、<ul>、<ol>、<li>

等，其中< div>标签是最典型的块元素。
块元素的特点:
1.比较霸道，自己独占一行。
2.高度height，宽度width，外边距margin，以及内边距padding都可以控制。
3.宽度默认是容器（父级宽度）的100%。
4.是一个容器及盒子，里面可以放行内或者块级元素。

注意：
文字类元素（< p>、< h1>）不能放块元素。

比较

在这里插入图片描述

其实无论什么标签，里面都是可以放任意标签的，不过我们是绝对不会在行内标签上放块标签的。不然就不符合我们预期的效果了。

CSS三大特性

1.层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个样式，层叠主要处理样式冲突的问题。

层叠性原则：
1.样式冲突：执行就近原则，那个样式离结构近，就执行哪个样式。
2.样式不冲突，不会层叠。

2.继承性

子承父业。
适当使用继承可以简化代码。
子元素可以继承父元素的样式（text- font- line- color:）这些属性(都是一些文本样式)可以继承。

父元素的属性那些可以被子元素继承,哪些不能呢?
一、无继承性的属性

1、display：规定元素应该生成的框的类型

2、文本属性：

vertical-align：垂直文本对齐

text-decoration：规定添加到文本的装饰

text-shadow：文本阴影效果

white-space：空白符的处理

unicode-bidi：设置文本的方向

3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、 border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

4、背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment

5、定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

6、生成内容属性：content、counter-reset、counter-increment

7、轮廓样式属性：outline-style、outline-width、outline-color、outline

8、页面样式属性：size、page-break-before、page-break-after

9、声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

二、有继承性的属性

1、字体系列属性

font：组合字体

font-family：规定元素的字体系列

font-weight：设置字体的粗细

font-size：设置字体的尺寸