第三天学习
今天是学习前端的第四天,今天老师讲的内容有些苦涩难懂,感觉那几个代码很绕,可能对新的代码单词还没来得及记忆吧!
边框
- 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:今天的教学听的我头晕晕的,下午花了我老长时间才勉勉强强搞明白!