1.css 8个选择器
css选择器 | 权重 |
元素选择器 | 1 |
class类选择器 | 10 |
id选择器 | 100 |
包含(后代)选择器 | 做加法 |
群组选择器 | 各自看各子 |
伪类选择器 | 10 |
通配符选择器 | 0~1 |
!important | 1000 |
2.css文字相关属性
font-
字体粗细 font-weight
字体类型 font-family
字体倾斜 font-style
text-
居中 text-align:center
去除超链接下划线 text-decoration:none
首行缩进 text-indent
3.css列表属性
去除列表样式 list-style:none
更改列表小圆圈位置 list-style-positon
4.图片属性
vertical-align:top/middle/bottom //解决3px问题
解决图片3px 问题
1.vertical-align:top/middle/bottom;
2.float
3.display:block;
4display:flex;
5.position
6.背景属性
background: color url() no-repeat 水平 垂直;
7.盒模型
子元素Margint-top,父元素会根据子元素下移-------->解决方式1:父元素:overflow:hidden;
小记
display默认值 inline
a:link选择未被访问的超链接,并设置其样式
a:hover鼠标悬停超链接的样式
a:active鼠标点滴时超链接样式
a:visited表示单击访问后超链接样式
css层叠性:当权重相同时,代码自上而下解析,权重不同时,会解析权重大的选择器。
浏览器前缀: ms-IE moz-火狐 o-欧鹏 webkit-谷歌,苹果
border-style 值:
none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
8.浮动特点
1.元素浮动后,行内元素可以设置宽高 上下padding,margin
2.元素浮动后,没设置宽高,则宽高由内容撑开
3.元素浮动,margin:0 auto;失效
4.图片浮动后,vertical-align失效
9.定位Positon
默认属性:position:static 不定位
相对定位:relative 在文档流中占据位置
绝对定位:position 完全脱离文档流
固定定位:fixed 在文档流不占位置
粘性定位:sticky 默认情况下占位置,滑过属于他的区域时,变成固定定位。
10.常见的布局方案
1.万能导航栏
2.搜索框
结构 p>input+button
- 给两个input设置宽高,border0;
- 两个input左浮
- p设浮动,设置外边框
3.banner大图的写法
结构div>img
- 给div设置高
- 给div设置绝对定位 position:relative; height:***px ; overflow:hidden;
- 给img设置
position :absolate;
left:50%
top:0;
margin-left:负图片宽度一半
or transform:translate(-50%);
11.BFC 块级格式化上下文
BFC触发条件:
1.html根节点
2.float不为默认值,可以为left,right
3.display不位默认值,可以为inline-block,flex,grid
4.overflow不为默认值visible,可以为hidden,scroll,auto
5.position不为默认值,可以为relative,absolute
12.宽高自适应
1.高度自适应:不写 or height :auto;(height:100%不是自适应)
2.高度塌陷
原因:子元素设置浮动。父元素不写高度,父元素会出现高度塌陷。
方案1:父元素overflow:hidden;
方案2:浮动元素后加一个div
css: height:0; clear:both; overflow:hidden;
方案3:万能清浮动 浮动元素后加::after
content:""; //必须写!!! display:block; clear:both; height:0 overflow:hidden; visibility:hidden;
13.元素消失
元素消失不占位置:display:none;
元素消失占据位置:
1.visibility:hidden;
2.
opacity:0; (0~1) filter:alpha(opacit=0) (0~100)
3.background:rgba(0,0,0,0)
14.table表格属性