选择器
#id ID选择器
理论上,同一个id名可以重复出现,但是由于JavaScript,可以根据id只能获取一个元素,同一个id名在同一个html文档中只能出现一次;一个html元素只能拥有一个id名
.class 类选择器
class选择器,类选择器,可以选中class名相同的一组元素或一个元素,一个元素可以有多个类名(class),同一个元素可以t同时拥有id和class
#id,.class 群组选择器
用逗号隔开,同时选中多钟不同的标签
#id .class 后代选择器
后代选择能指定的对象，只要是元素下面的元素，无论几级，都能选定
#id>.class 子选择器
子选择器只能选择自己的子类，第二级元素，而不能选择第二级别以下的元素
#id+.class 毗邻选择器
毗邻选择器,选择基准元素后边紧跟的兄弟元素,兄弟元素指的是两个或多个拥有同样的父元素
.class[type = "text"] 属性选择器
通过属性值获取 HTML 对象
新增选择器
- :first-of-type,:last-of-type,:only-of-type,:only-child
- :first-child,:last-child,
- :nth-child(odd)奇数行 :nth-child(even)偶数行 :nth-child(2);
权重值
!important的属性权重>行内样式权重>id选择器权重>class选择器(类选择器)权重>标签名选择器权重>通配符选择器权重>浏览器的默认样式
a:link 伪类
:link 选中有href存在的标签的样式
:hover 鼠标悬停时添加样式
:visited 访问过后的样式
:active 鼠标点中时的样式
:focus 选中焦点元素时的样式
:before ::before 一个冒号是CSS2,2个冒号是CSS3,没太大区别,兼容性一个冒号好,HTML5建议使用CSS3
:after 在元素内容前后加上指定内容
清浮动
.clearfix::afrer{
content:"";
display:block;
0;
height:0;
clear: both;
visibility: hidden;
}
常用给布局
水平居中
行内或类行内元素:
text-align:center;
块级元素:
margin: 0 auto;
注意:float不适合实现水平居中;
任何元素:
position:absolute +left:50%;
transform:translateX(-50%);
或者
display:flex;
justify-content: center
垂直居中
行内或类行内元素:
设置line-height 等于height
块级元素:
position：absolute +top:50%;
transform:translateY(-50%)
或
display:flex;
align-items: center
文本超出隐藏
overflow:hidden;
text-overflow:ellipsis; *****
/*ellipsis;文本溢出时显示省略号*/
/*clip;文本强行切除.*/
white-space: nowrap;/*文本强制不换行*/
盒模型
标准盒模型
在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
怪异盒模型
一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
弹性盒模型
.box{
display:flex;
display:-webkit-flex;
flex-direction: row;
/*设置元素在主轴排列方向flex-direction默认值为row横向→,row-reverse横向←,column竖向↓,column-reverse竖向↑*/
flex-wrap:column;
/*flex-wrap 设置子元素的换行及方向;默认nowrap/warp换行/wrap-reverse反向换行*/
justify-content: center;
/*justify-content.设置元素在主轴上的对齐方式,默认flex-start左对齐/flex-end右对齐/center居中/space-between两端对齐子元素间隔相同两边靠边/space-around子元素两侧相等,间距为双倍,两边不靠边*/
align-items: center;
/*设置子元素在交叉轴(竖轴,Y轴)的对齐方式,默认shretch拉伸/center居中/flex-start顶部对齐/flex-end底部对齐/baseline文本线对齐*/
flex-grow:0;
/*设置元素的放大比例,默认为0*/
flex-shrink:1;/*lex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。*/
flex-basis:50px;
/*设置分配多余空间之前,元素占据主轴空间*/
order: 2;
/*设置排列次序,值越大越靠后*/
}
.box{
flex: 0 1 auto; /*==flex-grow: 0;flex-shrink: 1;flex-basis: auto;*/
}
position和display
position的值:staticrelative | absolute | fixed | sticky | inherit | initial | unset;
sticky (粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位)
- 粘性定位的固定定位并不一定是
position:fixed，只有目标元素的任意父元素都没有设置position:relative | absolute | fixed | sticky的情况下，才与position: fixed表现一样。而当其任一父元素设置了position:relative | absolute | fixed | sticky时，目标元素是相对于父元素的固定。
sticky 的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=p, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
height: 3000px;
background: #cccccc;
}
#nav{
position: sticky;
top: 0;
100%;
height: 50px;
display: flex;
justify-content: space-around;
background: cyan;
margin: 100px 0;
}
</style>
</head>
<body>
<div id="nav">
<div>导航1</div>
<div>导航2</div>
<div>导航3</div>
<div>导航4</div>
<div>导航5</div>
<div>导航6</div>
</div>
</body>
</html>
display的值:
| none | 此元素不会被显示。 | ||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 | ||||||||||||||||||||||
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 | ||||||||||||||||||||||
| inline-block | 行内块元素。（CSS2.1 新增的值） | ||||||||||||||||||||||
| list-item | 此元素会作为列表显示。 | ||||||||||||||||||||||
| run-in | 此元素会根据上下文作为块级元素或内联元素显示。 | ||||||||||||||||||||||
| compact | CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 | ||||||||||||||||||||||
| marker | CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 | ||||||||||||||||||||||
| table | 此元素会作为块级表格来显示（类似
|