标签：CSS3 flex column 元素学习 grid 随笔 border 选择器

CSS3

css3是css2的升级，相比新增主要内容css选择器，和css属性

新增内容：语言模块，背景，列表，边框，文本，盒子特效，多列

CSS3
渐进增强和优雅降级（面试题）
- - 渐进增强
  - 优雅降级
选择器
- - 属性选择器
  - 伪类选择器
文字阴影text-shadow
文本换行
盒子
- - 盒子阴影 box-shadow
  - 边框圆角 boder-radius
字体模块
- - 字体样式（.ttf .TTF）：
渐变
过渡效果transiton：；
变换(2D)transform:;
- - transform：；
  - 变换的补充
2D动画animation:;
3D动画
- - 景深（视觉角度问题近大远小）
flex弹性盒布局
触发弹性盒子：display：；
多列 column
响应式布局
- - 原生媒体查询格式：
移动端布局
单位
网格布局（grid布局）
边框图片
背景:
浏览器兼容：

渐进增强和优雅降级（面试题）

渐进增强

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验

优雅降级

最初从高版本开始考虑，向低版本做向下兼容。与渐进增强相反

选择器

属性选择器

elemt[attr]{}匹配有该属性的元素
- div[class]{color:red;}
- div[id]{color:red;}
elemt[attr=“value”]{}匹配===属性和属性值的元素（属性值引号可省略）
- div[id="box"]{color:red;}
elemt[attr~=“value”]{}匹配有该属性和属性值的元素（属性值引号可省略）(完整值)
补充：
- elemt[attr^=“value”]{} 匹配属性，且值以value开始（包含值的部分）
- elemt[attr$=“value”]{} 匹配属性，且值以value结尾（包含值的部分）
- elemt[attr*=“value”]{} 匹配属性，且值包含value。（包含值的部分）
- elemt[attr|=“value”]{}匹配属性，包含value的元素（完整值）

伪类选择器

结构伪类选择器（只能为单冒号）

elemt：nth-child（n）{} 匹配所有元素的第n个元素
- 需要匹配偶数时括号n值为2n/odd 奇数2n+1/even
- 注意：匹配的时候，兄弟姐妹都会参与排序计算（如果两个div，中间一个p，用div：nth-child（2）{color：red；}不会生效，因为此时选中的2为p，所以不生效）
elemt：nth-of-type（n）{}只匹配同类型元素亲兄弟
elemt：first-child{} 匹配元素的第一个（其他元素参与计算）
elemt：last-child{} 匹配元素的最一个（其他元素参与计算）
elemt：only-child{} 匹配只有一个子元素的元素
html：root{} 匹配文档的根元素
- 也可以这样书写：root{color：red；}
elemt：empty{} 匹配空（没有子元素或文字）的元素

否定伪类选择器

elemt：not(选择器){} 选中除选择器外的其他元素
- 原来选择器有冒号，书写时仍然不能丢弃
  - div：not（[class="box"]）{}
  - div:not(:nth-child(1)){}

动态伪类选择器

a：link{} 点击前状态默认为蓝色（a标签特有）
a：visited{}点击后
a：hover{} 鼠标移入
a：active{} 激活状态（鼠标按下到弹起之间的状态）
input：focus{} 获取焦点后的状态

ui状态伪类选择器

elemt：enabled{} 可用的状态下
elemt：disabled{} 禁用状态下
elemt：checked{} 选中状态下

自定义单选复选框

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        form{
            margin: 100px 0 0 300px;
        }
        input{
            -webkit-appearance:none;
            width: 24px;
            height: 24px;
            border: 1px solid gray;
            border-radius: 50%;
            vertical-align: middle;
        }

        /* 自定义单选框 */
        input:checked{
           border: none;
            background:url(../img/gou.png) no-repeat center/24px 24px;

        }
        
        /* 自定义内部圆圈 */
        /* input:checked:after{
            content: "";
            display: block;
            width: 15px;
            height: 15px;
            background-color: orange;
            border-radius: 50%;
            margin-top: 4px;
            margin-left: 4px;
        } */
    </style>
    <body>
    <form action="">
        <input type="radio" id="a"> <label for="a">篮球</label>
    </form>
</body>

目标伪类选择器

elemt：target{} 搭配锚点使用

补充：

elemt：：selection{} 文本选中时状态时设置改变背景颜色和文本颜色（！双冒号）

文字阴影text-shadow

text-shadow: 水平偏移垂直偏移模糊距离阴影的颜色；
- text-shadow：5px 5px 5px red；
- 水平和垂直，值越大，越往右移，可给负值
- 模糊距离，不可给负值
- 多个阴影用逗号隔开
  - text-shadow: 5px 5px 5px red，-5px -5px 5px green；

文本换行

word-wrap：；
- normal 只在允许的断字点换行（浏览器保持默认处理）
- break-word 属性允许长单词或 URL 地址换行到下一行
word-break
- break-all 它断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句
- keep-all 文本不会换行，只能在半角空格或连字符处换行

盒子

盒子阴影 box-shadow

box-shadow: 水平偏移垂直偏移模糊距离阴影外增加大小阴影的颜色 inset；
- inset 内阴影
- 多个阴影用逗号隔开
- 部分参数可以省略

边框圆角 boder-radius

以盒子最短的边为准，超过50%后将不会变化（盒子为正方形会变成整圆，长方形会变成操场形状）
取值
- 没有/
  - 一个值四个角的水平垂直偏移相同
  - 10px 20px 左上和右下水平垂直均为10px；右上和左下水平垂直均为20px
  - 10px 20px 30px 10左上 20右上，左下 30右下
  - 四个值左上右上右下左下
- 有/ x/y
  - 10px/20px 四个方向水平偏移10px 垂直20px 连接形参圆滑的线
  - 10px 20px/20px 10px左上水平 20px右上和左下水平
  - 10px 20px 30px/20px
  - 10px 20px 30px 40px/40px 30px 20px 10px

字体模块

字体样式（.ttf .TTF）：

css样式中 @font-face{font-family："字体名字"；src：url（外部引入字体文件）；}
使用：p{font-family：”字体名字“；可以继续设置文字大小}

渐变

(渐变会被解析为图片，所以属性要写成background-image:

标签：CSS3,flex,column,元素,学习,grid,随笔,border,选择器
From： https://www.cnblogs.com/SenorCoconut/p/16838770.html

CSS3学习随笔