前端学习-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 Hexo IDEA IPA JavaScript jsDeliver JS樱花特效 JVM Linux markdown Maven MyBatis MyBatis-plus MySQL Pictures Sakura SEO shadowrocket Spring Boot Spring Cloud Spring Cloud Alibaba SpringMVC SSR Thymeleaf V2ray Vue Web WebSocket Wechat Social WordPress Yoast SEO 代理 分页 图床 小幸运 苹果iOS国外账号 苹果IOS账号