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,使其原位置也保留在原文档中, 子级元素便可 定义为绝对定位,可根据父级元素的位置进行定位。