前端入门4-CSS属性样式表

2023-07-19 07:59:28

本篇文章已授权微信公众号 dasu_Android（大苏）独家发布

声明

本系列文章内容全部梳理自以下四个来源：

作为一个前端小白，入门跟着这四个来源学习，感谢作者的分享，在其基础上，通过自己的理解，梳理出的知识点，或许有遗漏，或许有些理解是错误的，如有发现，欢迎指点下。

正文-CSS属性样式表

了解了 CSS 具体的各种工作原理、使用方式、选择器规则、层叠算法等之后，那么该来学习的也就是 css 都支持哪些属性样式表了。

1.单位

in，cm，mm，px，em，%

绝对单位：1in（英寸） = 2.54cm（厘米） = 25.4mm（毫米） = 72pt（英镑points） = 6pc（皮卡picas）

相对单位：px（像素）， em（相对于font-size的大小）， %（百分比）

前端入门4-CSS属性样式表

2.字体 font-xxx

font-size: 20px; 字体大小
line-height: 30px; 行高
font-family: 微软雅黑; 字体
font-style: italic; 斜体，normal正常字体
font-weight: bold; 粗体
font-variant: small-caps; 小写变大写

font-xxx, line-xxx 属性具有继承性，后代会继承祖先标签内的这些属性。

3.文本 text-xxx

letter-spacing: 0.5cm; 单个字母之间的间距
word-spacing: 1cm; 单词之间的间距
text-decoration: none; 字体修饰，none:去掉下划线，underline下划线，line-through中划线，overline上划线
text-transform: lowercase; 单词小写，uppercase大写, capitalize首字母大写
color:red; 字体颜色
text-align: center; 在当前容器中对齐方式，left,right,justify

text-xxx具有继承性，后代标签会继承祖先中声明的这些属性，想让文本居中显示时，如果属性不生效，可自行计算，如下：

前端入门4-CSS属性样式表

4.背景 background-xxx

background-color

设置元素背景颜色，属性值有三种方式：red, rgb(255, 0, 0), #ff0000

以上三种均表示红色。以下是几种常见的颜色：

#000（黑） #fff（白） #f00（红） #222（深灰）#333（灰）#ccc（浅灰）

background-repeat

设置背景图片是否重复，以及如何重复，默认平铺满。属性值如下：

  • no-repear 不要平铺
  • repeat-x 横向平铺
  • repeat-y 纵向平铺

应用场景：可以类似于 Android 中的 .9 图，设计一张 1px 的背景图，指定横向或者纵向平铺。

background-position

指定背景图位置，几种格式如下：

background-position: 向右偏移量 向下偏移量;

属性值可以是正数，也可以是负数。比如：100px 200px，-50px -120px

background-position: 描述左右的词 描述上下的词;

描述左右的词：left、center、right

描述上下的词：top 、center、bottom

比如说，right center表示将图片放到右边的中间；center center表示将图片放到正中间。

这个属性既可以用于在一张包含各种 icon 种只显示指定区域的 icon，也可用于在文本四周添加 icon。

background-attachment

设置背景图片是否固定，属性值：

  • fixed 背景固定住，不会被滚动条滚走
  • scroll 默认属性，背景跟随滚动条滑动

background-clip

背景默认延伸到边界的外边缘，如果你只想背景扩展到内容区的边缘，可通过这个属性设置。

outline

设置盒子的轮廓，它看起来像边界，但不是盒模型的一部分，是画在边界框之外，外边距之内，但不会修改盒子的大小。

background

以上属性的综合属性，如果不想一个个属性的去写，可以用这个属性集中写在一起。格式如下：

background: -color –image –repeat –position –attachment

//如

background:red url(1.jpg) no-repeat 100px 100px fixed;

等效于：

background-color:red;

background-image:url(1.jpg);

background-repeat:no-repeat;

background-position:100px 100px;

background-attachment:fixed;

另外，背景是可以设置多个的，多个背景间会自动重叠在一起，并不是像 Android 中只能设置一个背景。

5.盒子 width height...

width&height

设置内容的宽高，并不是盒子的宽高，但可通过 box-sizing 来更改宽高的作用域。

Android 中必须给控件设置宽高，但在这里，宽高并不是必选像。当没有设置宽高时，会根据其显示模式 display 来决定其默认宽高。

比如，display: block 块级元素默认高度会霸占父节点 100% 宽度，而高度默认会由子内容决定，类似于 Android 中的 wrap_content。

display: inline 行内元素则是无法设置宽高，默认为文本内容的宽高。

除了正常宽高外，还有其他一些可选项配置：

min-width, min-height, max-width, max-height

借助这些配置，可以达到一些当窗口大小变化时，变化到一定程度改变原有元素的表现行为，比如某张图片本来居中显示，但当窗口缩小到比图片还小时，图片就根据窗口进行缩小，此时就可结合 max-width 来实现。

padding

padding：-top –right –bottom -left

设置内边距

border

border：-width –style –color

设置边框

margin

margin：-top –right –bottom -left

设置外边距

注意一点，margin 跟 Android 中的 margin 有些不一样，对某个元素设置了 margin 后，margin 区域的大小也算在这个元素盒子的大小中。

另外，默认的文档流中，上下方向会存在 margin 塌陷的情况，也就是上一个元素设置了 margin-bottom: 10px，下一个元素设置了 margin-top: 20px，那么最终这两个元素其实间距为 20px，并不是叠加的。

另外，margin 通常是用于兄弟节点间设置间距，如果要设置儿子和父亲间的间距，建议使用 padding，否则如果父节点没有设置 border 时，可能效果并不是想要的。

margin: 0 auto; 可以达到水平居中的效果。

<body>标签，浏览器通常默认给了 margin: 8px

<ul> 默认有设置 margin-left 和 padding-top

所以，通常都会有一份 reset.css，来重置这些默认属性值。

6.阴影 box-shadow&text-shadow

前端入门4-CSS属性样式表

你会看到，我们在 box-shadow 属性值中有4个项：

  • 第一个长度值是水平偏移量（horizontal offset ）——即向右的距离，阴影被从原始的框中偏移(如果值为负的话则为左)。
  • 第二个长度值是垂直偏移量（vertical offset）——即阴影从原始盒子中向下偏移的距离(或向上，如果值为负)。
  • 第三个长度的值是模糊半径（blur radius）——在阴影中应用的模糊度。
  • 颜色值是阴影的基本颜色（base color）。

如果需要内部阴影，则是在上述属性值最前面加一个 inset 如：

box-shadow: inset 2px 2px 1px black

7.显示模式 display

标准文档流布局方式

当没有进行任何 CSS 控制元素的排版布局时（float, position, flex）默认就是按照标准的文档流布局方式进行排版布局绘制元素。

而这个标准的文档流布局方式就是按照解析 HTML 文档元素的顺序，从页面顶部开始，从上到下，从左到右，解析一个元素就绘制一个元素，解析时碰到的是行内元素，就忽略宽高，允许并排布局绘制，碰到的是块级元素，就另一起一行，让这个元素霸占父元素中的这一整行。

所以，清楚了浏览器默认的文档流布局方式后，得再了解下所说的行内元素，块级元素是什么，怎么切换。

inline(行内元素)&block(块级元素)

display 有两个很基本的属性值：inline（行内元素） block（块级元素）

通常，容器类的标签默认值都是 block，而文本类的标签默认值是 inline。

比如：div, header, main, li, h 系列这类都是块级元素

p, span, I, a 这类都是行内元素。

区分以及理解行内元素和块级元素对于写网页布局非常重要，因为浏览器是按照文档流从上到下，从左到右来进行绘制网页的。

对于行内元素（inline），浏览器绘制时会忽略对它设置的宽高，并且如果相邻两个元素都是行内元素，则直接以并排方式从左到右对其进行布局绘制。

但对于块级元素，浏览器会强制让其霸占一整行，也就是这一行内，只能有这个块级元素存在，其他元素不能与其并排。如果没有设置宽度，那么就是充满整行。

这个整行是想对于父元素的区域而言，并不是浏览器页面的整行 。

前端入门4-CSS属性样式表

这种默认的标准文档流的布局绘制方式有些类似于 Android 中的 LinearLayout 容器，inline 就类似于水平方向， block 就类似于垂直方向，同一个方向内只能有一个元素霸占，不允许并排。

所以，我们在写 HTML，CSS 时，脑中就要有个大概的蓝图，这些元素大概会呈现怎样的排版布局。

一个元素是行内元素还是块级元素，可以通过 display 来设置，如果没有设置，那么就是默认值，不同元素的默认值不同。

如果行内元素不支持设置宽高，块级元素又不允许并排存在，那么很显然，很多布局我们就实现不了了。是吧，如果既要能够并排，还要支持可以设置宽高，这是该怎么办呢？

解决方法有很多种，说白了就是一点：脱离默认的文档流布局方式

方式有以下几种：

  • display:inline-block（行内块元素）
  • 浮动 float: left/right
  • 绝对定位 position: absolute
  • 固定定位 position: fixed

inline-block(行内块元素)

当设置了 display: inline-block 时，这时这个元素就不会霸占一整行了，而是根据设置的宽高来布局绘制，因此这种情况下，可以解决并排的场景。

但需要注意下，最好不要有这样的布局：

<div style=”display:inline-block”>

	<div style=”display:block”>

		<div style=”display:inline-block></div>

</div>

</div>

也就是行内块元素嵌套了块级元素内部又嵌套了行内块元素，这样的话，布局方面会有些问题，原因不清楚。但把中间的块级元素也设置成行内块元素就没问题了。

另外，并不是说，不允许行内块元素内嵌块级元素，也是可以的。

8.浮动 float

float 属性值通常会用到这两个：left right

浏览器默认是按照标准文档流从上到下，从左到右布局绘制各个元素，此时这些元素可以说位于同一个层面，但当碰到元素设置了 float 属性时，会将这个元素以当前绘制的位置抽离到新的层面上进行布局。

就像单词直译过来：浮动

也就是让这个元素浮在标准文档流上面。

前端入门4-CSS属性样式表

浏览器绘制这个网页时，按照文档流顺序，先在网页第一行左边开始处理 div1 元素，发现它的一个浮动元素，则将其抽离到另一个层面，浮动在文档流上面。

然后它继续处理 div2 元素，因为之前处理的 div1 元素是浮动元素，不占用文档流，所以此时仍旧是在第一行左边绘制 div2 元素，发现它是一个块级元素，所以让其霸占一整行。

所以，此时可以看到 div1 浮在 div2 上面的效果。

紧接着，继续处理 div3 元素，因此之前 div2 块级元素已经霸占了第一行了，所以此时是在第二行处理 div3 元素，发现它也是一个浮动元素，便以当前位置将其抽离到另一层面绘制。

所以此时看到的效果就是，浮动元素 div3 是在块级元素 div2 下。

继续往下处理，如果发现的还是浮动元素，因为所有的浮动元素都处理同一层面，所有的文档流元素都处于一个层面，所有浮动元素 div4 并不会跟 div3 发生重叠，而是贴着它。

如果接下去处理的元素是块级元素，那么此时的效果会是怎样的呢？

如果接下去是块级元素，那么它就会是绘制在浮动元素 div3 和 dive4 下面，呈现出重叠的效果。

但这里需要注意一点，虽然浮动元素会造成重叠的现象，但这只是正常的文档流的元素盒子被浮动元素压住了，但文档流元素的文本内容会自动围绕在浮动元素周围，就像上图中块级元素四个字并没有被覆盖住。

也就是说，浮动元素并不会造成文档流的内容被覆盖的情况，反而它会影响到它之后文档流中元素的内容区域的显示排版。如果不想让后面的元素受到浮动元素的影响，那么就要进行浮动清除处理。

另外，不考虑嵌套元素的话，兄弟元素之间，如果处于同一层面，是不会有重叠现象的。

浮动清除

由于浮动最初设计是为了让文字可以围绕在图片周围，因此，浮动元素后面的非浮动元素会自动围绕着浮动元素进行包装。而如果我们想让浮动元素之后的元素另起一行，从新的位置开始布局，那么就要进行浮动的清除。

另外，浮动元素之后的浮动元素也会受到它的影响，比如设置了 float:left，那么这个元素要浮动的靠左的位置会受到前面已经靠左浮动的元素的影响。

如果不想让当前的浮动元素受到之前浮动元素的影响，那么也要进行浮动清除的处理，方式有几种，每种有自己的适用场景，了解下即可，后续写多了，自然就懂了。

  • clear: both 表示当前元素不受之前浮动元素的影响
  • 隔墙法（在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。本质上也是clear:both）

浮动的不足

浮动虽然好用，既可以实现文字围绕的效果，又可以实现多列并排的布局，但它也存在一些不足的地方，上面说的浮动清除是其中一点，还有一些问题，如下：

  • 整个宽度可能难以计算

​ 这是因为多个浮动元素之间并排显示的前提的有足够的空间让这些元素并排，所以通常对于浮动元素的宽度设置是通过百分比来设置，确保多个并排的元素即使窗口发生变化仍旧可以并排布局。

​ 但，如果元素还需要进行内边距，外边距的设置，边框的设置，因为这些大小都算在盒子的总宽度中，那么最终盒子的大小就变得很难确定，有可能导致某个浮动元素被挤到下一行去。

​ 有个方法可以解决，修改 box-sizing:border-box，让 width 就是盒子总宽度，当设置了边距时，会自动减少相应的内容区域。但如果页面使用不同类型的 box-sizing，会使 CSS 的代码阅读变得很杂乱。

  • 浮动元素之后的元素设置 margin 失效

​ 非浮动元素的外边距不能用于它们和浮动元素之间来创建空间，通常我们再浮动元素之后的非浮动元素会进行浮动清除，顺便设置外边距来创建间隔空间，但这时会发现这个间隔空间失效。解决方法可以在这中间插一个空的元素，在这个元素里清除浮动，也就是所说的隔墙法。

9.位置 position

position 属性值有三个：absolute, relative, fixed

三种虽然是不同的定位模式，但其实说白了，就是参考点不同。

也都是通过 left, top, right, bottom 来根据参考掉调整位置。

releative 相对定位

相对定位并不是相对于父元素，而是相对于该元素原本所应该在的位置作为参考点。

这点跟 Android 中的 ReleativeLayout 布局不一样，需要注意一下。

另外，相对定位并不会改变元素在文档流中的位置，也就是这个元素原本占据哪个坑，通过相对定位微调之后，仍占据那个坑，只是视觉上它发生了移动而已。有点类似 Android 中的 View 动画。

应用场景：

  • 微调
  • 让后代元素可以使用绝对定位

通常都是用来给后代使用绝对定位的，因为固定定位和绝对定位都会导致该元素从文档流中脱离，就像浮动元素那样，不再占用文档流的坑位。

而相对定位并不会，所以通常父类元素设置了相对定位，而让后代元素使用绝对定位，这样可以让后代元素可以脱离文档流，达到压盖的效果，同时还可以受限于父类元素的范围管控。

absolute 绝对定位

参考的对象是父类或祖先元素中有使用了position的最近一个元素。也就是说在父类元素中，不管是使用了相对定位，绝对定位，固定定位之后，都可以用来作为后代绝对定位的参考元素。

但通常都是使用子绝父相的模式，其他模式并没有什么意义。

参考的元素决定了之后，参考点的选取还分两种情况，参考元素的左上角或者左下角。

如果使用了 top 来调整位置，那么参考点就是参考元素的左上角

如果使用了 bottom 来调整位置，那么参考点就是参考元素首屏页面的左下角

为什么强调首屏，因为参考元素的大小可能是超出一个屏幕的，bottom 并不是说参考元素的左下角坐标，也不是当前页面参考元素的左下角坐标，而是首屏状态时，也可以理解成，没有发生滑动前，参考元素在当前页面的左下角坐标作为参考点。

举个例子：

前端入门4-CSS属性样式表

另外，有点需要注意下，绝对定位的元素，因为其已经从文档流中抽离，因此就不存在什么行内元素、块级元素的限制了。大小就是根据设置的宽高、位置就是根据参考点进行调整后进行布局绘制。

而如果没有使用 position 属性，元素默认是文档流处理的，此时的布局绘制方式就只能按照文档流的规则来，即行内元素、块级元素这些特性。

因为绝对定位是将元素脱离出标准文档流，那么绝对定位的元素显示与否，并不会影响到原本的文档流元素，所以，通常一些弹窗框，弹窗控制面板，可在页面上任意拖放的元素等都会通过绝对定位来做。

应用：

  • 弹窗框
  • 压盖（角标之类）

fixed 固定定位

固定定位参考点就是浏览器的左上角，不管页面如何发生滑动，元素显示的位置都没有发生改变。

应用：

  • 网页右下角的返回顶部按钮

  • 顶部导航栏

z-index

这个属性只有当使用了 position 的元素才会生效，其他元素设置了这个属性没有什么意义。

这个属性其实就是用于当元素发生重叠时，决定由谁盖在上面，默认值为0，值越大，越上层。

而会发生元素重叠的现象也就只有使用了 position 调整了元素的位置，以及浮动元素两种场景。正常的文档流方式布局绘制元素是不会出现元素重叠，当然如果是嵌套的元素，层级关系也早就确定了，也没必要通过这个属性来调整了。

浮动元素造成的重叠只是盒子上的重叠，并不会造成元素内容上的重叠，那么也就没有使用 z-index 的必要，因为要呈现的内容并不会被覆盖。

总结一下，这个属性有几个特性：

  • 属性值大的位于上层，属性值小的位于下层
  • z-index 值没有单位，就是一个正整数。默认的 z-index 值是0
  • 如果大家都没有 z-index 值，或者 z-index 值一样，那么在 HTML 代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素
  • 只有定位了的元素，才能有 z-index 值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用 z-index 值。而浮动的元素不能用
  • 从父现象：父亲怂了，儿子再牛逼也没用。意思是，如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层。

大家好，我是 dasu，欢迎关注我的公众号（dasuAndroidTv），如果你觉得本篇内容有帮助到你，可以转载但记得要关注，要标明原文哦，谢谢支持~

前端入门4-CSS属性样式表

上一篇：.net core获取服务器本地IP及Request访问端口


下一篇：SQL注入获取Sa账号密码