前端学习-CSS篇（一）最近打算重新系统的学习一下css，之前学的有点乱。对css的理解还是不够深刻，导致写样式表的时候出现很多问题。不过一些很基础的这里就忽略了，只记录一些平时用的比较多知识点。

line-height：行间距

这个较为简单，就是行与行之间的间距。一般比当前字体大7-8px即可。

text-align：文本对齐方式

取值：

  1. left：把文本排列到左边。默认值：由浏览器决定。
  2. right：把文本排列到右边。
  3. center：把文本排列到中间。
  4. justify：实现两端对齐文本效果。
  5. inherit：规定应该从父元素继承 text-align 属性的值。

text-indent：首行缩进

text-indent 属性规定文本块中首行文本的缩进。 注释 ：允许使用负值。如果使用负值，那么首行会被缩进到左边。 单位建议使用em

代码示例

<p style="text-indent:2em;font-size:15px">首行缩进为2em</p>

实现效果

首行缩进为2em

letter-spacing：字间距（中文）

代码示例 

<p style="word-spacing:2px">Hello World!(word-spacing:2px)</p>
<p style="word-spacing:8px">Hello World!(word-spacing:8px)</p>

实现效果

这是一个例子(letter-spacing:2px)

这是一个例子(letter-spacing:4px)

word-spacing：词间距（英文）

代码示例

<p style="word-spacing:2px">Hello World!(word-spacing:2px)</p>
<p style="word-spacing:8px">Hello World!(word-spacing:8px)</p>

实现效果

Hello World!(word-spacing:2px)

Hello World!(word-spacing:8px)

颜色的半透明：rgba()

代码示例

<p style="color:rgba(0,0,0,0.2)">这是一个例子(rgba(0,0,0,0.2)</p>

实现效果

这是一个例子(rgba(0,0,0,0.2)

text-shadow：文字阴影

语法

text-shadow: h-shadow v-shadow blur color;

可选属性

  1. h-shadow必需。水平阴影的位置。允许负值。
  2. v-shadow必需。垂直阴影的位置。允许负值。
  3. blur可选。模糊的距离。
  4. color可选。阴影的颜色

代码示例

<p style="text-shadow:5px 5px 3px rgba(0,0,0,0.6);font-size:30px">这是一个例子</p>

实现效果

这是一个例子

文字阴影综合

这是一个例子

block-level：块级元素

每个块级元素通常都会独占一行或者是多行，可以对其单独设置高度,宽度以及对齐等属性。 

常见的块级元素有：<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>

块级元素的特点：

  1. 块级元素会独占一行
  2. 高度，行高，外边距和内边距都可以单独设置
  3. 宽度默认是容器的100%
  4. 可以容纳内联元素和其他的块级元素

inline-level：行内元素

行内元素（内联元素）：不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构。一般不可以设置宽度，高度以及对齐等属性。

常见的行内元素有：<a>,<strong>,<b>,<em>,<del>,<span>等

行内元素的特点 ：

  1. 和相邻的行内元素在一行上
  2. 高度和宽度无效，但是水平方向上的padding和margin可以设置，垂直方向上的无效
  3. 默认的宽度就是它本身的宽度
  4. 行内元素只能容纳纯文本或者是其他的行内元素（a标签除外）

display：显示模式的转换

none此元素不会被显示。
block此元素将显示为块级元素，此元素前后会带有换行符。
inline默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block行内块元素。（CSS2.1 新增的值）
list-item此元素会作为列表显示。
run-in此元素会根据上下文作为块级元素或内联元素显示。

background：背景

background-color背景颜色
background-image背景图片[url()]
background-repeat是否平铺[repeat-x/repeat-y/no-repeat]
background-position背景位置
background-attachment背景固定/滚动 默认scroll（滚动）| fixed（固定）
background-size背景图片的位置 px | cover |contain

标签云

ajax AOP Bootstrap cdn Chevereto CSS Docker Editormd GC Github Hexo IDEA JavaScript jsDeliver JS樱花特效 JVM Linux Live2D markdown Maven MyBatis MyBatis-plus MySQL Navicat Oracle Pictures QQ Sakura SEO Spring Boot Spring Cloud Spring Cloud Alibaba SpringMVC Thymeleaf Vue Web WebSocket Wechat Social WordPress Yoast SEO 代理 分页 图床 小幸运 通信原理