css学习归纳总结

超、凢脫俗 2022-03-26 09:30 224阅读 0赞

我们知道网页开发，无非就是h5页面+css+js，前面写了一篇文章总结了js，这里再来总结下css，算是为自己目前的网页开发知识做一个系统性的总结。

我们知道h5标签是一些可显示的控件，这些控件显示在什么位置，怎么显示则是通过css来进行控制，至于页面布局首先是放在什么位置的问题，这里就先来看看页面布局的问题。

**1****、页面布局**

页面布局涉及到的知识点比较多，比如盒子模型、position、display等

**1.1** **盒子模型**

盒子模型是用来理解padding、margin以及border这几个元素概念的模型，一个盒子模型就是一个标签所占页面的大小以及和其它标签之间的相对位置。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvYm81NTM0NDM_size_16_color_FFFFFF_t_70][]

最中心的是标签content，比如

<div>hello world</div>

*  1

这个代码中的hello world字符就是div标签的content，而这个内容就是盒子模型中最中心得蓝色部分所占的位置，其外围的绿色部分表示content和border之间的距离（这个距离就叫做padding），这个里有四个方向上的距离，分别是左上右下四个方向，即padding-left、padding-top、padding-right、padding-bottom。

border区域代表了标签的边框，当然是边框就有样式（实线、双线、虚线等）、宽度、颜色、圆角等属性可以设置。

margin代表着标签和其它的标签之间的相对距离，自然也有左上右下几个方向的距离可以设置。

**1.2** **定位机制**

css的定位机制包括三种类型，即普通流、浮动和定位。

什么叫做普通流呢，普通流就是一种常规的从上到下从左到右的一种定排版规则。

而浮动就是指使用**float**(float：left/right/none)属性来使标签处于一种漂浮排版的状态。与浮动相关的属性出了float还有**clear**，clear属性表示对应元素除去浮动的特性。

定位用的就比较多了，定位使用**position**关键字来表示，一般会结合left、top、right、bottom、zindex这些属性来一起使用。

<table> 
 <thead> 
 <tr> 
 <td style="border-color:#dddddd;"> position值 </td> 
 <td style="border-color:#dddddd;"> 描述 </td> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td style="border-color:#dddddd;"> static </td> 
 <td> 默认值标签遵循正常的文档流 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#dddddd;"> relative </td> 
 <td> 相对定位元素，相对于其正常位置进行定位，遵从正常的文档流 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#dddddd;"> absolute </td> 
 <td> 绝对元素定位脱离正常的文档流 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#dddddd;"> fixed </td> 
 <td> 局对元素定位，固定在浏览器某处 </td> 
 </tr> 
 </tbody> 
</table>

如上面所说的position常常结合left、top等属性来一起使用

h2\{

position:absolute;

left:100px;

top:150px

以上代码表示h2标签绝对定位，并且处于距离页面左侧 100px，距离页面顶部 150px的位置。

**1.3****、块级元素和内联元素**

css中存在快级元素和内联元素的概念，什么是块级元素呢，简单的说独占一行的元素就叫做块级元素。什么叫内联元素呢，内联元素就是不能独占一行的元素。当然这种区分方式够粗暴的，css中通过**display**这个属性来设置一个标签到底是内联还是块级元素（每个标签都有自己的默认内联或者块级元素类型，display属性点额作用是去改变对应标签的内联块级属性）。

<table> 
 <thead> 
 <tr> 
 <td style="border-color:#dddddd;"> display属性值 </td> 
 <td style="border-color:#dddddd;"> 说明 </td> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td style="border-color:#dddddd;"> block </td> 
 <td> 表示块级元素，标签独占一行，并且可以设置自己的width、height属性、margin和padding属性也可正常设置。 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#dddddd;"> inline </td> 
 <td> 不会独占一行，相邻内联元素排在同一行，知道排不下才换行,其宽度和高度随内容变化，也即是width、height属性设置无效，margin和padding左右方向设置有效，竖直方向设置无效。 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#dddddd;"> inline-block </td> 
 <td> 将对象呈现为内联对象，也就是不会独占一行，但是width、height、margin、padding可以正常设置。 </td> 
 </tr> 
 </tbody> 
</table>

到这里页面布局这一块介绍了盒子模型、定位机制、内联及块级元素三个知识点，通过这三个知识点，我们知道怎么去设置一个元素在页面中的位置，那么肯定有同学会说，这个设置的属性我是知道了，那么我怎么去选择设置的标签呢，这就设计到选择择器的知识了。

**2****、选择器**

我们用css进行样式设置，首先要做的是指定需要设置样式的标签，一般有三种方式可以用来指定标签，即标签选择器、类选择器和id选择器。

**2.1****、标签选择器**

标签选择器直接指定css样式所适用的标签

div \{

position:absolute;

left: 100px;

top: 150px;

**2.2****、类选择器**

类选择器通过加.classname方式来声明类样式，然后在标签中通过class属性来使用对应的类样式。

.basic-style\{

width: 100px;

height: 100px;

color: \#000;

这里声明了一个叫做basic-style的类样式，可以在h5代码中通过

<div class="basic-style">hello yoryky</div>

赋值class属性的方式对标签样式进行设置。

**2.3****、id选择器**

id选择器通过\#idname的方式来声明样式

\#basic-div\{

width: 100px;

height: 100px;

color: \#000;

在h5中通过标签的id号，来判断样式是否适用该标签

<div id="basic-div">hello yoryky</div>

类样式和id样式的区别在于，一个类样式可以通过class作用于很多标签，而id样式则由于h5页中id号的唯一性问题，一个id样式只能用于一个标签，同时，一个标签的class属性中可以添加多个类样式。

当然选择则还有很多中，包括属性选择器、父子选择器等等，这里就不一一来说，有一种比较特别的选择器叫做伪类选择器，由于其有动画效果，故将其放在css动画这一小节来进行讲解。

**3****、css中的动画**

利用css实现动画效果的方式主要有三种，及上一小节最后提到的伪类选择器、transform属性以及transition属性。

**3.1****、伪类选择器**

伪类选择器通过 **标签：状态** 的方式来实现，比如 a：hover的方式表示鼠标在a标签上面悬停的情况下的样式，这中间切换状态时会有一个样式的切换，所以会出现一个动画效果。

常用的状态有

<table> 
 <thead> 
 <tr> 
 <td style="border-color:#dddddd;"> 状态名 </td> 
 <td style="border-color:#dddddd;"> 说明 </td> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td style="border-color:#dddddd;"> hover </td> 
 <td> 表示鼠标悬停在标签上的状态，可用于所有的标签 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#dddddd;"> link </td> 
 <td> 表示链接未访问的状态，用于a标签，即a:link这么用 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#dddddd;"> active </td> 
 <td> 表示在链接上点下鼠标的状态，用于a标签，a:active这么用 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#dddddd;"> visited </td> 
 <td> 表示链接已经被访问的状态，用于a标签，a:visited这么用 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#dddddd;"> before </td> 
 <td> 表示标签内容之前添加内容的状态，用于p标签，p:before这么用 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#dddddd;"> after </td> 
 <td> 表示在标签内容之后添加内容状态，用于p标签，p:after这么用 </td> 
 </tr> 
 </tbody> 
</table>

p:before\{

content:"台词：";

这里设置了一个p:before的伪类选择器，在h5中添加p标签的使用

//这个p标签将显示“台词：我是唐老鸭。”

我是唐老鸭。

**3.2****、transform属性使用**

transform属性用来设置标签的转换和变形，其可以对应着一些关键字来对变形的方式进行设置

<table> 
 <thead> 
 <tr> 
 <td style="border-color:#dddddd;"> 关键字 </td> 
 <td style="border-color:#dddddd;"> 说明 </td> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td style="border-color:#dddddd;"> origin </td> 
 <td> 定义旋转基点（left top center right bottom 坐标值） </td> 
 </tr> 
 <tr> 
 <td style="border-color:#dddddd;"> rotate </td> 
 <td> 定义标签的旋转角度 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#dddddd;"> skew </td> 
 <td> 定义标签的扭曲 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#dddddd;"> scale </td> 
 <td> 定义标签的缩放，包括横向缩放和纵向缩放 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#dddddd;"> translate </td> 
 <td> 定义标签的移动方式，包括了水平和竖直方向的移动 </td> 
 </tr> 
 </tbody> 
</table>

可以通过下面的代码来测试transform的不同关键字作用在div标签上的效果。

div \{

border: 1px solid black;

height: 30px;

width: 30px;

background-color: yellow;

*/\*transform-origin: 50px 50px;\*/*

transform-origin: left;

transform: rotate(50deg);

*/\*transform: skew(50deg,50deg);\*/*

*/\*transform: translate(50px,50px);\*/*

*/\*transform: scale(2);\*/*

**3.3****、transition属性使用**

transition这个属性是用来表示平滑过渡的，这里的平滑过渡不单单想tranform那样只是作用在标签的几何形状上，这里的平滑过渡还包括了颜色、长宽、透明度、阴影等等其它属性的平滑过渡。

下面展示一段css代码看看如何使用transition这个属性

div

width:100px;

height:100px;

background:blue;

transition:width 2s;

div:hover

width:300px;

这个端css代码作用于div标签，其中的transition:width属平滑性表示将对div标签的宽度进行过渡，过渡的时间是两秒钟，过渡动画由鼠标悬停开始，最后div标签会在两秒内宽度平滑的变为300px。

**4****、css中的其它属性**

css中还有很多其它属性比较常用，这里直接逐个进行简单介绍吧。

**4.1****、颜色属性**

color

*  HEX（十六进制色：color: \#FFFF00 –> 缩写：\#FF0）
 *  RGB（红绿蓝，使用方式：color:rgb(255,255,0)或者color:rgb(100%,100%,0%)）
 *  RGBA（红绿蓝透明度，A是透明度在0~1之间取值。使用方式：color:rgba(255,255,0,0.5)）
 *  HSL（CSS3有效,H表示色调，S表示饱和度，L表示亮度，使用方式：color:hsl(360,100%,50%)）

transparent

*  全透明，使用方式：color: transparent

opacity

*  元素的透明度，语法：opacity: 0.5;
 *  属性值在0.0到1.0范围内，0表示透明，1表示不透明。
 *  filter滤镜属性（只适用于早期的IE浏览器，语法：filter:alpha(opacity:20);）。

**4.2****、 字体属性**

font-style: 用于规定斜体文本

*  normal 文本正常显示
 *  italic 文本斜体显示
 *  oblique 文本倾斜显示

font-weight：设置字体的粗细

*  normal（默认）
 *  bold（加粗）
 *  bolder（相当于*strong*和*b*标签）
 *  lighter （常规）
 *  100 ~ 900 整百（400=normal，700=bold）

font-size: 设置字体的大小

*  默认值：medium
 *  *absolute-size*可选参数值：xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
 *  *relative-size*相对于父标签中字体的尺寸进行调节。可选参数值：smaller、 larger
 *  *percentage*百分比指定文字大小。
 *  *length*用长度值指定文字大小，不允许负值。

font-family：字体名称

*  使用逗号隔开多种字体（优先级从前向后，如果系统中没有找到当前字体，则往后面寻找）

font：简写属性

*  语法：font：字体大小/行高 字体;（字体要在最后）

**4.3****、文本属性**

white-space: 设置元素中空白的处理方式

*  normal：默认处理方式。
 *  pre：保留空格，当文字超出边界时不换行
 *  nowrap：不保留空格，强制在同一行内显示所有文本，直到文本结束或者碰到br标签
 *  pre-wrap：保留空格，当文字碰到边界时换行
 *  pre-line：不保留空格，保留文字的换行，当文字碰到边界时换行

direction: 规定文本的方向

*  ltr 默认，文本方向从左到右。
 *  rtl 文本方向从右到左。

text-align: 文本的水平对齐方式

*  left
 *  center
 *  right

line-height: 文本行高

*  normal 默认

vertical-align: 文本所在行高的垂直对齐方式

*  baseline 默认
 *  sub 垂直对齐文本的下标，和标签一样的效果
 *  super 垂直对齐文本的上标，和标签一样的效果
 *  top 对象的顶端与所在容器的顶端对齐
 *  text-top 对象的顶端与所在行文字顶端对齐
 *  middle 元素对象基于基线垂直对齐
 *  bottom 对象的底端与所在行的文字底部对齐
 *  text-bottom 对象的底端与所在行文字的底端对齐

text-indent: 文本缩进

letter-spacing: 添加字母之间的空白

word-spacing: 添加每个单词之间的空白

text-transform: 属性控制文本的大小写

*  capitalize 文本中的每个单词以大写字母开头。
 *  uppercase 定义仅有大写字母。
 *  lowercase 定义仅有小写字母。

text-overflow: 文本溢出样式

*  clip 修剪文本。
 *  ellipsis 显示省略符号…来代表被修剪的文本。
 *  string 使用给定的字符串来代表被修剪的文本

text-decoration: 文本的装饰

*  none 默认。
 *  underline 下划线。
 *  overline 上划线。
 *  line-through 中线。

text-shadow：文本阴影

*  第一个参数是左右位置
 *  第二个参数是上下位置
 *  第三个参数是虚化效果
 *  第四个参数是颜色
 *  text-shadow: 5px 5px 5px \#888;

word-wrap：自动换行

*  word-wrap: break-word;

**4.4****、背景属性**

background-color: 背景颜色

background-image 设置图像为背景

*  url(“[http://images.cnblogs.com/cnblogs\_com/suoning/845162/o\_ns.png][http_images.cnblogs.com_cnblogs_com_suoning_845162_o_ns.png]“); 图片地址
 *  background-image:linear-gradient(green,blue,yellow,red,black); 颜色渐变效果

background-position 设置背景图像的位置坐标

*  background-position: center center; 图片置中，x轴center，y轴center
 *  1px -195px 截取图片某部分，分别代表坐标x，y轴

background-repeat 设置背景图像不重复平铺

*  no-repeat 设置图像不重复，常用
 *  round 自动缩放直到适应并填充满整个容器
 *  space 以相同的间距平铺且填充满整个容器

background-attachment 背景图像是否固定或者随着页面的其余部分滚动

background 简写

*  background: url(“o\_ns.png”) no-repeat 0 -196px;
 *  background: url(“o\_ns.png”) no-repeat center bottom 15px;
 *  background: url(“o\_ns.png”) no-repeat left 30px bottom 15px;

**4.5****、列表属性**

list-style-type: 列表项标志的类型

*  none 去除标志
 *  decimal-leading-zero; 02.
 *  square; 方框
 *  circle; 空心圆
 *  upper-alph; & disc; 实心圆

list-style-image：将图象设置为列表项标志

list-style-position：列表项标志的位置

*  inside
 *  outside

**4.6****、边框属性**

border-style：边框样式

*  solid 默认，实线
 *  double 双线
 *  dotted 点状线条
 *  dashed 虚线

border-color：边框颜色

border-width：边框宽度

border-radius：圆角

*  1个参数：四个角都应用
 *  2个参数：第一个参数应用于 左上、右下；第二个参数应用于 左下、右上
 *  3个参数：第一个参数应用于 左上；第二个参数应用于 左下、右上；第三个参数应用于右下
 *  4个参数：左上、右上、右下、左下（顺时针

border: 简写

*  border: 2px yellow solid;

box-shadow：边框阴影

*  第一个参数是左右位置
 *  第二个参数是上下位置
 *  第三个参数是虚化效果
 *  第四个参数是颜色
 *  box-shadow: 10px 10px 5px \#888;

**4.7****、图像裁剪**

rect 剪裁定位元素：

*  auto 默认值，无剪切
 *  上-右-下-左（顺时针）的顺序提供四个偏移值
 *  区域外的部分是透明的
 *  必须指定 position:absolute;
 *  例：clip:rect(0px,60px,200px,0px);

**4.8****、overflow属性**

overflow属性用来设置当对象的内容超过其指定高度及宽度时如何显示内容

*  visible 默认值，内容不会被修剪，会呈现在元素框之外。
 *  hidden 内容会被修剪，并且其余内容是不可见的。
 *  scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
 *  auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

对属性的介绍就到这里，当然很多属性怎么使用都是要靠自己去实践的，同时这所列举出来也并非所有css中的属性，以后有机会便可更多的在本文中进行完善。

**5****、参考文献**

1、[CSS总结][CSS]

2、[block，inline和inline-block概念和区别][block_inline_inline-block]

3、[CSS文档流][CSS 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvYm81NTM0NDM_size_16_color_FFFFFF_t_70]: /images/20220326/d8bbbd66767d4be1b6f5fbd319bc81bb.png
[http_images.cnblogs.com_cnblogs_com_suoning_845162_o_ns.png]: http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png
[CSS]: https://www.cnblogs.com/caoyc/p/5757005.html
[block_inline_inline-block]: https://www.cnblogs.com/KeithWang/p/3139517.html
[CSS 1]: http://blog.sina.com.cn/s/blog_68150d100101229a.html