title: css笔记
toc: true
comments: true
tags: CSS
abbrlink: ac1879a7
date: 2021-06-03 15:06:19
categories:
这里记录的是CSS学习笔记 !
(一)CSS初识：
-
概念：Cascading Style Sheet , 层叠样式表
-
作用：
渲染页面效果 -
相对于html标签在样式表现上的优势：
a.功能更丰富，更强大
b.可以将样式和内容（html）分离，页面外观的控制更灵活
c.实现样式复用，使页面的更新和维护更方便(二)CSS语法：
选择器{
style1：val1;
style2：val2;
} ps: css对大小写不敏感
`*选择器：`A.作用：选择（选中）html元素（一个或多个）
B.分类：
a基本选择器
1.通配选择器：* 2.元素（标签）选择器 3.id选择器 4.class类选择器 5.属性选择器[property='value']b群组复合选择器
1. 群组选择器: selector1,selector2,...,selectorN 2. 复合选择器: 复合择器需要同时满足多个条件时使用,selector1[selector2]...[selectorN]c层级选择器
1. 后代选择器：ancestor descendant 2. 孩子选择器：parent > child 3. 相邻兄弟（选择后面的相邻兄弟）选择器：prev + next 4. 通用兄弟（选择后面的所有兄弟）选择器：prev ~ siblingsd伪类选择器 E:val , E代表html
1. 动态伪类选择器 E:link E:visited E:active
E:hover
E:focus-
结构伪类选择器
F E:first-child
F E:last-child
F E:nth-child(n) 选中第n个子元素E
F E:nth-child(odd|even) 选中奇数|偶数行元素## (三)CSS使用样式的3种方式： 1.外部样式：`<link rel="stylesheet" href="css/cssFile.css" />` 2.内部样式：`<style></style>` 3.内联样式：`<p style="color:red" >inner style</P>` ps: 样式优先级
(四)常用样式
1. 文本 color:red;
text-align: center;
text-decoration: line-through;2. 字体 font
font-family: "隶书";
font-size: 20px;3. 背景 background
background-color: ghostwhite;
background-image: url(img/yc.png);
background-repeat:repeat-x;4. box模型：margin、border、padding /*1. 尺寸*/
height: 50px;
width: 50px;
ps: 宽高只对行级元素或浮动元素（float）有效，内联元素是无法设置宽高的。
/*2. 边框*/
border:50px solid red;
border-width: 50px;
border-style:solid ;
border-color: red;
/*3. 内边距*/
padding: 50px;
/*4. 外边距*/
margin: 50px;
/*5. 轮廓：占据margin的位置 */
outline: 20px solid yellow;5. 定位： 5.1 position
。static: 无定位
。relative: 相对自己原有的位置定位，且自己原有的位置依然占有
。absolute: 相对离自己最近的“已定位父元素”进行定位（如果没有已定位的父元素，则相对body进行定位），且自己原有的位置不再占有。
。fixed: 相对于视口进行定位，且自己原有的位置不再占有。
5.2 z-index
设置 "同一父元素下" 的 "已定位子元素"的堆叠顺序；Z-index值越大，元素出现在越上面；
5.3 float浮动 & clear清除浮动
float
float 属性指定一个元素是否应该浮动. 浮动元素不再占有原来的位置。
float = left | right | none
注意：
绝对定位的元素忽略float属性
clear
clear 属性规定元素的哪一侧不允许其他浮动元素。
clear = left | right | both
注意：
clear = right无效：当执行到第二个div要清除右浮动的时候，第三个div并没有被加载，所以它的清除效果也就无效了，于是第三个div依然会紧跟着第二个div。
5.4 可见性
display = block(块级元素) | inline(内联元素) | none(隐藏元素+腾出自己原有的位置)
visibility = visible(可见) | hidden(隐藏元素，自己原有的位置依然占有)
5.5 overflow
visible
hidden
scroll
auto