css 第四天

11. 属性选择器:属性选择器可以根据元素的属性及属性值来选择元素
    [属性名]：包含于指定属性名称的元素
    [属性名~=值]:属性名的值 包含 指定值的元素
    [属性名^=值]:属性名的值 以指定值为开头 的元素
    [属性名$=值]:属性名的值 以指定值为结尾 的元素
    ps: 属性如果是数组，可以以空格隔开

// style
div.content[title] {
  font-weight:bold;
}
input[name=user] {
  boackground-color:#999;
}
div[class~=1] {
  background-color:#5aff29;
}
// body
<div class="content box1" title="title">content1</div>
<div class="content box2">content2</div>
<form action=">
  <input type="text" name="account">
  <input type="text" name="user">

</form>

12. 关系选择器

      
      
        
    
          子元素1 兄弟孙元素
    
          不相邻兄弟元素 孙元素
    
          跟第一个比，不是相邻兄弟元素 孙元素
        
      

    后代选择器：可以选择作为某元素后代的元素
    ps：需要用空格把两个属性隔开

    父子关系选择器：只能选择为某一元素子元素的元素
    ps：用>表示只选择儿子。孙子等是不选择的

    兄弟关系选择器：相邻兄弟选择器，可以选择紧接在另一个元素后的元素，且二者有相同父元素
    ps:用+表示兄弟选择

13. css 伪类选择器

    伪类允许出现在选择器的任何位置，而伪元素只能跟在选择器的最后一个简单选择器后面
    :before/:after/:first-letter/:first-line 可以单冒号，单尽量双冒号。
    ::selection/::placehoder/::backdrop

14. 浮动
    目的是把块级标签排在一行上
    float: left right none,，脱离了标准文档空间，容易引起高度塌陷
    清除浮动：浮动后，后面的元素会填充到浮动的位置，需要清除浮动
    1） 添加空标签，并设置样式
    clear: left 清除左浮动 right 清除右浮动 both 清除左右浮动 none 左右浮动都不清除
    .clear {
    clear:both
    }
    2）在要清除浮动的父级添加样式：overflow:hidden 或 position:absolute 样式

    overflow 属性
    当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式。
    visible：默认值，内容不会被修剪，会呈现在元素框外，不剪切也不添加滚动条
    auto：自动根据内容添加滚动条
    hidden：内容会被修剪，其余内容不可见，此属性还可有清除浮动，清除 margin-top 塌陷的功能
    scroll：内容会被修剪，但在浏览器会显示滚动条以便查看其它的内容
    3）：after ，减少空标签的多余,在父级上添加伪元素
    .clear:after{
    display:block;
    content:'';
    clear:both;
    }

    快捷方式
    .info-show>head-sculpture>.photo+.txt

        
    
            
    
                
    头像
                
    姓名
    
            
            
    描述
        

    display:talbe-cell; vertical-align:middle
    与 line-height:300px; height:300px;效果一直，都是文字垂直居中

如何触发 BFC

根元素
loat的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed
display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-ccell生成了BFC

6. 盒子模型
   每个元素都是一个盒子，包括 margin、border、padding、content 组成
   系统默认外边距为 8px；
   1）外边距（margin）：margin-left、margin-right、margin-bottom、margin-top
   1 个参数（上下左右同一个外边距） 2 个参数（参数 1 上下，参数 2 左右） 3 个参数（参数 1 上 参数 2 左右 参数 3 下） 4 个参数（一次为上右下左）
   margin 不起作用的原因往往是没有考虑到 display：“display:block”或者“display:inline”
   margin 不能为内联元素指定边距
   表格中的 tr 和 td 元素或者 display 计算值为 table-cell 或 table-row 的元素
   margin 合并的时候，更改 margin 值可能是没有效果的。以父子 margin 重叠为例，假设父元素设置有 margin-top:50px，则此时子元素设置 margin-top:30px 就没有任何效果表现，除非大小比 50px 大，或者是负值。
   绝对定位元素非定位方位的 margin 值“无效”。
   主要是因为绝对定位元素的渲染是独立的，普通元素和兄弟元素是心连心，你动我也动，但是绝对定位元素由于独立渲染无法和兄弟元素插科打诨，因此，margin 无法影响兄弟元素定位，所以看上去就“无效”。
   定高容器的子元素的 margin-bottom 或者宽度定死的子元素的 margin-right 的定位“失效”。原因在于，若想使用 margin 属性改变自身的位置，必须是和当前元素定位方向一样的 margin 属性才可以，否则，margin 只能影响后面的元素或者父元素。
   2）padding：内边距，
   3）border：边框（内边距与外边距之间的线框）
   border-width:设置边框的宽度
   border-style:设置边框的样式 :noe solid double dotted dashed
   border-color:边框颜色
   边框的简写，也可写 border-top border-bottom border-left border-right
   border：width style color

box-sizing:CSS3 中添加了 box-sizing 属性来改变默认的盒子模型，
content-box 默认值，元素的实际宽度或高度等于元素内容区的宽度或高度、内边距和边框的和
border-box 在元素的内容区内绘制内边距或边框，内边距或边框不会影响元素的实际宽度或高度
inherit 从父元素继承 box-sizing 属性的值。

7. display 属性
   属性值：
   none: 不显示元素；
   block： 块显示
   inline:默认值，此元素会被显示为内联元素，元素前后没有换行符，内联元素所占据的空间就是他的标签所定义的大小（不能设置 width 和 height）
   inline-block:行内块元素，可并列

8. table 样式
   border-collapse:collapse 单线边框
   margin：0 auto 表格居中
   width 设置宽度后，每个单元格会默认等分宽度
   height： 设置高度后，每个单元格会默认等分高度
   border：不太常用
   cellspacing: 单元格间距
   td\tr 属性：

   width
   height
   border
   text-align 文本左右对齐方式(left\center\right)
   vertical-align 文本上下对齐方式(middle\top\bottom)

   table>tr3>td{_内容$}4
   table {
   border:1px solid #666;
   border-collapse:collapse;
   margin:0 auto;
   width:500px;
   height:300px;
   text-align:center; 下级左右居中
   }
   td {
   border:1px solid #666;
   vertical-align:top; 本级顶端对齐 bottom 低端对齐，center 上下居中对齐
   }

9. 列表样式
   可用于 菜单、商品列表等
   1）列表类型：无序列表 ul》li、有序列表 ol》li、用户自定义列表（dl>dt>一个或多个 dd）
   dl 一般用于设定一个定义，比如名词解释等。dt 是标题，dd：是描述
   2）样式( 用来修改标识类型)
   list-style-image:用图像标识标识
   list-style-position:标识的位置 inside（占用字符空间） outside(默认值，不占用默认空间)
   list-style-type:标识类型
   简写（复写方式）list-style: list-style-image list-style-position list-style-type
   list-style 的值可以按任意顺序列出，而且可以忽略，只要提供一个值，其他的都自动默认

   list-style-type 的属性值：
   a）无序： disc（默认值）\circel\square
   b) 有序：decimal(默认值)\decimal-leading-zero(数字前补 0)\lower-roman\upper-roman\lower-alpha\upper-alpha\lower-greak\lower-latin\upper-latin....
   有序和无序都有一个属性：none

   ul 或li都可以
   ul {
    list-style-type: circel;
    list-style-type: none;
    list-style-position:inside;
    list-style-image:url("close_icon.png")
   }
   ol {
   list-style-type: decimal-leading-zero;
   }
   dl {
   
   }

10. 轮播图
    主要用于产品展示或公司相关宣传
    1）轮播的组图（至少两张以上）
    2）控制器
    3）计数器