CSS总结

• 介绍
  • Cascading style sheets 层叠样式表 级联样式表 简称样式表
  • 实现内容（html）与表现（css）的分离，提高了代码的可重用性和可维护性
  • 文件后缀 .css
  • 由浏览器解析执行，最新版本c3
• 居中问题
  • • 元素内容水平居中
      • text-align：center居中的是内容
    • 块级元素水平居中
      • width + margin：0 auto
    • 一行文字垂直居中
      • line-height = 高度
    • 多行内容垂直居中
      • 设置margin（子）：/padding（父）
      • 设置上下距离相同
  • 子元素在父元素中水平垂直居中
    • 子元素宽高已知
      • margin/padding 设置四周的距离
      • 绝对定位
        • top left（设置具体距离）
        • 或者50%（针对左上角中心点） + margin继续修正（回正子元素宽高一半【负值px】）margin设置时的参照物是经过绝对定位后的位置
      • 表格法
        • 父元素如下+子元素diplay：inline-block

          

        • 或者用margin 0 auto代替水平居中
      • 位移 transform：translate（x, y）
    • 子元素宽高未知
      • 绝对定位
        • top和left设置成50%+位移50%回正（同上）
      • 弹性盒
        • display：flex（父） + margin：auto
        • display：flex +align-items+justifly-content
• 特征
  • 继承性 子元素可以继承父元素的样式（多层的也能继承）
  • 层叠性 对一个元素多次设置同一样式，使用最后一次 或者优先级高的
  • 优先级 不同样式的优先级不同
• CSS引入方式
  • 三种方式的优先级：行内>内部=外部
  • 内联样式（行内样式）
    • 利用HTML的style属性，除了br都有的属性（style=""）
  • 内部样式（在head中写，只对当前页面生效）
    • 选择器的作用：选中写样式的元素
  • 外部样式（引入一个css文件 html和css都可以引入多个）
    • <link rel="stylesheet" href="路径"> (rel引入的是什么)
    • 优点 实现了内容与表现的完全分离，提高了代码的可重用性和可维护性
    • @import（导入式）也可以引入但是不用
      • 语法@import " "; @import url(' ')
      • 弊端（和 link的区别）
        • 加载顺序不同（网速慢ki容易不显示样式） @import先加载html文件，加载完后，再加载css文件，link是同时加载html文件和css
        • @import只能引入css文件，link可以引入其他内容
        • @import有兼容性，ie5以上支持，link没有兼容性
        • @import会增加页面的http请求
        • 当JavaScript操作Dom时，只能操作link引入的css
• div+css布局
  • float：浮动 块级元素在同一行显示 left（左浮动）、none（不浮动）、right（右浮动）、inherit（继承父元素浮动）
• 选择器（选中写样式的元素）
  • 基础选择器（范围越小，权重数字最大，优先级越高，行内样式优先级是最高的）
    • 全局（通用）选择器 *{ } 选中页面所有内容
    • 元素选择器（直接写标签）p{ } 选中指定的元素
    • 类选择器 .class{ } （一个class可以起多个名字，用空格隔开）
    • id选择器 #id{ } （id具有唯一性）
    • img{} (选中全部图片) .img{}（只选中class="img"的图片）
  • 关系选择器
    • 子代选择器 >（选中所有直接子代） .div>p{}
    • 后代选择器 空格 （选中所有后代） .div p{}
    • 相邻兄弟选择器 +（选中后面的一个元素） 须是同级元素，只能选中紧跟其后的那个标签
    • 通用兄弟选择器 ~（选中后面所有的元素）须是同级元素
  • 伪类选择器（顺序先love后hate，否则不生效）
    • ：link：超链接点击之前（只适用于a）
    • ：visited：链接访问之后（只适用于a）
    • ：hover：鼠标悬停时的样式（适用于所有元素）
    • ：active：鼠标点击标签不松手时（适用于所有元素）
    • C3新增伪类（都是写在子元素上：语法都）
      • first-child 第一个子元素是......（.box>p:first-child 翻译成box的第一个子元素且得是p，否则不便）
      • last-child 最后一个子元素是......（.box>p:last-child 翻译成box的最后一个子元素且得是p）
      • nth-child(number|odd|even|倍数3n) 第几个子元素是 （.box>p:nth-child（） 翻译成box的n个子元素还得是p）
      • only-child 唯一一个子元素是。。。
      • empty 空的子元素是。。。
      • not (p|.box2) 为每个不是p的元素设置
      • focus 用于选择具有焦点的元素
      • checked 被选中时的样式（适用于单选按钮和多选按钮）
  • 伪对象（元素）选择器（：|：：都可）
    • ：：before{ content：“文字” | url（“图片链接”）} 插入到元素内部的最前面
    • ：：after{content：（必须有的属性）}
    • 想要修改插入进来的图片大小（diplay：block |转换为块级元素）
    • 自定义插入内容（应用：清除浮动（后面加入个空内容）或者充当div之间的线条）
  • 属性选择器 示例 a[title=' ']
• 字体属性
  • color
    • 关键词 red blue
    • 十六进制 包含0-9 a-f
    • rgb（红、绿、蓝）0-255
    • rgba（红、绿、蓝、透明度）透明度 取值0-1 0完全透明 (半透明0.5可以写成.5不写0)
    • a的字体颜色不继承，需要单独设置，自己有样式不继承父元素
  • font-size font-family（可以写多个，看浏览器支持哪个幼圆，楷体）
  • font-weight （ normal bold（700） bolder lighter 或者100-900无单位，400为分段）
  • font-style （normal litalic斜体）
• 文本属性——继承性
  • 设置元素内容的水平对齐方式
    • text-align：left/center/right
  • 文本装饰
    • text-decoration：
    • none去掉 underline下划线 overline上划线 line-throng 删除线
• 背景属性
  • 背景颜色
    • background-color：transparent ；透明的（默认值）
  • 背景图片”
    • background-image：url（""）
    • 背景图片的优先级大于背景颜色
    • 当背景图片大于元素大小，背景图片显示不完全，当背景图片小于元素，默认水平垂直平铺
  • 背景图片是否平铺
    • background-repeat: repeat(默认平铺) no-repeat（不平铺） repeat-x（ 水平方向平铺 ） repeat-y（垂直方向平铺）
  • 背景图片大小
    • background-size：x y；（可以是坐标）
    • 取值px % cover（背景优先，图片显示不完全） contain（图片优先，覆盖不完全）
  • 背景图片定位
    • background-position：x y（左，上）
    • 当只写一个值另一个会居中，也有负值
    • 默认在左上角（100%。100%）或者（right，bottom）会在右下角
    • 想要居中，可以只写50%另一个自动居中，或者center（一个大图片显示中间部分）
  • 背景图片固定
    • background-attachment ： scroll（默认值，跟着页面动） fixed（固定）
  • 简写
    • background：；（多个值空格隔开，没有顺序）
    • 当简写属性和但各属性同时存在，简写属性写在上面（防止取默认值）
    • 例子：background：url（“images/../../”）no-repeat center
• 列表属性
  • list-style-type 设置列表项标记（none disc circle square。。。）
  • list-style-image 使用图象来替换列表项的标记（一般不用，用img）
  • list-style-position 指示如何相对于对象的内容绘制列表项标记
  • list-style可以简写，无顺序
  • 在li进行该属性的设置
• 表格属性
  • 元素的宽高 width height 块级元素可以设置宽高，行内元素不生效
  • 表格的边框 border
  • 元素内容水平对齐方式 text-align（表格中内容）
  • 元素内容垂直对齐方式vertical-align：middle/top/bottom（需要写在tr或td里面）
  • 背景图片，背景颜色
  • 边框折叠 border-collapse：collapse（相当于cellspacing=0）
• 内容溢出（默认溢出）
  • overflow：hidden |auto |scroll （隐藏|溢出时滚动条| 全部滚动条
• 一行文字溢出省略号显示
  • 三个属性显示（不换行，隐藏溢出，省略号显示）

    

• 行高line-height:（具有继承性）
  • 设置一行文字的高度，浏览器默认字体16px，行高为21px
  • 行高等于多少，表示在这么多高度中居中
  • line-height: ;取值px 或 number（数字） 行高=设置的数字*字体大小
• 元素的透明度opacity（元素里的所有内容）
  • 0完全透明 （0-1）
  • rgba是设置元素的透明度比如背景颜色和字体颜色
• 字符间距（letter-spacing ）
  • 可以取正负（正值变大）
• 文本属性
  • 英文字母大小写转换 text-transform（uppercase（全部大写）|lowercase|capitalize（每个单词首字母大写））
  • 首行缩进text-indent (一个字默认16px) 2em（em是相对单位）
• 盒模型
  • 标准盒模型 w3c
    • 浏览器默认的盒模型
    • 组成部分
      • content+padding+border+magin
      • content内容区域
        • width和height 单位px | %（相当于父元素）
        • min-width | max-width 最小/最大宽度
        • min-height | max-height 最大/最小高度
        • 块级元素默认宽度100% 行内元素默认宽度由内容撑开（高度都是由内容撑开） 块级元素可以设置宽高，行内元素设置宽高不生效
      • border 边框（可简写，无顺序）
        • border-style：solid（实线）|dashed（虚线）|dotted（点线）|double（双实线）border-width至少为3px |none（不显示）；必须属性 默认黑色 3px
        • boder-color | border-width
        • 单边属性 比如说捏 ：border-top（-color）
      • padding
        • 可以取1--4个值也可以单边属性
        • 不能取负值和auto
        • 会撑大容器
      • magin
        • 可以取正负 auto 默认透明
        • 水平居中 （0 auto）因为定距离不适合所有分辨率，并不时只设置这个就生效，父元素的宽度-子元素的宽度➗2，所以需要设置子元素的宽度即

          

        • 当外边距相撞，只有垂直方向上合并（取最大值），水平方向不合并
        • 当第一个子元素设置magin-top时，父元素会一起下来（bug）解决办法：1、父元素加overflow：hidden（隐藏溢出/找到正确的位置） 2、父/子元素加float：left（一般不用） 3、父元素加边框border-top： 1px solid transparent（透明） 4、父元素加内边距padding-top= 1px
      • 实际宽度
        • width（只表示content的值）+padding+border+margin
  • 怪异盒模型（IE盒模型）
    • 跟标准盒模型的差异
      • 实际宽度width（content+padding+border）+margin
    • 盒模型相互转换
      • box-sizing：content-box 默认值 标准盒模型
      • box-sizing：border-box 怪异盒模型
      • 自动减去padding的值，计算成合适的宽度，不会撑大。
      • 为什么会采用怪异盒子模型 因为父盒子无边框时子元素增加 margin 会造成外边距穿透，此时需要给父盒子添加 padding ，添加 padding 会增大父盒子，需要手动重新计算父盒子 width ，因此利用怪异盒子模型省略重新计算 width 这一步。
  • 弹性盒模型（主要用于移动端）
    • 父元素属性
      • 排列方式flex-direction：row|row-reverse|colum|colum-reverse
      • 主轴（跟排列方式相同）对齐方式 justify-content ：flex-start|flex-end|center|space-between(平均隔开侧边无距离)|space-around（两侧是中间的1/2）
      • 侧轴 align-items：flex-start|flex-end|center
    • 子元素属性
      • 子元素怎末分配父元素的宽度flex-grow：数子（分几分）
• 导航条padding和magin实现方式
  • padding：颜色可以渲染到

    

  • magin：颜色不可以渲染到（设置到的是元素之间的距离）
• 浮动 Float
  • 原理：元素浮动后排除到普通文档流（块级元素垂直排列，行内元素水平排列）之外，元素浮动后在页面中不占据位置（给前一个div设置浮动后面那个会重叠，不会盖住内容），浮动后碰到父元素的边框或者浮动元素的边框就会停止，浮动元素不会重叠，浮动只会左右浮动，浮动后元素都转换成块级元素，就可以设置宽高了。行内元素不会忽视行内元素，文本框内容围绕浮动元素
  • float：left|right|none
  • 清除浮动的影响
    • 原因：元素浮动后再页面内不占据位置，父元素高度坍塌，对后面的元素排版产生了影响
    • 清除影响后就不必特别设置父元素的高度了
    • 解决办法
      • 1、浮动元素的父元素加高（高度已知）
      • 2、浮动元素父元素加overflow：hidden|auto （自动找高，当子元素需要大于父元素不可用）
      • 受影响的元素加clear：left|right|both（后面元素的位置虽然对了，但是父元素的高度没有找到）
      • 空div：浮动元素后面加个空div{clear：both}且在坍塌高度的父元素里面 页面新增元素多，页面解析费时间
      • 伪对象法：浮动元素的父元素::after{content:"" display:block clear:both} （代码会多，但不大小的影响）
• display 每个html元素都自带一个display属性
  • 常用属性值
    • block 块级元素
    • inline行内元素
    • inline-block行内块既可以在同一行显示，又可以设置宽高，但会识别代码之间的空白 常见行内块img input button video
    • none 隐藏，隐藏后不占据位置 （应用搜索框点击后出现） opacity：0透明 visibility：hidden overflow：hidden 溢出部分隐藏掉
• position 设置定位 相对于浏览器窗口定位 定位后原位置不保留
  • 属性值 static（没有定位） fixed（固定）relative（相对） absolute（绝对）
  • fixed固定定位 应用固定导航条 原位置不保留会盖住下面的东西，
  • relative 相对定位 元素相对于原位置变化 定位后原位置保留空着 配合绝对定位使用，元素小范围移动
  • absolute 绝对定位 相对于已经定位的父元素（推荐加相对定位），如果父元素没有定位 逐级往上找，最终相对于body定位 定位后元素不保留 应用形成独立的一层
  • 练习1：给定位的内容加个盒子，然后看距离近的那一边 加上定位（top，left，right，bottom选择两个写），别忘记给父元素加相对元素
  • 练习2：悬停出现另一个div：一个div（相对定位）里面放一个图片一个div（绝对定位） 然后选择器设置悬停在盒子上时其子代box的变化或者悬停在img上其兄弟box1的变化（这个会一直闪烁）

    

• z-index 堆叠顺序
  • 数越大级别越高（最大999，可以取负值，最好中间岔开点数字，好加入新的元素）必须配合定位元素使用，而且static不行
• C3新特性
  • 厂商前缀：解决浏览器对c3新特性的兼容性
    • html、css、JavaScript 由浏览器解析执行
    • 浏览器内核：渲染引擎
    • 谷歌 -webkit- blink内核
    • 苹果 -webkit- webkit
    • 火狐 -moz- gecko
    • IE -ms- trident
    • 欧朋 -o- blink
  • 圆角 border-radius ： px上右下左 画⚪一般用百分比50%
  • 盒阴影 box-shadow： 水平偏移（右） 垂直（下） 模糊度（撑开只能正值） 阴影的大小 颜色 内外位置（outset|inset）
    • text-shadow 字阴影
  • 背景渐变 基于background：
    • 线性渐变 liner-gradient（渐变的方向 Xdeg，逗号多个颜色）默认从上往下 可以关键词（ to left bottom）

      

    • 径向渐变 radial-gradient （方向，形状，颜色）
  • transform 让元素改变形状、大小、位置 (加单位)
    • transform：translate（位移） rotate（旋转） scale（缩放） skew（倾斜）空格隔开 旋转会旋转整个坐标轴，建议位移在前
    • 位移 translate（x,y） 一个值表示水平（可以负值包括百分比） 也可以3d 和单方向（x |Y） 悬停可以写变换
    • 旋转 rotate（旋转的角度）deg弧度 正值顺时针 中心点默认宽高一半可以通过transform-origin改变中心点
    • 缩放 scale（x,y）取值是数字 0-1缩小 >1放大
    • 倾斜 skew （x,y）取值deg 加起来不要等于90度
    • 3d变换：x,y,z轴的变化

      

  • transition 过渡 一种样式变为另一种 必须有触发事件
    • 属性：过渡的属性（可以all） 持续时间 速度变化类型 延迟时间
    • 可以过渡的属性：
      • 取值为颜色、数值、阴影、背景渐变、转换
    • 速度变化类型——可选
      • ease 先加速后减速
      • ease-in 加速
      • ease-out 减速
      • ease-in-out 先加速后匀速
      • linear匀速
    • 延迟时间取负值表示跳过这段时间
  • animation 动画
    • 定义动画@keyframes |@-webkit-keyframes

      

    • 调用动画 animation：名称 持续时间；速度变化类型，延迟时间 播放次数（数字|infinite） 播放方向（alternate偶数次倒着播放|0%-100%） 动画停在最后一帧 forwards 动画鼠标悬停停止（running | paused）
• 响应式布局：写一次样式可以兼容所有终端
  • 媒体查询media
    • 语法
      • 涉及到移动端要加入(网页自适应手机宽度) <meta name='viewport' content='width ='device-width' initial-scale=1>有些也加入user-scaleable = no maximum-scale =1禁用缩放
      • 内部引入(三个都要写)
        • （移动端768 ipad 992 pc端）

        

      • 外部引入(三个都要写)
        • <link rel="stylesheet" media="screen and (min-width:768px) and max-width(992px)" href=""/>
  • bootstrap