第四章：CSS基础---伪元素选择器(权重1）、高度塌陷、BFC(Block Formating Context): 块级格式化上下文、css属性继承、表格css属性补充、表格标签补充、表单集

<1..伪元素选择器(权重1)>

    1. 选择第一个字符 只针对块元素

        元素:first-letter{} 元素::first-letter{}

    2. 选择第一行  只针对块元素

        元素:first-line{}  元素::first-line{}

    3. 给元素的里面的前面添加内容 内联元素

        元素::before{

            content: "";  如果有字就加到引号里面，如果没字，就写空引号,必须存在

            color:red;

            width:100px;

        }

    4. 给元素的里面的后面添加内容 内联元素

        元素::after{

            content: "";  如果有字就加到引号里面，如果没字，就写空引号，必须存在

        }

<2..高度塌陷>

    产生条件

        (1)父元素不设置高 (2)子元素浮动

    解决方法

        1 给父元素加一个overflow:hidden;

        2. a. 给浮动元素的后面添加一个块级元素

            b. 给该元素设置clear:left/right/both

            缺点:

                造成代码冗余

        3. 完美清除法

            父元素::after{ 添加内联元素

                content:"";

                clear:both; 清除影响 只对块有效

                display:block; 转换为块

            }

<3..BFC(Block Formating Context): 块级格式化上下文(在页面中是一部分独立的、特殊的区域)>

    触发条件

        1. overflow:hidden/scorll/auto;

        2. float:left/right;

        3. display:inline-block/table-caption(表格标题)/table-cell(表格单元格)/flex(弹性盒)/inline-flex(内联弹性盒)

        4. position:absolute(绝对定位)/fixed(固定定位)

    特性

        1. 在BFC的区域内,浮动元素的高度会计算在内 ---主要用来解决高度塌陷

        2. BFC区域内的元素不会影响到外面的元素 --- 主要解决margin的bug

        3. BFC的区域不会和浮动元素重叠 --- 主要解决浮动元素和正常元素重叠问题

            calc() 可以运算%和px 但是符号的两侧需要有空格 如 width: calc(100% - 200px)

<4..css属性继承>

    加在父元素身上的属性，会作用到他的后代

    可以继承

        1. 字体类 font-size/font-weight/font-style/font-family

        2. 文本类 color/text-indent/text-ailgn/line-height/word-spacing/letter-spacing

        3. 列表类 list-style-type/list-style-position/list-style-imagest/list-style

    不可以继承

        width/height/display/float/margin/padding/border/backgrond-color/text-decoration

继承样式的权重值最低，自己本身的样式比继承过来的样式权重要高,如果要修改本身自带样式,要改自己本身，不能改父元素

给带边框的元素或者在*里面添加 box-sizing: border-box; 解决浏览器缩小时候 内容掉下来的问题

<5..表格css属性补充>

    table{  

        border-spacing: 0;   边框之间的距离  和cellspacing等同

        border-collapse: collapse;    边框合并为细线边框 去掉间距后会变粗用该属性会变细

        table-layout: fixed;    表格单元格宽度固定,默认宽度会跟随内容变化

    }

<6..表格标签补充>

    表格标题 caption 直接放到表格最顶端且居中

    表格列标题 th 加粗且居中

    表格行分组

        thead 表头 一般只有一组,表头一般将整个列标题对应的行包裹进去

        tbody 表体 一般可以有多组,放表格主要内容

        tfoot 表尾 一般只有一组,放表格底部合计、统计行

<7..表单集>

    form将表单元素包裹到该标签,做功能的时候写,做样式的话可以不写

    action: 提交路径,路径后端会给我们提供

    method: 提交方式 get/post

表单元素input select textarea 内联块

    1. 单选框  <input type="radio" name="sex"> 起相同的name值可互斥

    2. 下拉列表

        <select name="" id="">

            <option value="">选项值</option>

        </select>

    3. 文本输入框  <input type="text">

    4. 密码输入框  <input type="password">

    5. 多选框   <input type="checkbox">

    6. 多行文本域  <textarea name="" id="" cols="30" rows="10"></textarea>

        cols="30" rows="10" 行和列中字符的个数 受字体大小和行高影响 一般还是用宽高来限制区域的大小

        resize:none;css属性默认用户可以拉伸框的大小,设置后禁止拉伸

    7. 文件上传     <input type="file">

    8. 提交按钮 点击该按钮 将表单信息提交到action的路径中  <input type="submit" value="按钮文本">

    9. 重置按钮 点击该按钮,可以将手动填入的信息一次清空   <input type="reset" value="按钮文本">

    10. 普通按钮  <input type="button" value="按钮文本">

表单属性

    1. checked 默认选中

    2. disabled 禁止选中

    3. value 默认值

    4. selected 下拉列表默认选中

<8..补充>

垂直对齐属性 verticali-align

    - baseline 基线 x字母的底部,默认基线问题

    - top 顶线, 行框(每一行的内联元素形成的行内框组成)的顶部

    - bottom 底线，行框(每一行的内联元素形成的行内框组成)的底部

    - middle 中线 该元素的垂直中心点和行框中x的1/2高度处对齐

图片底部留白的原因是因为存在幽灵节点(看不见的空白字符),和图片以基线的方式对齐了

    图片的基线是图片底部

    解决留白

        1. img{display:block}  块不存在基线问题

        2. img{float:left/right} 块不存在基线问题

        3. 给图片的容器添加font-size:0 将幽灵节点大小去掉

        4. img{vertical-align:top/bottom/middle} 更改基线对齐

内联块元素基线

        1. 内联块里面不写内容的话,基线在整个框的底部

        2. 内联块里面由一行内容的话，基线在该行x底部位置

        3. 内联块里面由多行内容的话，基线在最后一行x底部的位置

应用

    1. 内联元素和文字垂直对不齐的时候使用

    2. 解决图片底部留白或者多行文本域旁边文字位置

    3. 内联块元素中存在文字数不多对齐不一致的时候