简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > php学习第四天
Blogger Information
Blog 7
fans 0
comment 0
visits 3963
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
php学习第四天
Lank的博客
Original
434 people have browsed it

0701作业

1. 实例演示字体图标的用法;

登录https://www.iconfont.cn/网站, 在搜索框输入需要的图标，加入购物车，可以选择添加到项目，新建个项目后添加到项目，下载到本地，之后将下载的文文件添加到项目中导入使用即可。

2. 按自己理解写一下布局的原则与元素的默认排列方式与元素类型?

布局的原则是横向布局和竖向布局，默认是横向，与之相关的是内敛元素和块状元素，display:inline;display:block

3. 盒模型常用属性有哪些,实例演示;

盒子模型常用的属性有margin,padding;

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <div class="container">
  11.         <!-- <header>头部</header> -->
  12.         <main>内容</main>
  13.         <!-- <footer>底部</footer> -->
  14.     </div>
  15. </body>
  16. <style>
  17. /* .container{
  18.         width:90%;
  20.     }
  21. header{
  22.     height: 10%;
  23.     background: yellow;
  24. }
  25. footer{
  26.     height: 10%;
  27.     background: red;
  29. } */
  31. main{
  32.     height: 80%;
  33.     background: yellow;
  34.     min-height: 300px;
  35.     margin: 10px;
  36.     padding: 10px;
  37. }
  39. </style>
  40. </html>

效果如下

虽然对盒子模型有一定的了解，但是在代码书写方面不够熟练。

4. 图示: box-sizing属性的解决了什么问题?

box-sizing ,在上课的最后老师提示了一下这个，这个能让盒子模型的长宽固定而不会改变，比如一个元素的长宽是400px,那么margin，padding怎么变，而盒子实际的长宽不受改变，如果没用box-sizing,可能盒子的长宽会受到padding,margin的影响变长或者短。

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！