web(三)前端

1.选择器：

1.伪类选择器
    : 伪选择器支持按照未被包含在文档树中的状态信息来选择元素
    超链接元素的四种伪类：1.link:表示没有访问过的的链接
                        2.visited:表示访问过的链接
                        3.hover：将鼠标移动至超链接上时超链接的状态
                        4.active:鼠标点击超链接状态下，超链接显示出来的状态
2.结构伪类选择器
    selector：nth-child():用来定位一组兄弟元素第n个元素
    selector：first-child():用来定位一组兄弟元素中的第一个元素
    selector：last-child():用来定位一组兄弟元素中的最后一个元素

3.伪元素选择器：
    ：before:与content结合使用，用于在指定对象前端插入内容
    ：after:与content结合使用，用于在指定对象前端添加内容

2.文本相关样式

            width:  ---宽
            height: --高
            background-color:  --背景颜色
            text-indent:  --文本缩进
            text-align: ; --文本水平对齐方式
            overflow: --溢出容器
            line-height: 200px;--行高  单行文本垂直居中   行高=元素高度
            color: --指定文本颜色
            text-decoration: --规定添加到文本的修饰

3.元素显示模式转换

行内元素无法设置宽、高        转换为行内块元素 
display: none;隐藏元素，脱离文档流 
display: inline-block;  将元素转换为行内块元素 
display: inline;  行内元素
display: block;  块元素

4.背景

background-color: aqua;  ---背景色
background-image: url(../米莱迪.jpg); ---背景图片
background-repeat: no-repeat; ---背景平铺
background-attachment: fixed;  ---背景图片固定
background-position: top left; ---背景图片位置
background-size: ---背景图片大小

5.边框

border-radius: 10px; 
border-width 边框宽度
border-width: 20px;
border-style: solid;
border-color: rgb(35, 223, 18); 
border: 4px solid black;
border-radius: 50%;    边框弧度
border-top-left-radius: 40%

border-collapse: collapse ---合并相邻边框

6.阴影

1.text-shadow:h-shadow v-shadow blur color; --文本阴影
    h-shadow：阴影的水平距离
    v-shadow: 阴影的垂直距离
    blur: 阴影的模糊半径
    color: 阴影的颜色
2.box-shadow:h-shadow v-shadow blur spread color; ---普通阴影
    h-shadow:阴影的水平距离
    v-shadow:阴影的垂直距离
    blur:阴影的模糊半径
    spread:阴影的大小
    color:阴影的颜色 

7.轮廓线

outline 属性可使用以下一个、两个或三个值（outline-style，outline-width 和 outline-color）来声明，且顺序不重要。

8.防拖拽

resize: none;--防止文本拖拽
vertical-align ---改变与文字的对齐方式 
            vertical-align: top;
            vertical-align: middle;
            vertical-align: bottom;

9.隐藏元素

display: none;   脱离文档流，原来的位置不再保留
visibility: hidden;  元素隐藏，位置保留

10.定位

绝对定位：
    position: absolute;  绝对定位：不保留原来位置  子绝父相   父亲没有相对定位，继续向上找，谁有相对定位，以谁作为参考移动，如果都没找到，则相对于浏览器进行定位

固定定位：
    固定定位:相对于可视区域进行定位

11.盒子模型

 

1.盒子模型
    1，上面图中蓝色方框指的是html元素，也是内容部分context，可以是一张图片、一个h1标题、一个表格、            
    一个表单等。但是他的大小并不一定是100×100，而是可以修改的。属性width和height用于修改内容部分的 
    大小。       
    2，绿色部分，也就是padding部分，指的是内边距，是元素内容与其最近一层束缚框的距离，类似于在一个        
    方格里写字我们写在方格的中间，而与边框保持一定距离一样。       
    3，浅橘色部分，也就是border部分，指的是这个边框的宽度，我们常见的就是宽度为1，也就是一条线。                        
    4，深橘色部分，也就是margin部分，也叫边缘部分，类似于人与人之间保持一定的距离一样，他的作用是保 
     证html元素之间的距离，比如网页上的两种图片需要保持一定的间距才显得好看。    
    5，padding，border，margin实际上是每个html元素都存在的css属性。他们可以对元素的上下左右四个方 
    向进行限制。       
    6，当存在盒子里嵌套盒子时，也就是html的标签嵌套时，里面的元素默认以左上角作为停靠点。
2.外边距塌陷问题
    1.给父级标签一个内边距，不适用margin等属性
    2.给父级元素一个border边框
    3.通过overflow:hidden（溢出隐藏）解决
    4.将父级元素改为行内块元素
    5.浮动浮动，会脱离文档流 ，不再保留原来位置，会造成在其下方的兄弟元素位置发生变化，当子元素发生            
      浮动时，其父元素的高度发生塌陷

12.样式继承

css样式的继承性不是所有样式都继承，只有改变之后对布局无影响的样式，才会继承
a链接最好在自身更改样式

13.padding影响盒子大小问题

让宽度和高度减去多出来的内边距即可
box-sizing: border-box

14.flex布局

1.外面大容器属性
    1. flex-direction   主轴方向
    2. flex-wrap        主轴一行满了换行
    3. flex-flow        1和2的组合
    4. justify-content  主轴元素对齐方式
    5. align-items      交叉轴元素对齐方式//单行
    6. align-content    交叉轴行对齐方式//多行
2.flex-direction：row（默认值）：主轴为水平方向，起点在左端。
                  row-reverse：主轴为水平方向，起点在右端。
                  column：主轴为垂直方向，起点在上沿。
                  column-reverse：主轴为垂直方向，起点在下沿。
3.flex-wrap：nowrap (默认值) 不换行压缩宽度
             wrap    换行
             wrap-reverses 反向换行
4. justify-content：flex-start (默认)靠着main-start对齐//参考常见术语(一般是左方向)
                    flex-end   靠着main-end对齐//参考常见术语(一般是右方向)
                    center     靠着主轴居中对齐//一般就是居中对齐
                    space-between 两端对齐，靠着容器壁，剩余空间平分
                    space-around  分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
                    space-evenly  平均对齐，不靠着容器壁，剩余空间平分

15.渐变

CSS定义了三种渐变类型:Linear Gradients (goes down/up/left/right/diagonally) 下降/ 上升/左/右/            
                     对角线
                     Radial Gradients (defined by their center) 由中心定义
                     Conic Gradients (rotated around a center point) 绕一个中心点旋转

练习

小米官网