CSS常用知识

向右看齐 2022-03-25 19:36 322阅读 0赞

# css选择器 #

## 兄弟元素选择器 ##

*  ‘+’ 可以选中一个元素紧挨的兄弟元素
 *  ‘~’ 可以选中一个元素后面的所有兄弟元素

## 伪类 ##

### 锚伪类 ###

*  :link() 未访问对的链接
 *  :visited() 已访问的链接
 *  :hover() 鼠标移到链接上
 *  :active() 选中的链接
 *  优先级一样 会使用靠后的优先级

### 否定伪类 ###

*  not:() 可以在已选择的元素中提出某些元素

## 样式的继承 ##

*  利用继承可以将一些基本样式设置在祖先元素，所有的后代元素都会应用
 *  并不是所有样式都会被继承，例如所有背景相关的、边框相关的、定位相关的样式都不会被继承

## 选择器的优先级 ##

*  !important ∞
 *  内联样式 1000
 *  id选择器 100
 *  类和伪类 10
 *  元素选择器 1
 *  通配符选择器 0
 *  继承的样式 没有优先级
 *  如果选择器相同、则使用靠后的选择器

--------------------

# css单位 #

## 长度单位 ##

### px ###

*  像素，一个像素相当于屏幕的一个小点（像素点）
 *  固定的长度单位

### % ###

*  可以将单位设置成百分比，则属性为父元素的百分比

### em ###

*  和百分比类似，相对于当前元素的字体大小判断
 *  1 em = 1 font-size
 *  使用em时，当字体大小发生改变时，em也会随之改变

## 文字属性 ##

### font-size ###

*  设置文字的大小
 *  并不是文字本身的大小
 *  是文字所在的空格的大小

### font-family ###

*  可以指定文字的字体
 *  当使用某种字体时， 如果浏览器支持，则使用，不支持则使用默认字体

### 字体分类 ###

*  serif 衬线字体 有笔锋
 *  sans-serif 非衬线字体 字体粗细相同
 *  设置字体为大分类，浏览器会自动选择字体，并应用样式

### line-height ###

*  在css中不能设置行间距
 *  行间距 = 行高 - 字体大小

### text-indent ###

*  首行缩进
 *  设置em
 *  正向左 负向右
 *  通过这种方式可以隐藏文字

### text-align ###

*  设置文本 对齐样式
 *  left right center justify(两侧对齐)

--------------------

# 盒子模型 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4MTM1Nw_size_16_color_FFFFFF_t_70]  
w3c盒子模型

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4MTM1Nw_size_16_color_FFFFFF_t_70]: /images/20220325/7e9afd43186d41f1a696b0430e66806c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，322人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript（2）jQuery常用操作+CSS相关知识

1. 只需等待网页中的DOM结构加载完毕，就能执行包裹的代码 $(document).ready(); 简写格式： $(function()\{\}); // 必须等

àì夳堔傛蜴生んèń/ 2024年02月17日 21:57/ 0 赞/ 84 阅读

相关 CSS3常用基本知识总结

CSS3核心知识总结一、渐变 1.1线性渐变渐变是基于background-image来完成的，线性渐变需要设置一个起始点和方向（指定为一个角度），换需要

小咪咪/ 2022年12月18日 00:50/ 0 赞/ 241 阅读

相关 CSS常用知识（后端开发必备）

目录一、CSS和HTML的关系二、CSS的三种使用方式（一）直接在属性上加 style="属性：

ゝ一世哀愁。/ 2022年10月21日 03:44/ 0 赞/ 329 阅读

相关 CSS常用文档

布局 [flex：弹性][flex] [float：浮动][float] [clear：清除浮动][clear] [@media：媒体查询][me

你的名字/ 2022年09月02日 14:43/ 0 赞/ 199 阅读

相关 CSS常用布局

页面结构布局 [百分比布局][Link 1] [弹性盒布局][Link 2] [分栏布局][Link 3] [响应式布局][Link 4] [文档

淩亂°似流年/ 2022年08月20日 14:12/ 0 赞/ 236 阅读

相关 CSS常用样式

图片垂直居中 .img-box { height: 130px; line-height:130px; } im

墨蓝/ 2022年04月08日 08:59/ 0 赞/ 335 阅读

相关 CSS常用知识

css选择器兄弟元素选择器 ‘+’ 可以选中一个元素紧挨的兄弟元素 ‘~’ 可以选中一个元素后面的所有兄弟元素伪类锚伪类 :l

向右看齐/ 2022年03月25日 19:36/ 0 赞/ 323 阅读

相关 002.css常用基础知识点

CSS初识 CSS(Cascading Style Sheets) 美化样式 CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容

秒速五厘米/ 2021年10月06日 12:56/ 0 赞/ 436 阅读

相关常用CSS技巧

11.17 CSS英文命名在写CSS的时候，经常为一些名字而发愁，比如说菜单后面的背景要用什么词来表示呢？大家都知道，菜单一般用menu来表示，那么菜单后面的背景我会用me

叁歲伎倆/ 2021年09月10日 03:32/ 0 赞/ 595 阅读

相关 css常用知识点

a标签中有四个： link、visited、hover、active 未移入a标签链接时：link 移入a标签链接时：link、hover

向右看齐/ 2021年08月19日 20:31/ 0 赞/ 658 阅读