webCSS样式1

1.CSS语法

        CSS写在style标签中，style标签一般写在head标签里面，title标签下面 ctrl+/ CSS注释快捷键 选择器 {css属性}，示例如下：

<style>
    
            selector{
            样式属性1：样式值；
        } 
            .class{
                样式属性1：样式值；
            }
            #id{
                样式属性1：样式值；
            }

    </style>

这中样式也成为内部样式。

2.CSS样式

（1）行内样式

        通过标签的 style 属性来设置元素的样式        

<div style="background-color: red;">123</div> 

（2）内部样式

        将 CSS 代码集中写在 HTML 文档的 head 头部标签中，并且用 style 标签定义。

（3）外部样式

         将所有的样式放在一个或多个以 .CSS 为扩展名的外部样式表文件中，通过 link 标签将外部样式表文件链接到 HTML 文档中。

<link rel="stylesheet" href="index.css ">

 3.盒子模型（元素特征）

（1）块级盒子

        特性：独占一行，对宽度，高度，对齐等样式支持。示例：div，h1-h6，p，ul，li等，

（2）内联级盒子

        特性：不独占一行，对宽度，高度，对齐等样式不支持。示例：span，a等

（3）内联块级盒子

        特性：不独占一行，对宽度，高度，对齐等样式支持。img（图片），input（输入框）。

（4）弹性盒子

        特性：布局重点，一个父级元素如果设置成弹性盒子，其子元素默认始终横向布局(无论子元素是否大于父级元素，都在父级元素内)

        通常我们使用的元素标签，使用的是它们的默认特性，但是也可以通过display样式来改变它们的特性，使其变为其他的盒子。块级盒子： display：block；内联级盒子： display：inline；内联块级盒子：display：inline-block；弹性盒子：display：flex；

        盒子区域（有里往外）：内容区，填充区，边框区，外边距区

        内容区：width，height（默认只对内容区起作用）

        填充区：padding（内容区和边框区中间的部分，可以把他看成书籍的留白）

                       padding:10px,20px,30px,40px;padding是从上面开始顺时针旋转。

        如果是padding:10px;表示上下左右都是10px。padding:10px,20px;表示上下是10px，左右是20px。当相对方向出现一个时，表示这两边是一样的

         也可以用padding-top,padding-right, padding-bottom, padding-left来表示指定方向。

        边框区：border-color 表示边框颜色

                       border-width 表示边框宽度

                       border-style 表示边框样式（solid 表示实线）

border还可以简写成border: solid(style) 10px(width) red(color);  其中的属性没有先后顺序

        外边距区：margin  margin的使用方法和padding的使用方法一样，有一点在水平方向上可以使用outo 表示水平居中。

        设置盒子大小:box-sizing:content-box(默认)|border-box以边框为盒子的边界;