css基础

标题的分类

1. 块元素 block： 独占一行 可以设置宽高
2. 行元素 inline：不独占一行 设置宽高无效
3. 行内块元素 inline-block： 不独占一行 可以设置宽高

css三种引入方式

  1. 内联式（行内样式） <div style="color:red"></div>
  2. 内嵌式   <style> .box{color:red;}</style>
  3. 外联式 <link rel="stylesheet" href="./index.css">

常用的选择器

  1. * 通配符 选中页面中的所有标签
  2. div 标签选择器 页面中的所有div
  3. class .box 页面中所有含box类的标签
  4. id  #box  页面中id是box的标签

1. 通配符 * 一般用于重置样式

2. 标签选择器

3. class选择器

4. id选择器 一般一个页面中 id唯一

5. 子选择器 用>链接

6. 后代选择器 用空格链接

7. 并列选择器 用逗号链接

8. 含有box的div
   div.box{}

     优先级 ！important>行内样式>id>class(伪类和伪元素)>tag>*>继承
     权重     无穷       1000   100     10              1  0   无
          当选择器组合使用 权重值会相加 但是不会超过他的数量级
          权重一样 采用就近原则
   
   
     简写形式：注意 字体类型和字体大小必须是倒一和倒二位置
   
     颜色取值：
     color：red；
     color：rgba；
     color：#00000；
     color：#000；
     子元素会自动继承父元素的文字样式
   

文本样式

 /* 字体类型 */
            font-family:"楷体";
            /* 字体颜色 */
            color: pink;
            /* 字体大写 */
            font-size: 30px;
            /* 字体加粗  100-900  bold 对应700*/
            font-weight: bold;
            /* 斜体 */
            font-style: italic;
             /* 文本对齐方式  center 居中  left right */
            text-align:center ;
            /* 文本修饰 underline  overline  line-through*/
            text-decoration:underline;
            /* em 单位 字符大小 */
            text-indent:2em;
            /* capitalize 首字母大写  lowercase 小写 uppercase 大写 */
            text-transform:uppercase;
            /* 字母或中文汉字之间距离 */
            /* letter-spacing: 30px; */
            /* 英文单词之间距离 */
            word-spacing: 30px;
            /* 行高 控制字体行之间的距离 */
            line-height:50px ;

css优先级

！important > 内联 > id > class > tag > * >继承
权重 无穷 1000 100 10 1 0 无

css选择器组合使用

子代选择器 >
后代 英文空格
并列选择器 ，

css 匹配规则

从右到左

文档流

文档流：浏览器会根据元素的拍列方式 块元素从上到下
            行元素和行内块 从左到右排列 如果空间不足 自动换行
            我们称之为流式布局

盒模型

1.标准盒模型组成=content+padding+border+margin
width设置的是内容区的宽度
2.怪异盒模型组成=content+padding+border+margin
width=content+padding+border

id名和class命名规则

            数字字母和_ -组合 不能以数字开头


            建议：多个字母中间使用-

元素的隐藏方式

 display:none;隐藏 隐藏后没有该元素的位置
      opacity：0；
      visibility:hidden;隐藏后有该元素的位置

浮动

浮动分为左浮动和右浮动
1.为何使用浮动 ：让多个块元素在同一行显示

浮动对自身影响：

1.脱离文档流
2.层级默认会上调，但是不会覆盖文字
3.行和行内块元素会变成块元素
4.浮动不会继承

浮动对兄弟元素的影响

1.元素a开启浮动后面元素b会上移，可以使用clear：both left right qingchufud影响
2.元素a没开启浮动 元素b开启浮动上不去

浮动对父元素的影响

造成高度塌陷
解决方法：1.设置高度
         2.给父元素开启浮动
         3.在父元素添加一个空元素(块元素)清除浮动
         4.父元素设置overflow:hidden
         5.伪元素清除浮动

表格

//简易版的表格
<table>
<tr><td>内容1</td></tr>
<tr><td>内容2</td></tr>
</table>
//完整版的表格
    <table>
        <caption>表格的标题</caption>
        <thead>
            <tr>
                <th>头部</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>身体</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>底部</td>
            </tr>
        </tfoot>
    </table>
    

table的一些属性 width宽 height高 align居中 border边框 cellspacing cellpadding单元边沿与其内容之间的空白
td 的一些属性 align居中 rowspan跨行 colspan跨列

表单

表单：收集用户信息并提交给服务器
form：action：表单提交的地址 method：请求方式 常用的get post
input 根据type功能不同 text password number date。。。。。
name属性：1.用于给服务器提交2.分组
placeholder：提示
下拉框 select
disable禁用属性


选项一


选项2

重置

扩大点击区域

方式一： 用户名：
方式二： 密码

背景

背景默认显示原始尺寸
如果背景图片大 左上角显示
如果背景图片小 默认平铺
背景图片不重复 no-repeat
背景图片的尺寸 cover覆盖(图片可能不完整) contain包含(图片完整 可能会平铺)