css重点掌握

一、布局

1、盒模型

外边距->边界->内部填充->内容；

(margin, border, padding, content)

通常定义width和height是内容的宽高；

2、定位(position)

• static: 默认的位置，正常的位置；
• relative: 相对其正常位置的定位；
• absolute: 相对最近的已定位的父元素，如果没有则相对于html；
• fixed: 相对于浏览器窗口是固定值；
• sticky: 依赖用户的滚动行为，当页面在目标区域时，相当于relative定位，当内容滚动超出目标区域时，相当于fixed定位;

z-index指定元素堆叠顺序（默认为0，正数表示离用户近，负数表示远离用户；注意仅在有position的元素上有效）；

3、浮动(float)

float指定元素浮动方向：

• left
• right
• inherit
• none

clear指定元素周围哪个方向不允许有浮动：

• left
• right
• both
• inherit
• none

4、flex布局

使用flex布局，在style中记得写：

display: flex;

具体见我的[flex布局学习](https://blog.csdn.net/cjn1997/article/details/113564916)博客！

 

二、响应式设计

1、什么是响应式设计？

个人理解，同一个网页在屏幕大小不同的电脑、平板、手机等电子设备上可以适应设备大小，合理的展示网页内容；

2、使用

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
* {
    box-sizing: border-box;
}

</style>

@media 媒体查询，针对不同的媒体有不同的媒体类型。

3、概念

viewport: 用户网页的可视区域；对于手机浏览器，viewport通常比手机的屏幕宽度大，这样没有给手机适配的网页也可以通过缩放查看。

 

三、px, em, vw, vh等的区别

参考：https://www.cnblogs.com/theblogs/p/10516098.html

 

四、选择器、伪类、伪元素

1、选择器

（1）id选择器：#id

（2）类选择器：.class

（3）属性选择器：input[type="text"]

（4）组合选择符：

• 后代选择器(以空格分隔)
• 子元素选择器(以大于 > 号分隔）
• 相邻兄弟选择器（以加号 + 分隔）
• 普通兄弟选择器（以波浪号 ～ 分隔）

2、伪类、伪元素

为选择器添加某些特定的效果。

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。