笔记需整理

标签

Ctr+/  <!--注释-->

 div 标签，标记  

 板块划分  

 特性：  

 1、独占一行；

2、默认宽度100%；

3、默认高度是靠内容撑开 

第一种：行间样式

 <div style="width:100px;height:100px;background-color:red;">这是一个行间样式</div>

 第二种:内部样式表

 <style>  

 选择器{ // div|#smallBox|box  

 属性:属性值  

 }  

div{  

 width:200px; /*宽度*/  

 height:200px; /*高度*/  

 background-color:pink;/*背景色*/

}

<style>

第三种:外部样式表

创建一个.css文件

#box{

           width:  ;

           height:  ;

            backgroung:  ;

}

在html中引入css文件

<link rel="stylesheet" href="./css.css"

>

注:行间样式默认优先级最高，一般不用行间样式，行间样式跟html混到一起，结构不清晰  

 常用外部样式表 

/* 设置圆角  一个值表示四个角一样大小 */

  border-radius:40px;

/*  第一个值：左上角和右下角  第二个值：右上角和左下角 */

border-radius:20px 40px;

/* 第一个值：左上角  第二个值：右上和左下  第三个值：右下 */

border-radius:20px 40px 60px;

/*  左上、右上、右下、左下 */

 border-radius:20px 40px 60px 80px;

  

/* transform 变形 rotate旋转(度数) -360deg~360deg 顺时针正值 */  

 /* 外边距 上下、左右 auto自动，上下auto不起作用 */   

 /* animation:rotate(动画名称) 5s(动画执行一次的时长) 2|infinite无限次数(动画执行次数) linear(运动曲线，匀速运动) *