CSS基础汇总

来源：互联网发布：python telnetlib详解编辑：程序博客网时间：2024/06/09 17:18

CSS基础知识汇总：

1、注释

/*注释内容*/（Hbuilder快捷键 Ctrl+/）

注释的作用是方便程序员自己或者他人阅读代码

2、语法

选择器{属性1：值；属性2：值；.....}（属性包括：width height background font-size 等）

3、引入方法及优先级

行内样式：标签内部添加style方法属性

内部样式：在<head>内添加style方法属性(学习常用)

外部样式：另建*.css文件在<head>中用link联结(公司常用)

优先级:就近原则（距离标签最近的先被使用）

4、常用选择器及优先级

元素选择器：对标签进行样式设置

类选择器：在标签内设置类名class="类名" 在css中使用 .类名{ }进行样式设置

id选择器：在标签内设置id名 id=“id名”（唯一不能重复）在css中使用 #id名{ }进行样式设置

交叉选择器：在标签内设置类名class="类名" 在css中使用 tagname.classname {}进行样式设置

群组选择器：多个标签通过，设置相同样式

后代选择器：父类与子类通过空格在css中设置样式

通用选择器：*{ } 设置通用样式

优先级：行内样式>id选择器>类选择器>元素选择器

5、盒子模型

从里到外：内容（width height）

内边距（padding ：上右下左）下无同上左无同右可以简写最小为0

边框（border:粗细样式颜色）三要素缺一不可

外边距（margin：上右下左）同内边距水平居中：margin:0 auto; 外边距值可以为负数

6、浮动

作用：使块级元素处于一行

原理：浮动元素脱离原文档流处于上一层碰到包含框或者浮动框停止浮动

语法：float:left;(向左浮动) float:right;(向右浮动)

7.定位

只要定位就脱离原文档流

（1）默认定位

语法：position:static;

作用：没有定位属性或用于清除定位

（2）相对定位

语法：position:relative;

作用：相对于自身位置进行定位，定位之后保留原位置，其他元素不能占用

（3）绝对定位

语法：position:absolute;

作用：相对于离自己最近的已定位的父级元素进行定位，若无父级元素定位，则根据body进行定位。定位之后不保留原位置，其他元素可占用

（4）固定定位

语法：position:fixed;

作用：相对于浏览器界面进行定位，始终处于浏览器的某个位置

一般情况是绝对定位和相对定位相结合使用，给父级元素相对定位0，使其原位置也保留在原文档中，子级元素便可定义为绝对定位，可根据父级元素的位置进行定位。

阅读全文

0 0