如何用 CSS 实现一个三角形

  1. 可以利用 border 属性

    • 利用盒模型的 border 属性上下左右边框交界处会呈现出平滑的斜线这个特点，通过设置不同的上下左右边框宽度或者颜色即可得到三角形或者梯形；
    • 如果想实现其中的任一个三角形，把其他方向上的 border-color 都设置成透明即可；

  2. 示例代码如下：

    html
    css
    <div></div>

    div{
   width: 0;
   border-bottom: 200px solid red;
   border-top: 200px solid transparent;
   border-left: 100px solid transparent; /* 改变左右边框的长度，可以变成一个梯形 */
   border-right: 100px solid transparent;
}

CSS3 新增了那些东西？

CSS3 新增东西众多，这里列举出一些关键的新增内容：

  1. 选择器
  2. 盒子模型属性：border-radius、box-shadow、border-image
  3. 背景：background-size、background-origin、background-clip
  4. 文本效果：text-shadow、word-wrap
  5. 颜色：新增 RGBA，HSLA 模式
  6. 渐变：线性渐变、径向渐变
  7. 字体：@font-face
  8. 2D/3D转换：transform、transform-origin
  9. 过渡与动画：transition、@keyframes、animation
  10. 多列布局
  11. 媒体查询

想实现一根只有 1px 的长线怎么实现?

实现的方式很多，下面是一种参考方案：

css
html
.line {
  width: 100%;
  height: 1px;
  font-size: 0px; 
  border-bottom: dashed 1px #ccc;
}

<div class="line"></div>

box-sizing 有什么作用？

box-sizing 是用于告诉浏览器如何计算一个元素是总宽度和总高度，主要用来切换 标准盒模型 和 IE 盒模型

  1. 标准盒模型 box-sizing: content-box
    width = content width
    height = content height
  2. IE 盒模型 box-sizing: border-box
    width = border + padding + content width
    heigth = border + padding + content heigth

Normalize 是什么？

  1. 一个样式表的重置文件；

  2. 因为不同浏览器间的内核存在差异，对于标记都有自己默认的样式用来保证在没有自定样式的情况下也能被排列、渲染；

  3. 但各个厂家有自己的风格样式，想要样式不被浏览器默认样式影响，就需要清除默认样式，使各浏览器表现得一致；

vw、vh 是什么？

  1. vw 和 vh 是 CSS3 新单位，即 view width 可视窗口宽度 和 view height 可视窗口高度；

  2. 1vw 就等于可视窗口宽度的百分之一，1vh 就等于可视窗口高度的百分之一；

什么是自适应布局？什么是响应式布局？

  1. 自适应布局

    • 即 Adaptive Layout ，可以把自适应布局看作是静态布局的一个系列。其特点就是分别为不同屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围，改变分辨率可以切换不同的静态布局，页面元素位置发生改变，元素不随窗口大小的调整而变化；
    • 布局特点在于：屏幕分辨率变化时元素位置发生变化，尺寸不变；

  2. 响应式布局

    • 即 Responsive Layout ，其目标是确保一个页面在所有终端（各种尺寸的 PC、手机、电视等）都能完美展现，对于开发人员来说通常是结合了流式布局 + 弹性布局 + 媒介查询，分别为不同屏幕分辨率定义布局；
    • 其特点在于：每个屏幕分辨率下都会有一个布局样式，元素位置、尺寸都会随之发生改变。使用多种布局方法配合，如果足够耐心效果完美；但缺点在于：媒介查询有限只能适应主流宽高，需要匹配足够多的屏幕大小工作量巨大，设计和开发都要需要多个版本；

文字超出了元素的宽度如何使用 CSS 处理？

可以使用 word-wrap 配合 word-break 属性来进行处理

p {
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}

计算元素在 W3C 盒模型中的宽度，和在 IE 盒模型中的宽度

div{
  width: 100px;
  padding: 10px;
  border: 1px solid;
  margin: 10px;
}

  1. W3C 盒模型中的宽度: width + padding + border = 122px

  2. IE 盒模型中的宽度： 100px

计算 ul 的高度

 <ul style="overflow: hidden;">
   <li style="height: 100px; float: left;"></li>
 </ul>

ul 的高度为 100px，虽然子级 li 浮动会造成父元素 ul 的高度塌陷，但父元素触发了 BFC，所以高度可以自动找回；

打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. 如何用 CSS 实现一个三角形
  2. 2. CSS3 新增了那些东西？
  3. 3. 想实现一根只有 1px 的长线怎么实现?
  4. 4. box-sizing 有什么作用？
  5. 5. Normalize 是什么？
  6. 6. vw、vh 是什么？
  7. 7. 什么是自适应布局？什么是响应式布局？
  8. 8. 文字超出了元素的宽度如何使用 CSS 处理？
  9. 9. 计算元素在 W3C 盒模型中的宽度，和在 IE 盒模型中的宽度
  10. 10. 计算 ul 的高度