- 1.CSS是层叠样式表
- 2.作用:
- 实现内容与表现分离
- 提高了代码的可重用性和维护性
- 3.特点:
- 继承性
- 层叠性
- 优先级,相同时--后写生效
- 4.注释
- /* */
- 5.css属性:
- width
- height
- background-color
- float:left/rigth---块级元素同一行显示
- 6.引入方式:
- 行内样式
- 内部样式
- 外部样式
- 导入式@import
- 7.@import和link的区别
- @import先加载HTML文件,再加载css文件,link是html和css同时加载
- @import只能引入css文件,link可引入别的文件
- @import有兼容性
- @import会增加页面http请求
- 当js操作dom时,只能操作link引入的文件
- 8.基础选择器
- 全局:*
- 元素: HTML元素
- 类:.className(类名可以重复)
- ID:#idName(具有唯一性)
- 合并选择器:选择器1,选择器2,。。。{}
- 交集选择器:元素.claaName{}
- 9.选择器优先级
- !important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配符选择器 > 继承 > 浏览器默认属性
- 10.字体属性
- color
- font-size(浏览器支持最小12px,默认为16px)
- font-weight:normal(默认值,不加粗)/bold(加粗)
- font-style:normal/italic
- font-family:
- 11.文本属性
- 水平对齐方式text-align:left/rigth/center;
- 文本装饰:text-decoration:none(多用于a链接)
- 英文字母大小写转换:text-transform:uppercase/lowercase/capitalize(首字母大写)
- 首行缩进:text-indent:;
- 12.背景属性
- background-color
- background-size:x y;背景图片大小
- background-image:url("");
- 背景图片是否平铺:background-repeat:no-repeat(不平铺)/repeat-x/repeat-y
- background-position:x y ;背景图片定位
- background-attachment:scroll/fixed(背景图片固定)
- 简写background: 颜色 图片 平铺 大小 定位 固定;
- 13.CSS后代选择器“空格”和“>”的使用辨析
- “空格”:包含子孙
- “>”:含子不含孙
- 14.列表属性
- list-style:none(用于ul)
- 15.表格属性
- 边框border:style width color;
- padding内边距边框距离
- 元素水平对齐方式text-align
- 单元格内容垂直对齐方式(tr或td身上)
- vertical-align:middle/top /bottom
- 16.内容溢出(overflow)
- 属性值:
- visible(默认值)直接溢出
- hidden: 溢出部分隐藏
- auto 有溢出显示滚动条
- scroll 不管是否溢出,都有滚动条
- 属性值:
- 17.一行文字溢出省略号显示
- white-space:nowrap;//文字同一行显示
- overflow:hidden;
- text-overflow:ellipse;//文字溢出部分省略号显示
- 18.行高
- 当行高等于高,一行文字垂直显示
- line-heigth:高;
- 当行高等于高,一行文字垂直显示
- 19.元素透明度
- opacity:;取值0-1
- 20.字符之间距离
- letter-spacing:;可取正负
- 21.关系选择器
- 后代选择器: 空格(选中所有后代)
- 子代选择器: > 选中所有子代
- 相邻兄弟 + 平级,后面的一个兄弟
- 通用兄弟选择器 ~ 后面所有兄弟
- 22.伪类选择器
- 冒号连接 表示一个状态
- :link 点击之前(只用于a)
- :visited 点击之后(只用于a)
- :hover 鼠标悬停(所有元素)
- :active 鼠标按下(所有元素)
- 23.css3新增伪类选择器
- :first-child 第一个子元素
- :last-child 最后一个子元素
- :ntn-child(number/odd/even/倍数) 第几个子元素是。。。
- 24.盒模型content+padding+border+margin
- 标准盒模型
- 实际大小width+padding+margin+border
- 怪异盒模型(IE)
- 实际大小width+margin(width包含了padding和border)
- 盒模型相互转换
- box-sizing:content-box;默认值 标准盒模型
- box-sizing:border-box; 怪异盒模型
- 弹性盒模型
- display:flex;
- 子元素水平排列
- 标准盒模型
- 25.浮动
- float:left/right;默认为none
- 原理:
- 元素浮动后排除到普通文档流之外
- 浮动后再页面不占据位置(原位置不保留)
- 碰到父元素边框就停止
- 浮动后都转换为块级元素
- 清楚浮动的影响
- 元素浮动后,在页面不占据位置,如果父元素没有高度,则会对后面元素产生影响
- 解决方法:
- 01.给父元素加高(不推荐)
- 02.浮动元素的父元素加overflow:hidden(不推荐)
- 03.空div法,在浮动元素后面加个空div{空div{clear:both;}}(真香)
- 04.伪对象法,浮动元素的父元素::after{content:"";display:block;clear:both;}(太特喵香了)
- 05.给受影响的元素加clear:both/left/right(父元素高度找不到)