CSS学习笔记

1.css的简介

*css:层叠样式表
**层叠:一层一层的

**样式表:
很多的属性和属性值

*使页面显示效果更加好
*css将网页内容和显示样式进行分离,提高了显示功能
 

属性:

overflow

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

 

2.css和html的结合方式

1)在每个html标签上面都有一个属性style,把css和html结合在一起
-<div style="background-color:red;color:green;">...</div>
2)使用html的一个标签实现<style>标签,写在head里面

*<style type="text/css">
css代码;
</style>

*<style type="text/css">

div{
background-color:blue;
color:green;
}
</style>

3)在style标签里面使用语句(某些浏览器不起作用)
<style type="text/css">
@import url(css文件路径);
</style>

4)使用头标签link,引入外部css文件
-第一步,创建一个css文件

-<link rel="stylesheet" type="text/css" href="css文件路径"/>

***优先级
从上到下,由内到外.优先级由高到低.

 

 

 

3.css的基本选择器(3种)

**要对哪个标签里面的数据进行操作

1)标签选择器
*使用标签名作为选择器的名称
div{
background-color:blue;
}
p{
color:red;
}

2)clss选择器
*每个html标签都有一个属性class
-<div class="haha">aaaaaa</div>
-.haha{
background-color:orange;
}

3)ID选择器
*每个html标签上面有一个属性id
-<div id="hehe">bbbb</div>
-#hehe{
   background-color:#F00;
}

***优先级
style>ID选择器>class选择器>标签选择器

 

 

 

 

 

 

4.css的扩展选择器

1)关联选择器
*<div><p>aaaaaa</p></div>
*设置div标签里面p标签样式,嵌套标签里面的样式

*<style type="text/css">
div p{
background:red;
}
</style>

2)组合选择器
*<div>1111</div>
<p>2222</P>
*把div和p标签设置成相同的样式,把不同的标签设置成相同的样式

*<style type="text/css">
div,p{
background:red;
}
</style>

3)伪元素选择器
*css里面提供了一些定义好的选择器
*比如超链接
**:link  原始状态
 :hover 悬停状态
 :active点击状态
 :visited点击后状态

 

 

 

 

 

 

5.css盒子模型

*边框
border:统一设置
上border-top
下border-bottom
左border-left
右border-right
border: 2px  solid blue;
*内边距
padding:统一设置
上下左右:
padding-left:20px;
...
...
*外边距
margin:统一设置
也可以分别设置
上下左右

margin:0px auto;//div居中

 

div居中:

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)

 

6.Flex弹性布局

属性:

1. display: flex;

2. flex-direction :

   决定主轴的方向，即项目排列的方向，有四个可能的值：

    row:主轴为水平方向，项目沿主轴从左至右排列

    column：主轴为竖直方向，项目沿主轴从上至下排列

    row-reverse：主轴水平，项目从右至左排列，与row反向

    column-reverse：主轴竖直，项目从下至上排列，与column反向

3. justify-content

    决定item在主轴上的对齐方式。当主轴沿水平方向时，具体含义为

    flex-start：左对齐

    flex-end：右对齐

    center：居中对齐

    space- between：两端对齐

    space-around：沿轴线均匀分布

4. align-ments: 

   决定了item在交叉轴上的对齐方式，可能的值有flex-start|flex-end|center|baseline|stretch，当主轴水平时，其具体含义为

    flex-start：顶端对齐

    flex-end：底部对齐

    center：竖直方向上居中对齐

    baseline：item第一行文字的底部对齐

    stretch：当item未设置高度时，item将和容器等高对齐