前端学习（一）UI

最新推荐文章于 2024-04-19 12:54:59 发布

iii_ooo

最新推荐文章于 2024-04-19 12:54:59 发布

阅读量656

点赞数

分类专栏： JavaWeb软件开发文章标签：前端 ui html

本文链接：https://blog.csdn.net/iii_ooo/article/details/121878313

版权

JavaWeb软件开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

一、布局
二、细节
三、拓展
总结

一、布局

思路原则：从大到小、大的没解决小的不要动

1、先把第一层的布局搞定
2、确保了第一层效果以后，下来先把top搞定
一层一层搞进去

二、细节

1.padding、margin、border

padding：指的是当前控件的内边距，即控件中内容距离控件的边缘的距离
margin，指的是当前控件和父控件的边距
border：边框

2、伪元素::before,::after

显而易见，官方的解释是 ::before 伪元素可用于在元素内容之前插入一些内容。而 ::after 伪元素则是用于在元素内容之后插入一些内容。

这里所要理解的元素内容，并不是代表该元素，而是代表该元素里面的内容

<body>
    <div>我是里面的元素内容</div>
  </body>
  <style>
    div::before {
      content: '我是before';
    }
  </style>

好比我写了一个div,加上::before元素内容，在浏览器页面用开发者工具查看代码
在这里插入图片描述
这里可以看到 ::before内容并不是在div外面的，而是在与div里面的文字内容"我是里面的元素内容"的前面，::after也与::before同理。

content属性不可少！

content代表了伪元素的内容，没有内容那么伪元素就不生效

  <body>
    <div>我是里面的元素内容</div>
  </body>
  <style>
    div::before {
      /* content: '我是before'; */
    }

把content属性注释掉，连元素的影子的看不到
在这里插入图片描述
所以伪元素里面必须要有内容, 哪怕是空内容！（如下::before在content为空情况下仍然纯在）

  <body>
    <div>我是里面的元素内容</div>
  </body>
  <style>
    div::before {
      /* content: '我是before'; */
      content: '';
    }
  </style>

::before还是存在的

设置伪元素的display属性

伪元素默认是行内元素，若要给其设置宽高，则需要设置display:block使其成为块级元素

  <body>
    <div>我是里面的元素内容</div>
  </body>
  <style>
    div::before {
      content: '';
      width: 50px;
      height: 50px;
      display: block;
      background: #000;
    }
  </style>

在这里插入图片描述
这样伪元素就具有背景颜色啦

3.盒类型

inline : 内联元素, 行间元素. 不可改变宽高, 不独占一行 span
block : 块级元素. 可以改变宽高, 独占一行 div
inline-block : 行内块元素. 可以改变宽高, 不独占一行 img

 div {
      width: 100px;
      height: 100px;
      background-color: #f00;
    }
 span {
      width: 100px;
      height: 100px;
      background-color: #0f0;
    }

4.盒模型

规定盒子是由什么属性组成的

   div {
      box-sizing: border-box;
      width: 300px;
      height: 300px;
      padding: 100px;
      border: 50px solid black;
      margin: 50px; / * 盒子和外面内容的距离 * /
      background-color: #00f;
    }

正常的盒子模型 :
width + padding-left + padding-right + border-left + border-right = 实际宽度
height + padding-top + padding-bottom + border-top + border-bottom = 实际高度
IE 怪异盒子模型 :
width + padding-left + padding-right + border-left + border-right = width
height + padding-top + padding-bottom + border-top + border-bottom = height

5.浮动

使用了浮动, 那么该元素就好像漂浮起来了一样
使用了浮动, 必须要把浮动流控制在浮动元素父元素的区域内
使用了浮动, 必须马上清

div {
  width: 100px;
  height: 100px;
}
.f-l {
  width: 200px;
  height: 200px;
  float: left;
  background-color: rgba(255, 0, 0, .6);
}
.f-r {
  float: left;
  background-color: #0f0;
}
.clear {
  clear: both;
}
.clear::after {
  display: block; /* clear 生效必须要 display: block */
  clear: both;
  content: "";
}

三、拓展

NEC规范：https://www.cnblogs.com/nmxs/p/5197315.html

总结

重新完善淘宝静态页面

iii_ooo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端学习（一）UI

文章目录一、布局二、细节1.padding、margin、border2、伪元素::before,::after3.盒类型4.盒模型5.浮动三、拓展总结一、布局思路原则：从大到小、大的没解决小的不要动1、先把第一层的布局搞定2、确保了第一层效果以后，下来先把top搞定一层一层搞进去二、细节1.padding、margin、borderpadding：指的是当前控件的内边距，即控件中内容距离控件的边缘的距离margin，指的是当前控件和父控件的边距border：边框2、伪元素::bef
复制链接

扫一扫