html与css

沉淀呢
186 阅读6分钟

1 盒模型

CSS盒模型本质上是一个盒子，分为标准盒模型和ie盒模型，有4部分组成，有内到外分别为content（内容）+ padding + border + margin。

盒模型 box-sizing取值:

  • content-box(默认-标准盒模型)
    width = content
  • border-box(ie盒模型)
    width = content + padding + border
  • inherit
    继承父元素box-sizing属性的值。

C端项目，由于设计搞给的时候，给的height为总的，包括content+padding+border的，所以一般在reset中，设置为ie盒模型。然后根据项目里需求，来设置。
参考文档 www.jianshu.com/p/3375b15f5…

2 选择器

2.1伪类选择器

单冒号(:)用于CSS3伪类
双冒号(::)用于CSS3伪元素-如::before,::after 元素前面，后面加一个元素，必须设置content

2.2.1 LVHA

一般被用在 <a>和 <button> 元素中。

LVHA 顺序: :link — :visited — :hover — :active

:active这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 :link，:hover 和 :visited。

为保证样式生效，需要把 :active 的样式放在所有链接相关的样式之后。这种链接伪类先后顺序被称为 LVHA 顺序

2.2.2 常用的选择第几个孩子系列：
属性意义
p:first-child第一个如是p则应用样式，如不是p则不应用样式
p:last-child最后一个如是p则应用样式
p:nth-child(an+b)：第an+b个，组合。如是p则应用样式
p:nth-last-child(an+b)倒数第an+b个如是p则应用样式
p:first-of-type第一个p
p:last-of-type最后一个p
p:nth-of-type(an+b)：第an+b个p，组合

案例1:

<tbody class="table-data">
  <tr v-for="(item, index) in partners" :key="index">
    <td>{{ index + 1 }}</td>
    <td>{{ item.name }}</td>
    <td>{{ item.url }}</td>
    <td>{{ item.partner }}</td>
    <td>{{ item.cooperation }}</td>  // 单独给这个元素加效果
    <td>{{ item.startTime }}</td>
  </tr>
</tbody>

.table-data {
  td:first-child{ // 父的第一个td
      margin-bottom: 10px;
    }
  td:nth-last-child(2) { // 父的倒数第2个td
    max-width: 180px;
  }
}

解释：td:first-child = 父类的第一个td ，

2.2 子选择器-只选择儿子 >

.panel{
    >h4{
      border-bottom: 1px solid #ddd;
    }

类panel下第一层（仅仅是儿子）h4

2.3 后代选择器 - 空格

后代选择器可以选择作为某元素后代的元素。空格隔开，SaSS {}是应用到所有后代的

举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，其他 em 文本不会有效果。可以这样写：

h1 em {color:red;}

.panel{
    h4{
      border-bottom: 1px solid #ddd;
    }
}

类panel下所有的(儿子，孙子，子子孙孙)h

3 继承性

width:80% 是父元素的80%。不是可见视口的宽度。

脱离文档流的除外。

4 布局

首选flex布局，尽量不要用float

4.1 定位：position属性

属性说明
static默认值。没有定位，元素出现在正常的流中。
inherit规定应该从父元素继承 position 属性的值。
relative相对定位，相对于自身元素正常位置。 【不脱离文档流】
absolute绝对定位，相对于最近的已定位祖先元素（非static），如果元素没有已定位的祖先元素，那么它的位置相对于***浏览器。***所以一般用这个时，都会给父一个position:relative，让它相对于父亲 。 【脱离文档流】
fixed固定定位，相对于浏览器的位置。这个元素就被固定了，被固定的元素不会随着滚动条的拖动而改变位置。在视野中，固定定位的元素的位置是不会改变的。【吸顶，吸底】 【脱离文档流】
sticky粘性定位，兼容性不高。当页面某个元素滚动到顶部时，让其定位或悬浮在顶部。【不脱离文档流】

总结：

  • 不脱离文档流，原占位仍保留。脱离文档流，不占原坑位。元素脱离文档流，导致子元素撑不开父元素高度，解决给父高度。
  • z-index（top bottom left bottom）在absolute/relative/fixed的元素上（已定位的元素上）有效。值越大，优先级越高，越在上面。
  • sticky 兼容性不好，实践中一般监听滚动时间，通过fixed到顶部。粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

4.2 应用

吸顶（底）效果 - 5个一个也不能缺

position: fixed; 
top: 0; 
left: 0; 
right: 0; // right：0 也可以写成width：100%
z-index:100;

5 字体

text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。

text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。

是继承属性。

举例：

<div class="btn-wrapper">
    <button>查看</button>
    <button>添加</button>
</div>

<style>
  .btn-wrapper { // btn-wrapper会块级元素 里的行内元素对齐方式。
    text-align: right;
  }
</style>

6 图片与背景

6.1 background-img 和 img 标签，两者的区别：

（1）最直接的区别，是一个块状的元素，是html的一个标签；background-image是背景图片,是css的一个样式。

（2）原理不同：img 标签会提前加载，通常用于图片包含重要信息的场景下，如产品介绍。background-img 是打开页面后的异步加载。放置可有可无的内容，装饰性的。

6.2 开发技巧：

img: 一般给一个高度：100px，宽度设置为：auto

<img :src="item.catory" alt="这是产品图">
img {
    height: 100px;
    width: auto;
    margin-left: 20px;
    cursor: pointer;
}

图片的遍历渲染

<div class="partner-item" v-for="(item, index) in partners.slice(0, 6)" :key="index">
    <img :src="item" alt="合作保险公司logo">
</div>

背景图片：

.content{
      height: 72px;
      line-height: 72px;
      overflow: hidden;
      padding-left: 178px;
      background: url(//m.jr.jd.com/spe/qyy/main/images/scroll_title_img.png) left top no-repeat;
    }

图片资源：

<img src="//img12.360buyimg.com/jrpmobile/jfs/t7456/56/1425209238/21928/f1fe492d/599cee57Naea99020.jpg?width=250&height=330" alt="">

注意：去掉http或者https开头，以//开头，代表页面用什么协议，这里就用什么协议

6.2.1 图片上加文字

image.png
思路1：
图片和文字设置为兄弟元素，拥有共同的父元素。
给共同的父设置positon:relative，文字再通过positon:absolute绝对定位，即可将文字添加到图片上。

<style>
    .img-wrapper {
        position: relative;
        height: 100px;
        width: 100px;
    }
    img {
        height: 100%;
        width: 100%;
    }
    .img-text {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        margin: 0;
    }
</style>

<div class="img-wrapper">
    <img src="big.jpeg" alt="">
    <p class="img-text">我是文字</p>
</div>

思路2：
以图片做背景，然后文字就可以添加到图片上。

.back-img-wrapper {
    background: url("big.jpeg") no-repeat left top;
    height: 100px;
    width: 100px;
}

<div class="back-img-wrapper">
    我是文字
</div>

# 7 文字相关

7.1 文字超出... 显示

3条缺一不可。

.demo{
  width: 100px;
  height: 20px;
  text-overflow: ellipsis; // 超出部分文字以...显示*/ 使用省号来代替隐藏部分
  white-space: nowrap; // 禁止换行
  overflow: hidden; // 超出要隐藏
}

但是第三条属性，只能显示一行如果显示多行呢？

.demo{
   width: 100px;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}

8 滚动条

8.1 overflow

overflow-x主要用来定义对水平方向内容溢出的剪切，而overflow-y主要用来定义对垂直方向内容溢出的剪切。

规定当内容溢出元素框时发生的事情。

默认：visible

image.png

scroll : 内容不超出也会显示滚动条

auto： 内容超出时，才出现滚动条

8.2 text-overflow

text-overflow 属性规定当文本溢出包含元素时发生的事情。

默认：clip

image.png

9 权重

权重

  • 从0开始，一个行内样式+1000，一个id选择器+100，一个属性选择器、class或者伪类+10，一个元素选择器，或者伪元素+1，通配符+0

当很多的样式被应用到某一个元素上时，权重是一个决定哪种样式生效，或者是优先级的过程

image.png

优先级

  • 权重相同，写在后面的覆盖前面的
  • 使用 !important 达到最大优先级，都使用 !important 时，权重大的优先级高

参考链接

avatar
文章
阅读
粉丝