5-行列布局+浮动元素+优先级

*******************************************************************************

1、CSS的功能是什么？布局和美化页面

   HTML：用来放内容

   CSS不能脱离HTML单独存在（化妆）

2、CSS是什么的缩写？

Cascading Style Sheets  层叠样式表

Hypertext Market Language 超文本标记语言

3、CSS文件的后缀名有哪些？   .css   只有一个!

4、HTML对大小写敏感么？CSS对大小写敏感么？

         不敏感               不敏感

5、HTML符合什么标准？CSS符合什么标准？

       W3C                  W3C

1、表单中复选框和单选框对应的type属性值分别是什么？

         checkbox    radio    

  单选框<input type="radio" />

  复选框<input type="checkbox" />

2、通过什么属性才能真正实现单选功能？name属性

在单选框中，name值相同的单选框属于一个组

一个组中的单选框有排斥关系

所以同一个类型单选框name值必须相同！

3、多个复选框的name可以一样么，为什么？

    不可以

后边的值会把前边的值覆盖

在复选框中，name值一定不能一样！

4、单选框、复选框如何设置默认选中状态？点击重置按钮后还会默认选中么？

        checked属性  布尔型属性

点击重置按钮还是会默认显示选中状态

5、想要把文字和控件捆绑到一起，用哪个标签实现？

<label for=”id值”><input id=”自定义值”></label>

id用来区分控件

for用来指定控件

6、单选框和复选框的name有何不同？

     单选框的name值必须相同

     复选框的name值一定不能相同。

7、表单中不止有<input>标签，那么表单中的多行文本输入域标签是什么？

       <textarea></textarea>

8、以上标签指定输入域行数和列数的属性分别是什么？

                   rows    cols

     <textarea cols="1" rows="10"></textarea>

9、下拉列表需要哪两个标签来配合使用？其中外层标签是什么？选项标签是什么？

      <select>

  <option></option>

  </select>

10、下拉列表的name在哪里定义，value在哪里定义？

             select               option

11、CSS是和谁配合使用的？HTML

12、选择器是用来干什么的？

    就是用来选择某个或某些HTML标签

13、写出下列属性对应的单词：字体颜色、字体大小、边框、背景。

              color    font-size  border  background

14、在CSS语法中，使用什么符号分开属性与属性值？:(冒号)

15、在CSS语法中，多个属性对之间属性名和属性值使用什么符号分开？;（分号）

16、   最后一个属性对有何注意事项？

可以不加分号

17、#div1{

18、color:red;

19、border:1px solid red   1px 实线 颜色

20、

*******************************************************************

---行级布局----

1. div是块级元素，独占一行空间，宽度默认沾满父级元素
2. div的高度由子级元素来决定
---列级布局---
1. 浮动元素与兄弟元素之间的关系
    <div class="a"></div>
    <div class="b"></div>
    1）a浮动，b不浮动，b钻到a下面
    2）a不浮动，b浮动，b的上边界和a的下边界重叠
    3）a浮动，b浮动，a,b一行显示，当行内放不下的时候b另起一行

2. 浮动元素的边距
    1) a,b不浮动，a设定外边距-下，b设定外边距-上，共用（谁大用谁的）
    2) a,b浮动，a设定外边距-右，b设定外边距-左，不共用（两者和是他们的边距）

    margin上下值在行布局时共用，浮动后不再共用

3. 浮动元素与父级元素之间的关系
    1) 层级关系
        <div class="outer">
            <div class="inner"></div> 60px
            <div class="inner"></div> 60px
        </div>
        <div class="outer2">
        
        </div>
    2) 高度宽度的问题？
        1.高度应该由子级元素来指定
            当子级浮动的时候，无法撑开父级的高度。只能由父级自己指定（overflow:hidden）
        2.宽度应该由父级元素来指定
            div没有浮动，宽度默认占满父级元素
            div浮动了，宽度默认由子级元素决定
4. 背景
    background-color:
    background-img:
    background-repeat:
    background-position:
    背景
        不占据屏幕空间
        不能直接下载
    图片
        img
        占据屏幕空间
        可以在网页上右击“图片另存为”
    图片精灵：
        1. 设定显示图片盒子的宽和高
        2. 加背景
        3. 定坐标（盒子不变，边背景位置）
            background-position: x  y;
            默认情况下  x = 0; y=0;
            当x为负值背景向左移
            当x为正值背景向右移
            当y为负值背景向上移
            当y为正值背景向下移
5. 盒子模型
    1)IE盒子模型（IE5）
        width = 内容+padding+border
        height= 内容+padding+border

    2)w3c盒子模型
        width = 内容
        height= 内容
        实际宽度= width + 2*border+2*padding+2*margin
        实际高度= height+ 2*border+2*padding+2*margin

        <div>
        
        </div>
            
        div{
            width:100px;
            height:50px;
            border:10px solid gray;
        }
6. display  显示方式（）
    none    隐藏（不占据屏幕空间visibility:hidden;占据屏幕空间）
    block    块级
    inline    行级    
    inline-block    行级兼块级
        
    行级(span)
        不独占一行空间，分享一行空间
        不能指定宽高
    块级(div)
        独占一行空间
        可以指定宽高
    div布局  块级  
        span
    
7. 定位元素        
    position
        fixed    固定定位
            脱离当前文档流，相对当前浏览器窗口进行布局，默认显示在坐标（0,0）位置上，不会随着网页的滚动而滚动

        absolute绝对定位
            脱离当前文档流，相对
                1）如果父级有定位元素，相对于该父级元素进行定位
                2）如果父级没有定位元素，相对于当前网页
            默认显示在坐标（0,0）位置上，会随着网页的滚动而滚动

        relative相对定位
            相对当前元素所在位置，默认位置就在它原本应该在的位置

    如果一个元素被positon修饰，并且position的值为fixed，absolute，relative其中一个，那么这个元素为定位元素。

    定位元素的特权
        可以使用定位属性
            left
            top
            right
            bottom

8. 属性与样式
    当描述元素的表现形式的时候使用 样式
        img的宽度，高度，设定表格的宽度，表格边框，表格的背景（css）
    当描述元素的功能时，使用属性
        <input name="" value="">
        coreattr
            id
            class
            style
            title
9.overflow
    1) 清除子级的浮动
        overflow:hidden
    2）子级溢出父级部分的内容处理方式
        overflow:
            hidden     隐藏
            sroll    始终显示滚动条
            auto    当超过时显示滚动条
        
10. css优先级
    内嵌式 style=""
    > 关联选择器(后代，子代，组合(且)).header .nav ul li
    > ID选择器
    > 类选择器
    > HTML选择器