CSS学习笔记

CSS

1 CSS的引用

1. 外部样式表
2. 内部样式表
3. 标签中的style`

1.(推荐)

link 标签

herf引用

2.style

3.p style="…"

2 CSS的结构

选择器{//声明

属性 属性的值

}

2.1CSS选择器

• 简单选择器（根据名称、id、类来选取元素）
• 组合器选择器（根据它们之间的特定关系来选取元素）
• 伪类选择器（根据特定状态选取元素）
• 伪元素选择器（选取元素的一部分并设置其样式）
• 属性选择器（根据属性或属性值来选取元素）

1.标签选择器

p{
    color:blue;
}

//使用
<p>巴拉巴拉</p>

2.类选择器

.paragraph{
    color:red;
}
.e{
    font-size:30px;
}

//使用
<p class="paragraph e">巴拉巴拉</p>

3.id选择器

#para{
    color:green;
}

//使用
<p id="para">巴拉巴拉</p>

优先级

id>类>标签

4.属性选择器

img[src]{
    width:100px
}

//使用
<img src="..."/>

5.伪类选择器

a:hover{//把鼠标放在当前链接上面
    color:red
}

//使用
<a herf="">点我跳转</a>

6.后代选择器

div span{
    ...
}
span{
    ...
}


<div>
	<span>
		<span>balaba</span>
	</span>
</div>
<span>balabala</span>

class可复用，后面的会覆盖前面同名的类

命名类名的方法

1.BEM命名法

class="article__button--primary"

2.类似BEM命名法

class="button-primary"

3 CSS样式

1.文本样式

text-align:center/right/left;
line-height:50px;//行间距
letter-spacing:4px;//字母间距
word-spacing:20px;//单词间距
color：red;//文本颜色
font-size：20px;//字体大小

2.处理溢出文本

white-space:nowrap;//合并连续的空白符
overflow:hidden;溢出文本隐藏
text-overflow：ellipsis;溢出文本转化成省略号。。。

3.简单动画

.trans{
    width:100px;
    height:100px; 
    background:red;
    transition:width 2s;
    box-shadow:3px 4px 5px #888888;
        	//x轴偏移量 y轴偏移量 模糊半径 扩散半径和颜色
}
.trans hover{
    width:300px;
}

3.1旋转

.rotate{
    width:200px;
    height:100px;
    background-color:yellow;
    transform:rotate(7edg);
}

4.布局元素

.box{
    width:100px;
    height:100px;
    
    //边框
    border:5px solid green;
    	//宽度 样式 颜色
    border-bottom：5px dotted green;
    border-radius:20px;//圆角
    
    //边界距离
 	padding:25px;//距离边界距离
    padding:25px 50px;
    	//上下   左右
    padding:25px 50px 30px 100px;
    	//上右下左
    
    //border本身和页面边距
    margin:25px;//距离边界距离
    margin:25px 50px;
    	//上下   左右
    margin:25px 50px 30px 100px;
    	//上右下左
}

5.border属性绘制圆

.circle{
    width:100px;
    height:100px;
    border:2px solid green;
    border-radius:50%;
}

6.实现导航栏

ul{//设置列表元素的marker
    list-style-type:none;
    dispaly:flex;
}

li{
    text-decoration:none;//去除下划线
    margin:10px；
}

7.loading动画

@keyframes rotate{
    from{
        transform:rotate(0)
    }
    to{
        transform:rotate(1turn)
    }
}

.loading{
    ...//画一个圆
    animation:rotate 500ms infinite linear;
}

4 CSS盒模型

整体布局

广泛使用

5 CSS常用布局

1.布局

• 尺寸

• 定位

浮动

定位

盒模型

普通文档流

• 从左到右
• 从上到下

块级元素block

独占一行

可以自己定义宽高

行内元素inline

不会独占一行，一行有多个块

内容撑开宽高，不能自己定义

行内块级元素inline block

不会独占一行，一行有多个块

可以自己定义

2.合理布局的作用

• 内容清晰

• 页面加载快

• 有利于搜索引擎的爬取

3.CSS flex布局

flex是flexbox的缩写，“弹性布局”

flex container

main axis

cross axis

main size

main/cross start/end

• flex-direction
  • 摆放：水平垂直
• flex-wrap
  • 换行的效果
• flex-flow

flex元素上的属性

​ flex-basis

​ 默认找width的值

​ flex-grow

​ 剩余空间的处理

​ flex-shrink

​ 溢出空间的处理

元素的对齐

align-items

justify-content

为什么使用flexbox

• 在元素外部处理空间分布
• 让元素自己处理空间分布

4.flex适用场景

导航

拆分导航

元素居中

绝对底部

6 CSS定位

position

• static静态定位
• relative相对定位
• absolute绝对定位
• fixed固定定位
• sticky粘性定位
  • 页面不滚动的时候是相对定位relative，滚动起来时候，是固定定位fixed
  • 常用于实现导航栏漂浮

7 CSS浮动

float

8 Web布局

响应式布局

响应式设计RWD

早年，适配特定屏幕大小创建。

响应式设计RWD，自己调整页面大小

创建“液态”站点，拉伸以充满整个浏览器窗口。

​ 缺点：小屏幕设计挤成一团，大屏幕长度过长难以阅读

“固定宽度”站点，有一个以像素为单位的固定尺寸

​ 缺点：小屏幕上出现滚动条，大屏幕空白较多。

设置meta标签

告诉浏览器，使用设备的初始宽度作为视图的宽度，禁止缩放。

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"

媒体查询

@media

针对不同是设备尺寸，设置对应的样式

随着屏幕宽度的增大或减小，后面的样式会覆盖前面的样式

• 移动端：优先使用min-width
• PC端：优先使用max-width

长度单位

• rem(font size of the root element)
• 百分比
• 视口单位vh、vw、vmin、vmax

视口

桌面端——浏览器可视区域

移动端——Layout Viewport

• 布局视口
• 视觉视口

合理使用长度单位

移动端屏幕的rem

• 占满宽度元素%优于vw
• 占满高度元素vh优于%