FeliksLv的博客

前端入门笔记

2021/1/23 htmlcss

教程地址 (opens new window)

# 块级元素和内联元素

# 块级元素

块级元素的特点：

  1. 自己独占一行。
  2. 高度、宽度、内外边距都可以控制。
  3. 宽度默认是容器（父级宽度）的100%。
  4. 是一个容器及盒子，里面可以放行内或者块级元素。

注意：

  • 文字类的元素不能使用块级元素。
  • <p>标签里主要放文字，所以它里面不能放块级元素。
  • 同理<h1>~<h6>等都是文字类块级元素，里面也不能放其他块级元素`

# 行内元素

行内元素特点：

  1. 相邻行内元素在一行上，一行可以显示多个。
  2. 高宽直接设置是无效的。
  3. 默认宽度就是它本身内容的宽度。
  4. 行内元素只能容纳文本或其他行内元素。

注意：

  • 链接里面不能再放链接
  • 特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全。

行内（内联）元素列表

  • b, big, i, small, tt
  • abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
  • a, bdo, br, img, map, object, q, script, span, sub, sup
  • button, input, label, select, textarea

# 行内块元素

同时具有块元素和行内元素的特点。例如<img/>、<input/>、 <td>。

特点：

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

# 元素显示模式的转换

例如:增加链接的处罚范围。

/*转换为块级元素*/
display:block;
/*转换为行内元素*/
display:inline;
/*转换为行内块元素*/
display:inline-block;
1
2
3
4
5
6

# 文字垂直居中

让文字的行高等于盒子的高度

# 背景

1.背景图片

background-image: none | url(url)
1

2.背景平铺

默认情况下，背景图片是平铺的。

background-repeat: repeat | no-repeat | repeat-x | repeat-y
1

3.背景图片位置

background-position: x y;
1
  • 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一样。
  • 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。

4.背景图像固定（背景附着）

background-attachment : scroll | fixed
1

5.背景复合写法

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；

6.背景透明写法

background-color： rgba(r, g, b, a);
1

a是指alpha透明度，取值范围在0～1之间。

# CSS三大特性

# 层叠性

相同选择器设置相同的样式，此时一样样式就会覆盖（层叠）另一个冲突的样式。

层叠性原则：

  • 样式冲突，遵循的原则是就近原则，哪个样子离结构近，就执行哪个样式
  • 样式不冲突就不会层叠

# 继承性

子标签会继承父标签的某些样式，如文本颜色和字号

特殊情况：行高的继承

body{
  font:12px/1.5;
}
1
2
3
  • 行高可以跟单位也可以不跟单位
  • 如果子元素没有设置行高，则会继承父元素的行高为1.5
  • 此时子元素行高：当前子元素文字大小*1.5

# 优先级

选择器 选择器权重
继承或者 * 0,0,0,0
元素选择器 0,0,0,1
类选择器，伪类选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式style="" 1,0,0,0
!important ∞
  • 等级判断从左到右
  • 继承的权重为0，如果该元素没有直接选中，不管父元素权重有多高，子元素得到的权重都是0

# 权重叠加

复合选择器会有权重叠加的问题，需要计算权重。

# CSS盒子模型

盒子模型：边框，内外边距和实际内容

# 边框

border : border-width || border-style || border-color
1

合并相连边框

border-collapse: collapse;
1

# 内边距

1个值代表上下左右都有5px内边距

padding: 5px;
1

2个值代表上下内边距5px，左右10px

padding: 5px 10px;
1

3个值代表上内边距有5px，左右10px，下20px

padding: 5px 10px 20px;
1

4个值代表上右下左

padding: 5px 10px 20px 30px;
1

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

# 外边距

外边距实现水平居中

  1. 盒子必须指定了宽度
  2. 盒子左右的外边距都设置为auto
margin: 0 auto;
1

以上是让块级元素水平居中，行内元素或者行内块元素水平居中可以给其父元素添加text-align:center即可。

# 圆角边框

border-radius:length;
1
  • 参数值可以是数值或者百分比的形式
  • 如果是正方形，想要设置一个圆，把数值修改为高度或者宽度的一半即可，或者直接写50%
  • 如果是矩形，设置高度的一半（试一试看效果）
  • 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

# 阴影

盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;
1
  • h-shadow 必需。水平阴影的位置，允许负值。
  • v-shadow 必需。垂直阴影的位置，允许负值。
  • blur 可选，模糊距离。
  • spread 可选，阴影的尺寸。
  • color 阴影颜色，可选。
  • inset 可选，将外部阴影(outset)改成内部阴影。

默认是外部阴影(outset)，但是不能写outset，写了会让阴影失效。

text-shadow: h-shadow v-shadow blur color;
1
  • h-shadow 必需。水平阴影的位置，允许负值。
  • v-shadow 必需。垂直阴影的位置，允许负值。
  • blur 可选，模糊距离。
  • color 阴影颜色，可选。
Last Updated: 2021/5/16 14:25:20