css基础2

8.Emmet语法
            8.1快速生成html标签
                ①标签名+p
                ②生成多个相同的标签   标签名*n
                ③生成父子级关系的标签  可以用>    比如： ul>li
                ④如果生成带有类名或者id名字的   可以用 .类名 或 #id名 
                ⑤生成兄弟关系的标签可以用+     比如：div+p
                ⑥生成的div 类是由顺序的可以用自增符号$
                ⑦若果要在生成的标签内部写入内容可以用{}   比如: p{我爱赵美茹}
            8.2快速生成CSS代码
        9.CSS复合选择器
            
            9.1后代选择器
            概念：后代选择器又称为包含选择器，可以选择父元素里面的子元素
            语法：    
                    父元素 子元素{样式声明}
            注：第二个元素可以是儿子也可以是孙子
            
            9.2子元素选择器（子选择器）
            概念：只能选择作为某元素的最近以及子元素，简单理解就是选亲儿子元素。
            语法：元素1>元素2{样式声明}
            例如： div>p{样式声明}      选择div里面所有最近以及p标签元素
            
            9.3并集选择器
            概念：可以选择多组标签，并为他们定义相同的格式。通常用于集体声明。
            语法：元素1，元素2{样式声明}
            注：元素之间用逗号隔开，逗号是和的意思
                任何形式的选择器都可以成为并集选择器的一部分
                例：
                <style>    
                    div,p,.pink li{                //其中 .pink li 是后代选择器
                        color:pink;
                    }
                </style>
            
            9.4链接伪类选择器
                a:link            选择所有未被访问的链接
                a:visited        选择所有访问过的链接
                a:hover            鼠标指到的链接
                a:active        选择活动链接（鼠标按下未弹起的链接）
                
                注：为了确保生效，请按照LVHA的循环顺序声明 :link :visited :hover :active
            
            9.5focus伪类选择器
                :focus伪类选择器用于选取获得焦点的表单元素。
                焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器业主要针对表单元素。
                例：
                    input:focus{
                        background-color:yellow;
                    }
        10.CSS的元素显示模式
        解释：元素以什么方式进行展示
        
        HTML元素一般分为块元素和行内元素两种类型。
            10.2块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
            特点：
                ①独占一行
                ②高度、宽度、外边距以及内边距都可以控制
                ③宽度默认是容器的100%
                ④是一个容器及盒子，里面可以放行内元素和块元素
                
                注：文字类的元素不能使用块级元素，比如<p>和<h1>~<h6>
            
            10.3行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，有地方也将行内元素称为内联元素。
            特点：
                ①相邻行内元素在一行上，一行可以显示多个。
                ②高、宽直接设置是无效的。
                ③默认宽度就是它本身内容的宽度。
                ④行内元素只能容纳文本及其他行内元素。
                注：链接里面不能再放链接
                    特殊情况链接<a>里面可以放块级元素
            
            10.4行内块元素有几个特殊的标签 <img />、<input>、<td>,它们同时具有行内元素和块元素的特点。
            特点：
                ①和相邻行内元素在一行上，但是他们之间有一定的缝隙
                ②默认宽度就是它本身内容的宽度
                ③高度、行高、外边距以及内边距都可以控制
            
            10.5显示模式的转换
                ①转换为块元素： ：display:block;
                ②转换为行内元素： ：display:inline;
                ③转换为行内块元素：：display:inline-block;
            
            10.6文字垂直居中
                就是让行高等于合资的高度。
                711361238
        
        11.背景属性
            
            11.1 背景颜色background-color   
            属性值                        解释
            transparent                    背景色透明
            color                        任意一个颜色
            
            11.2背景图片background-image
            属性值                        解释
            none                        没有背景图片
            url                            绝对地址或相对地址
            11.3背景平铺background-repeat
            属性值                        解释
            repeat                        平铺                    
            no-repeat                    不平铺
            repeat-x                    沿x轴平铺
            repeat-y                    沿y轴平铺
            
            11.4背景图片位置 background-position
            ①参数是方位名词
                    1.如果指定的两个值都是方位名词，则两个值前后顺序无关
                    2.如果指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
            ②精确数值单位
            ③混合单位
            
            11.5背景图像固定（背景附着）
            background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动
            
            属性         解释
            scroll        滚动
            fixed        固定
            
            11.6背景的复合写法
            一般约定顺序为：
            背景颜色 背景图片 背景图像滚动 背景图片位置
            
            11.7背景颜色半透明
            background: rgba(0,0,0,0.3)
            
            11.8
            背景图片实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片
    12.CSS的三大特性
            12.1层叠性：相同的选择器设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。子元素可以继承父元素的样式text-,font-,line-这些元素开头的都可以继承以及color属性。
            12.2继承性：子类标签会继承父类标签的某些样式，如文本颜色和字号
            
            行高的继承性            body{
                                        font: 12px/1.5 微软雅黑；
                                        }
                            行高可以跟单位也可以不加单位
                            如果子元素没有设置字体大小，则会继承父元素的行高
                            设置了字体大小行高就为当前文字大小*父类行高
            12.3优先级
                            如果选择器相同，则按层叠性
                            选择器不同则按权重大小
                        
                    权重大小排列由小到大            继承或者*                                    0,0,0,0
                                                    元素选择器                                    0,0,0,1
                                                    类选择器、伪类选择器                        0,0,1,0
                                                    id选择器                                    0,1,0,0
                                                    行内样式 style=""                            1,0,0,0
                                                    !import                                        ∞无穷大
                    
                    继承的权重是0，如果该元素没有被直接选中，不管父元素的权重有多高，子元素得到的权重都是0
                    
                    权重叠加不会有进位
    13盒子
                13.1盒子由边框、外边距、内容、外边距
                
                13.2边框
                        边框由边框宽度、样式和颜色组成。
                    
                    边框的复合写法：边框允许指定一个元素边框的样式和颜色。
                    边框简写：border: 1px solid red;    没有顺序
                    边框分开写：border-top:1px solid red;
                    边框可以利用CSS的层叠性。
                
                13.3表格细线边框
                border-collapse:collapse;  //合并相邻的边框。
                
                13.4内边距
                padding属性用于设置内边距，即边框与内容之间的距离。
                
                属性                                解释
                padding-left                        左内边距
                padding-right                        右内边距
                padding-top                            上内边距
                padding-bottom                        下内边距
                
                复合写法：    padding:5px                1个值代表，上下左右都有5像素内边距
                            padding:5px 10px;        2个值代表，上下内边距都是5像素 左右内边距都是10像素
                            padding:5px 10px 20px    3个值代表，上内边距为5像素，左右内边距为10像素，下内边距为20像素
                            padding:5px 10px 20px 30px 4个值代表，上是5像素，右10像素，下20像素 左30像素
                
                13.5外边距（margin）    控制盒子与盒子之间的距离
                
                属性                    解释
                margin-left                左外边距
                margin-right            右外边距
                margin-top                上外边距
                margin-bottom            下外边距
                
                外边距的复合写法同内边距一致。
                
                外边距典型应用：外边距可以让块级盒子水平居中，但是必须满足两个条件：①盒子必须指定宽度②盒子的左右外边距设为自动
                                          让行内元素或行内块元素水平居中给其父类添加text-align-center;
                                          
                嵌套块元素垂直外边距的塌陷
                对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
                解决方案：①可以为父元素定义上边框
                          ②可以为父元素定义上内边距
                          ③可以为父元素添加overflow:hidden.
                
                13.6清除内外边距
                                *{
                                    margin:0;
                                    padding:0;
                                }
                    去除 li 前面的项目符号
                            语法：list-style:none;
                            
                13.7圆角边框
                    语法：border-radius:length;
                    length        ①可以为数值或百分比的形式
                                ②如果是正方形，想要设置一个元，可以吧数值修改为高度或者宽度的一般。
                                ③如果是个矩形，设置为高度的一般就可以
                                ④该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角，左下角，右下角。
                                ⑤分开写    border-top-left-radius; border-top-right-radius;其余跟此类似。
                
                13.8盒子阴影   box-shadow属性
                
                值                描述
                h-shadow        必需。水平阴影的位置，允许负值。
                v-shadow        必需。垂直阴影的位置，允许负值。
                blur            可选。模糊距离。
                spread            可选。阴影的尺寸。
                color            可选。阴影的颜色
                insert            可选。将外部阴影改为内部阴影。
                
                13.9文字阴影     text-shadow属性
                
                值                描述
                h-shadow        必需。水平阴影的位置，允许负值。
                v-shadow        必需。垂直阴影的位置，允许负值。
                blur            可选。模糊距离。
                color            可选。阴影的颜色
    14.浮动（float）
                14.1传统网页布局的三种方式
                    ①标准流：标准流就是标签按规定好的方式排列
                    ②浮动
                    ③定位
                一般网页都包括这三种方式。
                
                14.2网页布局准则
                ①第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
                
                14.3浮动特性
                1.脱离标准普通流的控制移动到指定位置，浮动盒子不再保留原先的位置
                2.如果多个盒子都设置了浮动，他们会按照属性值一行内显示，并且按照顶端对齐。
                3.浮动原色会具有行内块元素特性。如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是加了浮动后宽度大小由内容决定。
                
                14.4浮动布局的注意点
                        1.浮动和标准流的父盒子搭配
                        先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
                        2.一个元素浮动了，理论上其余的兄弟元素也要浮动。
                        浮动的盒子只会英雄浮动盒子后面的标准流，不会影响前面的标准流。
                
                14.5清除浮动
                
                    语法：   选择器{clear:属性值；}
                            属性值                    描述
                            left                    不允许左侧有浮动元素
                            right                    不允许右侧有浮动元素
                            both                    同时清楚左右两次浮动的影响
                    
                    清除浮动的本质：清除浮动元素脱离标准流造成的影响。
                    
                    清除浮动的四种方法
                            ①额外标签法
                            ②父级元素添加overflow属性
                            ③alter伪元素
                            ④双伪元素清除浮动
                            .clearfix:before,.clearfix:after{
                                content:"";
                                display:table;
                            }
                            .clearfix:after{
                                clear:both;
                            }
                            .clearfix{
                                *zoom:1;
                            }
            15.ps切图
                        
                        移动工具+点击图片
            16.
                    16.1 CSS属性书写顺序
                        1.布局定位属性
                        2.自身属性
                        3.文本属性
                        4.其他属性
                    16.2导航栏注意点：
                        实际开发中，我们不会直接用链接a而是用li 包含链接（li+a）的做法。