CSS相关 - 77797963/review-notes GitHub Wiki

<div class="wrapper">
    <div class="content"></div>
</div>    

.wrapper {
  position: relative;
  width: 500px;
  height: 500px;
  background-color: #ddd;
 }
.content{
    background-color:#6699FF;
    width:200px;
    height:200px;
    position: absolute;        //父元素需要相对定位
    top: 50%;
    left: 50%;
    margin-top:-100px ;   //二分之一的height，width
    margin-left: -100px;
} 

absolute :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。

fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。

relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。

static 默认值。没有定位，元素出现在正常的流中

sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

// 1、条件Hack

    块级元素：div,p,h1,form,ul,li;
    行内元素 : span>,a,label,input,img,strong,em;

    Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
    Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;
    Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
    Position:不会影响布局，能让元素保持可以操作;
    Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;

    使用带clear属性的空元素
    使用CSS的overflow属性；
    使用CSS的:after伪元素；
    使用邻接元素处理；

内联元素居中方案

水平居中设置：
1.行内元素

    设置 text-align:center；

2.Flex布局

    设置display:flex;justify-content:center;(灵活运用,支持Chroime，Firefox，IE9+)

垂直居中设置：
1.父元素高度确定的单行文本（内联元素）

    设置 height = line-height；

2.父元素高度确定的多行文本（内联元素）

    a:插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle；
    b:先设置 display:table-cell 再设置 vertical-align:middle；
    块级元素居中方案

    水平居中设置：
    1.定宽块状元素
    设置 左右 margin 值为 auto；

2.不定宽块状元素

    a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto；
    b:给该元素设置 displa:inine 方法；
    c:父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%；

垂直居中设置：

    使用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;
    利用position:fixed（absolute）属性，margin:auto这个必须不要忘记了;
    利用display:table-cell属性使内容垂直居中;
    使用css3的新属性transform:translate(x,y)属性;
    使用:before元素;

    双边距BUG float引起的 使用display
    3像素问题 使用float引起的 使用dislpay:inline -3px
    超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
    Ie z-index问题 给父级添加position:relative
    Png 透明 使用js代码 改
    Min-height 最小高度 ！Important 解决’
    select 在ie6下遮盖 使用iframe嵌套
    为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

    语法介绍

    特点，排版，插件的使用;

    link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
    页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
    import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

    有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;
    盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

    id选择器（ # myid）
    类选择器（.myclassname）
    标签选择器（div, h1, p）
    相邻选择器（h1 + p）
    子选择器（ul > li）
    后代选择器（li a）
    通配符选择器（ * ）
    属性选择器（a[rel = “external”]）
    伪类选择器（a: hover, li: nth – child）
    可继承的样式： font-size font-family color, UL LI DL DD DT;
    不可继承的样式：border padding margin width height ;
    优先级就近原则，同权重情况下样式定义最近者为准;
    优先级为:
    JavaScript
    !important >  id > class > tag
    important 比 内联优先级高
    1
    2
    	
    !important >  id > class > tag
    important 比 内联优先级高

    CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），
    对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
    transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
    增加了更多的CSS选择器 多背景 rgba