CSS补充

作者: 无尾树袋熊 | 来源:发表于2019-03-24 22:39 被阅读0次

CSS 补充
CSS补充
CSS补充
CSS补充
CSS补充
css补充属性
CSS补充2
Css概念补充
react样式方案分析
《css基础补充--规范》

边框圆角

作用:将原始的直角变为圆角

/*
格式 :border-radius: 0px 0px 0px 0px
参数:左上/右上/右下/左下的顺序
参数为圆角半径
注意 :
1.如果省略一个参数,会变成对角的值
2.省略两个参数,会变成对角的值
3.如果省略三个参数,其它角会和它一样
4.如果指定的半径是当前元素宽高的一半, 那么就是一个圆形
*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框圆角</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div {
            margin: 200px auto;
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            box-sizing: border-box;
            /*border-radius: 100px 0;*/
            border-radius: 50%;

        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

如果传递了两个参数,那么第一个参数代表水平方向的半径,第二个参数代表垂直方向的半径

border-top-left-radius: 100px 50px;
border-top-right-radius: 100px 50px;
border-bottom-left-radius: 100px 50px;
border-bottom-right-radius: 100px 50px;

斜杠之前的代表左上/右上/右下/左下的水平方向的半径
斜杠之后的代表左上/右上/右下/左下的垂直方向的半径

border-radius: 100px 100px 100px 100px/50px 50px 50px 50px;

如果边框的宽度小于圆角的半径, 那么内圆和外圆都是圆弧形状
如果边框的宽度大于或者等于圆角的半径,那么内圆就会变成直角而不是圆角

渐变

线性渐变

渐变不是一个新的属性,而是一个取值
默认情况下线性渐变是从上至下的渐变
我们可以通过在颜色的前面添加to xxx修改渐变的方向:
1. to top
2. to left
3. to right
除了可以通过关键字控制渐变的方向以外,还可以通过角度来控制渐变的方向,角度是按照顺时针旋转
%表示多少以前不渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            margin: 100px auto;
            width: 400px;
            height: 200px;
            border: 1px solid #000;
            box-sizing: border-box;
            /*background-image: linear-gradient(to right, red, skyblue);*/
            /*background-image: linear-gradient(200deg, red, skyblue);*/
            background-image: linear-gradient(to right, red 0%,aquamarine 80%, skyblue 100%);

        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

径向渐变

可以在颜色前面添加at和关键字来指定从什么位置开始渐变
可以通过指定具体像素来指定从什么位置开始渐变
可以在颜色前面直接加上一个具体的像素来指定渐变的范围
如果既要指定扩散的范围, 又要指定起始位置,那么把扩散的范围写在前面,而起始位置写在后面

/*background-image: radial-gradient(at left, red, skyblue);*/
/*background-image: radial-gradient(at left top, red, skyblue);*/
background-image: radial-gradient(300px at left top, red, skyblue);

伸缩布局

格式:

display: flex;

在伸缩布局中,默认伸缩项是从左至右的排版的
主轴的排版的方向默认就是row, 默认就是从左至右

flex-direction: row;

修改主轴的排版方向为从右至左

flex-direction: row-reverse;

告诉系统把主轴的方向改为垂直方向

flex-direction: column;
/*
注意点:
1. 默认情况下主轴是水平方向的, 但是也可以修改为垂直方向.只要看到flex-direction:column/column-reverse就代表主轴被修改为了垂直方向
2.如果将主轴修改为了垂直方向, 那么侧轴就会自动从垂直方向转换
*/

修改主轴的排版方向为从下至上

flex-direction: column-reverse

主轴对齐

格式:

justify-content
/*
flex-start; 伸缩项与主轴起点对齐
flex-end;与终点对齐
center; 居中对齐
space-between; 两端对齐
space-around; 环绕对齐
*/

写在父元素内

侧轴对齐

格式:

align-items:
/*
flex-start; 
flex-end;
center;
*/

修改侧轴的对齐方式
默认以侧轴的起点对齐
侧轴没有两端对齐和环绕对齐
有基线对齐与拉伸对齐

/*
基线对齐
align-items: baseline
*/
/*
拉伸对齐
align-items: stretch;
*/

如果在伸缩容器中通过align-items 修改侧轴的对齐方式,是修改所有伸缩项侧轴的对齐方式
如果是在伸缩项中==通过align-self 修改==侧轴的对齐方式,是单独修改当前伸缩项侧轴的对齐方式
注意点:两种方式属性的取值一样

主轴侧轴方向问题

默认主轴是水平方向, 侧轴是垂直方向
默认主轴起点在伸缩容器的最左边,终点在伸缩容器的最右边
默认侧轴起点在伸缩容器的最顶部,终点在伸缩容器的最底部
通过flex-direction属性修改主轴的方向为垂直方向,那么侧轴就会立刻变为水平方向

换行问题

在伸缩布局中,如果伸缩容器的宽度不够,系统会自动压缩伸缩项的宽度,保证伸缩项都在容器中
如果容器宽度不够,且不让伸缩项被压缩,可让系统换行

flex-wrap: wrap;

默认情况下如果伸缩容器的高度比换行之后所有伸缩项的高度还要高, 那么系统会自动将剩余空间平分之后添加给每一行

flex-wrap: nowrap; /*默认压缩*/
flex-wrap: wrap; /*换行*/
flex-wrap: wrap-reverse; /*换行,倒序*/

换行后,可以通过align-content来设置行与行的对齐方式

/*
设置在父元素内
*/
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
/*align-content: stretch;为默认值*/

默认情况下换行就是拉伸对齐
注意点:在换行中的拉伸对齐是指, 所有行的高度总和要和伸缩容器的高度一样,所以会将多余的空间平分之后添加给每一行
想调整伸缩布局中伸缩项的顺序, 那么我们可以通过修改伸缩项的order属性来实现
如果我们设置了order属性的值, 那么系统就会按照设置的值从小到大的排序
默认情况下==order的取值是0==

伸缩项的放大缩小比例

flex-grow

当所有伸缩项宽度的总和没有伸缩容器宽度大的时,可以让系统调整伸缩项的宽度的总和与容器的宽度相等
计算拉伸的方法

/*
伸缩项的宽度 + 需要的份数 * 每份的宽度
每份的宽度:剩余空间/需要的份数
*/

flex-grow默认值为0

flex-shrink

当所有伸缩项宽度的总和比伸缩容器宽度大的时,以通过flex-shrink让系统调整伸缩项的宽度,让所有伸缩项的宽度的总和等于伸缩容器的宽度
计算压缩的方法

/*
1. 计算溢出的宽度
伸缩容器的宽度 -  所有伸缩项的宽度总和
2. 计算总权重
每个伸缩项需要的份数 * 每个伸缩项的宽度
3. 计算每个伸缩项需要压缩的宽度
溢出的宽度 * 需要的份数 * 每个伸缩项的宽度 / 总权重
*/

默认值为1
如果没有设置flex-grow,那么系统,会等分拉伸.如果让某个伸缩项不缩小,将flex-shrink设置为0

注意点:

如果是伸缩布局,除了可以通过元素的width属性来设置宽度以外,还可以通过flex-basis属性来设置伸缩项的宽度
width与flex-basis都可以设置宽度,同时存在会听flex-basis的
flex-basis属性专门提供给伸缩布局使用
如果两个属性同时设置了宽度,但其中一个是auto,系统会按照具体的值来设置

flex-basis: auto; 
width: 100px; /*按照具体值*/

连写格式

flex: flex-grow flex-shrink flex-basis;
/*默认值
flex: 0 1 auto;
*/
/*
注意点:
连写格式中,flex-shrink flex-basis是可以省略的
*/

媒体查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体查询</title>
    <link rel="stylesheet" href="pad.css" media="(min-width:620px) and (max-width:979px)">
    <link rel="stylesheet" href="pc.css" media="(min-width:980px)">
    <link rel="stylesheet" href="phone.css" media="(max-width:619px)">
    <style>
        /*@media (min-width: 980px) {
            body {
                background-image: url("../images/animal1.png");
            }
        }
        @media (min-width: 620px) and (max-width: 979px){
            body {
                background-image: url("../images/animal2.png");
            }
        }
        @media (max-width: 619px) {
            body {
                background-image: url("../images/animal3.png");
            }
        }*/
    </style>
</head>
<body>

</body>
</html>

圣杯与双飞翼布局

圣杯布局

1.什么是圣杯布局和双飞翼布局
两者实现的功能都一样, 都是用于实现两侧的宽度不变, 中间的宽度自适应的三栏布局的

2.圣杯布局的步骤
2.1搞一个容器, 里面放三个盒子
2.2设置两侧盒子的宽度(固定)
2.3设置中间盒子的宽度等于容器的宽度(100%)
2.4设置容器的padding等于两侧盒子的宽度
2.5让三个盒子都在同一个方向上浮动
2.6设置左边盒子的margin-left=-100%
2.7通过定位调整左边的盒子, 让左边的盒子不要盖住中间的区域
2.8设置右边盒子的margin-left=-自身的宽度
2.9通过定位调整右边的盒子, 让右边的盒子不要盖住中间的区域
3.0给容器设置一个最小的宽度, 防止缩小后变形

双飞翼布局

1.双飞翼布局的实现步骤
1.1搞一个容器, 里面放三个盒子
1.2设置两侧盒子的宽度(固定)
1.3设置中间盒子的宽度等于容器的宽度(100%)
1.4让三个盒子都在同一个方向上浮动
1.5给中间的盒子添加一个子盒子
1.6给子盒子设置margin 0 两侧盒子的宽度
   由于是给子盒子设置margin,所以不会对父盒子排版产生任何影响
1.7设置左边盒子的margin-left=-100%
1.8设置右边盒子的margin-left=-自身的宽度