发表于： 2018-10-06 19:00:10
1 702
今天完成的事情：元素的分类 ，块状元素，行内元素，内联块状元素
块状元素：每个块级元素都从新的一行开始，并且其后的元素也另起一行。元素的高度、宽度、行高以及顶和底边距都可设置。元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
行内元素：和其他元素都在一行上，元素的高度、宽度及顶部和底部边距不可设置，元素的宽度就是它包含的文字或图片的宽度，不可改变。
内联块状元素：和其他元素都在一行上，元素的高度、宽度、行高以及顶和底边距都可设置。
盒模型的构成，由内容(content)、内边距(padding)、边框(border)、外边距(margin)构成。
用嵌入式写出了9个方格：
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <title></title> | |
| <style type="text/css"> | |
| .box{ | |
| width:100px; | |
| height:100px; | |
| line-height:100px; | |
| margin:30px; | |
| color:#ffffff; | |
| font-size:20px; | |
| text-align:center; | |
| border-radius:5px; | |
| border:1px solid gray; | |
| background-color:#fea500; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="box">盒模型1</div> | |
| <div class="box">盒模型2</div> | |
| <div class="box">盒模型3</div> | |
| <div class="box">盒模型4</div> | |
| <div class="box">盒模型5</div> | |
| <div class="box">盒模型6</div> | |
| <div class="box">盒模型7</div> | |
| <div class="box">盒模型8</div> | |
| <div class="box">盒模型9</div> | |
| </body> | |
| </html> |
明天计划的事情： 学习CSS布局模型，并且基本应用
遇到的问题：WebStorm软件的使用和怎么实现九宫格的排序，师兄的讲解和网上查阅资料
收获：CSS盒子模型的构成，盒子各个代码的构成，语法。
返回列表
评论