前端学习第四天

第三天学习

今天是学习前端的第四天，今天老师讲的内容有些苦涩难懂，感觉那几个代码很绕，可能对新的代码单词还没来得及记忆吧！

边框

- border: width style color;
    - border: 1px solid red;

- border-width: 10px;
- border-style: solid, dashed, dotted; 
- border-color: red;

- border-radius: 
    - 1: 上左, 上右, 下右, 下左
    - 2: 上左-下右, 上右-下左
    - 3: 上左, 上右-下左, 下右
    - 4: 上左, 上右, 下右, 下左

元素显示

- display: block, inline, inline-block, none;

- display: none;和visibility: hidden;的区别
    - display: none; 隐藏元素，元素还在页面上，但是元素不占用页面位置
    - visibility: hidden; 隐藏元素，元素还在页面上，并且元素还占着页面位置

盒子模型

- margin: 外边距
- padding: 内边距、填充
- border: 边框线
- content: 内容

margin:

    - 1: 上右下左
    - 2: 上下, 右左
    - 3: 上, 右左, 下
    - 4: 上, 右, 下, 左
    - 

padding:

    - 1: 上右下左
    - 2: 上下, 右左
    - 3: 上, 右左, 下
    - 4: 上, 右, 下, 左

Box Sizing

- content-box;
- border-box;
- ~~padding-box;~~       

每日单词

• margin: 填充、内边距
• padding: 边距、外边距
• radius: 弧度
• style: 风格、样式
• link: 关联、联系

今日成果

1

	#div0{
          width: 200px;
          height: 200px;
          border: 1px dashed red;
         }
         a{
         	display: block;
         }
         h1{
         	display:inline;
         }
         h2{
         	display: none;
         }
         h3{
         	visibility: hidden;
         }
         li{
         	display: inline-block;
         }
         #div2{
            box-sizing:  content-box;
            display: inline-block;

            width: 200px;
            height: 200px;
            border: 5px solid black;
            border-radius:50px 80px 80px 50px;
           /* border-top-right-radius: 100px;
            border-top-left-radius: 20px;
            border-bottom-right-radius: 70px;
          */
            background: green;
            margin:20px 100px 150px;
           /* margin-top: 20px;
            margin-bottom: 50px;
            margin-right: 100px;
            margin-left: 150px;*/
}
         #div3{
            display: inline-block;
    width: 200px;
    height: 200px;
    border: 20px solid black;

    background: green;

         }

2

ps:今天的教学听的我头晕晕的，下午花了我老长时间才勉勉强强搞明白！